(function(l, r) { if (!l || l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (self.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(self.document); var app = (function () { 'use strict'; function noop() { } function add_location(element, file, line, column, char) { element.__svelte_meta = { loc: { file, line, column, char } }; } function run(fn) { return fn(); } function blank_object() { return Object.create(null); } function run_all(fns) { fns.forEach(run); } function is_function(thing) { return typeof thing === 'function'; } function safe_not_equal(a, b) { return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function'); } function is_empty(obj) { return Object.keys(obj).length === 0; } function append(target, node) { target.appendChild(node); } function insert(target, node, anchor) { target.insertBefore(node, anchor || null); } function detach(node) { node.parentNode.removeChild(node); } function element(name) { return document.createElement(name); } function text(data) { return document.createTextNode(data); } function space() { return text(' '); } function listen(node, event, handler, options) { node.addEventListener(event, handler, options); return () => node.removeEventListener(event, handler, options); } function attr(node, attribute, value) { if (value == null) node.removeAttribute(attribute); else if (node.getAttribute(attribute) !== value) node.setAttribute(attribute, value); } function children(element) { return Array.from(element.childNodes); } function set_input_value(input, value) { input.value = value == null ? '' : value; } function toggle_class(element, name, toggle) { element.classList[toggle ? 'add' : 'remove'](name); } function custom_event(type, detail, bubbles = false) { const e = document.createEvent('CustomEvent'); e.initCustomEvent(type, bubbles, false, detail); return e; } let current_component; function set_current_component(component) { current_component = component; } const dirty_components = []; const binding_callbacks = []; const render_callbacks = []; const flush_callbacks = []; const resolved_promise = Promise.resolve(); let update_scheduled = false; function schedule_update() { if (!update_scheduled) { update_scheduled = true; resolved_promise.then(flush); } } function add_render_callback(fn) { render_callbacks.push(fn); } // flush() calls callbacks in this order: // 1. All beforeUpdate callbacks, in order: parents before children // 2. All bind:this callbacks, in reverse order: children before parents. // 3. All afterUpdate callbacks, in order: parents before children. EXCEPT // for afterUpdates called during the initial onMount, which are called in // reverse order: children before parents. // Since callbacks might update component values, which could trigger another // call to flush(), the following steps guard against this: // 1. During beforeUpdate, any updated components will be added to the // dirty_components array and will cause a reentrant call to flush(). Because // the flush index is kept outside the function, the reentrant call will pick // up where the earlier call left off and go through all dirty components. The // current_component value is saved and restored so that the reentrant call will // not interfere with the "parent" flush() call. // 2. bind:this callbacks cannot trigger new flush() calls. // 3. During afterUpdate, any updated components will NOT have their afterUpdate // callback called a second time; the seen_callbacks set, outside the flush() // function, guarantees this behavior. const seen_callbacks = new Set(); let flushidx = 0; // Do *not* move this inside the flush() function function flush() { const saved_component = current_component; do { // first, call beforeUpdate functions // and update components while (flushidx < dirty_components.length) { const component = dirty_components[flushidx]; flushidx++; set_current_component(component); update(component.$$); } set_current_component(null); dirty_components.length = 0; flushidx = 0; while (binding_callbacks.length) binding_callbacks.pop()(); // then, once components are updated, call // afterUpdate functions. This may cause // subsequent updates... for (let i = 0; i < render_callbacks.length; i += 1) { const callback = render_callbacks[i]; if (!seen_callbacks.has(callback)) { // ...so guard against infinite loops seen_callbacks.add(callback); callback(); } } render_callbacks.length = 0; } while (dirty_components.length); while (flush_callbacks.length) { flush_callbacks.pop()(); } update_scheduled = false; seen_callbacks.clear(); set_current_component(saved_component); } function update($$) { if ($$.fragment !== null) { $$.update(); run_all($$.before_update); const dirty = $$.dirty; $$.dirty = [-1]; $$.fragment && $$.fragment.p($$.ctx, dirty); $$.after_update.forEach(add_render_callback); } } const outroing = new Set(); function transition_in(block, local) { if (block && block.i) { outroing.delete(block); block.i(local); } } function mount_component(component, target, anchor, customElement) { const { fragment, on_mount, on_destroy, after_update } = component.$$; fragment && fragment.m(target, anchor); if (!customElement) { // onMount happens before the initial afterUpdate add_render_callback(() => { const new_on_destroy = on_mount.map(run).filter(is_function); if (on_destroy) { on_destroy.push(...new_on_destroy); } else { // Edge case - component was destroyed immediately, // most likely as a result of a binding initialising run_all(new_on_destroy); } component.$$.on_mount = []; }); } after_update.forEach(add_render_callback); } function destroy_component(component, detaching) { const $$ = component.$$; if ($$.fragment !== null) { run_all($$.on_destroy); $$.fragment && $$.fragment.d(detaching); // TODO null out other refs, including component.$$ (but need to // preserve final state?) $$.on_destroy = $$.fragment = null; $$.ctx = []; } } function make_dirty(component, i) { if (component.$$.dirty[0] === -1) { dirty_components.push(component); schedule_update(); component.$$.dirty.fill(0); } component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31)); } function init(component, options, instance, create_fragment, not_equal, props, append_styles, dirty = [-1]) { const parent_component = current_component; set_current_component(component); const $$ = component.$$ = { fragment: null, ctx: null, // state props, update: noop, not_equal, bound: blank_object(), // lifecycle on_mount: [], on_destroy: [], on_disconnect: [], before_update: [], after_update: [], context: new Map(options.context || (parent_component ? parent_component.$$.context : [])), // everything else callbacks: blank_object(), dirty, skip_bound: false, root: options.target || parent_component.$$.root }; append_styles && append_styles($$.root); let ready = false; $$.ctx = instance ? instance(component, options.props || {}, (i, ret, ...rest) => { const value = rest.length ? rest[0] : ret; if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) { if (!$$.skip_bound && $$.bound[i]) $$.bound[i](value); if (ready) make_dirty(component, i); } return ret; }) : []; $$.update(); ready = true; run_all($$.before_update); // `false` as a special case of no DOM component $$.fragment = create_fragment ? create_fragment($$.ctx) : false; if (options.target) { if (options.hydrate) { const nodes = children(options.target); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion $$.fragment && $$.fragment.l(nodes); nodes.forEach(detach); } else { // eslint-disable-next-line @typescript-eslint/no-non-null-assertion $$.fragment && $$.fragment.c(); } if (options.intro) transition_in(component.$$.fragment); mount_component(component, options.target, options.anchor, options.customElement); flush(); } set_current_component(parent_component); } /** * Base class for Svelte components. Used when dev=false. */ class SvelteComponent { $destroy() { destroy_component(this, 1); this.$destroy = noop; } $on(type, callback) { 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; } } } function dispatch_dev(type, detail) { document.dispatchEvent(custom_event(type, Object.assign({ version: '3.47.0' }, detail), true)); } function append_dev(target, node) { dispatch_dev('SvelteDOMInsert', { target, node }); append(target, node); } function insert_dev(target, node, anchor) { dispatch_dev('SvelteDOMInsert', { target, node, anchor }); insert(target, node, anchor); } function detach_dev(node) { dispatch_dev('SvelteDOMRemove', { node }); detach(node); } function listen_dev(node, event, handler, options, has_prevent_default, has_stop_propagation) { const modifiers = options === true ? ['capture'] : options ? Array.from(Object.keys(options)) : []; if (has_prevent_default) modifiers.push('preventDefault'); if (has_stop_propagation) modifiers.push('stopPropagation'); dispatch_dev('SvelteDOMAddEventListener', { node, event, handler, modifiers }); const dispose = listen(node, event, handler, options); return () => { dispatch_dev('SvelteDOMRemoveEventListener', { node, event, handler, modifiers }); dispose(); }; } function attr_dev(node, attribute, value) { attr(node, attribute, value); if (value == null) dispatch_dev('SvelteDOMRemoveAttribute', { node, attribute }); else dispatch_dev('SvelteDOMSetAttribute', { node, attribute, value }); } function set_data_dev(text, data) { data = '' + data; if (text.wholeText === data) return; dispatch_dev('SvelteDOMSetData', { node: text, data }); text.data = data; } function validate_slots(name, slot, keys) { for (const slot_key of Object.keys(slot)) { if (!~keys.indexOf(slot_key)) { console.warn(`<${name}> received an unexpected slot "${slot_key}".`); } } } /** * Base class for Svelte components with some minor dev-enhancements. Used when dev=true. */ class SvelteComponentDev extends SvelteComponent { constructor(options) { if (!options || (!options.target && !options.$$inline)) { throw new Error("'target' is a required option"); } super(); } $destroy() { super.$destroy(); this.$destroy = () => { console.warn('Component was already destroyed'); // eslint-disable-line no-console }; } $capture_state() { } $inject_state() { } } /* src/App.svelte generated by Svelte v3.47.0 */ const file = "src/App.svelte"; function create_fragment(ctx) { let main; let h1; let t1; let label; let t3; let input; let t4; let p0; let t5; let t6; let textarea; let t7; let div0; let button0; let t9; let button1; let t11; let div1; let p1; let t13; let p2; let t14; let mounted; let dispose; const block = { c: function create() { main = element("main"); h1 = element("h1"); h1.textContent = "secret decoder ring"; t1 = space(); label = element("label"); label.textContent = "Input key:"; t3 = space(); input = element("input"); t4 = space(); p0 = element("p"); t5 = text(/*salphabet*/ ctx[2]); t6 = space(); textarea = element("textarea"); t7 = space(); div0 = element("div"); button0 = element("button"); button0.textContent = "encode"; t9 = space(); button1 = element("button"); button1.textContent = "decode"; t11 = space(); div1 = element("div"); p1 = element("p"); p1.textContent = "The secret answer is..."; t13 = space(); p2 = element("p"); t14 = text(/*answer*/ ctx[4]); attr_dev(h1, "class", "svelte-146lywd"); add_location(h1, file, 27, 1, 656); attr_dev(label, "for", "key"); add_location(label, file, 28, 2, 687); attr_dev(input, "type", "text"); attr_dev(input, "name", "key"); attr_dev(input, "id", "key"); add_location(input, file, 29, 2, 725); attr_dev(p0, "class", "alphabet"); add_location(p0, file, 31, 2, 785); attr_dev(textarea, "rows", "10"); add_location(textarea, file, 33, 2, 824); attr_dev(button0, "class", "svelte-146lywd"); toggle_class(button0, "active", /*encode*/ ctx[0]); add_location(button0, file, 36, 4, 908); attr_dev(button1, "class", "svelte-146lywd"); toggle_class(button1, "active", !/*encode*/ ctx[0]); add_location(button1, file, 37, 4, 978); attr_dev(div0, "class", "buttongroup"); add_location(div0, file, 35, 2, 878); add_location(p1, file, 41, 4, 1082); add_location(p2, file, 42, 4, 1117); attr_dev(div1, "class", "output svelte-146lywd"); add_location(div1, file, 40, 2, 1057); attr_dev(main, "class", "svelte-146lywd"); add_location(main, file, 26, 0, 648); }, l: function claim(nodes) { throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); }, m: function mount(target, anchor) { insert_dev(target, main, anchor); append_dev(main, h1); append_dev(main, t1); append_dev(main, label); append_dev(main, t3); append_dev(main, input); set_input_value(input, /*key*/ ctx[3]); append_dev(main, t4); append_dev(main, p0); append_dev(p0, t5); append_dev(main, t6); append_dev(main, textarea); set_input_value(textarea, /*message*/ ctx[1]); append_dev(main, t7); append_dev(main, div0); append_dev(div0, button0); append_dev(div0, t9); append_dev(div0, button1); append_dev(main, t11); append_dev(main, div1); append_dev(div1, p1); append_dev(div1, t13); append_dev(div1, p2); append_dev(p2, t14); if (!mounted) { dispose = [ listen_dev(input, "input", /*input_input_handler*/ ctx[6]), listen_dev(textarea, "input", /*textarea_input_handler*/ ctx[7]), listen_dev(button0, "click", /*flipper*/ ctx[5], false, false, false), listen_dev(button1, "click", /*flipper*/ ctx[5], false, false, false) ]; mounted = true; } }, p: function update(ctx, [dirty]) { if (dirty & /*key*/ 8 && input.value !== /*key*/ ctx[3]) { set_input_value(input, /*key*/ ctx[3]); } if (dirty & /*salphabet*/ 4) set_data_dev(t5, /*salphabet*/ ctx[2]); if (dirty & /*message*/ 2) { set_input_value(textarea, /*message*/ ctx[1]); } if (dirty & /*encode*/ 1) { toggle_class(button0, "active", /*encode*/ ctx[0]); } if (dirty & /*encode*/ 1) { toggle_class(button1, "active", !/*encode*/ ctx[0]); } if (dirty & /*answer*/ 16) set_data_dev(t14, /*answer*/ ctx[4]); }, i: noop, o: noop, d: function destroy(detaching) { if (detaching) detach_dev(main); mounted = false; run_all(dispose); } }; dispatch_dev("SvelteRegisterBlock", { block, id: create_fragment.name, type: "component", source: "", ctx }); return block; } const alphabet = 'abcdefghijklmnopqrstuvwxyz'; function instance($$self, $$props, $$invalidate) { let key; let salphabet; let answer; let { $$slots: slots = {}, $$scope } = $$props; validate_slots('App', slots, []); const uniq = arr => Array.from(new Set(arr)); let encode = true; let message = 'enter your secret message here'; const flipper = () => { $$invalidate(0, encode = !encode); }; const writable_props = []; Object.keys($$props).forEach(key => { if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(` was created with unknown prop '${key}'`); }); function input_input_handler() { key = this.value; $$invalidate(3, key); } function textarea_input_handler() { message = this.value; $$invalidate(1, message); } $$self.$capture_state = () => ({ uniq, alphabet, encode, message, flipper, salphabet, answer, key }); $$self.$inject_state = $$props => { if ('encode' in $$props) $$invalidate(0, encode = $$props.encode); if ('message' in $$props) $$invalidate(1, message = $$props.message); if ('salphabet' in $$props) $$invalidate(2, salphabet = $$props.salphabet); if ('answer' in $$props) $$invalidate(4, answer = $$props.answer); if ('key' in $$props) $$invalidate(3, key = $$props.key); }; if ($$props && "$$inject" in $$props) { $$self.$inject_state($$props.$$inject); } $$self.$$.update = () => { if ($$self.$$.dirty & /*key*/ 8) { $$invalidate(2, salphabet = uniq(key).join('').replace(/[^a-z]/g, '') + Array.from(alphabet).filter(c => Array.from(key).every(k => k != c)).join('')); } if ($$self.$$.dirty & /*message, encode, salphabet*/ 7) { $$invalidate(4, answer = message.split(' ').map(word => Array.from(word).map(char => char !== ' ' && encode ? salphabet[alphabet.indexOf(char)] : alphabet[salphabet.indexOf(char)]).join('')).join(' ')); } }; $$invalidate(3, key = ''); return [ encode, message, salphabet, key, answer, flipper, input_input_handler, textarea_input_handler ]; } class App extends SvelteComponentDev { constructor(options) { super(options); init(this, options, instance, create_fragment, safe_not_equal, {}); dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "App", options, id: create_fragment.name }); } } const app = new App({ target: document.body, props: { name: 'world' } }); return app; })(); //# sourceMappingURL=bundle.js.map