@depup/svelte 5.53.3-depup.0

package/src/internal/client/dev/equality.js

@@ -0,0 +1,101 @@
+import * as w from '../warnings.js';
+import { get_proxied_value } from '../proxy.js';
+
+export function init_array_prototype_warnings() {
+	const array_prototype = Array.prototype;
+	// The REPL ends up here over and over, and this prevents it from adding more and more patches
+	// of the same kind to the prototype, which would slow down everything over time.
+	// @ts-expect-error
+	const cleanup = Array.__svelte_cleanup;
+	if (cleanup) {
+		cleanup();
+	}
+
+	const { indexOf, lastIndexOf, includes } = array_prototype;
+
+	array_prototype.indexOf = function (item, from_index) {
+		const index = indexOf.call(this, item, from_index);
+
+		if (index === -1) {
+			for (let i = from_index ?? 0; i < this.length; i += 1) {
+				if (get_proxied_value(this[i]) === item) {
+					w.state_proxy_equality_mismatch('array.indexOf(...)');
+					break;
+				}
+			}
+		}
+
+		return index;
+	};
+
+	array_prototype.lastIndexOf = function (item, from_index) {
+		// we need to specify this.length - 1 because it's probably using something like
+		// `arguments` inside so passing undefined is different from not passing anything
+		const index = lastIndexOf.call(this, item, from_index ?? this.length - 1);
+
+		if (index === -1) {
+			for (let i = 0; i <= (from_index ?? this.length - 1); i += 1) {
+				if (get_proxied_value(this[i]) === item) {
+					w.state_proxy_equality_mismatch('array.lastIndexOf(...)');
+					break;
+				}
+			}
+		}
+
+		return index;
+	};
+
+	array_prototype.includes = function (item, from_index) {
+		const has = includes.call(this, item, from_index);
+
+		if (!has) {
+			for (let i = 0; i < this.length; i += 1) {
+				if (get_proxied_value(this[i]) === item) {
+					w.state_proxy_equality_mismatch('array.includes(...)');
+					break;
+				}
+			}
+		}
+
+		return has;
+	};
+
+	// @ts-expect-error
+	Array.__svelte_cleanup = () => {
+		array_prototype.indexOf = indexOf;
+		array_prototype.lastIndexOf = lastIndexOf;
+		array_prototype.includes = includes;
+	};
+}
+
+/**
+ * @param {any} a
+ * @param {any} b
+ * @param {boolean} equal
+ * @returns {boolean}
+ */
+export function strict_equals(a, b, equal = true) {
+	// try-catch needed because this tries to read properties of `a` and `b`,
+	// which could be disallowed for example in a secure context
+	try {
+		if ((a === b) !== (get_proxied_value(a) === get_proxied_value(b))) {
+			w.state_proxy_equality_mismatch(equal ? '===' : '!==');
+		}
+	} catch {}
+
+	return (a === b) === equal;
+}
+
+/**
+ * @param {any} a
+ * @param {any} b
+ * @param {boolean} equal
+ * @returns {boolean}
+ */
+export function equals(a, b, equal = true) {
+	if ((a == b) !== (get_proxied_value(a) == get_proxied_value(b))) {
+		w.state_proxy_equality_mismatch(equal ? '==' : '!=');
+	}
+
+	return (a == b) === equal;
+}

package/src/internal/client/dev/hmr.js

@@ -0,0 +1,89 @@
+/** @import { Effect, TemplateNode } from '#client' */
+import { FILENAME, HMR } from '../../../constants.js';
+import { EFFECT_TRANSPARENT } from '#client/constants';
+import { hydrate_node, hydrating } from '../dom/hydration.js';
+import { block, branch, destroy_effect } from '../reactivity/effects.js';
+import { set, source } from '../reactivity/sources.js';
+import { set_should_intro } from '../render.js';
+import { get } from '../runtime.js';
+
+/**
+ * @template {(anchor: Comment, props: any) => any} Component
+ * @param {Component} fn
+ */
+export function hmr(fn) {
+	const current = source(fn);
+
+	/**
+	 * @param {TemplateNode} anchor
+	 * @param {any} props
+	 */
+	function wrapper(anchor, props) {
+		let component = {};
+		let instance = {};
+
+		/** @type {Effect} */
+		let effect;
+
+		let ran = false;
+
+		block(() => {
+			if (component === (component = get(current))) {
+				return;
+			}
+
+			if (effect) {
+				// @ts-ignore
+				for (var k in instance) delete instance[k];
+				destroy_effect(effect);
+			}
+
+			effect = branch(() => {
+				// when the component is invalidated, replace it without transitions
+				if (ran) set_should_intro(false);
+
+				// preserve getters/setters
+				Object.defineProperties(
+					instance,
+					Object.getOwnPropertyDescriptors(
+						// @ts-expect-error
+						new.target ? new component(anchor, props) : component(anchor, props)
+					)
+				);
+
+				if (ran) set_should_intro(true);
+			});
+		}, EFFECT_TRANSPARENT);
+
+		ran = true;
+
+		if (hydrating) {
+			anchor = hydrate_node;
+		}
+
+		return instance;
+	}
+
+	// @ts-expect-error
+	wrapper[FILENAME] = fn[FILENAME];
+
+	// @ts-ignore
+	wrapper[HMR] = {
+		fn,
+		current,
+		update: (/** @type {any} */ incoming) => {
+			// This logic ensures that the first version of the component is the one
+			// whose update function and therefore block effect is preserved across updates.
+			// If we don't do this dance and instead just use `incoming` as the new component
+			// and then update, we'll create an ever-growing stack of block effects.
+
+			// Trigger the original block effect
+			set(wrapper[HMR].current, incoming[HMR].fn);
+
+			// Replace the incoming source with the original one
+			incoming[HMR].current = wrapper[HMR].current;
+		}
+	};
+
+	return wrapper;
+}

package/src/internal/client/dev/inspect.js

@@ -0,0 +1,72 @@
+import { UNINITIALIZED } from '../../../constants.js';
+import { snapshot } from '../../shared/clone.js';
+import { eager_effect, render_effect, validate_effect } from '../reactivity/effects.js';
+import { untrack } from '../runtime.js';
+import { get_error } from '../../shared/dev.js';
+
+/**
+ * @param {() => any[]} get_value
+ * @param {Function} inspector
+ * @param {boolean} show_stack
+ */
+export function inspect(get_value, inspector, show_stack = false) {
+	validate_effect('$inspect');
+
+	let initial = true;
+	let error = /** @type {any} */ (UNINITIALIZED);
+
+	// Inspect effects runs synchronously so that we can capture useful
+	// stack traces. As a consequence, reading the value might result
+	// in an error (an `$inspect(object.property)` will run before the
+	// `{#if object}...{/if}` that contains it)
+	eager_effect(() => {
+		try {
+			var value = get_value();
+		} catch (e) {
+			error = e;
+			return;
+		}
+
+		var snap = snapshot(value, true, true);
+		untrack(() => {
+			if (show_stack) {
+				inspector(...snap);
+
+				if (!initial) {
+					const stack = get_error('$inspect(...)');
+					if (stack) {
+						// eslint-disable-next-line no-console
+						console.groupCollapsed('stack trace');
+						// eslint-disable-next-line no-console
+						console.log(stack);
+						// eslint-disable-next-line no-console
+						console.groupEnd();
+					}
+				}
+			} else {
+				inspector(initial ? 'init' : 'update', ...snap);
+			}
+		});
+
+		initial = false;
+	});
+
+	// If an error occurs, we store it (along with its stack trace).
+	// If the render effect subsequently runs, we log the error,
+	// but if it doesn't run it's because the `$inspect` was
+	// destroyed, meaning we don't need to bother
+	render_effect(() => {
+		try {
+			// call `get_value` so that this runs alongside the inspect effect
+			get_value();
+		} catch {
+			// ignore
+		}
+
+		if (error !== UNINITIALIZED) {
+			// eslint-disable-next-line no-console
+			console.error(error);
+			error = UNINITIALIZED;
+		}
+	});
+}

package/src/internal/client/dev/legacy.js

@@ -0,0 +1,25 @@
+import * as e from '../errors.js';
+import { component_context } from '../context.js';
+import { FILENAME } from '../../../constants.js';
+
+/** @param {Function & { [FILENAME]: string }} target */
+export function check_target(target) {
+	if (target) {
+		e.component_api_invalid_new(target[FILENAME] ?? 'a component', target.name);
+	}
+}
+
+export function legacy_api() {
+	const component = component_context?.function;
+
+	/** @param {string} method */
+	function error(method) {
+		e.component_api_changed(method, component[FILENAME]);
+	}
+
+	return {
+		$destroy: () => error('$destroy()'),
+		$on: () => error('$on(...)'),
+		$set: () => error('$set(...)')
+	};
+}

package/src/internal/client/dev/ownership.js

@@ -0,0 +1,81 @@
+/** @typedef {{ file: string, line: number, column: number }} Location */
+
+import { get_descriptor } from '../../shared/utils.js';
+import { LEGACY_PROPS, STATE_SYMBOL } from '#client/constants';
+import { FILENAME } from '../../../constants.js';
+import { component_context } from '../context.js';
+import * as w from '../warnings.js';
+import { sanitize_location } from '../../../utils.js';
+
+/**
+ * Sets up a validator that
+ * - traverses the path of a prop to find out if it is allowed to be mutated
+ * - checks that the binding chain is not interrupted
+ * @param {Record<string, any>} props
+ */
+export function create_ownership_validator(props) {
+	const component = component_context?.function;
+	const parent = component_context?.p?.function;
+
+	return {
+		/**
+		 * @param {string} prop
+		 * @param {any[]} path
+		 * @param {any} result
+		 * @param {number} line
+		 * @param {number} column
+		 */
+		mutation: (prop, path, result, line, column) => {
+			const name = path[0];
+			if (is_bound_or_unset(props, name) || !parent) {
+				return result;
+			}
+
+			/** @type {any} */
+			let value = props;
+
+			for (let i = 0; i < path.length - 1; i++) {
+				value = value[path[i]];
+				if (!value?.[STATE_SYMBOL]) {
+					return result;
+				}
+			}
+
+			const location = sanitize_location(`${component[FILENAME]}:${line}:${column}`);
+
+			w.ownership_invalid_mutation(name, location, prop, parent[FILENAME]);
+
+			return result;
+		},
+		/**
+		 * @param {any} key
+		 * @param {any} child_component
+		 * @param {() => any} value
+		 */
+		binding: (key, child_component, value) => {
+			if (!is_bound_or_unset(props, key) && parent && value()?.[STATE_SYMBOL]) {
+				w.ownership_invalid_binding(
+					component[FILENAME],
+					key,
+					child_component[FILENAME],
+					parent[FILENAME]
+				);
+			}
+		}
+	};
+}
+
+/**
+ * @param {Record<string, any>} props
+ * @param {string} prop_name
+ */
+function is_bound_or_unset(props, prop_name) {
+	// Can be the case when someone does `mount(Component, props)` with `let props = $state({...})`
+	// or `createClassComponent(Component, props)`
+	const is_entry_props = STATE_SYMBOL in props || LEGACY_PROPS in props;
+	return (
+		!!get_descriptor(props, prop_name)?.set ||
+		(is_entry_props && prop_name in props) ||
+		!(prop_name in props)
+	);
+}

package/src/internal/client/dev/tracing.js

@@ -0,0 +1,162 @@
+/** @import { Derived, Reaction, Value } from '#client' */
+import { UNINITIALIZED } from '../../../constants.js';
+import { snapshot } from '../../shared/clone.js';
+import { DERIVED, ASYNC, PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
+import { effect_tracking } from '../reactivity/effects.js';
+import { active_reaction, untrack } from '../runtime.js';
+
+/**
+ * @typedef {{
+ *   traces: Error[];
+ * }} TraceEntry
+ */
+
+/** @type {{ reaction: Reaction | null, entries: Map<Value, TraceEntry> } | null} */
+export let tracing_expressions = null;
+
+/**
+ * @param {Value} signal
+ * @param {TraceEntry} [entry]
+ */
+function log_entry(signal, entry) {
+	const value = signal.v;
+
+	if (value === UNINITIALIZED) {
+		return;
+	}
+
+	const type = get_type(signal);
+	const current_reaction = /** @type {Reaction} */ (active_reaction);
+	const dirty = signal.wv > current_reaction.wv || current_reaction.wv === 0;
+	const style = dirty
+		? 'color: CornflowerBlue; font-weight: bold'
+		: 'color: grey; font-weight: normal';
+
+	// eslint-disable-next-line no-console
+	console.groupCollapsed(
+		signal.label ? `%c${type}%c ${signal.label}` : `%c${type}%c`,
+		style,
+		dirty ? 'font-weight: normal' : style,
+		typeof value === 'object' && value !== null && STATE_SYMBOL in value
+			? snapshot(value, true)
+			: value
+	);
+
+	if (type === '$derived') {
+		const deps = new Set(/** @type {Derived} */ (signal).deps);
+		for (const dep of deps) {
+			log_entry(dep);
+		}
+	}
+
+	if (signal.created) {
+		// eslint-disable-next-line no-console
+		console.log(signal.created);
+	}
+
+	if (dirty && signal.updated) {
+		for (const updated of signal.updated.values()) {
+			if (updated.error) {
+				// eslint-disable-next-line no-console
+				console.log(updated.error);
+			}
+		}
+	}
+
+	if (entry) {
+		for (var trace of entry.traces) {
+			// eslint-disable-next-line no-console
+			console.log(trace);
+		}
+	}
+
+	// eslint-disable-next-line no-console
+	console.groupEnd();
+}
+
+/**
+ * @param {Value} signal
+ * @returns {'$state' | '$derived' | 'store'}
+ */
+function get_type(signal) {
+	if ((signal.f & (DERIVED | ASYNC)) !== 0) return '$derived';
+	return signal.label?.startsWith('$') ? 'store' : '$state';
+}
+
+/**
+ * @template T
+ * @param {() => string} label
+ * @param {() => T} fn
+ */
+export function trace(label, fn) {
+	var previously_tracing_expressions = tracing_expressions;
+
+	try {
+		tracing_expressions = { entries: new Map(), reaction: active_reaction };
+
+		var start = performance.now();
+		var value = fn();
+		var time = (performance.now() - start).toFixed(2);
+
+		var prefix = untrack(label);
+
+		if (!effect_tracking()) {
+			// eslint-disable-next-line no-console
+			console.log(`${prefix} %cran outside of an effect (${time}ms)`, 'color: grey');
+		} else if (tracing_expressions.entries.size === 0) {
+			// eslint-disable-next-line no-console
+			console.log(`${prefix} %cno reactive dependencies (${time}ms)`, 'color: grey');
+		} else {
+			// eslint-disable-next-line no-console
+			console.group(`${prefix} %c(${time}ms)`, 'color: grey');
+
+			var entries = tracing_expressions.entries;
+
+			untrack(() => {
+				for (const [signal, traces] of entries) {
+					log_entry(signal, traces);
+				}
+			});
+
+			tracing_expressions = null;
+
+			// eslint-disable-next-line no-console
+			console.groupEnd();
+		}
+
+		return value;
+	} finally {
+		tracing_expressions = previously_tracing_expressions;
+	}
+}
+
+/**
+ * @param {Value} source
+ * @param {string} label
+ */
+export function tag(source, label) {
+	source.label = label;
+	tag_proxy(source.v, label);
+
+	return source;
+}
+
+/**
+ * @param {unknown} value
+ * @param {string} label
+ */
+export function tag_proxy(value, label) {
+	// @ts-expect-error
+	value?.[PROXY_PATH_SYMBOL]?.(label);
+	return value;
+}
+
+/**
+ * @param {unknown} value
+ */
+export function label(value) {
+	if (typeof value === 'symbol') return `Symbol(${value.description})`;
+	if (typeof value === 'function') return '<function>';
+	if (typeof value === 'object' && value) return '<object>';
+	return String(value);
+}

package/src/internal/client/dev/validation.js

@@ -0,0 +1,16 @@
+import * as e from '../errors.js';
+/**
+ * @param {Node} anchor
+ * @param {...(()=>any)[]} args
+ */
+export function validate_snippet_args(anchor, ...args) {
+	if (typeof anchor !== 'object' || !(anchor instanceof Node)) {
+		e.invalid_snippet_arguments();
+	}
+
+	for (let arg of args) {
+		if (typeof arg !== 'function') {
+			e.invalid_snippet_arguments();
+		}
+	}
+}

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

@@ -0,0 +1,71 @@
+/** @import { Blocker, TemplateNode, Value } from '#client' */
+import { flatten, increment_pending } from '../../reactivity/async.js';
+import { get } from '../../runtime.js';
+import {
+	hydrate_next,
+	hydrate_node,
+	hydrating,
+	set_hydrate_node,
+	set_hydrating,
+	skip_nodes
+} from '../hydration.js';
+
+/**
+ * @param {TemplateNode} node
+ * @param {Blocker[]} blockers
+ * @param {Array<() => Promise<any>>} expressions
+ * @param {(anchor: TemplateNode, ...deriveds: Value[]) => void} fn
+ */
+export function async(node, blockers = [], expressions = [], fn) {
+	var was_hydrating = hydrating;
+	var end = null;
+
+	if (was_hydrating) {
+		hydrate_next();
+		end = skip_nodes(false);
+	}
+
+	if (expressions.length === 0 && blockers.every((b) => b.settled)) {
+		fn(node);
+
+		// This is necessary because it is not guaranteed that the render function will
+		// advance the hydration node to $.async's end marker: it may stop at an inner
+		// block's end marker (in case of an inner if block for example), but it also may
+		// stop at the correct $.async end marker (in case of component child) - hence
+		// we can't just use hydrate_next()
+		// TODO this feels indicative of a bug elsewhere; ideally we wouldn't need
+		// to double-traverse in the already-resolved case
+		if (was_hydrating) {
+			set_hydrate_node(end);
+		}
+
+		return;
+	}
+
+	const decrement_pending = increment_pending();
+
+	if (was_hydrating) {
+		var previous_hydrate_node = hydrate_node;
+		set_hydrate_node(end);
+	}
+
+	flatten(blockers, [], expressions, (values) => {
+		if (was_hydrating) {
+			set_hydrating(true);
+			set_hydrate_node(previous_hydrate_node);
+		}
+
+		try {
+			// get values eagerly to avoid creating blocks if they reject
+			for (const d of values) get(d);
+
+			fn(node, ...values);
+		} finally {
+			if (was_hydrating) {
+				set_hydrating(false);
+			}
+
+			decrement_pending();
+		}
+	});
+}