├── .gitignore ├── README.md ├── dist ├── bundle.css ├── bundle.css.map ├── bundle.js └── bundle.js.map ├── index.php ├── package-lock.json ├── package.json ├── rollup.config.js ├── src ├── App.svelte ├── components │ └── common │ │ └── Button.svelte └── main.js └── svelteplugin.php /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | *Psst �looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)* 2 | 3 | --- 4 | 5 | # svelte in a wordpress plugin to create a custom admin page 6 | 7 | ## Get started 8 | Install the plugin in your plugins folder... 9 | Install the dependencies... 10 | 11 | ```bash 12 | cd into the plugin folder && svelte-plugin folder 13 | npm install 14 | npm run dev 15 | ``` 16 | Then login into your backend, activate the plugin and edit any svelte files in your plugin 17 | Have fun! -------------------------------------------------------------------------------- /dist/bundle.css: -------------------------------------------------------------------------------- 1 | 2 | /*# sourceMappingURL=bundle.css.map */ -------------------------------------------------------------------------------- /dist/bundle.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "file": "bundle.css", 4 | "sources": [], 5 | "sourcesContent": [], 6 | "names": [], 7 | "mappings": "" 8 | } -------------------------------------------------------------------------------- /dist/bundle.js: -------------------------------------------------------------------------------- 1 | 2 | (function(l, i, v, e) { v = l.createElement(i); v.async = 1; v.src = '//' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; e = l.getElementsByTagName(i)[0]; e.parentNode.insertBefore(v, e)})(document, 'script'); 3 | var app = (function () { 4 | 'use strict'; 5 | 6 | function noop() { } 7 | function add_location(element, file, line, column, char) { 8 | element.__svelte_meta = { 9 | loc: { file, line, column, char } 10 | }; 11 | } 12 | function run(fn) { 13 | return fn(); 14 | } 15 | function blank_object() { 16 | return Object.create(null); 17 | } 18 | function run_all(fns) { 19 | fns.forEach(run); 20 | } 21 | function is_function(thing) { 22 | return typeof thing === 'function'; 23 | } 24 | function safe_not_equal(a, b) { 25 | return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function'); 26 | } 27 | 28 | function append(target, node) { 29 | target.appendChild(node); 30 | } 31 | function insert(target, node, anchor) { 32 | target.insertBefore(node, anchor || null); 33 | } 34 | function detach(node) { 35 | node.parentNode.removeChild(node); 36 | } 37 | function element(name) { 38 | return document.createElement(name); 39 | } 40 | function text(data) { 41 | return document.createTextNode(data); 42 | } 43 | function space() { 44 | return text(' '); 45 | } 46 | function listen(node, event, handler, options) { 47 | node.addEventListener(event, handler, options); 48 | return () => node.removeEventListener(event, handler, options); 49 | } 50 | function children(element) { 51 | return Array.from(element.childNodes); 52 | } 53 | function set_data(text, data) { 54 | data = '' + data; 55 | if (text.data !== data) 56 | text.data = data; 57 | } 58 | 59 | let current_component; 60 | function set_current_component(component) { 61 | current_component = component; 62 | } 63 | 64 | const dirty_components = []; 65 | const binding_callbacks = []; 66 | const render_callbacks = []; 67 | const flush_callbacks = []; 68 | const resolved_promise = Promise.resolve(); 69 | let update_scheduled = false; 70 | function schedule_update() { 71 | if (!update_scheduled) { 72 | update_scheduled = true; 73 | resolved_promise.then(flush); 74 | } 75 | } 76 | function add_render_callback(fn) { 77 | render_callbacks.push(fn); 78 | } 79 | function flush() { 80 | const seen_callbacks = new Set(); 81 | do { 82 | // first, call beforeUpdate functions 83 | // and update components 84 | while (dirty_components.length) { 85 | const component = dirty_components.shift(); 86 | set_current_component(component); 87 | update(component.$$); 88 | } 89 | while (binding_callbacks.length) 90 | binding_callbacks.pop()(); 91 | // then, once components are updated, call 92 | // afterUpdate functions. This may cause 93 | // subsequent updates... 94 | for (let i = 0; i < render_callbacks.length; i += 1) { 95 | const callback = render_callbacks[i]; 96 | if (!seen_callbacks.has(callback)) { 97 | callback(); 98 | // ...so guard against infinite loops 99 | seen_callbacks.add(callback); 100 | } 101 | } 102 | render_callbacks.length = 0; 103 | } while (dirty_components.length); 104 | while (flush_callbacks.length) { 105 | flush_callbacks.pop()(); 106 | } 107 | update_scheduled = false; 108 | } 109 | function update($$) { 110 | if ($$.fragment) { 111 | $$.update($$.dirty); 112 | run_all($$.before_update); 113 | $$.fragment.p($$.dirty, $$.ctx); 114 | $$.dirty = null; 115 | $$.after_update.forEach(add_render_callback); 116 | } 117 | } 118 | const outroing = new Set(); 119 | let outros; 120 | function transition_in(block, local) { 121 | if (block && block.i) { 122 | outroing.delete(block); 123 | block.i(local); 124 | } 125 | } 126 | function transition_out(block, local, detach, callback) { 127 | if (block && block.o) { 128 | if (outroing.has(block)) 129 | return; 130 | outroing.add(block); 131 | outros.c.push(() => { 132 | outroing.delete(block); 133 | if (callback) { 134 | if (detach) 135 | block.d(1); 136 | callback(); 137 | } 138 | }); 139 | block.o(local); 140 | } 141 | } 142 | function mount_component(component, target, anchor) { 143 | const { fragment, on_mount, on_destroy, after_update } = component.$$; 144 | fragment.m(target, anchor); 145 | // onMount happens before the initial afterUpdate 146 | add_render_callback(() => { 147 | const new_on_destroy = on_mount.map(run).filter(is_function); 148 | if (on_destroy) { 149 | on_destroy.push(...new_on_destroy); 150 | } 151 | else { 152 | // Edge case - component was destroyed immediately, 153 | // most likely as a result of a binding initialising 154 | run_all(new_on_destroy); 155 | } 156 | component.$$.on_mount = []; 157 | }); 158 | after_update.forEach(add_render_callback); 159 | } 160 | function destroy_component(component, detaching) { 161 | if (component.$$.fragment) { 162 | run_all(component.$$.on_destroy); 163 | component.$$.fragment.d(detaching); 164 | // TODO null out other refs, including component.$$ (but need to 165 | // preserve final state?) 166 | component.$$.on_destroy = component.$$.fragment = null; 167 | component.$$.ctx = {}; 168 | } 169 | } 170 | function make_dirty(component, key) { 171 | if (!component.$$.dirty) { 172 | dirty_components.push(component); 173 | schedule_update(); 174 | component.$$.dirty = blank_object(); 175 | } 176 | component.$$.dirty[key] = true; 177 | } 178 | function init(component, options, instance, create_fragment, not_equal, prop_names) { 179 | const parent_component = current_component; 180 | set_current_component(component); 181 | const props = options.props || {}; 182 | const $$ = component.$$ = { 183 | fragment: null, 184 | ctx: null, 185 | // state 186 | props: prop_names, 187 | update: noop, 188 | not_equal, 189 | bound: blank_object(), 190 | // lifecycle 191 | on_mount: [], 192 | on_destroy: [], 193 | before_update: [], 194 | after_update: [], 195 | context: new Map(parent_component ? parent_component.$$.context : []), 196 | // everything else 197 | callbacks: blank_object(), 198 | dirty: null 199 | }; 200 | let ready = false; 201 | $$.ctx = instance 202 | ? instance(component, props, (key, value) => { 203 | if ($$.ctx && not_equal($$.ctx[key], $$.ctx[key] = value)) { 204 | if ($$.bound[key]) 205 | $$.bound[key](value); 206 | if (ready) 207 | make_dirty(component, key); 208 | } 209 | }) 210 | : props; 211 | $$.update(); 212 | ready = true; 213 | run_all($$.before_update); 214 | $$.fragment = create_fragment($$.ctx); 215 | if (options.target) { 216 | if (options.hydrate) { 217 | // eslint-disable-next-line @typescript-eslint/no-non-null-assertion 218 | $$.fragment.l(children(options.target)); 219 | } 220 | else { 221 | // eslint-disable-next-line @typescript-eslint/no-non-null-assertion 222 | $$.fragment.c(); 223 | } 224 | if (options.intro) 225 | transition_in(component.$$.fragment); 226 | mount_component(component, options.target, options.anchor); 227 | flush(); 228 | } 229 | set_current_component(parent_component); 230 | } 231 | class SvelteComponent { 232 | $destroy() { 233 | destroy_component(this, 1); 234 | this.$destroy = noop; 235 | } 236 | $on(type, callback) { 237 | const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = [])); 238 | callbacks.push(callback); 239 | return () => { 240 | const index = callbacks.indexOf(callback); 241 | if (index !== -1) 242 | callbacks.splice(index, 1); 243 | }; 244 | } 245 | $set() { 246 | // overridden by instance, if it has props 247 | } 248 | } 249 | class SvelteComponentDev extends SvelteComponent { 250 | constructor(options) { 251 | if (!options || (!options.target && !options.$$inline)) { 252 | throw new Error(`'target' is a required option`); 253 | } 254 | super(); 255 | } 256 | $destroy() { 257 | super.$destroy(); 258 | this.$destroy = () => { 259 | console.warn(`Component was already destroyed`); // eslint-disable-line no-console 260 | }; 261 | } 262 | } 263 | 264 | /* src/components/common/Button.svelte generated by Svelte v3.7.1 */ 265 | 266 | const file = "src/components/common/Button.svelte"; 267 | 268 | function create_fragment(ctx) { 269 | var button, t1, p0, t2, t3, t4, p1, t5, t6, dispose; 270 | 271 | return { 272 | c: function create() { 273 | button = element("button"); 274 | button.textContent = "generate random number"; 275 | t1 = space(); 276 | p0 = element("p"); 277 | t2 = text("The random number is "); 278 | t3 = text(ctx.randomNumber); 279 | t4 = space(); 280 | p1 = element("p"); 281 | t5 = text("The calculated number is "); 282 | t6 = text(ctx.calculatedNumber); 283 | add_location(button, file, 12, 0, 218); 284 | add_location(p0, file, 15, 0, 284); 285 | add_location(p1, file, 16, 0, 327); 286 | dispose = listen(button, "click", ctx.handleClick); 287 | }, 288 | 289 | l: function claim(nodes) { 290 | throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); 291 | }, 292 | 293 | m: function mount(target, anchor) { 294 | insert(target, button, anchor); 295 | insert(target, t1, anchor); 296 | insert(target, p0, anchor); 297 | append(p0, t2); 298 | append(p0, t3); 299 | insert(target, t4, anchor); 300 | insert(target, p1, anchor); 301 | append(p1, t5); 302 | append(p1, t6); 303 | }, 304 | 305 | p: function update(changed, ctx) { 306 | if (changed.randomNumber) { 307 | set_data(t3, ctx.randomNumber); 308 | } 309 | 310 | if (changed.calculatedNumber) { 311 | set_data(t6, ctx.calculatedNumber); 312 | } 313 | }, 314 | 315 | i: noop, 316 | o: noop, 317 | 318 | d: function destroy(detaching) { 319 | if (detaching) { 320 | detach(button); 321 | detach(t1); 322 | detach(p0); 323 | detach(t4); 324 | detach(p1); 325 | } 326 | 327 | dispose(); 328 | } 329 | }; 330 | } 331 | 332 | function instance($$self, $$props, $$invalidate) { 333 | let randomNumber = 0; 334 | let calculatedNumber = 0; 335 | 336 | function handleClick() { 337 | $$invalidate('randomNumber', randomNumber = Math.floor(Math.random() * (100 - 1 + 1)+1)); 338 | } 339 | 340 | $$self.$$.update = ($$dirty = { randomNumber: 1, calculatedNumber: 1 }) => { 341 | if ($$dirty.randomNumber || $$dirty.calculatedNumber) { $$invalidate('calculatedNumber', calculatedNumber = randomNumber + calculatedNumber); } 342 | }; 343 | 344 | return { 345 | randomNumber, 346 | calculatedNumber, 347 | handleClick 348 | }; 349 | } 350 | 351 | class Button extends SvelteComponentDev { 352 | constructor(options) { 353 | super(options); 354 | init(this, options, instance, create_fragment, safe_not_equal, []); 355 | } 356 | } 357 | 358 | /* src/App.svelte generated by Svelte v3.7.1 */ 359 | 360 | const file$1 = "src/App.svelte"; 361 | 362 | function create_fragment$1(ctx) { 363 | var h1, t0, t1, t2, t3, current; 364 | 365 | var button = new Button({ $$inline: true }); 366 | 367 | return { 368 | c: function create() { 369 | h1 = element("h1"); 370 | t0 = text("Hello "); 371 | t1 = text(name); 372 | t2 = text("!"); 373 | t3 = space(); 374 | button.$$.fragment.c(); 375 | add_location(h1, file$1, 5, 0, 117); 376 | }, 377 | 378 | l: function claim(nodes) { 379 | throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); 380 | }, 381 | 382 | m: function mount(target, anchor) { 383 | insert(target, h1, anchor); 384 | append(h1, t0); 385 | append(h1, t1); 386 | append(h1, t2); 387 | insert(target, t3, anchor); 388 | mount_component(button, target, anchor); 389 | current = true; 390 | }, 391 | 392 | p: noop, 393 | 394 | i: function intro(local) { 395 | if (current) return; 396 | transition_in(button.$$.fragment, local); 397 | 398 | current = true; 399 | }, 400 | 401 | o: function outro(local) { 402 | transition_out(button.$$.fragment, local); 403 | current = false; 404 | }, 405 | 406 | d: function destroy(detaching) { 407 | if (detaching) { 408 | detach(h1); 409 | detach(t3); 410 | } 411 | 412 | destroy_component(button, detaching); 413 | } 414 | }; 415 | } 416 | 417 | let name = 'You are inside Svelte App'; 418 | 419 | class App extends SvelteComponentDev { 420 | constructor(options) { 421 | super(options); 422 | init(this, options, null, create_fragment$1, safe_not_equal, []); 423 | } 424 | } 425 | 426 | var app = new App({ 427 | target: document.getElementById('svelte-admin') 428 | }); 429 | 430 | return app; 431 | 432 | }()); 433 | //# sourceMappingURL=bundle.js.map 434 | -------------------------------------------------------------------------------- /dist/bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"bundle.js","sources":["../node_modules/svelte/internal/index.mjs","../src/components/common/Button.svelte","../src/App.svelte","../src/main.js"],"sourcesContent":["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}\nfunction is_promise(value) {\n return value && typeof value === 'object' && 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}\nfunction not_equal(a, b) {\n return a != a ? b == b : a !== b;\n}\nfunction validate_store(store, name) {\n if (!store || typeof store.subscribe !== 'function') {\n throw new Error(`'${name}' is not a store with a 'subscribe' method`);\n }\n}\nfunction subscribe(store, callback) {\n const unsub = store.subscribe(callback);\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, fn) {\n if (definition) {\n const slot_ctx = get_slot_context(definition, ctx, fn);\n return definition[0](slot_ctx);\n }\n}\nfunction get_slot_context(definition, ctx, fn) {\n return definition[1]\n ? assign({}, assign(ctx.$$scope.ctx, definition[1](fn ? fn(ctx) : {})))\n : ctx.$$scope.ctx;\n}\nfunction get_slot_changes(definition, ctx, changed, fn) {\n return definition[1]\n ? assign({}, assign(ctx.$$scope.changed || {}, definition[1](fn ? fn(changed) : {})))\n : ctx.$$scope.changed || {};\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 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}\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();\nlet running = false;\nfunction run_tasks() {\n tasks.forEach(task => {\n if (!task[0](now())) {\n tasks.delete(task);\n task[1]();\n }\n });\n running = tasks.size > 0;\n if (running)\n raf(run_tasks);\n}\nfunction clear_loops() {\n // for testing...\n tasks.forEach(task => tasks.delete(task));\n running = false;\n}\nfunction loop(fn) {\n let task;\n if (!running) {\n running = true;\n raf(run_tasks);\n }\n return {\n promise: new Promise(fulfil => {\n tasks.add(task = [fn, fulfil]);\n }),\n abort() {\n tasks.delete(task);\n }\n };\n}\n\nfunction append(target, node) {\n target.appendChild(node);\n}\nfunction insert(target, node, anchor) {\n target.insertBefore(node, anchor || null);\n}\nfunction detach(node) {\n node.parentNode.removeChild(node);\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 object_without_properties(obj, exclude) {\n // eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion\n const target = {};\n for (const k in obj) {\n if (Object.prototype.hasOwnProperty.call(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 attr(node, attribute, value) {\n if (value == null)\n node.removeAttribute(attribute);\n else\n node.setAttribute(attribute, value);\n}\nfunction set_attributes(node, attributes) {\n for (const key in attributes) {\n if (key === 'style') {\n node.style.cssText = attributes[key];\n }\n else if (key in node) {\n node[key] = attributes[key];\n }\n else {\n attr(node, key, attributes[key]);\n }\n }\n}\nfunction set_custom_element_data(node, prop, value) {\n if (prop in node) {\n node[prop] = value;\n }\n else {\n attr(node, prop, value);\n }\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) {\n const value = [];\n for (let i = 0; i < group.length; i += 1) {\n if (group[i].checked)\n value.push(group[i].__value);\n }\n return value;\n}\nfunction to_number(value) {\n return value === '' ? undefined : +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 claim_element(nodes, name, attributes, svg) {\n for (let i = 0; i < nodes.length; i += 1) {\n const node = nodes[i];\n if (node.nodeName === name) {\n for (let j = 0; j < node.attributes.length; j += 1) {\n const attribute = node.attributes[j];\n if (!attributes[attribute.name])\n node.removeAttribute(attribute.name);\n }\n return nodes.splice(i, 1)[0]; // TODO strip unwanted attributes\n }\n }\n return svg ? svg_element(name) : element(name);\n}\nfunction claim_text(nodes, data) {\n for (let i = 0; i < nodes.length; i += 1) {\n const node = nodes[i];\n if (node.nodeType === 3) {\n node.data = data;\n return nodes.splice(i, 1)[0];\n }\n }\n return text(data);\n}\nfunction set_data(text, data) {\n data = '' + data;\n if (text.data !== data)\n text.data = data;\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) {\n node.style.setProperty(key, value);\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}\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 select_value(select) {\n const selected_option = select.querySelector(':checked') || select.options[0];\n return selected_option && selected_option.__value;\n}\nfunction select_multiple_value(select) {\n return [].map.call(select.querySelectorAll(':checked'), option => option.__value);\n}\nfunction add_resize_listener(element, fn) {\n if (getComputedStyle(element).position === 'static') {\n element.style.position = 'relative';\n }\n const object = document.createElement('object');\n object.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');\n object.type = 'text/html';\n object.tabIndex = -1;\n let win;\n object.onload = () => {\n win = object.contentDocument.defaultView;\n win.addEventListener('resize', fn);\n };\n if (/Trident/.test(navigator.userAgent)) {\n element.appendChild(object);\n object.data = 'about:blank';\n }\n else {\n object.data = 'about:blank';\n element.appendChild(object);\n }\n return {\n cancel: () => {\n win && win.removeEventListener && win.removeEventListener('resize', fn);\n element.removeChild(object);\n }\n };\n}\nfunction toggle_class(element, name, toggle) {\n element.classList[toggle ? 'add' : 'remove'](name);\n}\nfunction custom_event(type, detail) {\n const e = document.createEvent('CustomEvent');\n e.initCustomEvent(type, false, false, detail);\n return e;\n}\nclass HtmlTag {\n constructor(html, anchor = null) {\n this.e = element('div');\n this.a = anchor;\n this.u(html);\n }\n m(target, anchor = null) {\n for (let i = 0; i < this.n.length; i += 1) {\n insert(target, this.n[i], anchor);\n }\n this.t = target;\n }\n u(html) {\n this.e.innerHTML = html;\n this.n = Array.from(this.e.childNodes);\n }\n p(html) {\n this.d();\n this.u(html);\n this.m(this.t, this.a);\n }\n d() {\n this.n.forEach(detach);\n }\n}\n\nlet stylesheet;\nlet active = 0;\nlet current_rules = {};\n// https://github.com/darkskyapp/string-hash/blob/master/index.js\nfunction hash(str) {\n let hash = 5381;\n let i = str.length;\n while (i--)\n hash = ((hash << 5) - hash) ^ str.charCodeAt(i);\n return hash >>> 0;\n}\nfunction create_rule(node, a, b, duration, delay, ease, fn, uid = 0) {\n const step = 16.666 / duration;\n let keyframes = '{\\n';\n for (let p = 0; p <= 1; p += step) {\n const t = a + (b - a) * ease(p);\n keyframes += p * 100 + `%{${fn(t, 1 - t)}}\\n`;\n }\n const rule = keyframes + `100% {${fn(b, 1 - b)}}\\n}`;\n const name = `__svelte_${hash(rule)}_${uid}`;\n if (!current_rules[name]) {\n if (!stylesheet) {\n const style = element('style');\n document.head.appendChild(style);\n stylesheet = style.sheet;\n }\n current_rules[name] = true;\n stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);\n }\n const animation = node.style.animation || '';\n node.style.animation = `${animation ? `${animation}, ` : ``}${name} ${duration}ms linear ${delay}ms 1 both`;\n active += 1;\n return name;\n}\nfunction delete_rule(node, name) {\n node.style.animation = (node.style.animation || '')\n .split(', ')\n .filter(name\n ? anim => anim.indexOf(name) < 0 // remove specific animation\n : anim => anim.indexOf('__svelte') === -1 // remove all Svelte animations\n )\n .join(', ');\n if (name && !--active)\n clear_rules();\n}\nfunction clear_rules() {\n raf(() => {\n if (active)\n return;\n let i = stylesheet.cssRules.length;\n while (i--)\n stylesheet.deleteRule(i);\n current_rules = {};\n });\n}\n\nfunction create_animation(node, from, fn, params) {\n if (!from)\n return noop;\n const to = node.getBoundingClientRect();\n if (from.left === to.left && from.right === to.right && from.top === to.top && from.bottom === to.bottom)\n return noop;\n const { delay = 0, duration = 300, easing = identity, \n // @ts-ignore todo: should this be separated from destructuring? Or start/end added to public api and documentation?\n start: start_time = now() + delay, \n // @ts-ignore todo:\n end = start_time + duration, tick = noop, css } = fn(node, { from, to }, params);\n let running = true;\n let started = false;\n let name;\n function start() {\n if (css) {\n name = create_rule(node, 0, 1, duration, delay, easing, css);\n }\n if (!delay) {\n started = true;\n }\n }\n function stop() {\n if (css)\n delete_rule(node, name);\n running = false;\n }\n loop(now => {\n if (!started && now >= start_time) {\n started = true;\n }\n if (started && now >= end) {\n tick(1, 0);\n stop();\n }\n if (!running) {\n return false;\n }\n if (started) {\n const p = now - start_time;\n const t = 0 + 1 * easing(p / duration);\n tick(t, 1 - t);\n }\n return true;\n });\n start();\n tick(0, 1);\n return stop;\n}\nfunction fix_position(node) {\n const style = getComputedStyle(node);\n if (style.position !== 'absolute' && style.position !== 'fixed') {\n const { width, height } = style;\n const a = node.getBoundingClientRect();\n node.style.position = 'absolute';\n node.style.width = width;\n node.style.height = height;\n add_transform(node, a);\n }\n}\nfunction add_transform(node, a) {\n const b = node.getBoundingClientRect();\n if (a.left !== b.left || a.top !== b.top) {\n const style = getComputedStyle(node);\n const transform = style.transform === 'none' ? '' : style.transform;\n node.style.transform = `${transform} translate(${a.left - b.left}px, ${a.top - b.top}px)`;\n }\n}\n\nlet current_component;\nfunction set_current_component(component) {\n current_component = component;\n}\nfunction get_current_component() {\n if (!current_component)\n throw new Error(`Function called outside component initialization`);\n return current_component;\n}\nfunction beforeUpdate(fn) {\n get_current_component().$$.before_update.push(fn);\n}\nfunction onMount(fn) {\n get_current_component().$$.on_mount.push(fn);\n}\nfunction afterUpdate(fn) {\n get_current_component().$$.after_update.push(fn);\n}\nfunction onDestroy(fn) {\n get_current_component().$$.on_destroy.push(fn);\n}\nfunction createEventDispatcher() {\n const component = current_component;\n return (type, detail) => {\n const callbacks = component.$$.callbacks[type];\n if (callbacks) {\n // TODO are there situations where events could be dispatched\n // in a server (non-DOM) environment?\n const event = custom_event(type, detail);\n callbacks.slice().forEach(fn => {\n fn.call(component, event);\n });\n }\n };\n}\nfunction setContext(key, context) {\n get_current_component().$$.context.set(key, context);\n}\nfunction getContext(key) {\n return get_current_component().$$.context.get(key);\n}\n// TODO figure out if we still want to support\n// shorthand events, or if we want to implement\n// a real bubbling mechanism\nfunction bubble(component, event) {\n const callbacks = component.$$.callbacks[event.type];\n if (callbacks) {\n callbacks.slice().forEach(fn => fn(event));\n }\n}\n\nconst dirty_components = [];\nconst intros = { enabled: false };\nconst binding_callbacks = [];\nconst render_callbacks = [];\nconst flush_callbacks = [];\nconst resolved_promise = Promise.resolve();\nlet update_scheduled = false;\nfunction schedule_update() {\n if (!update_scheduled) {\n update_scheduled = true;\n resolved_promise.then(flush);\n }\n}\nfunction tick() {\n schedule_update();\n return resolved_promise;\n}\nfunction add_render_callback(fn) {\n render_callbacks.push(fn);\n}\nfunction add_flush_callback(fn) {\n flush_callbacks.push(fn);\n}\nfunction flush() {\n const seen_callbacks = new Set();\n do {\n // first, call beforeUpdate functions\n // and update components\n while (dirty_components.length) {\n const component = dirty_components.shift();\n set_current_component(component);\n update(component.$$);\n }\n while (binding_callbacks.length)\n binding_callbacks.pop()();\n // then, once components are updated, call\n // afterUpdate functions. This may cause\n // subsequent updates...\n for (let i = 0; i < render_callbacks.length; i += 1) {\n const callback = render_callbacks[i];\n if (!seen_callbacks.has(callback)) {\n callback();\n // ...so guard against infinite loops\n seen_callbacks.add(callback);\n }\n }\n render_callbacks.length = 0;\n } while (dirty_components.length);\n while (flush_callbacks.length) {\n flush_callbacks.pop()();\n }\n update_scheduled = false;\n}\nfunction update($$) {\n if ($$.fragment) {\n $$.update($$.dirty);\n run_all($$.before_update);\n $$.fragment.p($$.dirty, $$.ctx);\n $$.dirty = null;\n $$.after_update.forEach(add_render_callback);\n }\n}\n\nlet promise;\nfunction wait() {\n if (!promise) {\n promise = Promise.resolve();\n promise.then(() => {\n promise = null;\n });\n }\n return promise;\n}\nfunction dispatch(node, direction, kind) {\n node.dispatchEvent(custom_event(`${direction ? 'intro' : 'outro'}${kind}`));\n}\nconst outroing = new Set();\nlet outros;\nfunction group_outros() {\n outros = {\n r: 0,\n c: [],\n p: outros // parent group\n };\n}\nfunction check_outros() {\n if (!outros.r) {\n run_all(outros.c);\n }\n outros = outros.p;\n}\nfunction transition_in(block, local) {\n if (block && block.i) {\n outroing.delete(block);\n block.i(local);\n }\n}\nfunction transition_out(block, local, detach, callback) {\n if (block && block.o) {\n if (outroing.has(block))\n return;\n outroing.add(block);\n outros.c.push(() => {\n outroing.delete(block);\n if (callback) {\n if (detach)\n block.d(1);\n callback();\n }\n });\n block.o(local);\n }\n}\nconst null_transition = { duration: 0 };\nfunction create_in_transition(node, fn, params) {\n let config = fn(node, params);\n let running = false;\n let animation_name;\n let task;\n let uid = 0;\n function cleanup() {\n if (animation_name)\n delete_rule(node, animation_name);\n }\n function go() {\n const { delay = 0, duration = 300, easing = identity, tick = noop, css } = config || null_transition;\n if (css)\n animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++);\n tick(0, 1);\n const start_time = now() + delay;\n const end_time = start_time + duration;\n if (task)\n task.abort();\n running = true;\n add_render_callback(() => dispatch(node, true, 'start'));\n task = loop(now => {\n if (running) {\n if (now >= end_time) {\n tick(1, 0);\n dispatch(node, true, 'end');\n cleanup();\n return running = false;\n }\n if (now >= start_time) {\n const t = easing((now - start_time) / duration);\n tick(t, 1 - t);\n }\n }\n return running;\n });\n }\n let started = false;\n return {\n start() {\n if (started)\n return;\n delete_rule(node);\n if (is_function(config)) {\n config = config();\n wait().then(go);\n }\n else {\n go();\n }\n },\n invalidate() {\n started = false;\n },\n end() {\n if (running) {\n cleanup();\n running = false;\n }\n }\n };\n}\nfunction create_out_transition(node, fn, params) {\n let config = fn(node, params);\n let running = true;\n let animation_name;\n const group = outros;\n group.r += 1;\n function go() {\n const { delay = 0, duration = 300, easing = identity, tick = noop, css } = config || null_transition;\n if (css)\n animation_name = create_rule(node, 1, 0, duration, delay, easing, css);\n const start_time = now() + delay;\n const end_time = start_time + duration;\n add_render_callback(() => dispatch(node, false, 'start'));\n loop(now => {\n if (running) {\n if (now >= end_time) {\n tick(0, 1);\n dispatch(node, false, 'end');\n if (!--group.r) {\n // this will result in `end()` being called,\n // so we don't need to clean up here\n run_all(group.c);\n }\n return false;\n }\n if (now >= start_time) {\n const t = easing((now - start_time) / duration);\n tick(1 - t, t);\n }\n }\n return running;\n });\n }\n if (is_function(config)) {\n wait().then(() => {\n // @ts-ignore\n config = config();\n go();\n });\n }\n else {\n go();\n }\n return {\n end(reset) {\n if (reset && config.tick) {\n config.tick(1, 0);\n }\n if (running) {\n if (animation_name)\n delete_rule(node, animation_name);\n running = false;\n }\n }\n };\n}\nfunction create_bidirectional_transition(node, fn, params, intro) {\n let config = fn(node, params);\n let t = intro ? 0 : 1;\n let running_program = null;\n let pending_program = null;\n let animation_name = null;\n function clear_animation() {\n if (animation_name)\n delete_rule(node, animation_name);\n }\n function init(program, duration) {\n const d = program.b - t;\n duration *= Math.abs(d);\n return {\n a: t,\n b: program.b,\n d,\n duration,\n start: program.start,\n end: program.start + duration,\n group: program.group\n };\n }\n function go(b) {\n const { delay = 0, duration = 300, easing = identity, tick = noop, css } = config || null_transition;\n const program = {\n start: now() + delay,\n b\n };\n if (!b) {\n // @ts-ignore todo: improve typings\n program.group = outros;\n outros.r += 1;\n }\n if (running_program) {\n pending_program = program;\n }\n else {\n // if this is an intro, and there's a delay, we need to do\n // an initial tick and/or apply CSS animation immediately\n if (css) {\n clear_animation();\n animation_name = create_rule(node, t, b, duration, delay, easing, css);\n }\n if (b)\n tick(0, 1);\n running_program = init(program, duration);\n add_render_callback(() => dispatch(node, b, 'start'));\n loop(now => {\n if (pending_program && now > pending_program.start) {\n running_program = init(pending_program, duration);\n pending_program = null;\n dispatch(node, running_program.b, 'start');\n if (css) {\n clear_animation();\n animation_name = create_rule(node, t, running_program.b, running_program.duration, 0, easing, config.css);\n }\n }\n if (running_program) {\n if (now >= running_program.end) {\n tick(t = running_program.b, 1 - t);\n dispatch(node, running_program.b, 'end');\n if (!pending_program) {\n // we're done\n if (running_program.b) {\n // intro — we can tidy up immediately\n clear_animation();\n }\n else {\n // outro — needs to be coordinated\n if (!--running_program.group.r)\n run_all(running_program.group.c);\n }\n }\n running_program = null;\n }\n else if (now >= running_program.start) {\n const p = now - running_program.start;\n t = running_program.a + running_program.d * easing(p / running_program.duration);\n tick(t, 1 - t);\n }\n }\n return !!(running_program || pending_program);\n });\n }\n }\n return {\n run(b) {\n if (is_function(config)) {\n wait().then(() => {\n // @ts-ignore\n config = config();\n go(b);\n });\n }\n else {\n go(b);\n }\n },\n end() {\n clear_animation();\n running_program = pending_program = null;\n }\n };\n}\n\nfunction handle_promise(promise, info) {\n const token = info.token = {};\n function update(type, index, key, value) {\n if (info.token !== token)\n return;\n info.resolved = key && { [key]: value };\n const child_ctx = assign(assign({}, info.ctx), info.resolved);\n const block = type && (info.current = type)(child_ctx);\n if (info.block) {\n if (info.blocks) {\n info.blocks.forEach((block, i) => {\n if (i !== index && block) {\n group_outros();\n transition_out(block, 1, 1, () => {\n info.blocks[i] = null;\n });\n check_outros();\n }\n });\n }\n else {\n info.block.d(1);\n }\n block.c();\n transition_in(block, 1);\n block.m(info.mount(), info.anchor);\n flush();\n }\n info.block = block;\n if (info.blocks)\n info.blocks[index] = block;\n }\n if (is_promise(promise)) {\n promise.then(value => {\n update(info.then, 1, info.value, value);\n }, error => {\n update(info.catch, 2, info.error, error);\n });\n // if we previously had a then/catch block, destroy it\n if (info.current !== info.pending) {\n update(info.pending, 0);\n return true;\n }\n }\n else {\n if (info.current !== info.then) {\n update(info.then, 1, info.value, promise);\n return true;\n }\n info.resolved = { [info.value]: promise };\n }\n}\n\nconst globals = (typeof window !== 'undefined' ? window : global);\n\nfunction destroy_block(block, lookup) {\n block.d(1);\n lookup.delete(block.key);\n}\nfunction outro_and_destroy_block(block, lookup) {\n transition_out(block, 1, 1, () => {\n lookup.delete(block.key);\n });\n}\nfunction fix_and_destroy_block(block, lookup) {\n block.f();\n destroy_block(block, lookup);\n}\nfunction fix_and_outro_and_destroy_block(block, lookup) {\n block.f();\n outro_and_destroy_block(block, lookup);\n}\nfunction update_keyed_each(old_blocks, changed, get_key, dynamic, ctx, list, lookup, node, destroy, create_each_block, next, get_context) {\n let o = old_blocks.length;\n let n = list.length;\n let i = o;\n const old_indexes = {};\n while (i--)\n old_indexes[old_blocks[i].key] = i;\n const new_blocks = [];\n const new_lookup = new Map();\n const deltas = new Map();\n i = n;\n while (i--) {\n const child_ctx = get_context(ctx, list, i);\n const key = get_key(child_ctx);\n let block = lookup.get(key);\n if (!block) {\n block = create_each_block(key, child_ctx);\n block.c();\n }\n else if (dynamic) {\n block.p(changed, child_ctx);\n }\n new_lookup.set(key, new_blocks[i] = block);\n if (key in old_indexes)\n deltas.set(key, Math.abs(i - old_indexes[key]));\n }\n const will_move = new Set();\n const did_move = new Set();\n function insert(block) {\n transition_in(block, 1);\n block.m(node, next);\n lookup.set(block.key, block);\n next = block.first;\n n--;\n }\n while (o && n) {\n const new_block = new_blocks[n - 1];\n const old_block = old_blocks[o - 1];\n const new_key = new_block.key;\n const old_key = old_block.key;\n if (new_block === old_block) {\n // do nothing\n next = new_block.first;\n o--;\n n--;\n }\n else if (!new_lookup.has(old_key)) {\n // remove old block\n destroy(old_block, lookup);\n o--;\n }\n else if (!lookup.has(new_key) || will_move.has(new_key)) {\n insert(new_block);\n }\n else if (did_move.has(old_key)) {\n o--;\n }\n else if (deltas.get(new_key) > deltas.get(old_key)) {\n did_move.add(new_key);\n insert(new_block);\n }\n else {\n will_move.add(old_key);\n o--;\n }\n }\n while (o--) {\n const old_block = old_blocks[o];\n if (!new_lookup.has(old_block.key))\n destroy(old_block, lookup);\n }\n while (n)\n insert(new_blocks[n - 1]);\n return new_blocks;\n}\nfunction measure(blocks) {\n const rects = {};\n let i = blocks.length;\n while (i--)\n rects[blocks[i].key] = blocks[i].node.getBoundingClientRect();\n return rects;\n}\n\nfunction get_spread_update(levels, updates) {\n const update = {};\n const to_null_out = {};\n const accounted_for = { $$scope: 1 };\n let i = levels.length;\n while (i--) {\n const o = levels[i];\n const n = updates[i];\n if (n) {\n for (const key in o) {\n if (!(key in n))\n to_null_out[key] = 1;\n }\n for (const key in n) {\n if (!accounted_for[key]) {\n update[key] = n[key];\n accounted_for[key] = 1;\n }\n }\n levels[i] = n;\n }\n else {\n for (const key in o) {\n accounted_for[key] = 1;\n }\n }\n }\n for (const key in to_null_out) {\n if (!(key in update))\n update[key] = undefined;\n }\n return update;\n}\n\nconst invalid_attribute_name_character = /[\\s'\">/=\\u{FDD0}-\\u{FDEF}\\u{FFFE}\\u{FFFF}\\u{1FFFE}\\u{1FFFF}\\u{2FFFE}\\u{2FFFF}\\u{3FFFE}\\u{3FFFF}\\u{4FFFE}\\u{4FFFF}\\u{5FFFE}\\u{5FFFF}\\u{6FFFE}\\u{6FFFF}\\u{7FFFE}\\u{7FFFF}\\u{8FFFE}\\u{8FFFF}\\u{9FFFE}\\u{9FFFF}\\u{AFFFE}\\u{AFFFF}\\u{BFFFE}\\u{BFFFF}\\u{CFFFE}\\u{CFFFF}\\u{DFFFE}\\u{DFFFF}\\u{EFFFE}\\u{EFFFF}\\u{FFFFE}\\u{FFFFF}\\u{10FFFE}\\u{10FFFF}]/u;\n// https://html.spec.whatwg.org/multipage/syntax.html#attributes-2\n// https://infra.spec.whatwg.org/#noncharacter\nfunction spread(args) {\n const attributes = Object.assign({}, ...args);\n let str = '';\n Object.keys(attributes).forEach(name => {\n if (invalid_attribute_name_character.test(name))\n return;\n const value = attributes[name];\n if (value === undefined)\n return;\n if (value === true)\n str += \" \" + name;\n const escaped = String(value)\n .replace(/\"/g, '"')\n .replace(/'/g, ''');\n str += \" \" + name + \"=\" + JSON.stringify(escaped);\n });\n return str;\n}\nconst escaped = {\n '\"': '"',\n \"'\": ''',\n '&': '&',\n '<': '<',\n '>': '>'\n};\nfunction escape(html) {\n return String(html).replace(/[\"'&<>]/g, match => escaped[match]);\n}\nfunction each(items, fn) {\n let str = '';\n for (let i = 0; i < items.length; i += 1) {\n str += fn(items[i], i);\n }\n return str;\n}\nconst missing_component = {\n $$render: () => ''\n};\nfunction validate_component(component, name) {\n if (!component || !component.$$render) {\n if (name === 'svelte:component')\n name += ' this={...}';\n throw new Error(`<${name}> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules`);\n }\n return component;\n}\nfunction debug(file, line, column, values) {\n console.log(`{@debug} ${file ? file + ' ' : ''}(${line}:${column})`); // eslint-disable-line no-console\n console.log(values); // eslint-disable-line no-console\n return '';\n}\nlet on_destroy;\nfunction create_ssr_component(fn) {\n function $$render(result, props, bindings, slots) {\n const parent_component = current_component;\n const $$ = {\n on_destroy,\n context: new Map(parent_component ? parent_component.$$.context : []),\n // these will be immediately discarded\n on_mount: [],\n before_update: [],\n after_update: [],\n callbacks: blank_object()\n };\n set_current_component({ $$ });\n const html = fn(result, props, bindings, slots);\n set_current_component(parent_component);\n return html;\n }\n return {\n render: (props = {}, options = {}) => {\n on_destroy = [];\n const result = { head: '', css: new Set() };\n const html = $$render(result, props, {}, options);\n run_all(on_destroy);\n return {\n html,\n css: {\n code: Array.from(result.css).map(css => css.code).join('\\n'),\n map: null // TODO\n },\n head: result.head\n };\n },\n $$render\n };\n}\nfunction add_attribute(name, value, boolean) {\n if (value == null || (boolean && !value))\n return '';\n return ` ${name}${value === true ? '' : `=${typeof value === 'string' ? JSON.stringify(escape(value)) : `\"${value}\"`}`}`;\n}\nfunction add_classes(classes) {\n return classes ? ` class=\"${classes}\"` : ``;\n}\n\nfunction bind(component, name, callback) {\n if (component.$$.props.indexOf(name) === -1)\n return;\n component.$$.bound[name] = callback;\n callback(component.$$.ctx[name]);\n}\nfunction mount_component(component, target, anchor) {\n const { fragment, on_mount, on_destroy, after_update } = component.$$;\n fragment.m(target, anchor);\n // onMount happens before the initial afterUpdate\n add_render_callback(() => {\n const new_on_destroy = on_mount.map(run).filter(is_function);\n if (on_destroy) {\n on_destroy.push(...new_on_destroy);\n }\n else {\n // Edge case - component was destroyed immediately,\n // most likely as a result of a binding initialising\n run_all(new_on_destroy);\n }\n component.$$.on_mount = [];\n });\n after_update.forEach(add_render_callback);\n}\nfunction destroy_component(component, detaching) {\n if (component.$$.fragment) {\n run_all(component.$$.on_destroy);\n component.$$.fragment.d(detaching);\n // TODO null out other refs, including component.$$ (but need to\n // preserve final state?)\n component.$$.on_destroy = component.$$.fragment = null;\n component.$$.ctx = {};\n }\n}\nfunction make_dirty(component, key) {\n if (!component.$$.dirty) {\n dirty_components.push(component);\n schedule_update();\n component.$$.dirty = blank_object();\n }\n component.$$.dirty[key] = true;\n}\nfunction init(component, options, instance, create_fragment, not_equal, prop_names) {\n const parent_component = current_component;\n set_current_component(component);\n const props = options.props || {};\n const $$ = component.$$ = {\n fragment: null,\n ctx: null,\n // state\n props: prop_names,\n update: noop,\n not_equal,\n bound: blank_object(),\n // lifecycle\n on_mount: [],\n on_destroy: [],\n before_update: [],\n after_update: [],\n context: new Map(parent_component ? parent_component.$$.context : []),\n // everything else\n callbacks: blank_object(),\n dirty: null\n };\n let ready = false;\n $$.ctx = instance\n ? instance(component, props, (key, value) => {\n if ($$.ctx && not_equal($$.ctx[key], $$.ctx[key] = value)) {\n if ($$.bound[key])\n $$.bound[key](value);\n if (ready)\n make_dirty(component, key);\n }\n })\n : props;\n $$.update();\n ready = true;\n run_all($$.before_update);\n $$.fragment = create_fragment($$.ctx);\n if (options.target) {\n if (options.hydrate) {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n $$.fragment.l(children(options.target));\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n $$.fragment.c();\n }\n if (options.intro)\n transition_in(component.$$.fragment);\n mount_component(component, options.target, options.anchor);\n flush();\n }\n set_current_component(parent_component);\n}\nlet SvelteElement;\nif (typeof HTMLElement !== 'undefined') {\n SvelteElement = class extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n }\n connectedCallback() {\n // @ts-ignore todo: improve typings\n for (const key in this.$$.slotted) {\n // @ts-ignore todo: improve typings\n this.appendChild(this.$$.slotted[key]);\n }\n }\n attributeChangedCallback(attr, _oldValue, newValue) {\n this[attr] = newValue;\n }\n $destroy() {\n destroy_component(this, 1);\n this.$destroy = noop;\n }\n $on(type, callback) {\n // TODO should this delegate to addEventListener?\n const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));\n callbacks.push(callback);\n return () => {\n const index = callbacks.indexOf(callback);\n if (index !== -1)\n callbacks.splice(index, 1);\n };\n }\n $set() {\n // overridden by instance, if it has props\n }\n };\n}\nclass SvelteComponent {\n $destroy() {\n destroy_component(this, 1);\n this.$destroy = noop;\n }\n $on(type, callback) {\n const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));\n callbacks.push(callback);\n return () => {\n const index = callbacks.indexOf(callback);\n if (index !== -1)\n callbacks.splice(index, 1);\n };\n }\n $set() {\n // overridden by instance, if it has props\n }\n}\nclass SvelteComponentDev extends SvelteComponent {\n constructor(options) {\n if (!options || (!options.target && !options.$$inline)) {\n throw new Error(`'target' is a required option`);\n }\n super();\n }\n $destroy() {\n super.$destroy();\n this.$destroy = () => {\n console.warn(`Component was already destroyed`); // eslint-disable-line no-console\n };\n }\n}\n\nexport { HtmlTag, SvelteComponent, SvelteComponentDev, SvelteElement, add_attribute, add_classes, add_flush_callback, add_location, add_render_callback, add_resize_listener, add_transform, afterUpdate, append, assign, attr, beforeUpdate, bind, binding_callbacks, blank_object, bubble, check_outros, children, claim_element, claim_text, clear_loops, component_subscribe, createEventDispatcher, create_animation, create_bidirectional_transition, create_in_transition, create_out_transition, create_slot, create_ssr_component, current_component, custom_event, debug, destroy_block, destroy_component, destroy_each, detach, dirty_components, each, element, empty, escape, escaped, exclude_internal_props, fix_and_destroy_block, fix_and_outro_and_destroy_block, fix_position, flush, getContext, get_binding_group_value, get_slot_changes, get_slot_context, get_spread_update, get_store_value, globals, group_outros, handle_promise, identity, init, insert, intros, invalid_attribute_name_character, is_client, is_function, is_promise, listen, loop, measure, missing_component, mount_component, noop, not_equal, now, null_to_empty, object_without_properties, onDestroy, onMount, once, outro_and_destroy_block, prevent_default, raf, run, run_all, safe_not_equal, schedule_update, select_multiple_value, select_option, select_options, select_value, setContext, set_attributes, set_current_component, set_custom_element_data, set_data, set_input_type, set_now, set_raf, set_style, space, spread, stop_propagation, subscribe, svg_element, text, tick, time_ranges_to_array, to_number, toggle_class, transition_in, transition_out, update_keyed_each, validate_component, validate_store, xlink_attr };\n","\n\n\n

The random number is {randomNumber}

\n

The calculated number is {calculatedNumber}

\n\n","\n\n

Hello {name}!

\n\n 16 |

The random number is {randomNumber}

17 |

The calculated number is {calculatedNumber}

18 | 19 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte' 2 | 3 | var app = new App({ 4 | target: document.getElementById('svelte-admin') 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /svelteplugin.php: -------------------------------------------------------------------------------- 1 | init_actions(); 32 | } 33 | public function init_actions() { 34 | add_action( 'admin_enqueue_scripts', [$this, 'svelte_scripts'] ); 35 | add_action( 'admin_menu', [$this, 'my_admin_menu'] ); 36 | 37 | } 38 | 39 | 40 | public function my_admin_menu() { 41 | add_menu_page( 42 | 'Svelte in Admin', // $page_title 43 | 'Svelte in Admin', // $menu_title 44 | 'manage_options', // $capability 45 | 'svelte-plugin-in-admin.php', // $menu_slug 46 | [$this, 'svelte_plugin_callback'], // callback function 47 | 'dashicons-tickets', //dashboard icon 48 | 6 // position 49 | ); 50 | } 51 | 52 | public function svelte_scripts($hook) { 53 | if('toplevel_page_svelte-plugin-in-admin' != $hook) 54 | return; 55 | 56 | wp_enqueue_script( 'svelteJS', plugins_url('/dist/bundle.js', __FILE__), [], $this->set_version(), true ); 57 | wp_enqueue_style( 'svelte-dist-style', plugins_url('/dist/bundle.css', __FILE__), '', $this->set_version() ); 58 | } 59 | 60 | public function set_version() { 61 | $date = new DateTime(); 62 | return $date->getTimestamp(); 63 | } 64 | 65 | public function svelte_plugin_callback(){ 66 | ?> 67 |
68 |

Welcome To Svelte inside the admin

69 |
70 |
71 |