@depup/svelte 5.53.3-depup.0

package/src/internal/client/dom/legacy/event-modifiers.js

@@ -0,0 +1,127 @@
+import { noop } from '../../../shared/utils.js';
+import { user_pre_effect } from '../../reactivity/effects.js';
+import { on } from '../elements/events.js';
+
+/**
+ * Substitute for the `trusted` event modifier
+ * @deprecated
+ * @param {(event: Event, ...args: Array<unknown>) => void} fn
+ * @returns {(event: Event, ...args: unknown[]) => void}
+ */
+export function trusted(fn) {
+	return function (...args) {
+		var event = /** @type {Event} */ (args[0]);
+		if (event.isTrusted) {
+			// @ts-ignore
+			fn?.apply(this, args);
+		}
+	};
+}
+
+/**
+ * Substitute for the `self` event modifier
+ * @deprecated
+ * @param {(event: Event, ...args: Array<unknown>) => void} fn
+ * @returns {(event: Event, ...args: unknown[]) => void}
+ */
+export function self(fn) {
+	return function (...args) {
+		var event = /** @type {Event} */ (args[0]);
+		// @ts-ignore
+		if (event.target === this) {
+			// @ts-ignore
+			fn?.apply(this, args);
+		}
+	};
+}
+
+/**
+ * Substitute for the `stopPropagation` event modifier
+ * @deprecated
+ * @param {(event: Event, ...args: Array<unknown>) => void} fn
+ * @returns {(event: Event, ...args: unknown[]) => void}
+ */
+export function stopPropagation(fn) {
+	return function (...args) {
+		var event = /** @type {Event} */ (args[0]);
+		event.stopPropagation();
+		// @ts-ignore
+		return fn?.apply(this, args);
+	};
+}
+
+/**
+ * Substitute for the `once` event modifier
+ * @deprecated
+ * @param {(event: Event, ...args: Array<unknown>) => void} fn
+ * @returns {(event: Event, ...args: unknown[]) => void}
+ */
+export function once(fn) {
+	var ran = false;
+
+	return function (...args) {
+		if (ran) return;
+		ran = true;
+
+		// @ts-ignore
+		return fn?.apply(this, args);
+	};
+}
+
+/**
+ * Substitute for the `stopImmediatePropagation` event modifier
+ * @deprecated
+ * @param {(event: Event, ...args: Array<unknown>) => void} fn
+ * @returns {(event: Event, ...args: unknown[]) => void}
+ */
+export function stopImmediatePropagation(fn) {
+	return function (...args) {
+		var event = /** @type {Event} */ (args[0]);
+		event.stopImmediatePropagation();
+		// @ts-ignore
+		return fn?.apply(this, args);
+	};
+}
+
+/**
+ * Substitute for the `preventDefault` event modifier
+ * @deprecated
+ * @param {(event: Event, ...args: Array<unknown>) => void} fn
+ * @returns {(event: Event, ...args: unknown[]) => void}
+ */
+export function preventDefault(fn) {
+	return function (...args) {
+		var event = /** @type {Event} */ (args[0]);
+		event.preventDefault();
+		// @ts-ignore
+		return fn?.apply(this, args);
+	};
+}
+
+/**
+ * Substitute for the `passive` event modifier, implemented as an action
+ * @deprecated
+ * @param {HTMLElement} node
+ * @param {[event: string, handler: () => EventListener]} options
+ */
+export function passive(node, [event, handler]) {
+	user_pre_effect(() => {
+		return on(node, event, handler() ?? noop, {
+			passive: true
+		});
+	});
+}
+
+/**
+ * Substitute for the `nonpassive` event modifier, implemented as an action
+ * @deprecated
+ * @param {HTMLElement} node
+ * @param {[event: string, handler: () => EventListener]} options
+ */
+export function nonpassive(node, [event, handler]) {
+	user_pre_effect(() => {
+		return on(node, event, handler() ?? noop, {
+			passive: false
+		});
+	});
+}

package/src/internal/client/dom/legacy/lifecycle.js

@@ -0,0 +1,82 @@
+/** @import { ComponentContextLegacy } from '#client' */
+import { run, run_all } from '../../../shared/utils.js';
+import { component_context } from '../../context.js';
+import { derived } from '../../reactivity/deriveds.js';
+import { user_pre_effect, user_effect } from '../../reactivity/effects.js';
+import { deep_read_state, get, untrack } from '../../runtime.js';
+
+/**
+ * Legacy-mode only: Call `onMount` callbacks and set up `beforeUpdate`/`afterUpdate` effects
+ * @param {boolean} [immutable]
+ */
+export function init(immutable = false) {
+	const context = /** @type {ComponentContextLegacy} */ (component_context);
+
+	const callbacks = context.l.u;
+	if (!callbacks) return;
+
+	let props = () => deep_read_state(context.s);
+
+	if (immutable) {
+		let version = 0;
+		let prev = /** @type {Record<string, any>} */ ({});
+
+		// In legacy immutable mode, before/afterUpdate only fire if the object identity of a prop changes
+		const d = derived(() => {
+			let changed = false;
+			const props = context.s;
+			for (const key in props) {
+				if (props[key] !== prev[key]) {
+					prev[key] = props[key];
+					changed = true;
+				}
+			}
+			if (changed) version++;
+			return version;
+		});
+
+		props = () => get(d);
+	}
+
+	// beforeUpdate
+	if (callbacks.b.length) {
+		user_pre_effect(() => {
+			observe_all(context, props);
+			run_all(callbacks.b);
+		});
+	}
+
+	// onMount (must run before afterUpdate)
+	user_effect(() => {
+		const fns = untrack(() => callbacks.m.map(run));
+		return () => {
+			for (const fn of fns) {
+				if (typeof fn === 'function') {
+					fn();
+				}
+			}
+		};
+	});
+
+	// afterUpdate
+	if (callbacks.a.length) {
+		user_effect(() => {
+			observe_all(context, props);
+			run_all(callbacks.a);
+		});
+	}
+}
+
+/**
+ * Invoke the getter of all signals associated with a component
+ * so they can be registered to the effect this function is called in.
+ * @param {ComponentContextLegacy} context
+ * @param {(() => void)} props
+ */
+function observe_all(context, props) {
+	if (context.l.s) {
+		for (const signal of context.l.s) get(signal);
+	}
+
+	props();
+}

package/src/internal/client/dom/legacy/misc.js

@@ -0,0 +1,68 @@
+import { set, source } from '../../reactivity/sources.js';
+import { get } from '../../runtime.js';
+import { is_array } from '../../../shared/utils.js';
+
+/**
+ * Under some circumstances, imports may be reactive in legacy mode. In that case,
+ * they should be using `reactive_import` as part of the transformation
+ * @param {() => any} fn
+ */
+export function reactive_import(fn) {
+	var s = source(0);
+
+	return function () {
+		if (arguments.length === 1) {
+			set(s, get(s) + 1);
+			return arguments[0];
+		} else {
+			get(s);
+			return fn();
+		}
+	};
+}
+
+/**
+ * @this {any}
+ * @param {Record<string, unknown>} $$props
+ * @param {Event} event
+ * @returns {void}
+ */
+export function bubble_event($$props, event) {
+	var events = /** @type {Record<string, Function[] | Function>} */ ($$props.$$events)?.[
+		event.type
+	];
+
+	var callbacks = is_array(events) ? events.slice() : events == null ? [] : [events];
+
+	for (var fn of callbacks) {
+		// Preserve "this" context
+		fn.call(this, event);
+	}
+}
+
+/**
+ * Used to simulate `$on` on a component instance when `compatibility.componentApi === 4`
+ * @param {Record<string, any>} $$props
+ * @param {string} event_name
+ * @param {Function} event_callback
+ */
+export function add_legacy_event_listener($$props, event_name, event_callback) {
+	$$props.$$events ||= {};
+	$$props.$$events[event_name] ||= [];
+	$$props.$$events[event_name].push(event_callback);
+}
+
+/**
+ * Used to simulate `$set` on a component instance when `compatibility.componentApi === 4`.
+ * Needs component accessors so that it can call the setter of the prop. Therefore doesn't
+ * work for updating props in `$$props` or `$$restProps`.
+ * @this {Record<string, any>}
+ * @param {Record<string, any>} $$new_props
+ */
+export function update_legacy_props($$new_props) {
+	for (var key in $$new_props) {
+		if (key in this) {
+			this[key] = $$new_props[key];
+		}
+	}
+}

package/src/internal/client/dom/operations.js

@@ -0,0 +1,293 @@
+/** @import { Effect, TemplateNode } from '#client' */
+import { hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
+import { DEV } from 'esm-env';
+import { init_array_prototype_warnings } from '../dev/equality.js';
+import { get_descriptor, is_extensible } from '../../shared/utils.js';
+import { active_effect } from '../runtime.js';
+import { async_mode_flag } from '../../flags/index.js';
+import { TEXT_NODE, REACTION_RAN } from '#client/constants';
+import { eager_block_effects } from '../reactivity/batch.js';
+import { NAMESPACE_HTML } from '../../../constants.js';
+
+// export these for reference in the compiled code, making global name deduplication unnecessary
+/** @type {Window} */
+export var $window;
+
+/** @type {Document} */
+export var $document;
+
+/** @type {boolean} */
+export var is_firefox;
+
+/** @type {() => Node | null} */
+var first_child_getter;
+/** @type {() => Node | null} */
+var next_sibling_getter;
+
+/**
+ * Initialize these lazily to avoid issues when using the runtime in a server context
+ * where these globals are not available while avoiding a separate server entry point
+ */
+export function init_operations() {
+	if ($window !== undefined) {
+		return;
+	}
+
+	$window = window;
+	$document = document;
+	is_firefox = /Firefox/.test(navigator.userAgent);
+
+	var element_prototype = Element.prototype;
+	var node_prototype = Node.prototype;
+	var text_prototype = Text.prototype;
+
+	// @ts-ignore
+	first_child_getter = get_descriptor(node_prototype, 'firstChild').get;
+	// @ts-ignore
+	next_sibling_getter = get_descriptor(node_prototype, 'nextSibling').get;
+
+	if (is_extensible(element_prototype)) {
+		// the following assignments improve perf of lookups on DOM nodes
+		// @ts-expect-error
+		element_prototype.__click = undefined;
+		// @ts-expect-error
+		element_prototype.__className = undefined;
+		// @ts-expect-error
+		element_prototype.__attributes = null;
+		// @ts-expect-error
+		element_prototype.__style = undefined;
+		// @ts-expect-error
+		element_prototype.__e = undefined;
+	}
+
+	if (is_extensible(text_prototype)) {
+		// @ts-expect-error
+		text_prototype.__t = undefined;
+	}
+
+	if (DEV) {
+		// @ts-expect-error
+		element_prototype.__svelte_meta = null;
+
+		init_array_prototype_warnings();
+	}
+}
+
+/**
+ * @param {string} value
+ * @returns {Text}
+ */
+export function create_text(value = '') {
+	return document.createTextNode(value);
+}
+
+/**
+ * @template {Node} N
+ * @param {N} node
+ */
+/*@__NO_SIDE_EFFECTS__*/
+export function get_first_child(node) {
+	return /** @type {TemplateNode | null} */ (first_child_getter.call(node));
+}
+
+/**
+ * @template {Node} N
+ * @param {N} node
+ */
+/*@__NO_SIDE_EFFECTS__*/
+export function get_next_sibling(node) {
+	return /** @type {TemplateNode | null} */ (next_sibling_getter.call(node));
+}
+
+/**
+ * Don't mark this as side-effect-free, hydration needs to walk all nodes
+ * @template {Node} N
+ * @param {N} node
+ * @param {boolean} is_text
+ * @returns {TemplateNode | null}
+ */
+export function child(node, is_text) {
+	if (!hydrating) {
+		return get_first_child(node);
+	}
+
+	var child = get_first_child(hydrate_node);
+
+	// Child can be null if we have an element with a single child, like `<p>{text}</p>`, where `text` is empty
+	if (child === null) {
+		child = hydrate_node.appendChild(create_text());
+	} else if (is_text && child.nodeType !== TEXT_NODE) {
+		var text = create_text();
+		child?.before(text);
+		set_hydrate_node(text);
+		return text;
+	}
+
+	if (is_text) {
+		merge_text_nodes(/** @type {Text} */ (child));
+	}
+
+	set_hydrate_node(child);
+	return child;
+}
+
+/**
+ * Don't mark this as side-effect-free, hydration needs to walk all nodes
+ * @param {TemplateNode} node
+ * @param {boolean} [is_text]
+ * @returns {TemplateNode | null}
+ */
+export function first_child(node, is_text = false) {
+	if (!hydrating) {
+		var first = get_first_child(node);
+
+		// TODO prevent user comments with the empty string when preserveComments is true
+		if (first instanceof Comment && first.data === '') return get_next_sibling(first);
+
+		return first;
+	}
+
+	if (is_text) {
+		// if an {expression} is empty during SSR, there might be no
+		// text node to hydrate — we must therefore create one
+		if (hydrate_node?.nodeType !== TEXT_NODE) {
+			var text = create_text();
+
+			hydrate_node?.before(text);
+			set_hydrate_node(text);
+			return text;
+		}
+
+		merge_text_nodes(/** @type {Text} */ (hydrate_node));
+	}
+
+	return hydrate_node;
+}
+
+/**
+ * Don't mark this as side-effect-free, hydration needs to walk all nodes
+ * @param {TemplateNode} node
+ * @param {number} count
+ * @param {boolean} is_text
+ * @returns {TemplateNode | null}
+ */
+export function sibling(node, count = 1, is_text = false) {
+	let next_sibling = hydrating ? hydrate_node : node;
+	var last_sibling;
+
+	while (count--) {
+		last_sibling = next_sibling;
+		next_sibling = /** @type {TemplateNode} */ (get_next_sibling(next_sibling));
+	}
+
+	if (!hydrating) {
+		return next_sibling;
+	}
+
+	if (is_text) {
+		// if a sibling {expression} is empty during SSR, there might be no
+		// text node to hydrate — we must therefore create one
+		if (next_sibling?.nodeType !== TEXT_NODE) {
+			var text = create_text();
+			// If the next sibling is `null` and we're handling text then it's because
+			// the SSR content was empty for the text, so we need to generate a new text
+			// node and insert it after the last sibling
+			if (next_sibling === null) {
+				last_sibling?.after(text);
+			} else {
+				next_sibling.before(text);
+			}
+			set_hydrate_node(text);
+			return text;
+		}
+
+		merge_text_nodes(/** @type {Text} */ (next_sibling));
+	}
+
+	set_hydrate_node(next_sibling);
+	return next_sibling;
+}
+
+/**
+ * @template {Node} N
+ * @param {N} node
+ * @returns {void}
+ */
+export function clear_text_content(node) {
+	node.textContent = '';
+}
+
+/**
+ * Returns `true` if we're updating the current block, for example `condition` in
+ * an `{#if condition}` block just changed. In this case, the branch should be
+ * appended (or removed) at the same time as other updates within the
+ * current `<svelte:boundary>`
+ */
+export function should_defer_append() {
+	if (!async_mode_flag) return false;
+	if (eager_block_effects !== null) return false;
+
+	var flags = /** @type {Effect} */ (active_effect).f;
+	return (flags & REACTION_RAN) !== 0;
+}
+
+/**
+ * @template {keyof HTMLElementTagNameMap | string} T
+ * @param {T} tag
+ * @param {string} [namespace]
+ * @param {string} [is]
+ * @returns {T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : Element}
+ */
+export function create_element(tag, namespace, is) {
+	let options = is ? { is } : undefined;
+	return /** @type {T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : Element} */ (
+		document.createElementNS(namespace ?? NAMESPACE_HTML, tag, options)
+	);
+}
+
+export function create_fragment() {
+	return document.createDocumentFragment();
+}
+
+/**
+ * @param {string} data
+ * @returns
+ */
+export function create_comment(data = '') {
+	return document.createComment(data);
+}
+
+/**
+ * @param {Element} element
+ * @param {string} key
+ * @param {string} value
+ * @returns
+ */
+export function set_attribute(element, key, value = '') {
+	if (key.startsWith('xlink:')) {
+		element.setAttributeNS('http://www.w3.org/1999/xlink', key, value);
+		return;
+	}
+	return element.setAttribute(key, value);
+}
+
+/**
+ * Browsers split text nodes larger than 65536 bytes when parsing.
+ * For hydration to succeed, we need to stitch them back together
+ * @param {Text} text
+ */
+export function merge_text_nodes(text) {
+	if (/** @type {string} */ (text.nodeValue).length < 65536) {
+		return;
+	}
+
+	let next = text.nextSibling;
+
+	while (next !== null && next.nodeType === TEXT_NODE) {
+		next.remove();
+
+		/** @type {string} */ (text.nodeValue) += /** @type {string} */ (next.nodeValue);
+
+		next = text.nextSibling;
+	}
+}

package/src/internal/client/dom/reconciler.js

@@ -0,0 +1,25 @@
+import { create_element } from './operations.js';
+
+const policy =
+	// We gotta write it like this because after downleveling the pure comment may end up in the wrong location
+	globalThis?.window?.trustedTypes &&
+	/* @__PURE__ */ globalThis.window.trustedTypes.createPolicy('svelte-trusted-html', {
+		/** @param {string} html */
+		createHTML: (html) => {
+			return html;
+		}
+	});
+
+/** @param {string} html */
+export function create_trusted_html(html) {
+	return /** @type {string} */ (policy?.createHTML(html) ?? html);
+}
+
+/**
+ * @param {string} html
+ */
+export function create_fragment_from_html(html) {
+	var elem = create_element('template');
+	elem.innerHTML = create_trusted_html(html.replaceAll('<!>', '<!---->')); // XHTML compliance
+	return elem.content;
+}

package/src/internal/client/dom/task.js

@@ -0,0 +1,42 @@
+import { run_all } from '../../shared/utils.js';
+import { is_flushing_sync } from '../reactivity/batch.js';
+
+/** @type {Array<() => void>} */
+let micro_tasks = [];
+
+function run_micro_tasks() {
+	var tasks = micro_tasks;
+	micro_tasks = [];
+	run_all(tasks);
+}
+
+/**
+ * @param {() => void} fn
+ */
+export function queue_micro_task(fn) {
+	if (micro_tasks.length === 0 && !is_flushing_sync) {
+		var tasks = micro_tasks;
+		queueMicrotask(() => {
+			// If this is false, a flushSync happened in the meantime. Do _not_ run new scheduled microtasks in that case
+			// as the ordering of microtasks would be broken at that point - consider this case:
+			// - queue_micro_task schedules microtask A to flush task X
+			// - synchronously after, flushSync runs, processing task X
+			// - synchronously after, some other microtask B is scheduled, but not through queue_micro_task but for example a Promise.resolve() in user code
+			// - synchronously after, queue_micro_task schedules microtask C to flush task Y
+			// - one tick later, microtask A now resolves, flushing task Y before microtask B, which is incorrect
+			// This if check prevents that race condition (that realistically will only happen in tests)
+			if (tasks === micro_tasks) run_micro_tasks();
+		});
+	}
+
+	micro_tasks.push(fn);
+}
+
+/**
+ * Synchronously run any queued tasks.
+ */
+export function flush_tasks() {
+	while (micro_tasks.length > 0) {
+		run_micro_tasks();
+	}
+}