@depup/svelte 5.53.3-depup.0

package/src/internal/client/dom/blocks/html.js

@@ -0,0 +1,128 @@
+/** @import { Effect, TemplateNode } from '#client' */
+/** @import {} from 'trusted-types' */
+import {
+	FILENAME,
+	HYDRATION_ERROR,
+	NAMESPACE_SVG,
+	NAMESPACE_MATHML
+} from '../../../../constants.js';
+import { remove_effect_dom, template_effect } from '../../reactivity/effects.js';
+import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from '../hydration.js';
+
+import { assign_nodes } from '../template.js';
+import * as w from '../../warnings.js';
+import { hash, sanitize_location } from '../../../../utils.js';
+import { DEV } from 'esm-env';
+import { dev_current_component_function } from '../../context.js';
+import { create_element, get_first_child, get_next_sibling } from '../operations.js';
+import { active_effect } from '../../runtime.js';
+import { COMMENT_NODE } from '#client/constants';
+
+/**
+ * @param {Element} element
+ * @param {string | null} server_hash
+ * @param {string | TrustedHTML} value
+ */
+function check_hash(element, server_hash, value) {
+	if (!server_hash || server_hash === hash(String(value ?? ''))) return;
+
+	let location;
+
+	// @ts-expect-error
+	const loc = element.__svelte_meta?.loc;
+	if (loc) {
+		location = `near ${loc.file}:${loc.line}:${loc.column}`;
+	} else if (dev_current_component_function?.[FILENAME]) {
+		location = `in ${dev_current_component_function[FILENAME]}`;
+	}
+
+	w.hydration_html_changed(sanitize_location(location));
+}
+
+/**
+ * @param {Element | Text | Comment} node
+ * @param {() => string | TrustedHTML} get_value
+ * @param {boolean} [svg]
+ * @param {boolean} [mathml]
+ * @param {boolean} [skip_warning]
+ * @returns {void}
+ */
+export function html(node, get_value, svg = false, mathml = false, skip_warning = false) {
+	var anchor = node;
+
+	/** @type {string | TrustedHTML} */
+	var value = '';
+
+	template_effect(() => {
+		var effect = /** @type {Effect} */ (active_effect);
+
+		if (value === (value = get_value() ?? '')) {
+			if (hydrating) hydrate_next();
+			return;
+		}
+
+		if (effect.nodes !== null) {
+			remove_effect_dom(effect.nodes.start, /** @type {TemplateNode} */ (effect.nodes.end));
+			effect.nodes = null;
+		}
+
+		if (value === '') return;
+
+		if (hydrating) {
+			// We're deliberately not trying to repair mismatches between server and client,
+			// as it's costly and error-prone (and it's an edge case to have a mismatch anyway)
+			var hash = /** @type {Comment} */ (hydrate_node).data;
+
+			/** @type {TemplateNode | null} */
+			var next = hydrate_next();
+			var last = next;
+
+			while (
+				next !== null &&
+				(next.nodeType !== COMMENT_NODE || /** @type {Comment} */ (next).data !== '')
+			) {
+				last = next;
+				next = get_next_sibling(next);
+			}
+
+			if (next === null) {
+				w.hydration_mismatch();
+				throw HYDRATION_ERROR;
+			}
+
+			if (DEV && !skip_warning) {
+				check_hash(/** @type {Element} */ (next.parentNode), hash, value);
+			}
+
+			assign_nodes(hydrate_node, last);
+			anchor = set_hydrate_node(next);
+			return;
+		}
+
+		// Don't use create_fragment_with_script_from_html here because that would mean script tags are executed.
+		// @html is basically `.innerHTML = ...` and that doesn't execute scripts either due to security reasons.
+		// Use a <template>, <svg>, or <math> wrapper depending on context. If value is a TrustedHTML object,
+		// it will be assigned directly to innerHTML without coercion — this allows {@html policy.createHTML(...)} to work.
+		var ns = svg ? NAMESPACE_SVG : mathml ? NAMESPACE_MATHML : undefined;
+		var wrapper = /** @type {HTMLTemplateElement | SVGElement | MathMLElement} */ (
+			create_element(svg ? 'svg' : mathml ? 'math' : 'template', ns)
+		);
+		wrapper.innerHTML = /** @type {any} */ (value);
+
+		/** @type {DocumentFragment | Element} */
+		var node = svg || mathml ? wrapper : /** @type {HTMLTemplateElement} */ (wrapper).content;
+
+		assign_nodes(
+			/** @type {TemplateNode} */ (get_first_child(node)),
+			/** @type {TemplateNode} */ (node.lastChild)
+		);
+
+		if (svg || mathml) {
+			while (get_first_child(node)) {
+				anchor.before(/** @type {TemplateNode} */ (get_first_child(node)));
+			}
+		} else {
+			anchor.before(node);
+		}
+	});
+}

package/src/internal/client/dom/blocks/if.js

@@ -0,0 +1,82 @@
+/** @import { TemplateNode } from '#client' */
+import { EFFECT_TRANSPARENT } from '#client/constants';
+import {
+	hydrate_next,
+	hydrating,
+	read_hydration_instruction,
+	skip_nodes,
+	set_hydrate_node,
+	set_hydrating
+} from '../hydration.js';
+import { block } from '../../reactivity/effects.js';
+import { BranchManager } from './branches.js';
+import { HYDRATION_START, HYDRATION_START_ELSE } from '../../../../constants.js';
+
+/**
+ * @param {TemplateNode} node
+ * @param {(branch: (fn: (anchor: Node) => void, key?: number | false) => void) => void} fn
+ * @param {boolean} [elseif] True if this is an `{:else if ...}` block rather than an `{#if ...}`, as that affects which transitions are considered 'local'
+ * @returns {void}
+ */
+export function if_block(node, fn, elseif = false) {
+	if (hydrating) {
+		hydrate_next();
+	}
+
+	var branches = new BranchManager(node);
+	var flags = elseif ? EFFECT_TRANSPARENT : 0;
+
+	/**
+	 * @param {number | false} key
+	 * @param {null | ((anchor: Node) => void)} fn
+	 */
+	function update_branch(key, fn) {
+		if (hydrating) {
+			const data = read_hydration_instruction(node);
+
+			/**
+			 * @type {number | false}
+			 * "[" = branch 0, "[1" = branch 1, "[2" = branch 2, ..., "[!" = else (false)
+			 */
+			var hydrated_key;
+
+			if (data === HYDRATION_START) {
+				hydrated_key = 0;
+			} else if (data === HYDRATION_START_ELSE) {
+				hydrated_key = false;
+			} else {
+				hydrated_key = parseInt(data.substring(1)); // "[1", "[2", etc.
+			}
+
+			if (key !== hydrated_key) {
+				// Hydration mismatch: remove everything inside the anchor and start fresh.
+				// This could happen with `{#if browser}...{/if}`, for example
+				var anchor = skip_nodes();
+
+				set_hydrate_node(anchor);
+				branches.anchor = anchor;
+
+				set_hydrating(false);
+				branches.ensure(key, fn);
+				set_hydrating(true);
+
+				return;
+			}
+		}
+
+		branches.ensure(key, fn);
+	}
+
+	block(() => {
+		var has_branch = false;
+
+		fn((fn, key = 0) => {
+			has_branch = true;
+			update_branch(key, fn);
+		});
+
+		if (!has_branch) {
+			update_branch(false, null);
+		}
+	}, flags);
+}

package/src/internal/client/dom/blocks/key.js

@@ -0,0 +1,40 @@
+/** @import { TemplateNode } from '#client' */
+import { is_runes } from '../../context.js';
+import { block } from '../../reactivity/effects.js';
+import { hydrate_next, hydrating } from '../hydration.js';
+import { BranchManager } from './branches.js';
+
+const NAN = Symbol('NaN');
+
+/**
+ * @template V
+ * @param {TemplateNode} node
+ * @param {() => V} get_key
+ * @param {(anchor: Node) => TemplateNode | void} render_fn
+ * @returns {void}
+ */
+export function key(node, get_key, render_fn) {
+	if (hydrating) {
+		hydrate_next();
+	}
+
+	var branches = new BranchManager(node);
+
+	var legacy = !is_runes();
+
+	block(() => {
+		var key = get_key();
+
+		// NaN !== NaN, hence we do this workaround to not trigger remounts unnecessarily
+		if (key !== key) {
+			key = /** @type {any} */ (NAN);
+		}
+
+		// key blocks in Svelte <5 had stupid semantics
+		if (legacy && key !== null && typeof key === 'object') {
+			key = /** @type {V} */ ({});
+		}
+
+		branches.ensure(key, render_fn);
+	});
+}

package/src/internal/client/dom/blocks/slot.js

@@ -0,0 +1,44 @@
+import { hydrate_next, hydrating } from '../hydration.js';
+
+/**
+ * @param {Comment} anchor
+ * @param {Record<string, any>} $$props
+ * @param {string} name
+ * @param {Record<string, unknown>} slot_props
+ * @param {null | ((anchor: Comment) => void)} fallback_fn
+ */
+export function slot(anchor, $$props, name, slot_props, fallback_fn) {
+	if (hydrating) {
+		hydrate_next();
+	}
+
+	var slot_fn = $$props.$$slots?.[name];
+	// Interop: Can use snippets to fill slots
+	var is_interop = false;
+	if (slot_fn === true) {
+		slot_fn = $$props[name === 'default' ? 'children' : name];
+		is_interop = true;
+	}
+
+	if (slot_fn === undefined) {
+		if (fallback_fn !== null) {
+			fallback_fn(anchor);
+		}
+	} else {
+		slot_fn(anchor, is_interop ? () => slot_props : slot_props);
+	}
+}
+
+/**
+ * @param {Record<string, any>} props
+ * @returns {Record<string, boolean>}
+ */
+export function sanitize_slots(props) {
+	/** @type {Record<string, boolean>} */
+	const sanitized = {};
+	if (props.children) sanitized.default = true;
+	for (const key in props.$$slots) {
+		sanitized[key] = true;
+	}
+	return sanitized;
+}

package/src/internal/client/dom/blocks/snippet.js

@@ -0,0 +1,103 @@
+/** @import { Snippet } from 'svelte' */
+/** @import { TemplateNode } from '#client' */
+/** @import { Getters } from '#shared' */
+import { EFFECT_TRANSPARENT, ELEMENT_NODE } from '#client/constants';
+import { block, teardown } from '../../reactivity/effects.js';
+import {
+	dev_current_component_function,
+	set_dev_current_component_function
+} from '../../context.js';
+import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
+import { create_fragment_from_html } from '../reconciler.js';
+import { assign_nodes } from '../template.js';
+import * as w from '../../warnings.js';
+import * as e from '../../errors.js';
+import { DEV } from 'esm-env';
+import { get_first_child, get_next_sibling } from '../operations.js';
+import { prevent_snippet_stringification } from '../../../shared/validate.js';
+import { BranchManager } from './branches.js';
+
+/**
+ * @template {(node: TemplateNode, ...args: any[]) => void} SnippetFn
+ * @param {TemplateNode} node
+ * @param {() => SnippetFn | null | undefined} get_snippet
+ * @param {(() => any)[]} args
+ * @returns {void}
+ */
+export function snippet(node, get_snippet, ...args) {
+	var branches = new BranchManager(node);
+
+	block(() => {
+		const snippet = get_snippet() ?? null;
+
+		if (DEV && snippet == null) {
+			e.invalid_snippet();
+		}
+
+		branches.ensure(snippet, snippet && ((anchor) => snippet(anchor, ...args)));
+	}, EFFECT_TRANSPARENT);
+}
+
+/**
+ * In development, wrap the snippet function so that it passes validation, and so that the
+ * correct component context is set for ownership checks
+ * @param {any} component
+ * @param {(node: TemplateNode, ...args: any[]) => void} fn
+ */
+export function wrap_snippet(component, fn) {
+	const snippet = (/** @type {TemplateNode} */ node, /** @type {any[]} */ ...args) => {
+		var previous_component_function = dev_current_component_function;
+		set_dev_current_component_function(component);
+
+		try {
+			return fn(node, ...args);
+		} finally {
+			set_dev_current_component_function(previous_component_function);
+		}
+	};
+
+	prevent_snippet_stringification(snippet);
+
+	return snippet;
+}
+
+/**
+ * Create a snippet programmatically
+ * @template {unknown[]} Params
+ * @param {(...params: Getters<Params>) => {
+ *   render: () => string
+ *   setup?: (element: Element) => void | (() => void)
+ * }} fn
+ * @returns {Snippet<Params>}
+ */
+export function createRawSnippet(fn) {
+	// @ts-expect-error the types are a lie
+	return (/** @type {TemplateNode} */ anchor, /** @type {Getters<Params>} */ ...params) => {
+		var snippet = fn(...params);
+
+		/** @type {Element} */
+		var element;
+
+		if (hydrating) {
+			element = /** @type {Element} */ (hydrate_node);
+			hydrate_next();
+		} else {
+			var html = snippet.render().trim();
+			var fragment = create_fragment_from_html(html);
+			element = /** @type {Element} */ (get_first_child(fragment));
+
+			if (DEV && (get_next_sibling(element) !== null || element.nodeType !== ELEMENT_NODE)) {
+				w.invalid_raw_snippet_render();
+			}
+
+			anchor.before(element);
+		}
+
+		const result = snippet.setup?.(element);
+		assign_nodes(element, element);
+
+		if (typeof result === 'function') {
+			teardown(result);
+		}
+	};
+}

package/src/internal/client/dom/blocks/svelte-component.js

@@ -0,0 +1,61 @@
+/** @import { TemplateNode, Dom } from '#client' */
+import { EFFECT_TRANSPARENT } from '#client/constants';
+import { block } from '../../reactivity/effects.js';
+import {
+	hydrate_next,
+	hydrate_node,
+	hydrating,
+	read_hydration_instruction,
+	set_hydrate_node,
+	set_hydrating,
+	skip_nodes
+} from '../hydration.js';
+import { BranchManager } from './branches.js';
+import { HYDRATION_START, HYDRATION_START_ELSE } from '../../../../constants.js';
+
+/**
+ * @template P
+ * @template {(props: P) => void} C
+ * @param {TemplateNode} node
+ * @param {() => C} get_component
+ * @param {(anchor: TemplateNode, component: C) => Dom | void} render_fn
+ * @returns {void}
+ */
+export function component(node, get_component, render_fn) {
+	/** @type {TemplateNode | undefined} */
+	var hydration_start_node;
+
+	if (hydrating) {
+		hydration_start_node = hydrate_node;
+		hydrate_next();
+	}
+
+	var branches = new BranchManager(node);
+
+	block(() => {
+		var component = get_component() ?? null;
+
+		if (hydrating) {
+			var data = read_hydration_instruction(/** @type {TemplateNode} */ (hydration_start_node));
+
+			var server_had_component = data === HYDRATION_START;
+			var client_has_component = component !== null;
+
+			if (server_had_component !== client_has_component) {
+				// Hydration mismatch: skip the server-rendered nodes and render fresh
+				var anchor = skip_nodes();
+
+				set_hydrate_node(anchor);
+				branches.anchor = anchor;
+
+				set_hydrating(false);
+				branches.ensure(component, component && ((target) => render_fn(target, component)));
+				set_hydrating(true);
+
+				return;
+			}
+		}
+
+		branches.ensure(component, component && ((target) => render_fn(target, component)));
+	}, EFFECT_TRANSPARENT);
+}

package/src/internal/client/dom/blocks/svelte-element.js

@@ -0,0 +1,152 @@
+/** @import { Effect, EffectNodes, TemplateNode } from '#client' */
+import { FILENAME, NAMESPACE_SVG } from '../../../../constants.js';
+import {
+	hydrate_next,
+	hydrate_node,
+	hydrating,
+	set_hydrate_node,
+	set_hydrating
+} from '../hydration.js';
+import { create_element, create_text, get_first_child } from '../operations.js';
+import { block, teardown } from '../../reactivity/effects.js';
+import { set_should_intro } from '../../render.js';
+import { active_effect } from '../../runtime.js';
+import { component_context, dev_stack } from '../../context.js';
+import { DEV } from 'esm-env';
+import { EFFECT_TRANSPARENT, ELEMENT_NODE } from '#client/constants';
+import { assign_nodes } from '../template.js';
+import { is_raw_text_element } from '../../../../utils.js';
+import { BranchManager } from './branches.js';
+import { set_animation_effect_override } from '../elements/transitions.js';
+
+/**
+ * @param {Comment | Element} node
+ * @param {() => string} get_tag
+ * @param {boolean} is_svg
+ * @param {undefined | ((element: Element, anchor: Node | null) => void)} render_fn,
+ * @param {undefined | (() => string)} get_namespace
+ * @param {undefined | [number, number]} location
+ * @returns {void}
+ */
+export function element(node, get_tag, is_svg, render_fn, get_namespace, location) {
+	let was_hydrating = hydrating;
+
+	if (hydrating) {
+		hydrate_next();
+	}
+
+	var filename = DEV && location && component_context?.function[FILENAME];
+
+	/** @type {null | Element} */
+	var element = null;
+
+	if (hydrating && hydrate_node.nodeType === ELEMENT_NODE) {
+		element = /** @type {Element} */ (hydrate_node);
+		hydrate_next();
+	}
+
+	var anchor = /** @type {TemplateNode} */ (hydrating ? hydrate_node : node);
+
+	/**
+	 * We track this so we can set it when changing the element, allowing any
+	 * `animate:` directive to bind itself to the correct block
+	 */
+	var parent_effect = /** @type {Effect} */ (active_effect);
+
+	var branches = new BranchManager(anchor, false);
+
+	block(() => {
+		const next_tag = get_tag() || null;
+		var ns = get_namespace
+			? get_namespace()
+			: is_svg || next_tag === 'svg'
+				? NAMESPACE_SVG
+				: undefined;
+
+		if (next_tag === null) {
+			branches.ensure(null, null);
+			set_should_intro(true);
+			return;
+		}
+
+		branches.ensure(next_tag, (anchor) => {
+			if (next_tag) {
+				element = hydrating ? /** @type {Element} */ (element) : create_element(next_tag, ns);
+
+				if (DEV && location) {
+					// @ts-expect-error
+					element.__svelte_meta = {
+						parent: dev_stack,
+						loc: {
+							file: filename,
+							line: location[0],
+							column: location[1]
+						}
+					};
+				}
+
+				assign_nodes(element, element);
+
+				if (render_fn) {
+					if (hydrating && is_raw_text_element(next_tag)) {
+						// prevent hydration glitches
+						element.append(document.createComment(''));
+					}
+
+					// If hydrating, use the existing ssr comment as the anchor so that the
+					// inner open and close methods can pick up the existing nodes correctly
+					var child_anchor = hydrating
+						? get_first_child(element)
+						: element.appendChild(create_text());
+
+					if (hydrating) {
+						if (child_anchor === null) {
+							set_hydrating(false);
+						} else {
+							set_hydrate_node(child_anchor);
+						}
+					}
+
+					set_animation_effect_override(parent_effect);
+
+					// `child_anchor` is undefined if this is a void element, but we still
+					// need to call `render_fn` in order to run actions etc. If the element
+					// contains children, it's a user error (which is warned on elsewhere)
+					// and the DOM will be silently discarded
+					render_fn(element, child_anchor);
+
+					set_animation_effect_override(null);
+				}
+
+				// we do this after calling `render_fn` so that child effects don't override `nodes.end`
+				/** @type {Effect & { nodes: EffectNodes }} */ (active_effect).nodes.end = element;
+
+				anchor.before(element);
+			}
+
+			if (hydrating) {
+				set_hydrate_node(anchor);
+			}
+		});
+
+		// revert to the default state after the effect has been created
+		set_should_intro(true);
+
+		return () => {
+			if (next_tag) {
+				// if we're in this callback because we're re-running the effect,
+				// disable intros (unless no element is currently displayed)
+				set_should_intro(false);
+			}
+		};
+	}, EFFECT_TRANSPARENT);
+
+	teardown(() => {
+		set_should_intro(true);
+	});
+
+	if (was_hydrating) {
+		set_hydrating(true);
+		set_hydrate_node(anchor);
+	}
+}

package/src/internal/client/dom/blocks/svelte-head.js

@@ -0,0 +1,61 @@
+/** @import { TemplateNode } from '#client' */
+import { hydrate_node, hydrating, set_hydrate_node, set_hydrating } from '../hydration.js';
+import { create_text, get_first_child, get_next_sibling } from '../operations.js';
+import { block } from '../../reactivity/effects.js';
+import { COMMENT_NODE, EFFECT_PRESERVED, HEAD_EFFECT } from '#client/constants';
+
+/**
+ * @param {string} hash
+ * @param {(anchor: Node) => void} render_fn
+ * @returns {void}
+ */
+export function head(hash, render_fn) {
+	// The head function may be called after the first hydration pass and ssr comment nodes may still be present,
+	// therefore we need to skip that when we detect that we're not in hydration mode.
+	let previous_hydrate_node = null;
+	let was_hydrating = hydrating;
+
+	/** @type {Comment | Text} */
+	var anchor;
+
+	if (hydrating) {
+		previous_hydrate_node = hydrate_node;
+
+		var head_anchor = get_first_child(document.head);
+
+		// There might be multiple head blocks in our app, and they could have been
+		// rendered in an arbitrary order — find one corresponding to this component
+		while (
+			head_anchor !== null &&
+			(head_anchor.nodeType !== COMMENT_NODE || /** @type {Comment} */ (head_anchor).data !== hash)
+		) {
+			head_anchor = get_next_sibling(head_anchor);
+		}
+
+		// If we can't find an opening hydration marker, skip hydration (this can happen
+		// if a framework rendered body but not head content)
+		if (head_anchor === null) {
+			set_hydrating(false);
+		} else {
+			var start = /** @type {TemplateNode} */ (get_next_sibling(head_anchor));
+			head_anchor.remove(); // in case this component is repeated
+
+			set_hydrate_node(start);
+		}
+	}
+
+	if (!hydrating) {
+		anchor = document.head.appendChild(create_text());
+	}
+
+	try {
+		// normally a branch is the child of a block and would have the EFFECT_PRESERVED flag,
+		// but since head blocks don't necessarily only have direct branch children we add it on the block itself
+		block(() => render_fn(anchor), HEAD_EFFECT | EFFECT_PRESERVED);
+	} finally {
+		if (was_hydrating) {
+			set_hydrating(true);
+			set_hydrate_node(/** @type {TemplateNode} */ (previous_hydrate_node));
+		}
+	}
+}