UNPKG

svelte-viewpoint

Version:

Super tiny, loadable component for SvelteJS with blackjack and data preloading.

1,088 lines (922 loc) 29.5 kB
var viewpoint = (function () { 'use strict'; function noop() {} function assign(tar, src) { // @ts-ignore for (const k in src) tar[k] = src[k]; return tar; } function is_promise(value) { return value && typeof value === 'object' && typeof value.then === 'function'; } 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 create_slot(definition, ctx, $$scope, fn) { if (definition) { const slot_ctx = get_slot_context(definition, ctx, $$scope, fn); return definition[0](slot_ctx); } } function get_slot_context(definition, ctx, $$scope, fn) { return definition[1] && fn ? assign($$scope.ctx.slice(), definition[1](fn(ctx))) : $$scope.ctx; } function get_slot_changes(definition, $$scope, dirty, fn) { if (definition[2] && fn) { const lets = definition[2](fn(dirty)); if ($$scope.dirty === undefined) { return lets; } if (typeof lets === 'object') { const merged = []; const len = Math.max($$scope.dirty.length, lets.length); for (let i = 0; i < len; i += 1) { merged[i] = $$scope.dirty[i] | lets[i]; } return merged; } return $$scope.dirty | lets; } return $$scope.dirty; } function update_slot(slot, slot_definition, ctx, $$scope, dirty, get_slot_changes_fn, get_slot_context_fn) { const slot_changes = get_slot_changes(slot_definition, $$scope, dirty, get_slot_changes_fn); if (slot_changes) { const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn); slot.p(slot_context, slot_changes); } } function exclude_internal_props(props) { const result = {}; for (const k in props) if (k[0] !== '$') result[k] = props[k]; return result; } function compute_rest_props(props, keys) { const rest = {}; keys = new Set(keys); for (const k in props) if (!keys.has(k) && k[0] !== '$') rest[k] = props[k]; return rest; } function insert(target, node, anchor) { target.insertBefore(node, anchor || null); } function detach(node) { node.parentNode.removeChild(node); } function text(data) { return document.createTextNode(data); } function empty() { return text(''); } function children(element) { return Array.from(element.childNodes); } let current_component; function set_current_component(component) { current_component = component; } function get_current_component() { if (!current_component) throw new Error('Function called outside component initialization'); return current_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); } let flushing = false; const seen_callbacks = new Set(); function flush() { if (flushing) return; flushing = true; do { // first, call beforeUpdate functions // and update components for (let i = 0; i < dirty_components.length; i += 1) { const component = dirty_components[i]; set_current_component(component); update(component.$$); } set_current_component(null); dirty_components.length = 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; flushing = false; seen_callbacks.clear(); } 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(); let outros; function group_outros() { outros = { r: 0, c: [], p: outros // parent group }; } function check_outros() { if (!outros.r) { run_all(outros.c); } outros = outros.p; } function transition_in(block, local) { if (block && block.i) { outroing.delete(block); block.i(local); } } function transition_out(block, local, detach, callback) { if (block && block.o) { if (outroing.has(block)) return; outroing.add(block); outros.c.push(() => { outroing.delete(block); if (callback) { if (detach) block.d(1); callback(); } }); block.o(local); } } function handle_promise(promise, info) { const token = info.token = {}; function update(type, index, key, value) { if (info.token !== token) return; info.resolved = value; let child_ctx = info.ctx; if (key !== undefined) { child_ctx = child_ctx.slice(); child_ctx[key] = value; } const block = type && (info.current = type)(child_ctx); let needs_flush = false; if (info.block) { if (info.blocks) { info.blocks.forEach((block, i) => { if (i !== index && block) { group_outros(); transition_out(block, 1, 1, () => { if (info.blocks[i] === block) { info.blocks[i] = null; } }); check_outros(); } }); } else { info.block.d(1); } block.c(); transition_in(block, 1); block.m(info.mount(), info.anchor); needs_flush = true; } info.block = block; if (info.blocks) info.blocks[index] = block; if (needs_flush) { flush(); } } if (is_promise(promise)) { const current_component = get_current_component(); promise.then(value => { set_current_component(current_component); update(info.then, 1, info.value, value); set_current_component(null); }, error => { set_current_component(current_component); update(info.catch, 2, info.error, error); set_current_component(null); if (!info.hasCatch) { throw error; } }); // if we previously had a then/catch block, destroy it if (info.current !== info.pending) { update(info.pending, 0); return true; } } else { if (info.current !== info.then) { update(info.then, 1, info.value, promise); return true; } info.resolved = promise; } } function get_spread_update(levels, updates) { const update = {}; const to_null_out = {}; const accounted_for = { $$scope: 1 }; let i = levels.length; while (i--) { const o = levels[i]; const n = updates[i]; if (n) { for (const key in o) { if (!(key in n)) to_null_out[key] = 1; } for (const key in n) { if (!accounted_for[key]) { update[key] = n[key]; accounted_for[key] = 1; } } levels[i] = n; } else { for (const key in o) { accounted_for[key] = 1; } } } for (const key in to_null_out) { if (!(key in update)) update[key] = undefined; } return update; } function get_spread_object(spread_props) { return typeof spread_props === 'object' && spread_props !== null ? spread_props : {}; } // source: https://html.spec.whatwg.org/multipage/indices.html function create_component(block) { block && block.c(); } 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, 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(parent_component ? parent_component.$$.context : []), // everything else callbacks: blank_object(), dirty, skip_bound: false }; 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; } } } /* src/Viewpoint.svelte generated by Svelte v3.34.0 */ const get_error_slot_changes = dirty => ({ error: dirty & /*$$restProps, load*/ 144 }); const get_error_slot_context = ctx => ({ error: /*error*/ ctx[15] }); const get_loading_slot_changes = dirty => ({}); const get_loading_slot_context = ctx => ({}); const get_waiting_slot_changes = dirty => ({}); const get_waiting_slot_context = ctx => ({}); // (13:0) {:catch error} function create_catch_block(ctx) { let current; const error_slot_template = /*#slots*/ ctx[12].error; const error_slot = create_slot(error_slot_template, ctx, /*$$scope*/ ctx[13], get_error_slot_context); return { c() { if (error_slot) error_slot.c(); }, m(target, anchor) { if (error_slot) { error_slot.m(target, anchor); } current = true; }, p(ctx, dirty) { if (error_slot) { if (error_slot.p && dirty & /*$$scope, $$restProps, load*/ 8336) { update_slot(error_slot, error_slot_template, ctx, /*$$scope*/ ctx[13], dirty, get_error_slot_changes, get_error_slot_context); } } }, i(local) { if (current) return; transition_in(error_slot, local); current = true; }, o(local) { transition_out(error_slot, local); current = false; }, d(detaching) { if (error_slot) error_slot.d(detaching); } }; } // (7:0) {:then comp} function create_then_block(ctx) { let if_block_anchor; let current; let if_block = /*comp*/ ctx[14] && create_if_block_2(ctx); return { c() { if (if_block) if_block.c(); if_block_anchor = empty(); }, m(target, anchor) { if (if_block) if_block.m(target, anchor); insert(target, if_block_anchor, anchor); current = true; }, p(ctx, dirty) { if (/*comp*/ ctx[14]) { if (if_block) { if_block.p(ctx, dirty); if (dirty & /*$$restProps, load*/ 144) { transition_in(if_block, 1); } } else { if_block = create_if_block_2(ctx); if_block.c(); transition_in(if_block, 1); if_block.m(if_block_anchor.parentNode, if_block_anchor); } } else if (if_block) { group_outros(); transition_out(if_block, 1, 1, () => { if_block = null; }); check_outros(); } }, i(local) { if (current) return; transition_in(if_block); current = true; }, o(local) { transition_out(if_block); current = false; }, d(detaching) { if (if_block) if_block.d(detaching); if (detaching) detach(if_block_anchor); } }; } // (8:1) {#if comp} function create_if_block_2(ctx) { let switch_instance; let switch_instance_anchor; let current; const switch_instance_spread_levels = [/*$$restProps*/ ctx[7], /*state*/ ctx[1]]; var switch_value = /*comp*/ ctx[14]; function switch_props(ctx) { let switch_instance_props = { $$slots: { default: [create_default_slot] }, $$scope: { ctx } }; for (let i = 0; i < switch_instance_spread_levels.length; i += 1) { switch_instance_props = assign(switch_instance_props, switch_instance_spread_levels[i]); } return { props: switch_instance_props }; } if (switch_value) { switch_instance = new switch_value(switch_props(ctx)); } return { c() { if (switch_instance) create_component(switch_instance.$$.fragment); switch_instance_anchor = empty(); }, m(target, anchor) { if (switch_instance) { mount_component(switch_instance, target, anchor); } insert(target, switch_instance_anchor, anchor); current = true; }, p(ctx, dirty) { const switch_instance_changes = (dirty & /*$$restProps, state*/ 130) ? get_spread_update(switch_instance_spread_levels, [ dirty & /*$$restProps*/ 128 && get_spread_object(/*$$restProps*/ ctx[7]), dirty & /*state*/ 2 && get_spread_object(/*state*/ ctx[1]) ]) : {}; if (dirty & /*$$scope*/ 8192) { switch_instance_changes.$$scope = { dirty, ctx }; } if (switch_value !== (switch_value = /*comp*/ ctx[14])) { if (switch_instance) { group_outros(); const old_component = switch_instance; transition_out(old_component.$$.fragment, 1, 0, () => { destroy_component(old_component, 1); }); check_outros(); } if (switch_value) { switch_instance = new switch_value(switch_props(ctx)); create_component(switch_instance.$$.fragment); transition_in(switch_instance.$$.fragment, 1); mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor); } else { switch_instance = null; } } else if (switch_value) { switch_instance.$set(switch_instance_changes); } }, i(local) { if (current) return; if (switch_instance) transition_in(switch_instance.$$.fragment, local); current = true; }, o(local) { if (switch_instance) transition_out(switch_instance.$$.fragment, local); current = false; }, d(detaching) { if (detaching) detach(switch_instance_anchor); if (switch_instance) destroy_component(switch_instance, detaching); } }; } // (9:2) <svelte:component this={comp} {...$$restProps} {...state}> function create_default_slot(ctx) { let current; const default_slot_template = /*#slots*/ ctx[12].default; const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[13], null); return { c() { if (default_slot) default_slot.c(); }, m(target, anchor) { if (default_slot) { default_slot.m(target, anchor); } current = true; }, p(ctx, dirty) { if (default_slot) { if (default_slot.p && dirty & /*$$scope*/ 8192) { update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[13], dirty, null, null); } } }, i(local) { if (current) return; transition_in(default_slot, local); current = true; }, o(local) { transition_out(default_slot, local); current = false; }, d(detaching) { if (default_slot) default_slot.d(detaching); } }; } // (1:77) {#if timeout && !timeoutTimer} function create_pending_block(ctx) { let current_block_type_index; let if_block; let if_block_anchor; let current; const if_block_creators = [create_if_block, create_if_block_1]; const if_blocks = []; function select_block_type(ctx, dirty) { if (/*timeout*/ ctx[0] && !/*timeoutTimer*/ ctx[2]) return 0; if (!/*delayTimer*/ ctx[3]) return 1; return -1; } if (~(current_block_type_index = select_block_type(ctx))) { if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); } return { c() { if (if_block) if_block.c(); if_block_anchor = empty(); }, m(target, anchor) { if (~current_block_type_index) { if_blocks[current_block_type_index].m(target, anchor); } insert(target, if_block_anchor, anchor); current = true; }, p(ctx, dirty) { let previous_block_index = current_block_type_index; current_block_type_index = select_block_type(ctx); if (current_block_type_index === previous_block_index) { if (~current_block_type_index) { if_blocks[current_block_type_index].p(ctx, dirty); } } else { if (if_block) { group_outros(); transition_out(if_blocks[previous_block_index], 1, 1, () => { if_blocks[previous_block_index] = null; }); check_outros(); } if (~current_block_type_index) { if_block = if_blocks[current_block_type_index]; if (!if_block) { if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); if_block.c(); } else { if_block.p(ctx, dirty); } transition_in(if_block, 1); if_block.m(if_block_anchor.parentNode, if_block_anchor); } else { if_block = null; } } }, i(local) { if (current) return; transition_in(if_block); current = true; }, o(local) { transition_out(if_block); current = false; }, d(detaching) { if (~current_block_type_index) { if_blocks[current_block_type_index].d(detaching); } if (detaching) detach(if_block_anchor); } }; } // (4:23) function create_if_block_1(ctx) { let current; const loading_slot_template = /*#slots*/ ctx[12].loading; const loading_slot = create_slot(loading_slot_template, ctx, /*$$scope*/ ctx[13], get_loading_slot_context); return { c() { if (loading_slot) loading_slot.c(); }, m(target, anchor) { if (loading_slot) { loading_slot.m(target, anchor); } current = true; }, p(ctx, dirty) { if (loading_slot) { if (loading_slot.p && dirty & /*$$scope*/ 8192) { update_slot(loading_slot, loading_slot_template, ctx, /*$$scope*/ ctx[13], dirty, get_loading_slot_changes, get_loading_slot_context); } } }, i(local) { if (current) return; transition_in(loading_slot, local); current = true; }, o(local) { transition_out(loading_slot, local); current = false; }, d(detaching) { if (loading_slot) loading_slot.d(detaching); } }; } // (2:1) {#if timeout && !timeoutTimer} function create_if_block(ctx) { let current; const waiting_slot_template = /*#slots*/ ctx[12].waiting; const waiting_slot = create_slot(waiting_slot_template, ctx, /*$$scope*/ ctx[13], get_waiting_slot_context); return { c() { if (waiting_slot) waiting_slot.c(); }, m(target, anchor) { if (waiting_slot) { waiting_slot.m(target, anchor); } current = true; }, p(ctx, dirty) { if (waiting_slot) { if (waiting_slot.p && dirty & /*$$scope*/ 8192) { update_slot(waiting_slot, waiting_slot_template, ctx, /*$$scope*/ ctx[13], dirty, get_waiting_slot_changes, get_waiting_slot_context); } } }, i(local) { if (current) return; transition_in(waiting_slot, local); current = true; }, o(local) { transition_out(waiting_slot, local); current = false; }, d(detaching) { if (waiting_slot) waiting_slot.d(detaching); } }; } function create_fragment(ctx) { let await_block_anchor; let promise; let current; let info = { ctx, current: null, token: null, hasCatch: true, pending: create_pending_block, then: create_then_block, catch: create_catch_block, value: 14, error: 15, blocks: [,,,] }; handle_promise(promise = (/*$$restProps*/ ctx[7], Promise.resolve().then(/*wait*/ ctx[6]).then(/*load*/ ctx[4]).then(/*preload*/ ctx[5])), info); return { c() { await_block_anchor = empty(); info.block.c(); }, m(target, anchor) { insert(target, await_block_anchor, anchor); info.block.m(target, info.anchor = anchor); info.mount = () => await_block_anchor.parentNode; info.anchor = await_block_anchor; current = true; }, p(new_ctx, [dirty]) { ctx = new_ctx; info.ctx = ctx; if (dirty & /*$$restProps, load*/ 144 && promise !== (promise = (/*$$restProps*/ ctx[7], Promise.resolve().then(/*wait*/ ctx[6]).then(/*load*/ ctx[4]).then(/*preload*/ ctx[5]))) && handle_promise(promise, info)) ; else { const child_ctx = ctx.slice(); child_ctx[14] = child_ctx[15] = info.resolved; info.block.p(child_ctx, dirty); } }, i(local) { if (current) return; transition_in(info.block); current = true; }, o(local) { for (let i = 0; i < 3; i += 1) { const block = info.blocks[i]; transition_out(block); } current = false; }, d(detaching) { if (detaching) detach(await_block_anchor); info.block.d(detaching); info.token = null; info = null; } }; } function instance($$self, $$props, $$invalidate) { let load; const omit_props_names = ["component","preloading","delay","timeout","abort"]; let $$restProps = compute_rest_props($$props, omit_props_names); let { $$slots: slots = {}, $$scope } = $$props; let { component = null } = $$props, { preloading = true } = $$props, state = null, timeoutTimer, delayTimer, { delay = 200 } = $$props, { timeout = 0 } = $$props, { abort = 0 } = $$props; function preload(m) { return m && Promise.resolve(preloading && typeof m.preload === "function" ? m.preload($$restProps) : undefined).then((data = {}) => { $$invalidate(1, state = data); return m.default || m; }); } function wait() { delay && $$invalidate(3, delayTimer = setTimeout( () => { $$invalidate(3, delayTimer = clearTimeout(delayTimer)); }, delay )); timeout && $$invalidate(2, timeoutTimer = setTimeout( () => { $$invalidate(2, timeoutTimer = clearTimeout(timeoutTimer)); }, timeout )); } $$self.$$set = $$new_props => { $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)); $$invalidate(7, $$restProps = compute_rest_props($$props, omit_props_names)); if ("component" in $$new_props) $$invalidate(8, component = $$new_props.component); if ("preloading" in $$new_props) $$invalidate(9, preloading = $$new_props.preloading); if ("delay" in $$new_props) $$invalidate(10, delay = $$new_props.delay); if ("timeout" in $$new_props) $$invalidate(0, timeout = $$new_props.timeout); if ("abort" in $$new_props) $$invalidate(11, abort = $$new_props.abort); if ("$$scope" in $$new_props) $$invalidate(13, $$scope = $$new_props.$$scope); }; $$self.$$.update = () => { if ($$self.$$.dirty & /*component, abort*/ 2304) { $$invalidate(4, load = function () { return new Promise((resolve, reject) => { let abortTimer; Promise.resolve(typeof component === "function" && !(/^\s*class\s+/).test(component.toString()) ? component() : component).then(m => { clearTimeout(abortTimer); // class, not a plain function resolve(m); }); abort && (abortTimer = setTimeout( () => { reject(new Error("Aborted by timeout.")); }, abort )); }); }); } }; return [ timeout, state, timeoutTimer, delayTimer, load, preload, wait, $$restProps, component, preloading, delay, abort, slots, $$scope ]; } class Viewpoint extends SvelteComponent { constructor(options) { super(); init(this, options, instance, create_fragment, safe_not_equal, { component: 8, preloading: 9, delay: 10, timeout: 0, abort: 11 }); } } return Viewpoint; }());