|
|
|
|
@ -1,4 +1,13 @@
|
|
|
|
|
import { custom_event, append, append_hydration, insert, insert_hydration, detach, listen, attr } from './dom';
|
|
|
|
|
import {
|
|
|
|
|
custom_event,
|
|
|
|
|
append,
|
|
|
|
|
append_hydration,
|
|
|
|
|
insert,
|
|
|
|
|
insert_hydration,
|
|
|
|
|
detach,
|
|
|
|
|
listen,
|
|
|
|
|
attr
|
|
|
|
|
} from './dom';
|
|
|
|
|
import { SvelteComponent } from './Component';
|
|
|
|
|
import { is_void } from '../../shared/utils/names';
|
|
|
|
|
import { contenteditable_truthy_values } from './utils';
|
|
|
|
|
@ -7,23 +16,25 @@ import { contenteditable_truthy_values } from './utils';
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
export function dispatch_dev(type, detail) {
|
|
|
|
|
document.dispatchEvent(custom_event(type, { version: '__VERSION__', ...detail }, { bubbles: true }));
|
|
|
|
|
document.dispatchEvent(
|
|
|
|
|
custom_event(type, { version: '__VERSION__', ...detail }, { bubbles: true })
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
/** @param {Node} target
|
|
|
|
|
* @param {Node} node
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
export function append_dev(target, node) {
|
|
|
|
|
dispatch_dev('SvelteDOMInsert', { target, node });
|
|
|
|
|
append(target, node);
|
|
|
|
|
dispatch_dev('SvelteDOMInsert', { target, node });
|
|
|
|
|
append(target, node);
|
|
|
|
|
}
|
|
|
|
|
/** @param {Node} target
|
|
|
|
|
* @param {Node} node
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
export function append_hydration_dev(target, node) {
|
|
|
|
|
dispatch_dev('SvelteDOMInsert', { target, node });
|
|
|
|
|
append_hydration(target, node);
|
|
|
|
|
dispatch_dev('SvelteDOMInsert', { target, node });
|
|
|
|
|
append_hydration(target, node);
|
|
|
|
|
}
|
|
|
|
|
/** @param {Node} target
|
|
|
|
|
* @param {Node} node
|
|
|
|
|
@ -31,8 +42,8 @@ export function append_hydration_dev(target, node) {
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
export function insert_dev(target, node, anchor) {
|
|
|
|
|
dispatch_dev('SvelteDOMInsert', { target, node, anchor });
|
|
|
|
|
insert(target, node, anchor);
|
|
|
|
|
dispatch_dev('SvelteDOMInsert', { target, node, anchor });
|
|
|
|
|
insert(target, node, anchor);
|
|
|
|
|
}
|
|
|
|
|
/** @param {Node} target
|
|
|
|
|
* @param {Node} node
|
|
|
|
|
@ -40,40 +51,40 @@ export function insert_dev(target, node, anchor) {
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
export function insert_hydration_dev(target, node, anchor) {
|
|
|
|
|
dispatch_dev('SvelteDOMInsert', { target, node, anchor });
|
|
|
|
|
insert_hydration(target, node, anchor);
|
|
|
|
|
dispatch_dev('SvelteDOMInsert', { target, node, anchor });
|
|
|
|
|
insert_hydration(target, node, anchor);
|
|
|
|
|
}
|
|
|
|
|
/** @param {Node} node
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
export function detach_dev(node) {
|
|
|
|
|
dispatch_dev('SvelteDOMRemove', { node });
|
|
|
|
|
detach(node);
|
|
|
|
|
dispatch_dev('SvelteDOMRemove', { node });
|
|
|
|
|
detach(node);
|
|
|
|
|
}
|
|
|
|
|
/** @param {Node} before
|
|
|
|
|
* @param {Node} after
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
export function detach_between_dev(before, after) {
|
|
|
|
|
while (before.nextSibling && before.nextSibling !== after) {
|
|
|
|
|
detach_dev(before.nextSibling);
|
|
|
|
|
}
|
|
|
|
|
while (before.nextSibling && before.nextSibling !== after) {
|
|
|
|
|
detach_dev(before.nextSibling);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/** @param {Node} after
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
export function detach_before_dev(after) {
|
|
|
|
|
while (after.previousSibling) {
|
|
|
|
|
detach_dev(after.previousSibling);
|
|
|
|
|
}
|
|
|
|
|
while (after.previousSibling) {
|
|
|
|
|
detach_dev(after.previousSibling);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/** @param {Node} before
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
export function detach_after_dev(before) {
|
|
|
|
|
while (before.nextSibling) {
|
|
|
|
|
detach_dev(before.nextSibling);
|
|
|
|
|
}
|
|
|
|
|
while (before.nextSibling) {
|
|
|
|
|
detach_dev(before.nextSibling);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/** @param {Node} node
|
|
|
|
|
* @param {string} event
|
|
|
|
|
@ -84,20 +95,26 @@ export function detach_after_dev(before) {
|
|
|
|
|
* @param {boolean} has_stop_immediate_propagation
|
|
|
|
|
* @returns {() => void}
|
|
|
|
|
*/
|
|
|
|
|
export function listen_dev(node, event, handler, options, has_prevent_default, has_stop_propagation, has_stop_immediate_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');
|
|
|
|
|
if (has_stop_immediate_propagation)
|
|
|
|
|
modifiers.push('stopImmediatePropagation');
|
|
|
|
|
dispatch_dev('SvelteDOMAddEventListener', { node, event, handler, modifiers });
|
|
|
|
|
const dispose = listen(node, event, handler, options);
|
|
|
|
|
return () => {
|
|
|
|
|
dispatch_dev('SvelteDOMRemoveEventListener', { node, event, handler, modifiers });
|
|
|
|
|
dispose();
|
|
|
|
|
};
|
|
|
|
|
export function listen_dev(
|
|
|
|
|
node,
|
|
|
|
|
event,
|
|
|
|
|
handler,
|
|
|
|
|
options,
|
|
|
|
|
has_prevent_default,
|
|
|
|
|
has_stop_propagation,
|
|
|
|
|
has_stop_immediate_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');
|
|
|
|
|
if (has_stop_immediate_propagation) modifiers.push('stopImmediatePropagation');
|
|
|
|
|
dispatch_dev('SvelteDOMAddEventListener', { node, event, handler, modifiers });
|
|
|
|
|
const dispose = listen(node, event, handler, options);
|
|
|
|
|
return () => {
|
|
|
|
|
dispatch_dev('SvelteDOMRemoveEventListener', { node, event, handler, modifiers });
|
|
|
|
|
dispose();
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
/** @param {Element} node
|
|
|
|
|
* @param {string} attribute
|
|
|
|
|
@ -105,11 +122,9 @@ export function listen_dev(node, event, handler, options, has_prevent_default, h
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
export 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 });
|
|
|
|
|
attr(node, attribute, value);
|
|
|
|
|
if (value == null) dispatch_dev('SvelteDOMRemoveAttribute', { node, attribute });
|
|
|
|
|
else dispatch_dev('SvelteDOMSetAttribute', { node, attribute, value });
|
|
|
|
|
}
|
|
|
|
|
/** @param {Element} node
|
|
|
|
|
* @param {string} property
|
|
|
|
|
@ -117,8 +132,8 @@ export function attr_dev(node, attribute, value) {
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
export function prop_dev(node, property, value) {
|
|
|
|
|
node[property] = value;
|
|
|
|
|
dispatch_dev('SvelteDOMSetProperty', { node, property, value });
|
|
|
|
|
node[property] = value;
|
|
|
|
|
dispatch_dev('SvelteDOMSetProperty', { node, property, value });
|
|
|
|
|
}
|
|
|
|
|
/** @param {HTMLElement} node
|
|
|
|
|
* @param {string} property
|
|
|
|
|
@ -126,30 +141,28 @@ export function prop_dev(node, property, value) {
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
export function dataset_dev(node, property, value) {
|
|
|
|
|
node.dataset[property] = value;
|
|
|
|
|
dispatch_dev('SvelteDOMSetDataset', { node, property, value });
|
|
|
|
|
node.dataset[property] = value;
|
|
|
|
|
dispatch_dev('SvelteDOMSetDataset', { node, property, value });
|
|
|
|
|
}
|
|
|
|
|
/** @param {Text} text
|
|
|
|
|
* @param {unknown} data
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
export function set_data_dev(text, data) {
|
|
|
|
|
data = '' + data;
|
|
|
|
|
if (text.data === data)
|
|
|
|
|
return;
|
|
|
|
|
dispatch_dev('SvelteDOMSetData', { node: text, data });
|
|
|
|
|
text.data = data;
|
|
|
|
|
data = '' + data;
|
|
|
|
|
if (text.data === data) return;
|
|
|
|
|
dispatch_dev('SvelteDOMSetData', { node: text, data });
|
|
|
|
|
text.data = data;
|
|
|
|
|
}
|
|
|
|
|
/** @param {Text} text
|
|
|
|
|
* @param {unknown} data
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
export function set_data_contenteditable_dev(text, data) {
|
|
|
|
|
data = '' + data;
|
|
|
|
|
if (text.wholeText === data)
|
|
|
|
|
return;
|
|
|
|
|
dispatch_dev('SvelteDOMSetData', { node: text, data });
|
|
|
|
|
text.data = data;
|
|
|
|
|
data = '' + data;
|
|
|
|
|
if (text.wholeText === data) return;
|
|
|
|
|
dispatch_dev('SvelteDOMSetData', { node: text, data });
|
|
|
|
|
text.data = data;
|
|
|
|
|
}
|
|
|
|
|
/** @param {Text} text
|
|
|
|
|
* @param {unknown} data
|
|
|
|
|
@ -157,67 +170,64 @@ export function set_data_contenteditable_dev(text, data) {
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
export function set_data_maybe_contenteditable_dev(text, data, attr_value) {
|
|
|
|
|
if (~contenteditable_truthy_values.indexOf(attr_value)) {
|
|
|
|
|
set_data_contenteditable_dev(text, data);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
set_data_dev(text, data);
|
|
|
|
|
}
|
|
|
|
|
if (~contenteditable_truthy_values.indexOf(attr_value)) {
|
|
|
|
|
set_data_contenteditable_dev(text, data);
|
|
|
|
|
} else {
|
|
|
|
|
set_data_dev(text, data);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/** @returns {void} */
|
|
|
|
|
export function validate_each_argument(arg) {
|
|
|
|
|
if (typeof arg !== 'string' && !(arg && typeof arg === 'object' && 'length' in arg)) {
|
|
|
|
|
let msg = '{#each} only iterates over array-like objects.';
|
|
|
|
|
if (typeof Symbol === 'function' && arg && Symbol.iterator in arg) {
|
|
|
|
|
msg += ' You can use a spread to convert this iterable into an array.';
|
|
|
|
|
}
|
|
|
|
|
throw new Error(msg);
|
|
|
|
|
}
|
|
|
|
|
if (typeof arg !== 'string' && !(arg && typeof arg === 'object' && 'length' in arg)) {
|
|
|
|
|
let msg = '{#each} only iterates over array-like objects.';
|
|
|
|
|
if (typeof Symbol === 'function' && arg && Symbol.iterator in arg) {
|
|
|
|
|
msg += ' You can use a spread to convert this iterable into an array.';
|
|
|
|
|
}
|
|
|
|
|
throw new Error(msg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/** @returns {void} */
|
|
|
|
|
export 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}".`);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
for (const slot_key of Object.keys(slot)) {
|
|
|
|
|
if (!~keys.indexOf(slot_key)) {
|
|
|
|
|
console.warn(`<${name}> received an unexpected slot "${slot_key}".`);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/** @param {unknown} tag
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
export function validate_dynamic_element(tag) {
|
|
|
|
|
const is_string = typeof tag === 'string';
|
|
|
|
|
if (tag && !is_string) {
|
|
|
|
|
throw new Error('<svelte:element> expects "this" attribute to be a string.');
|
|
|
|
|
}
|
|
|
|
|
const is_string = typeof tag === 'string';
|
|
|
|
|
if (tag && !is_string) {
|
|
|
|
|
throw new Error('<svelte:element> expects "this" attribute to be a string.');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/** @param {undefined | string} tag
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
export function validate_void_dynamic_element(tag) {
|
|
|
|
|
if (tag && is_void(tag)) {
|
|
|
|
|
console.warn(`<svelte:element this="${tag}"> is self-closing and cannot have content.`);
|
|
|
|
|
}
|
|
|
|
|
if (tag && is_void(tag)) {
|
|
|
|
|
console.warn(`<svelte:element this="${tag}"> is self-closing and cannot have content.`);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/** @returns {any} */
|
|
|
|
|
export function construct_svelte_component_dev(component, props) {
|
|
|
|
|
const error_message = 'this={...} of <svelte:component> should specify a Svelte component.';
|
|
|
|
|
try {
|
|
|
|
|
const instance = new component(props);
|
|
|
|
|
if (!instance.$$ || !instance.$set || !instance.$on || !instance.$destroy) {
|
|
|
|
|
throw new Error(error_message);
|
|
|
|
|
}
|
|
|
|
|
return instance;
|
|
|
|
|
}
|
|
|
|
|
catch (err) {
|
|
|
|
|
const { message } = err;
|
|
|
|
|
if (typeof message === 'string' && message.indexOf('is not a constructor') !== -1) {
|
|
|
|
|
throw new Error(error_message);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
throw err;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const error_message = 'this={...} of <svelte:component> should specify a Svelte component.';
|
|
|
|
|
try {
|
|
|
|
|
const instance = new component(props);
|
|
|
|
|
if (!instance.$$ || !instance.$set || !instance.$on || !instance.$destroy) {
|
|
|
|
|
throw new Error(error_message);
|
|
|
|
|
}
|
|
|
|
|
return instance;
|
|
|
|
|
} catch (err) {
|
|
|
|
|
const { message } = err;
|
|
|
|
|
if (typeof message === 'string' && message.indexOf('is not a constructor') !== -1) {
|
|
|
|
|
throw new Error(error_message);
|
|
|
|
|
} else {
|
|
|
|
|
throw err;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/**
|
|
|
|
|
* Base class for Svelte components with some minor dev-enhancements. Used when dev=true.
|
|
|
|
|
@ -245,62 +255,60 @@ export function construct_svelte_component_dev(component, props) {
|
|
|
|
|
* @extends SvelteComponent
|
|
|
|
|
*/
|
|
|
|
|
export class SvelteComponentDev extends SvelteComponent {
|
|
|
|
|
/**
|
|
|
|
|
* @private
|
|
|
|
|
* For type checking capabilities only.
|
|
|
|
|
* Does not exist at runtime.
|
|
|
|
|
* ### DO NOT USE!
|
|
|
|
|
*/
|
|
|
|
|
$$prop_def = undefined;
|
|
|
|
|
/**
|
|
|
|
|
* @private
|
|
|
|
|
* For type checking capabilities only.
|
|
|
|
|
* Does not exist at runtime.
|
|
|
|
|
* ### DO NOT USE!
|
|
|
|
|
*/
|
|
|
|
|
$$events_def = undefined;
|
|
|
|
|
/**
|
|
|
|
|
* @private
|
|
|
|
|
* For type checking capabilities only.
|
|
|
|
|
* Does not exist at runtime.
|
|
|
|
|
* ### DO NOT USE!
|
|
|
|
|
*/
|
|
|
|
|
$$slot_def = undefined;
|
|
|
|
|
constructor(options) {
|
|
|
|
|
if (!options || (!options.target && !options.$$inline)) {
|
|
|
|
|
throw new Error("'target' is a required option");
|
|
|
|
|
}
|
|
|
|
|
super();
|
|
|
|
|
}
|
|
|
|
|
/** @returns {void} */
|
|
|
|
|
$destroy() {
|
|
|
|
|
super.$destroy();
|
|
|
|
|
this.$destroy = () => {
|
|
|
|
|
console.warn('Component was already destroyed'); // eslint-disable-line no-console
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
/** @returns {void} */
|
|
|
|
|
$capture_state() { }
|
|
|
|
|
/** @returns {void} */
|
|
|
|
|
$inject_state() { }
|
|
|
|
|
/**
|
|
|
|
|
* @private
|
|
|
|
|
* For type checking capabilities only.
|
|
|
|
|
* Does not exist at runtime.
|
|
|
|
|
* ### DO NOT USE!
|
|
|
|
|
*/
|
|
|
|
|
$$prop_def = undefined;
|
|
|
|
|
/**
|
|
|
|
|
* @private
|
|
|
|
|
* For type checking capabilities only.
|
|
|
|
|
* Does not exist at runtime.
|
|
|
|
|
* ### DO NOT USE!
|
|
|
|
|
*/
|
|
|
|
|
$$events_def = undefined;
|
|
|
|
|
/**
|
|
|
|
|
* @private
|
|
|
|
|
* For type checking capabilities only.
|
|
|
|
|
* Does not exist at runtime.
|
|
|
|
|
* ### DO NOT USE!
|
|
|
|
|
*/
|
|
|
|
|
$$slot_def = undefined;
|
|
|
|
|
constructor(options) {
|
|
|
|
|
if (!options || (!options.target && !options.$$inline)) {
|
|
|
|
|
throw new Error("'target' is a required option");
|
|
|
|
|
}
|
|
|
|
|
super();
|
|
|
|
|
}
|
|
|
|
|
/** @returns {void} */
|
|
|
|
|
$destroy() {
|
|
|
|
|
super.$destroy();
|
|
|
|
|
this.$destroy = () => {
|
|
|
|
|
console.warn('Component was already destroyed'); // eslint-disable-line no-console
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
/** @returns {void} */
|
|
|
|
|
$capture_state() {}
|
|
|
|
|
/** @returns {void} */
|
|
|
|
|
$inject_state() {}
|
|
|
|
|
}
|
|
|
|
|
/**
|
|
|
|
|
* @deprecated Use `SvelteComponent` instead. See PR for more information: https://github.com/sveltejs/svelte/pull/8512
|
|
|
|
|
* @extends SvelteComponentDev<Props, Events, Slots>
|
|
|
|
|
*/
|
|
|
|
|
export class SvelteComponentTyped extends SvelteComponentDev {
|
|
|
|
|
}
|
|
|
|
|
export class SvelteComponentTyped extends SvelteComponentDev {}
|
|
|
|
|
/** @returns {() => void} */
|
|
|
|
|
export function loop_guard(timeout) {
|
|
|
|
|
const start = Date.now();
|
|
|
|
|
return () => {
|
|
|
|
|
if (Date.now() - start > timeout) {
|
|
|
|
|
throw new Error('Infinite loop detected');
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const start = Date.now();
|
|
|
|
|
return () => {
|
|
|
|
|
if (Date.now() - start > timeout) {
|
|
|
|
|
throw new Error('Infinite loop detected');
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @typedef {Class<HTMLElement>} ComponentType
|
|
|
|
|
* @template {SvelteComponentDev} [Component=SvelteComponentDev]
|
|
|
|
|
@ -322,6 +330,6 @@ export function loop_guard(timeout) {
|
|
|
|
|
* @property {Map<any,any>} [context]
|
|
|
|
|
* @property {boolean} [hydrate]
|
|
|
|
|
* @property {boolean} [intro]
|
|
|
|
|
* @property {boolean} [$$inline]
|
|
|
|
|
* @property {boolean} [$$inline]
|
|
|
|
|
*/
|
|
|
|
|
/** @typedef {Object} SvelteComponentTyped */
|
|
|
|
|
/** @typedef {Object} SvelteComponentTyped */
|
|
|
|
|
|