diff --git a/assets/copy/js/app.js b/assets/copy/js/app.js index 42b3193..6676d87 100644 --- a/assets/copy/js/app.js +++ b/assets/copy/js/app.js @@ -22,10 +22,10 @@ import {Socket} from "phoenix" import {LiveSocket} from "phoenix_live_view" import topbar from "../vendor/topbar" import {getHooks} from 'live_svelte' -import * as Components from '../svelte/components/**/*' +import * as SvelteComponents from '../svelte/components/**/*' let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content") -let liveSocket = new LiveSocket("/live", Socket, {hooks: getHooks(Components), params: {_csrf_token: csrfToken}}) +let liveSocket = new LiveSocket("/live", Socket, {hooks: getHooks(SvelteComponents), params: {_csrf_token: csrfToken}}) // Show progress bar on live navigation and form submits topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"}) diff --git a/assets/copy/js/render.js b/assets/copy/js/render.js index 365a427..31b2358 100644 --- a/assets/copy/js/render.js +++ b/assets/copy/js/render.js @@ -1,4 +1,4 @@ -var path = require("path") -var absolutePath = path.resolve("./priv/static/assets/server/server.js") +const path = require("path") +const serverPath = path.resolve("./priv/static/assets/server/server.js") -module.exports.render = require("live_svelte").getRender(absolutePath) +module.exports.render = require("live_svelte").getRender(serverPath) diff --git a/assets/js/live_svelte/hooks.js b/assets/js/live_svelte/hooks.js index c2e7a76..60a372d 100644 --- a/assets/js/live_svelte/hooks.js +++ b/assets/js/live_svelte/hooks.js @@ -66,7 +66,7 @@ function findSlotCtx(component) { return component.$$.ctx.find(ctxElement => ctxElement.default) } -function getHooks(Components) { +export function getHooks(Components) { const components = exportSvelteComponents(Components) const SvelteHook = { @@ -108,7 +108,3 @@ function getHooks(Components) { SvelteHook } } - -module.exports = { - getHooks -} diff --git a/assets/js/live_svelte/index.js b/assets/js/live_svelte/index.js index b69e3d3..f533829 100644 --- a/assets/js/live_svelte/index.js +++ b/assets/js/live_svelte/index.js @@ -1,9 +1,3 @@ -import getRender from "./render" -import getHooks from "./hooks" -import exportSvelteComponents from './utils' - -export { - getRender, - getHooks, - exportSvelteComponents -} \ No newline at end of file +export {getRender} from "./render" +export {getHooks} from "./hooks" +export {exportSvelteComponents} from './utils' diff --git a/assets/js/live_svelte/render.js b/assets/js/live_svelte/render.js index e2a6993..8c8dcf1 100644 --- a/assets/js/live_svelte/render.js +++ b/assets/js/live_svelte/render.js @@ -1,4 +1,4 @@ -function getRender(componentPath) { +export function getRender(componentPath) { /*** * Render a component with the name, props and slots provided. */ @@ -20,7 +20,3 @@ function getRender(componentPath) { return render } - -module.exports = { - getRender -} diff --git a/assets/js/live_svelte/utils.js b/assets/js/live_svelte/utils.js index f5124b4..53a3cdc 100644 --- a/assets/js/live_svelte/utils.js +++ b/assets/js/live_svelte/utils.js @@ -1,4 +1,4 @@ -function exportSvelteComponents(components) { +export function exportSvelteComponents(components) { let { default: modules, filenames } = components filenames = filenames @@ -7,7 +7,3 @@ function exportSvelteComponents(components) { return Object.assign({}, ...modules.map((m, index) => ({[filenames[index]]: m.default}))) } - -module.exports = { - exportSvelteComponents -} \ No newline at end of file diff --git a/config/config.exs b/config/config.exs index 975d3fa..8289297 100644 --- a/config/config.exs +++ b/config/config.exs @@ -13,6 +13,12 @@ if Mix.env() == :dev do version: "0.17.11", module: esbuild.(~w(--format=esm --sourcemap --outfile=../priv/static/live_svelte.esm.js)), main: esbuild.(~w(--format=cjs --sourcemap --outfile=../priv/static/live_svelte.cjs.js)), - cdn: esbuild.(~w(--format=iife --target=es2016 --global-name=LiveView --outfile=../priv/static/live_svelte.js)), - cdn_min: esbuild.(~w(--format=iife --target=es2016 --global-name=LiveView --minify --outfile=../priv/static/live_svelte.min.js)) + cdn: + esbuild.( + ~w(--format=iife --target=es2016 --global-name=LiveSvelte --outfile=../priv/static/live_svelte.js) + ), + cdn_min: + esbuild.( + ~w(--format=iife --target=es2016 --global-name=LiveSvelte --minify --outfile=../priv/static/live_svelte.min.js) + ) end diff --git a/mix.exs b/mix.exs index d102f9b..1dab5db 100644 --- a/mix.exs +++ b/mix.exs @@ -60,7 +60,12 @@ defmodule LiveSvelte.MixProject do defp aliases do [ "assets.build": ["esbuild module", "esbuild cdn", "esbuild cdn_min", "esbuild main"], - "assets.watch": ["esbuild module --watch"] + "assets.watch": [ + "esbuild module --watch", + "esbuild cdn --watch", + "esbuild cdn_min --watch", + "esbuild main --watch" + ] ] end end diff --git a/priv/static/live_svelte.cjs.js b/priv/static/live_svelte.cjs.js index eae45f5..eb3da60 100644 --- a/priv/static/live_svelte.cjs.js +++ b/priv/static/live_svelte.cjs.js @@ -1,12 +1,7 @@ -var __create = Object.create; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; -var __getProtoOf = Object.getPrototypeOf; var __hasOwnProp = Object.prototype.hasOwnProperty; -var __commonJS = (cb, mod) => function __require() { - return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; -}; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); @@ -19,59 +14,242 @@ var __copyProps = (to, from, except, desc) => { } return to; }; -var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( - // If the importer is in node compatibility mode or this is not an ESM - // file that has been converted to a CommonJS file using a Babel- - // compatible transform (i.e. "__esModule" has not been set), then set - // "default" to the CommonJS "module.exports" for node compatibility. - isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, - mod -)); var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); -// js/live_svelte/render.js -var require_render = __commonJS({ - "js/live_svelte/render.js"(exports, module2) { - function getRender2(componentPath) { - function render(name, props = {}, slots = null) { - if (require.resolve(componentPath) in require.cache) { - delete require.cache[require.resolve(componentPath)]; - } - const component = require(componentPath)[name].default; - const $$slots = Object.fromEntries(Object.entries(slots).map(([k, v]) => [k, () => v])) || {}; - return component.render(props, { $$slots, context: /* @__PURE__ */ new Map() }); - } - return render; - } - module2.exports = { - getRender: getRender2 - }; - } -}); - -// js/live_svelte/utils.js -var require_utils = __commonJS({ - "js/live_svelte/utils.js"(exports, module2) { - function exportSvelteComponents2(components) { - let { default: modules, filenames } = components; - filenames = filenames.map((name) => name.replace("../svelte/components/", "")).map((name) => name.replace(".svelte", "")); - return Object.assign({}, ...modules.map((m, index) => ({ [filenames[index]]: m.default }))); - } - module2.exports = { - exportSvelteComponents: exportSvelteComponents2 - }; - } -}); - // js/live_svelte/index.js var live_svelte_exports = {}; __export(live_svelte_exports, { - exportSvelteComponents: () => import_utils.default, - getHooks: () => import_render2.default, - getRender: () => import_render.default + exportSvelteComponents: () => exportSvelteComponents, + getHooks: () => getHooks, + getRender: () => getRender }); module.exports = __toCommonJS(live_svelte_exports); -var import_render = __toESM(require_render()); -var import_render2 = __toESM(require_render()); -var import_utils = __toESM(require_utils()); + +// js/live_svelte/render.js +function getRender(componentPath) { + function render(name, props = {}, slots = null) { + if (require.resolve(componentPath) in require.cache) { + delete require.cache[require.resolve(componentPath)]; + } + const component = require(componentPath)[name].default; + const $$slots = Object.fromEntries(Object.entries(slots).map(([k, v]) => [k, () => v])) || {}; + return component.render(props, { $$slots, context: /* @__PURE__ */ new Map() }); + } + return render; +} + +// ../node_modules/svelte/internal/index.mjs +function noop() { +} +function run(fn) { + return fn(); +} +function run_all(fns) { + fns.forEach(run); +} +function is_function(thing) { + return typeof thing === "function"; +} +function is_empty(obj) { + return Object.keys(obj).length === 0; +} +function insert(target, node, anchor) { + target.insertBefore(node, anchor || null); +} +function detach(node) { + if (node.parentNode) { + node.parentNode.removeChild(node); + } +} +var render_callbacks = []; +function flush_render_callbacks(fns) { + const filtered = []; + const targets = []; + render_callbacks.forEach((c) => fns.indexOf(c) === -1 ? filtered.push(c) : targets.push(c)); + targets.forEach((c) => c()); + render_callbacks = filtered; +} +var globals = typeof window !== "undefined" ? window : typeof globalThis !== "undefined" ? globalThis : global; +var _boolean_attributes = [ + "allowfullscreen", + "allowpaymentrequest", + "async", + "autofocus", + "autoplay", + "checked", + "controls", + "default", + "defer", + "disabled", + "formnovalidate", + "hidden", + "inert", + "ismap", + "itemscope", + "loop", + "multiple", + "muted", + "nomodule", + "novalidate", + "open", + "playsinline", + "readonly", + "required", + "reversed", + "selected" +]; +var boolean_attributes = /* @__PURE__ */ new Set([..._boolean_attributes]); +function destroy_component(component, detaching) { + const $$ = component.$$; + if ($$.fragment !== null) { + flush_render_callbacks($$.after_update); + run_all($$.on_destroy); + $$.fragment && $$.fragment.d(detaching); + $$.on_destroy = $$.fragment = null; + $$.ctx = []; + } +} +var SvelteElement; +if (typeof HTMLElement === "function") { + SvelteElement = class extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: "open" }); + } + connectedCallback() { + const { on_mount } = this.$$; + this.$$.on_disconnect = on_mount.map(run).filter(is_function); + for (const key in this.$$.slotted) { + this.appendChild(this.$$.slotted[key]); + } + } + attributeChangedCallback(attr, _oldValue, newValue) { + this[attr] = newValue; + } + disconnectedCallback() { + run_all(this.$$.on_disconnect); + } + $destroy() { + destroy_component(this, 1); + this.$destroy = noop; + } + $on(type, callback) { + if (!is_function(callback)) { + return noop; + } + const callbacks = this.$$.callbacks[type] || (this.$$.callbacks[type] = []); + callbacks.push(callback); + return () => { + const index = callbacks.indexOf(callback); + if (index !== -1) + callbacks.splice(index, 1); + }; + } + $set($$props) { + if (this.$$set && !is_empty($$props)) { + this.$$.skip_bound = true; + this.$$set($$props); + this.$$.skip_bound = false; + } + } + }; +} + +// js/live_svelte/utils.js +function exportSvelteComponents(components) { + let { default: modules, filenames } = components; + filenames = filenames.map((name) => name.replace("../svelte/components/", "")).map((name) => name.replace(".svelte", "")); + return Object.assign({}, ...modules.map((m, index) => ({ [filenames[index]]: m.default }))); +} + +// js/live_svelte/hooks.js +function base64ToElement(base64) { + let template = document.createElement("div"); + template.innerHTML = atob(base64).trim(); + return template; +} +function dataAttributeToJson(attributeName, el) { + const data = el.getAttribute(attributeName); + return data ? JSON.parse(data) : {}; +} +function createSlots(slots, ref) { + const createSlot = (slotName, ref2) => { + let savedTarget, savedAnchor, savedElement; + return () => { + return { + getElement() { + return base64ToElement(dataAttributeToJson("data-slots", ref2.el)[slotName]); + }, + update() { + const element = this.getElement(); + detach(savedElement); + insert(savedTarget, element, savedAnchor); + savedElement = element; + }, + c: noop, + m(target, anchor) { + const element = this.getElement(); + savedTarget = target; + savedAnchor = anchor; + savedElement = element; + insert(target, element, anchor); + }, + d(detaching) { + if (detaching) + detach(savedElement); + }, + l: noop + }; + }; + }; + const svelteSlots = {}; + for (const slotName in slots) { + svelteSlots[slotName] = [createSlot(slotName, ref)]; + } + return svelteSlots; +} +function getProps(ref) { + return { + ...dataAttributeToJson("data-props", ref.el), + pushEvent: (event, data, callback) => ref.pushEvent(event, data, callback), + $$slots: createSlots(dataAttributeToJson("data-slots", ref.el), ref), + $$scope: {} + }; +} +function findSlotCtx(component) { + return component.$$.ctx.find((ctxElement) => ctxElement.default); +} +function getHooks(Components) { + const components = exportSvelteComponents(Components); + const SvelteHook = { + mounted() { + const componentName = this.el.getAttribute("data-name"); + if (!componentName) { + throw new Error("Component name must be provided"); + } + const Component = components[componentName]; + if (!Component) { + throw new Error(`Unable to find ${componentName} component.`); + } + this._instance = new Component({ + target: this.el, + props: getProps(this), + hydrate: true + }); + }, + updated() { + this._instance.$set(getProps(this)); + const slotCtx = findSlotCtx(this._instance); + for (const key in slotCtx) { + slotCtx[key][0]().update(); + } + }, + destroyed() { + this._instance?.$destroy(); + } + }; + return { + SvelteHook + }; +} //# sourceMappingURL=live_svelte.cjs.js.map diff --git a/priv/static/live_svelte.cjs.js.map b/priv/static/live_svelte.cjs.js.map index a310f63..08854fc 100644 --- a/priv/static/live_svelte.cjs.js.map +++ b/priv/static/live_svelte.cjs.js.map @@ -1,7 +1,7 @@ { "version": 3, - "sources": ["../../assets/js/live_svelte/render.js", "../../assets/js/live_svelte/utils.js", "../../assets/js/live_svelte/index.js"], - "sourcesContent": ["function getRender(componentPath) {\n /***\n * Render a component with the name, props and slots provided.\n */\n function render(name, props = {}, slots = null) {\n // remove from cache in non-production environments\n // so that we can see changes\n if (\n process.env.NODE_ENV !== 'production' &&\n require.resolve(componentPath) in require.cache\n ) {\n delete require.cache[require.resolve(componentPath)]\n }\n\n const component = require(componentPath)[name].default\n const $$slots = Object.fromEntries(Object.entries(slots).map(([k, v]) => [k, () => v])) || {}\n\n return component.render(props, { $$slots, context: new Map() })\n }\n\n return render\n}\n\nmodule.exports = {\n getRender\n}\n", "function exportSvelteComponents(components) {\n let { default: modules, filenames } = components\n\n filenames = filenames\n .map(name => name.replace('../svelte/components/', ''))\n .map(name => name.replace('.svelte', ''))\n\n return Object.assign({}, ...modules.map((m, index) => ({[filenames[index]]: m.default})))\n}\n\nmodule.exports = {\n exportSvelteComponents\n}", "import getRender from \"./render\"\nimport getHooks from \"./render\"\nimport exportSvelteComponents from './utils'\n\nexport {\n getRender,\n getHooks,\n exportSvelteComponents\n}"], - "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,sCAAAA,SAAA;AAAA,aAASC,WAAU,eAAe;AAI9B,eAAS,OAAO,MAAM,QAAQ,CAAC,GAAG,QAAQ,MAAM;AAG5C,YAEI,QAAQ,QAAQ,aAAa,KAAK,QAAQ,OAC5C;AACE,iBAAO,QAAQ,MAAM,QAAQ,QAAQ,aAAa,CAAC;AAAA,QACvD;AAEA,cAAM,YAAY,QAAQ,aAAa,EAAE,IAAI,EAAE;AAC/C,cAAM,UAAU,OAAO,YAAY,OAAO,QAAQ,KAAK,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;AAE5F,eAAO,UAAU,OAAO,OAAO,EAAE,SAAS,SAAS,oBAAI,IAAI,EAAE,CAAC;AAAA,MAClE;AAEA,aAAO;AAAA,IACX;AAEA,IAAAD,QAAO,UAAU;AAAA,MACb,WAAAC;AAAA,IACJ;AAAA;AAAA;;;ACzBA;AAAA,qCAAAC,SAAA;AAAA,aAASC,wBAAuB,YAAY;AACxC,UAAI,EAAE,SAAS,SAAS,UAAU,IAAI;AAEtC,kBAAY,UACP,IAAI,UAAQ,KAAK,QAAQ,yBAAyB,EAAE,CAAC,EACrD,IAAI,UAAQ,KAAK,QAAQ,WAAW,EAAE,CAAC;AAE5C,aAAO,OAAO,OAAO,CAAC,GAAG,GAAG,QAAQ,IAAI,CAAC,GAAG,WAAW,EAAC,CAAC,UAAU,KAAK,CAAC,GAAG,EAAE,QAAO,EAAE,CAAC;AAAA,IAC5F;AAEA,IAAAD,QAAO,UAAU;AAAA,MACb,wBAAAC;AAAA,IACJ;AAAA;AAAA;;;ACZA;AAAA;AAAA,6CAAAC;AAAA,EAAA,+BAAAC;AAAA,EAAA,+BAAAC;AAAA;AAAA;AAAA,oBAAsB;AACtB,IAAAC,iBAAqB;AACrB,mBAAmC;", - "names": ["module", "getRender", "module", "exportSvelteComponents", "exportSvelteComponents", "getHooks", "getRender", "import_render"] + "sources": ["../../assets/js/live_svelte/index.js", "../../assets/js/live_svelte/render.js", "../../node_modules/svelte/internal/index.mjs", "../../assets/js/live_svelte/utils.js", "../../assets/js/live_svelte/hooks.js"], + "sourcesContent": ["export {getRender} from \"./render\"\nexport {getHooks} from \"./hooks\"\nexport {exportSvelteComponents} from './utils'\n", "export function getRender(componentPath) {\n /***\n * Render a component with the name, props and slots provided.\n */\n function render(name, props = {}, slots = null) {\n // remove from cache in non-production environments\n // so that we can see changes\n if (\n process.env.NODE_ENV !== 'production' &&\n require.resolve(componentPath) in require.cache\n ) {\n delete require.cache[require.resolve(componentPath)]\n }\n\n const component = require(componentPath)[name].default\n const $$slots = Object.fromEntries(Object.entries(slots).map(([k, v]) => [k, () => v])) || {}\n\n return component.render(props, { $$slots, context: new Map() })\n }\n\n return render\n}\n", "function noop() { }\nconst identity = x => x;\nfunction assign(tar, src) {\n // @ts-ignore\n for (const k in src)\n tar[k] = src[k];\n return tar;\n}\n// Adapted from https://github.com/then/is-promise/blob/master/index.js\n// Distributed under MIT License https://github.com/then/is-promise/blob/master/LICENSE\nfunction is_promise(value) {\n return !!value && (typeof value === 'object' || typeof value === 'function') && typeof value.then === 'function';\n}\nfunction add_location(element, file, line, column, char) {\n element.__svelte_meta = {\n loc: { file, line, column, char }\n };\n}\nfunction run(fn) {\n return fn();\n}\nfunction blank_object() {\n return Object.create(null);\n}\nfunction run_all(fns) {\n fns.forEach(run);\n}\nfunction is_function(thing) {\n return typeof thing === 'function';\n}\nfunction safe_not_equal(a, b) {\n return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');\n}\nlet src_url_equal_anchor;\nfunction src_url_equal(element_src, url) {\n if (!src_url_equal_anchor) {\n src_url_equal_anchor = document.createElement('a');\n }\n src_url_equal_anchor.href = url;\n return element_src === src_url_equal_anchor.href;\n}\nfunction not_equal(a, b) {\n return a != a ? b == b : a !== b;\n}\nfunction is_empty(obj) {\n return Object.keys(obj).length === 0;\n}\nfunction validate_store(store, name) {\n if (store != null && typeof store.subscribe !== 'function') {\n throw new Error(`'${name}' is not a store with a 'subscribe' method`);\n }\n}\nfunction subscribe(store, ...callbacks) {\n if (store == null) {\n return noop;\n }\n const unsub = store.subscribe(...callbacks);\n return unsub.unsubscribe ? () => unsub.unsubscribe() : unsub;\n}\nfunction get_store_value(store) {\n let value;\n subscribe(store, _ => value = _)();\n return value;\n}\nfunction component_subscribe(component, store, callback) {\n component.$$.on_destroy.push(subscribe(store, callback));\n}\nfunction create_slot(definition, ctx, $$scope, fn) {\n if (definition) {\n const slot_ctx = get_slot_context(definition, ctx, $$scope, fn);\n return definition[0](slot_ctx);\n }\n}\nfunction get_slot_context(definition, ctx, $$scope, fn) {\n return definition[1] && fn\n ? assign($$scope.ctx.slice(), definition[1](fn(ctx)))\n : $$scope.ctx;\n}\nfunction get_slot_changes(definition, $$scope, dirty, fn) {\n if (definition[2] && fn) {\n const lets = definition[2](fn(dirty));\n if ($$scope.dirty === undefined) {\n return lets;\n }\n if (typeof lets === 'object') {\n const merged = [];\n const len = Math.max($$scope.dirty.length, lets.length);\n for (let i = 0; i < len; i += 1) {\n merged[i] = $$scope.dirty[i] | lets[i];\n }\n return merged;\n }\n return $$scope.dirty | lets;\n }\n return $$scope.dirty;\n}\nfunction update_slot_base(slot, slot_definition, ctx, $$scope, slot_changes, get_slot_context_fn) {\n if (slot_changes) {\n const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn);\n slot.p(slot_context, slot_changes);\n }\n}\nfunction update_slot(slot, slot_definition, ctx, $$scope, dirty, get_slot_changes_fn, get_slot_context_fn) {\n const slot_changes = get_slot_changes(slot_definition, $$scope, dirty, get_slot_changes_fn);\n update_slot_base(slot, slot_definition, ctx, $$scope, slot_changes, get_slot_context_fn);\n}\nfunction get_all_dirty_from_scope($$scope) {\n if ($$scope.ctx.length > 32) {\n const dirty = [];\n const length = $$scope.ctx.length / 32;\n for (let i = 0; i < length; i++) {\n dirty[i] = -1;\n }\n return dirty;\n }\n return -1;\n}\nfunction exclude_internal_props(props) {\n const result = {};\n for (const k in props)\n if (k[0] !== '$')\n result[k] = props[k];\n return result;\n}\nfunction compute_rest_props(props, keys) {\n const rest = {};\n keys = new Set(keys);\n for (const k in props)\n if (!keys.has(k) && k[0] !== '$')\n rest[k] = props[k];\n return rest;\n}\nfunction compute_slots(slots) {\n const result = {};\n for (const key in slots) {\n result[key] = true;\n }\n return result;\n}\nfunction once(fn) {\n let ran = false;\n return function (...args) {\n if (ran)\n return;\n ran = true;\n fn.call(this, ...args);\n };\n}\nfunction null_to_empty(value) {\n return value == null ? '' : value;\n}\nfunction set_store_value(store, ret, value) {\n store.set(value);\n return ret;\n}\nconst has_prop = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);\nfunction action_destroyer(action_result) {\n return action_result && is_function(action_result.destroy) ? action_result.destroy : noop;\n}\n\nconst is_client = typeof window !== 'undefined';\nlet now = is_client\n ? () => window.performance.now()\n : () => Date.now();\nlet raf = is_client ? cb => requestAnimationFrame(cb) : noop;\n// used internally for testing\nfunction set_now(fn) {\n now = fn;\n}\nfunction set_raf(fn) {\n raf = fn;\n}\n\nconst tasks = new Set();\nfunction run_tasks(now) {\n tasks.forEach(task => {\n if (!task.c(now)) {\n tasks.delete(task);\n task.f();\n }\n });\n if (tasks.size !== 0)\n raf(run_tasks);\n}\n/**\n * For testing purposes only!\n */\nfunction clear_loops() {\n tasks.clear();\n}\n/**\n * Creates a new task that runs on each raf frame\n * until it returns a falsy value or is aborted\n */\nfunction loop(callback) {\n let task;\n if (tasks.size === 0)\n raf(run_tasks);\n return {\n promise: new Promise(fulfill => {\n tasks.add(task = { c: callback, f: fulfill });\n }),\n abort() {\n tasks.delete(task);\n }\n };\n}\n\n// Track which nodes are claimed during hydration. Unclaimed nodes can then be removed from the DOM\n// at the end of hydration without touching the remaining nodes.\nlet is_hydrating = false;\nfunction start_hydrating() {\n is_hydrating = true;\n}\nfunction end_hydrating() {\n is_hydrating = false;\n}\nfunction upper_bound(low, high, key, value) {\n // Return first index of value larger than input value in the range [low, high)\n while (low < high) {\n const mid = low + ((high - low) >> 1);\n if (key(mid) <= value) {\n low = mid + 1;\n }\n else {\n high = mid;\n }\n }\n return low;\n}\nfunction init_hydrate(target) {\n if (target.hydrate_init)\n return;\n target.hydrate_init = true;\n // We know that all children have claim_order values since the unclaimed have been detached if target is not \n let children = target.childNodes;\n // If target is , there may be children without claim_order\n if (target.nodeName === 'HEAD') {\n const myChildren = [];\n for (let i = 0; i < children.length; i++) {\n const node = children[i];\n if (node.claim_order !== undefined) {\n myChildren.push(node);\n }\n }\n children = myChildren;\n }\n /*\n * Reorder claimed children optimally.\n * We can reorder claimed children optimally by finding the longest subsequence of\n * nodes that are already claimed in order and only moving the rest. The longest\n * subsequence of nodes that are claimed in order can be found by\n * computing the longest increasing subsequence of .claim_order values.\n *\n * This algorithm is optimal in generating the least amount of reorder operations\n * possible.\n *\n * Proof:\n * We know that, given a set of reordering operations, the nodes that do not move\n * always form an increasing subsequence, since they do not move among each other\n * meaning that they must be already ordered among each other. Thus, the maximal\n * set of nodes that do not move form a longest increasing subsequence.\n */\n // Compute longest increasing subsequence\n // m: subsequence length j => index k of smallest value that ends an increasing subsequence of length j\n const m = new Int32Array(children.length + 1);\n // Predecessor indices + 1\n const p = new Int32Array(children.length);\n m[0] = -1;\n let longest = 0;\n for (let i = 0; i < children.length; i++) {\n const current = children[i].claim_order;\n // Find the largest subsequence length such that it ends in a value less than our current value\n // upper_bound returns first greater value, so we subtract one\n // with fast path for when we are on the current longest subsequence\n const seqLen = ((longest > 0 && children[m[longest]].claim_order <= current) ? longest + 1 : upper_bound(1, longest, idx => children[m[idx]].claim_order, current)) - 1;\n p[i] = m[seqLen] + 1;\n const newLen = seqLen + 1;\n // We can guarantee that current is the smallest value. Otherwise, we would have generated a longer sequence.\n m[newLen] = i;\n longest = Math.max(newLen, longest);\n }\n // The longest increasing subsequence of nodes (initially reversed)\n const lis = [];\n // The rest of the nodes, nodes that will be moved\n const toMove = [];\n let last = children.length - 1;\n for (let cur = m[longest] + 1; cur != 0; cur = p[cur - 1]) {\n lis.push(children[cur - 1]);\n for (; last >= cur; last--) {\n toMove.push(children[last]);\n }\n last--;\n }\n for (; last >= 0; last--) {\n toMove.push(children[last]);\n }\n lis.reverse();\n // We sort the nodes being moved to guarantee that their insertion order matches the claim order\n toMove.sort((a, b) => a.claim_order - b.claim_order);\n // Finally, we move the nodes\n for (let i = 0, j = 0; i < toMove.length; i++) {\n while (j < lis.length && toMove[i].claim_order >= lis[j].claim_order) {\n j++;\n }\n const anchor = j < lis.length ? lis[j] : null;\n target.insertBefore(toMove[i], anchor);\n }\n}\nfunction append(target, node) {\n target.appendChild(node);\n}\nfunction append_styles(target, style_sheet_id, styles) {\n const append_styles_to = get_root_for_style(target);\n if (!append_styles_to.getElementById(style_sheet_id)) {\n const style = element('style');\n style.id = style_sheet_id;\n style.textContent = styles;\n append_stylesheet(append_styles_to, style);\n }\n}\nfunction get_root_for_style(node) {\n if (!node)\n return document;\n const root = node.getRootNode ? node.getRootNode() : node.ownerDocument;\n if (root && root.host) {\n return root;\n }\n return node.ownerDocument;\n}\nfunction append_empty_stylesheet(node) {\n const style_element = element('style');\n append_stylesheet(get_root_for_style(node), style_element);\n return style_element.sheet;\n}\nfunction append_stylesheet(node, style) {\n append(node.head || node, style);\n return style.sheet;\n}\nfunction append_hydration(target, node) {\n if (is_hydrating) {\n init_hydrate(target);\n if ((target.actual_end_child === undefined) || ((target.actual_end_child !== null) && (target.actual_end_child.parentNode !== target))) {\n target.actual_end_child = target.firstChild;\n }\n // Skip nodes of undefined ordering\n while ((target.actual_end_child !== null) && (target.actual_end_child.claim_order === undefined)) {\n target.actual_end_child = target.actual_end_child.nextSibling;\n }\n if (node !== target.actual_end_child) {\n // We only insert if the ordering of this node should be modified or the parent node is not target\n if (node.claim_order !== undefined || node.parentNode !== target) {\n target.insertBefore(node, target.actual_end_child);\n }\n }\n else {\n target.actual_end_child = node.nextSibling;\n }\n }\n else if (node.parentNode !== target || node.nextSibling !== null) {\n target.appendChild(node);\n }\n}\nfunction insert(target, node, anchor) {\n target.insertBefore(node, anchor || null);\n}\nfunction insert_hydration(target, node, anchor) {\n if (is_hydrating && !anchor) {\n append_hydration(target, node);\n }\n else if (node.parentNode !== target || node.nextSibling != anchor) {\n target.insertBefore(node, anchor || null);\n }\n}\nfunction detach(node) {\n if (node.parentNode) {\n node.parentNode.removeChild(node);\n }\n}\nfunction destroy_each(iterations, detaching) {\n for (let i = 0; i < iterations.length; i += 1) {\n if (iterations[i])\n iterations[i].d(detaching);\n }\n}\nfunction element(name) {\n return document.createElement(name);\n}\nfunction element_is(name, is) {\n return document.createElement(name, { is });\n}\nfunction object_without_properties(obj, exclude) {\n const target = {};\n for (const k in obj) {\n if (has_prop(obj, k)\n // @ts-ignore\n && exclude.indexOf(k) === -1) {\n // @ts-ignore\n target[k] = obj[k];\n }\n }\n return target;\n}\nfunction svg_element(name) {\n return document.createElementNS('http://www.w3.org/2000/svg', name);\n}\nfunction text(data) {\n return document.createTextNode(data);\n}\nfunction space() {\n return text(' ');\n}\nfunction empty() {\n return text('');\n}\nfunction listen(node, event, handler, options) {\n node.addEventListener(event, handler, options);\n return () => node.removeEventListener(event, handler, options);\n}\nfunction prevent_default(fn) {\n return function (event) {\n event.preventDefault();\n // @ts-ignore\n return fn.call(this, event);\n };\n}\nfunction stop_propagation(fn) {\n return function (event) {\n event.stopPropagation();\n // @ts-ignore\n return fn.call(this, event);\n };\n}\nfunction stop_immediate_propagation(fn) {\n return function (event) {\n event.stopImmediatePropagation();\n // @ts-ignore\n return fn.call(this, event);\n };\n}\nfunction self(fn) {\n return function (event) {\n // @ts-ignore\n if (event.target === this)\n fn.call(this, event);\n };\n}\nfunction trusted(fn) {\n return function (event) {\n // @ts-ignore\n if (event.isTrusted)\n fn.call(this, event);\n };\n}\nfunction attr(node, attribute, value) {\n if (value == null)\n node.removeAttribute(attribute);\n else if (node.getAttribute(attribute) !== value)\n node.setAttribute(attribute, value);\n}\nfunction set_attributes(node, attributes) {\n // @ts-ignore\n const descriptors = Object.getOwnPropertyDescriptors(node.__proto__);\n for (const key in attributes) {\n if (attributes[key] == null) {\n node.removeAttribute(key);\n }\n else if (key === 'style') {\n node.style.cssText = attributes[key];\n }\n else if (key === '__value') {\n node.value = node[key] = attributes[key];\n }\n else if (descriptors[key] && descriptors[key].set) {\n node[key] = attributes[key];\n }\n else {\n attr(node, key, attributes[key]);\n }\n }\n}\nfunction set_svg_attributes(node, attributes) {\n for (const key in attributes) {\n attr(node, key, attributes[key]);\n }\n}\nfunction set_custom_element_data_map(node, data_map) {\n Object.keys(data_map).forEach((key) => {\n set_custom_element_data(node, key, data_map[key]);\n });\n}\nfunction set_custom_element_data(node, prop, value) {\n if (prop in node) {\n node[prop] = typeof node[prop] === 'boolean' && value === '' ? true : value;\n }\n else {\n attr(node, prop, value);\n }\n}\nfunction set_dynamic_element_data(tag) {\n return (/-/.test(tag)) ? set_custom_element_data_map : set_attributes;\n}\nfunction xlink_attr(node, attribute, value) {\n node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);\n}\nfunction get_binding_group_value(group, __value, checked) {\n const value = new Set();\n for (let i = 0; i < group.length; i += 1) {\n if (group[i].checked)\n value.add(group[i].__value);\n }\n if (!checked) {\n value.delete(__value);\n }\n return Array.from(value);\n}\nfunction init_binding_group(group) {\n let _inputs;\n return {\n /* push */ p(...inputs) {\n _inputs = inputs;\n _inputs.forEach(input => group.push(input));\n },\n /* remove */ r() {\n _inputs.forEach(input => group.splice(group.indexOf(input), 1));\n }\n };\n}\nfunction init_binding_group_dynamic(group, indexes) {\n let _group = get_binding_group(group);\n let _inputs;\n function get_binding_group(group) {\n for (let i = 0; i < indexes.length; i++) {\n group = group[indexes[i]] = group[indexes[i]] || [];\n }\n return group;\n }\n function push() {\n _inputs.forEach(input => _group.push(input));\n }\n function remove() {\n _inputs.forEach(input => _group.splice(_group.indexOf(input), 1));\n }\n return {\n /* update */ u(new_indexes) {\n indexes = new_indexes;\n const new_group = get_binding_group(group);\n if (new_group !== _group) {\n remove();\n _group = new_group;\n push();\n }\n },\n /* push */ p(...inputs) {\n _inputs = inputs;\n push();\n },\n /* remove */ r: remove\n };\n}\nfunction to_number(value) {\n return value === '' ? null : +value;\n}\nfunction time_ranges_to_array(ranges) {\n const array = [];\n for (let i = 0; i < ranges.length; i += 1) {\n array.push({ start: ranges.start(i), end: ranges.end(i) });\n }\n return array;\n}\nfunction children(element) {\n return Array.from(element.childNodes);\n}\nfunction init_claim_info(nodes) {\n if (nodes.claim_info === undefined) {\n nodes.claim_info = { last_index: 0, total_claimed: 0 };\n }\n}\nfunction claim_node(nodes, predicate, processNode, createNode, dontUpdateLastIndex = false) {\n // Try to find nodes in an order such that we lengthen the longest increasing subsequence\n init_claim_info(nodes);\n const resultNode = (() => {\n // We first try to find an element after the previous one\n for (let i = nodes.claim_info.last_index; i < nodes.length; i++) {\n const node = nodes[i];\n if (predicate(node)) {\n const replacement = processNode(node);\n if (replacement === undefined) {\n nodes.splice(i, 1);\n }\n else {\n nodes[i] = replacement;\n }\n if (!dontUpdateLastIndex) {\n nodes.claim_info.last_index = i;\n }\n return node;\n }\n }\n // Otherwise, we try to find one before\n // We iterate in reverse so that we don't go too far back\n for (let i = nodes.claim_info.last_index - 1; i >= 0; i--) {\n const node = nodes[i];\n if (predicate(node)) {\n const replacement = processNode(node);\n if (replacement === undefined) {\n nodes.splice(i, 1);\n }\n else {\n nodes[i] = replacement;\n }\n if (!dontUpdateLastIndex) {\n nodes.claim_info.last_index = i;\n }\n else if (replacement === undefined) {\n // Since we spliced before the last_index, we decrease it\n nodes.claim_info.last_index--;\n }\n return node;\n }\n }\n // If we can't find any matching node, we create a new one\n return createNode();\n })();\n resultNode.claim_order = nodes.claim_info.total_claimed;\n nodes.claim_info.total_claimed += 1;\n return resultNode;\n}\nfunction claim_element_base(nodes, name, attributes, create_element) {\n return claim_node(nodes, (node) => node.nodeName === name, (node) => {\n const remove = [];\n for (let j = 0; j < node.attributes.length; j++) {\n const attribute = node.attributes[j];\n if (!attributes[attribute.name]) {\n remove.push(attribute.name);\n }\n }\n remove.forEach(v => node.removeAttribute(v));\n return undefined;\n }, () => create_element(name));\n}\nfunction claim_element(nodes, name, attributes) {\n return claim_element_base(nodes, name, attributes, element);\n}\nfunction claim_svg_element(nodes, name, attributes) {\n return claim_element_base(nodes, name, attributes, svg_element);\n}\nfunction claim_text(nodes, data) {\n return claim_node(nodes, (node) => node.nodeType === 3, (node) => {\n const dataStr = '' + data;\n if (node.data.startsWith(dataStr)) {\n if (node.data.length !== dataStr.length) {\n return node.splitText(dataStr.length);\n }\n }\n else {\n node.data = dataStr;\n }\n }, () => text(data), true // Text nodes should not update last index since it is likely not worth it to eliminate an increasing subsequence of actual elements\n );\n}\nfunction claim_space(nodes) {\n return claim_text(nodes, ' ');\n}\nfunction find_comment(nodes, text, start) {\n for (let i = start; i < nodes.length; i += 1) {\n const node = nodes[i];\n if (node.nodeType === 8 /* comment node */ && node.textContent.trim() === text) {\n return i;\n }\n }\n return nodes.length;\n}\nfunction claim_html_tag(nodes, is_svg) {\n // find html opening tag\n const start_index = find_comment(nodes, 'HTML_TAG_START', 0);\n const end_index = find_comment(nodes, 'HTML_TAG_END', start_index);\n if (start_index === end_index) {\n return new HtmlTagHydration(undefined, is_svg);\n }\n init_claim_info(nodes);\n const html_tag_nodes = nodes.splice(start_index, end_index - start_index + 1);\n detach(html_tag_nodes[0]);\n detach(html_tag_nodes[html_tag_nodes.length - 1]);\n const claimed_nodes = html_tag_nodes.slice(1, html_tag_nodes.length - 1);\n for (const n of claimed_nodes) {\n n.claim_order = nodes.claim_info.total_claimed;\n nodes.claim_info.total_claimed += 1;\n }\n return new HtmlTagHydration(claimed_nodes, is_svg);\n}\nfunction set_data(text, data) {\n data = '' + data;\n if (text.wholeText !== data)\n text.data = data;\n}\nfunction set_input_value(input, value) {\n input.value = value == null ? '' : value;\n}\nfunction set_input_type(input, type) {\n try {\n input.type = type;\n }\n catch (e) {\n // do nothing\n }\n}\nfunction set_style(node, key, value, important) {\n if (value === null) {\n node.style.removeProperty(key);\n }\n else {\n node.style.setProperty(key, value, important ? 'important' : '');\n }\n}\nfunction select_option(select, value) {\n for (let i = 0; i < select.options.length; i += 1) {\n const option = select.options[i];\n if (option.__value === value) {\n option.selected = true;\n return;\n }\n }\n select.selectedIndex = -1; // no option should be selected\n}\nfunction select_options(select, value) {\n for (let i = 0; i < select.options.length; i += 1) {\n const option = select.options[i];\n option.selected = ~value.indexOf(option.__value);\n }\n}\nfunction first_enabled_option(select) {\n for (const option of select.options) {\n if (!option.disabled) {\n return option;\n }\n }\n}\nfunction select_value(select) {\n const selected_option = select.querySelector(':checked') || first_enabled_option(select);\n return selected_option && selected_option.__value;\n}\nfunction select_multiple_value(select) {\n return [].map.call(select.querySelectorAll(':checked'), option => option.__value);\n}\n// unfortunately this can't be a constant as that wouldn't be tree-shakeable\n// so we cache the result instead\nlet crossorigin;\nfunction is_crossorigin() {\n if (crossorigin === undefined) {\n crossorigin = false;\n try {\n if (typeof window !== 'undefined' && window.parent) {\n void window.parent.document;\n }\n }\n catch (error) {\n crossorigin = true;\n }\n }\n return crossorigin;\n}\nfunction add_resize_listener(node, fn) {\n const computed_style = getComputedStyle(node);\n if (computed_style.position === 'static') {\n node.style.position = 'relative';\n }\n const iframe = element('iframe');\n iframe.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; ' +\n 'overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: -1;');\n iframe.setAttribute('aria-hidden', 'true');\n iframe.tabIndex = -1;\n const crossorigin = is_crossorigin();\n let unsubscribe;\n if (crossorigin) {\n iframe.src = \"data:text/html,\";\n unsubscribe = listen(window, 'message', (event) => {\n if (event.source === iframe.contentWindow)\n fn();\n });\n }\n else {\n iframe.src = 'about:blank';\n iframe.onload = () => {\n unsubscribe = listen(iframe.contentWindow, 'resize', fn);\n // make sure an initial resize event is fired _after_ the iframe is loaded (which is asynchronous)\n // see https://github.com/sveltejs/svelte/issues/4233\n fn();\n };\n }\n append(node, iframe);\n return () => {\n if (crossorigin) {\n unsubscribe();\n }\n else if (unsubscribe && iframe.contentWindow) {\n unsubscribe();\n }\n detach(iframe);\n };\n}\nfunction toggle_class(element, name, toggle) {\n element.classList[toggle ? 'add' : 'remove'](name);\n}\nfunction custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {\n const e = document.createEvent('CustomEvent');\n e.initCustomEvent(type, bubbles, cancelable, detail);\n return e;\n}\nfunction query_selector_all(selector, parent = document.body) {\n return Array.from(parent.querySelectorAll(selector));\n}\nfunction head_selector(nodeId, head) {\n const result = [];\n let started = 0;\n for (const node of head.childNodes) {\n if (node.nodeType === 8 /* comment node */) {\n const comment = node.textContent.trim();\n if (comment === `HEAD_${nodeId}_END`) {\n started -= 1;\n result.push(node);\n }\n else if (comment === `HEAD_${nodeId}_START`) {\n started += 1;\n result.push(node);\n }\n }\n else if (started > 0) {\n result.push(node);\n }\n }\n return result;\n}\nclass HtmlTag {\n constructor(is_svg = false) {\n this.is_svg = false;\n this.is_svg = is_svg;\n this.e = this.n = null;\n }\n c(html) {\n this.h(html);\n }\n m(html, target, anchor = null) {\n if (!this.e) {\n if (this.is_svg)\n this.e = svg_element(target.nodeName);\n /** #7364 target for