@depup/svelte 5.53.3-depup.0

package/src/internal/shared/utils.js

@@ -0,0 +1,144 @@
+// Store the references to globals in case someone tries to monkey patch these, causing the below
+// to de-opt (this occurs often when using popular extensions).
+export var is_array = Array.isArray;
+export var index_of = Array.prototype.indexOf;
+export var includes = Array.prototype.includes;
+export var array_from = Array.from;
+export var object_keys = Object.keys;
+export var define_property = Object.defineProperty;
+export var get_descriptor = Object.getOwnPropertyDescriptor;
+export var get_descriptors = Object.getOwnPropertyDescriptors;
+export var object_prototype = Object.prototype;
+export var array_prototype = Array.prototype;
+export var get_prototype_of = Object.getPrototypeOf;
+export var is_extensible = Object.isExtensible;
+export var has_own_property = Object.prototype.hasOwnProperty;
+
+/**
+ * @param {any} thing
+ * @returns {thing is Function}
+ */
+export function is_function(thing) {
+	return typeof thing === 'function';
+}
+
+export const noop = () => {};
+
+// Adapted from https://github.com/then/is-promise/blob/master/index.js
+// Distributed under MIT License https://github.com/then/is-promise/blob/master/LICENSE
+
+/**
+ * @template [T=any]
+ * @param {any} value
+ * @returns {value is PromiseLike<T>}
+ */
+export function is_promise(value) {
+	return typeof value?.then === 'function';
+}
+
+/** @param {Function} fn */
+export function run(fn) {
+	return fn();
+}
+
+/** @param {Array<() => void>} arr */
+export function run_all(arr) {
+	for (var i = 0; i < arr.length; i++) {
+		arr[i]();
+	}
+}
+
+/**
+ * TODO replace with Promise.withResolvers once supported widely enough
+ * @template [T=void]
+ */
+export function deferred() {
+	/** @type {(value: T) => void} */
+	var resolve;
+
+	/** @type {(reason: any) => void} */
+	var reject;
+
+	/** @type {Promise<T>} */
+	var promise = new Promise((res, rej) => {
+		resolve = res;
+		reject = rej;
+	});
+
+	// @ts-expect-error
+	return { promise, resolve, reject };
+}
+
+/**
+ * @template V
+ * @param {V} value
+ * @param {V | (() => V)} fallback
+ * @param {boolean} [lazy]
+ * @returns {V}
+ */
+export function fallback(value, fallback, lazy = false) {
+	return value === undefined
+		? lazy
+			? /** @type {() => V} */ (fallback)()
+			: /** @type {V} */ (fallback)
+		: value;
+}
+
+/**
+ * When encountering a situation like `let [a, b, c] = $derived(blah())`,
+ * we need to stash an intermediate value that `a`, `b`, and `c` derive
+ * from, in case it's an iterable
+ * @template T
+ * @param {ArrayLike<T> | Iterable<T>} value
+ * @param {number} [n]
+ * @returns {Array<T>}
+ */
+export function to_array(value, n) {
+	// return arrays unchanged
+	if (Array.isArray(value)) {
+		return value;
+	}
+
+	// if value is not iterable, or `n` is unspecified (indicates a rest
+	// element, which means we're not concerned about unbounded iterables)
+	// convert to an array with `Array.from`
+	if (n === undefined || !(Symbol.iterator in value)) {
+		return Array.from(value);
+	}
+
+	// otherwise, populate an array with `n` values
+
+	/** @type {T[]} */
+	const array = [];
+
+	for (const element of value) {
+		array.push(element);
+		if (array.length === n) break;
+	}
+
+	return array;
+}
+
+/**
+ * @param {Record<string | symbol, unknown>} obj
+ * @param {Array<string | symbol>} keys
+ * @returns {Record<string | symbol, unknown>}
+ */
+export function exclude_from_object(obj, keys) {
+	/** @type {Record<string | symbol, unknown>} */
+	var result = {};
+
+	for (var key in obj) {
+		if (!keys.includes(key)) {
+			result[key] = obj[key];
+		}
+	}
+
+	for (var symbol of Object.getOwnPropertySymbols(obj)) {
+		if (Object.propertyIsEnumerable.call(obj, symbol) && !keys.includes(symbol)) {
+			result[symbol] = obj[symbol];
+		}
+	}
+
+	return result;
+}

package/src/internal/shared/validate.js

@@ -0,0 +1,47 @@
+import { is_void } from '../../utils.js';
+import * as w from './warnings.js';
+import * as e from './errors.js';
+
+export { invalid_default_snippet } from './errors.js';
+
+/**
+ * @param {() => string} tag_fn
+ * @returns {void}
+ */
+export function validate_void_dynamic_element(tag_fn) {
+	const tag = tag_fn();
+	if (tag && is_void(tag)) {
+		w.dynamic_void_element_content(tag);
+	}
+}
+
+/** @param {() => unknown} tag_fn */
+export function validate_dynamic_element_tag(tag_fn) {
+	const tag = tag_fn();
+	const is_string = typeof tag === 'string';
+	if (tag && !is_string) {
+		e.svelte_element_invalid_this_value();
+	}
+}
+
+/**
+ * @param {any} store
+ * @param {string} name
+ */
+export function validate_store(store, name) {
+	if (store != null && typeof store.subscribe !== 'function') {
+		e.store_invalid_shape(name);
+	}
+}
+
+/**
+ * @template {(...args: any[]) => unknown} T
+ * @param {T} fn
+ */
+export function prevent_snippet_stringification(fn) {
+	fn.toString = () => {
+		e.snippet_without_render_tag();
+		return '';
+	};
+	return fn;
+}

package/src/internal/shared/warnings.js

@@ -0,0 +1,40 @@
+/* This file is generated by scripts/process-messages/index.js. Do not edit! */
+
+import { DEV } from 'esm-env';
+
+var bold = 'font-weight: bold';
+var normal = 'font-weight: normal';
+
+/**
+ * `<svelte:element this="%tag%">` is a void element — it cannot have content
+ * @param {string} tag
+ */
+export function dynamic_void_element_content(tag) {
+	if (DEV) {
+		console.warn(`%c[svelte] dynamic_void_element_content\n%c\`<svelte:element this="${tag}">\` is a void element — it cannot have content\nhttps://svelte.dev/e/dynamic_void_element_content`, bold, normal);
+	} else {
+		console.warn(`https://svelte.dev/e/dynamic_void_element_content`);
+	}
+}
+
+/**
+ * The following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:
+ * 
+ * %properties%
+ * @param {string | undefined | null} [properties]
+ */
+export function state_snapshot_uncloneable(properties) {
+	if (DEV) {
+		console.warn(
+			`%c[svelte] state_snapshot_uncloneable\n%c${properties
+				? `The following properties cannot be cloned with \`$state.snapshot\` — the return value contains the originals:
+
+${properties}`
+				: 'Value cannot be cloned with `$state.snapshot` — the original value was returned'}\nhttps://svelte.dev/e/state_snapshot_uncloneable`,
+			bold,
+			normal
+		);
+	} else {
+		console.warn(`https://svelte.dev/e/state_snapshot_uncloneable`);
+	}
+}

package/src/legacy/legacy-client.js

@@ -0,0 +1,281 @@
+/** @import { ComponentConstructorOptions, ComponentType, SvelteComponent, Component } from 'svelte' */
+import { DIRTY, LEGACY_PROPS, MAYBE_DIRTY } from '../internal/client/constants.js';
+import { user_pre_effect } from '../internal/client/reactivity/effects.js';
+import { mutable_source, set } from '../internal/client/reactivity/sources.js';
+import { hydrate, mount, unmount } from '../internal/client/render.js';
+import { active_effect, get } from '../internal/client/runtime.js';
+import { flushSync } from '../internal/client/reactivity/batch.js';
+import { define_property, is_array } from '../internal/shared/utils.js';
+import * as e from '../internal/client/errors.js';
+import * as w from '../internal/client/warnings.js';
+import { DEV } from 'esm-env';
+import { FILENAME } from '../constants.js';
+import { component_context, dev_current_component_function } from '../internal/client/context.js';
+import { async_mode_flag } from '../internal/flags/index.js';
+import { set_signal_status } from '../internal/client/reactivity/status.js';
+
+/**
+ * Takes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component.
+ *
+ * @deprecated Use this only as a temporary solution to migrate your imperative component code to Svelte 5.
+ *
+ * @template {Record<string, any>} Props
+ * @template {Record<string, any>} Exports
+ * @template {Record<string, any>} Events
+ * @template {Record<string, any>} Slots
+ *
+ * @param {ComponentConstructorOptions<Props> & {
+ * 	component: ComponentType<SvelteComponent<Props, Events, Slots>> | Component<Props>;
+ * }} options
+ * @returns {SvelteComponent<Props, Events, Slots> & Exports}
+ */
+export function createClassComponent(options) {
+	// @ts-expect-error $$prop_def etc are not actually defined
+	return new Svelte4Component(options);
+}
+
+/**
+ * Takes the component function and returns a Svelte 4 compatible component constructor.
+ *
+ * @deprecated Use this only as a temporary solution to migrate your imperative component code to Svelte 5.
+ *
+ * @template {Record<string, any>} Props
+ * @template {Record<string, any>} Exports
+ * @template {Record<string, any>} Events
+ * @template {Record<string, any>} Slots
+ *
+ * @param {SvelteComponent<Props, Events, Slots> | Component<Props>} component
+ * @returns {ComponentType<SvelteComponent<Props, Events, Slots> & Exports>}
+ */
+export function asClassComponent(component) {
+	// @ts-expect-error $$prop_def etc are not actually defined
+	return class extends Svelte4Component {
+		/** @param {any} options */
+		constructor(options) {
+			super({
+				component,
+				...options
+			});
+		}
+	};
+}
+
+/**
+ * Support using the component as both a class and function during the transition period
+ * @typedef  {{new (o: ComponentConstructorOptions): SvelteComponent;(...args: Parameters<Component<Record<string, any>>>): ReturnType<Component<Record<string, any>, Record<string, any>>>;}} LegacyComponentType
+ */
+
+class Svelte4Component {
+	/** @type {any} */
+	#events;
+
+	/** @type {Record<string, any>} */
+	#instance;
+
+	/**
+	 * @param {ComponentConstructorOptions & {
+	 *  component: any;
+	 * }} options
+	 */
+	constructor(options) {
+		var sources = new Map();
+
+		/**
+		 * @param {string | symbol} key
+		 * @param {unknown} value
+		 */
+		var add_source = (key, value) => {
+			var s = mutable_source(value, false, false);
+			sources.set(key, s);
+			return s;
+		};
+
+		// Replicate coarse-grained props through a proxy that has a version source for
+		// each property, which is incremented on updates to the property itself. Do not
+		// use our $state proxy because that one has fine-grained reactivity.
+		const props = new Proxy(
+			{ ...(options.props || {}), $$events: {} },
+			{
+				get(target, prop) {
+					return get(sources.get(prop) ?? add_source(prop, Reflect.get(target, prop)));
+				},
+				has(target, prop) {
+					// Necessary to not throw "invalid binding" validation errors on the component side
+					if (prop === LEGACY_PROPS) return true;
+
+					get(sources.get(prop) ?? add_source(prop, Reflect.get(target, prop)));
+					return Reflect.has(target, prop);
+				},
+				set(target, prop, value) {
+					set(sources.get(prop) ?? add_source(prop, value), value);
+					return Reflect.set(target, prop, value);
+				}
+			}
+		);
+
+		this.#instance = (options.hydrate ? hydrate : mount)(options.component, {
+			target: options.target,
+			anchor: options.anchor,
+			props,
+			context: options.context,
+			intro: options.intro ?? false,
+			recover: options.recover,
+			transformError: options.transformError
+		});
+
+		// We don't flushSync for custom element wrappers or if the user doesn't want it,
+		// or if we're in async mode since `flushSync()` will fail
+		if (!async_mode_flag && (!options?.props?.$$host || options.sync === false)) {
+			flushSync();
+		}
+
+		this.#events = props.$$events;
+
+		for (const key of Object.keys(this.#instance)) {
+			if (key === '$set' || key === '$destroy' || key === '$on') continue;
+			define_property(this, key, {
+				get() {
+					return this.#instance[key];
+				},
+				/** @param {any} value */
+				set(value) {
+					this.#instance[key] = value;
+				},
+				enumerable: true
+			});
+		}
+
+		this.#instance.$set = /** @param {Record<string, any>} next */ (next) => {
+			Object.assign(props, next);
+		};
+
+		this.#instance.$destroy = () => {
+			unmount(this.#instance);
+		};
+	}
+
+	/** @param {Record<string, any>} props */
+	$set(props) {
+		this.#instance.$set(props);
+	}
+
+	/**
+	 * @param {string} event
+	 * @param {(...args: any[]) => any} callback
+	 * @returns {any}
+	 */
+	$on(event, callback) {
+		this.#events[event] = this.#events[event] || [];
+
+		/** @param {any[]} args */
+		const cb = (...args) => callback.call(this, ...args);
+		this.#events[event].push(cb);
+		return () => {
+			this.#events[event] = this.#events[event].filter(/** @param {any} fn */ (fn) => fn !== cb);
+		};
+	}
+
+	$destroy() {
+		this.#instance.$destroy();
+	}
+}
+
+/**
+ * Runs the given function once immediately on the server, and works like `$effect.pre` on the client.
+ *
+ * @deprecated Use this only as a temporary solution to migrate your component code to Svelte 5.
+ * @param {() => void | (() => void)} fn
+ * @returns {void}
+ */
+export function run(fn) {
+	user_pre_effect(() => {
+		fn();
+		var effect = /** @type {import('#client').Effect} */ (active_effect);
+		// If the effect is immediately made dirty again, mark it as maybe dirty to emulate legacy behaviour
+		if ((effect.f & DIRTY) !== 0) {
+			let filename = "a file (we can't know which one)";
+			if (DEV) {
+				// @ts-ignore
+				filename = dev_current_component_function?.[FILENAME] ?? filename;
+			}
+			w.legacy_recursive_reactive_block(filename);
+			set_signal_status(effect, MAYBE_DIRTY);
+		}
+	});
+}
+
+/**
+ * Function to mimic the multiple listeners available in svelte 4
+ * @deprecated
+ * @param {EventListener[]} handlers
+ * @returns {EventListener}
+ */
+export function handlers(...handlers) {
+	return function (event) {
+		const { stopImmediatePropagation } = event;
+		let stopped = false;
+
+		event.stopImmediatePropagation = () => {
+			stopped = true;
+			stopImmediatePropagation.call(event);
+		};
+
+		const errors = [];
+
+		for (const handler of handlers) {
+			try {
+				// @ts-expect-error `this` is not typed
+				handler?.call(this, event);
+			} catch (e) {
+				errors.push(e);
+			}
+
+			if (stopped) {
+				break;
+			}
+		}
+
+		for (let error of errors) {
+			queueMicrotask(() => {
+				throw error;
+			});
+		}
+	};
+}
+
+/**
+ * Function to create a `bubble` function that mimic the behavior of `on:click` without handler available in svelte 4.
+ * @deprecated Use this only as a temporary solution to migrate your automatically delegated events in Svelte 5.
+ */
+export function createBubbler() {
+	const active_component_context = component_context;
+	if (active_component_context === null) {
+		e.lifecycle_outside_component('createBubbler');
+	}
+
+	return (/**@type {string}*/ type) => (/**@type {Event}*/ event) => {
+		const events = /** @type {Record<string, Function | Function[]>} */ (
+			active_component_context.s.$$events
+		)?.[/** @type {any} */ (type)];
+
+		if (events) {
+			const callbacks = is_array(events) ? events.slice() : [events];
+			for (const fn of callbacks) {
+				fn.call(active_component_context.x, event);
+			}
+			return !event.defaultPrevented;
+		}
+		return true;
+	};
+}
+
+export {
+	once,
+	preventDefault,
+	self,
+	stopImmediatePropagation,
+	stopPropagation,
+	trusted,
+	passive,
+	nonpassive
+} from '../internal/client/dom/legacy/event-modifiers.js';

package/src/legacy/legacy-server.js

@@ -0,0 +1,112 @@
+/** @import { SvelteComponent } from '../index.js' */
+/** @import { Csp } from '#server' */
+import { asClassComponent as as_class_component, createClassComponent } from './legacy-client.js';
+import { render } from '../internal/server/index.js';
+import { async_mode_flag } from '../internal/flags/index.js';
+
+// By having this as a separate entry point for server environments, we save the client bundle from having to include the server runtime
+
+export { createClassComponent };
+
+/** @typedef {{ head: string, html: string, css: { code: string, map: null }; hashes?: { script: `sha256-${string}`[] } }} LegacyRenderResult */
+
+/**
+ * Takes a Svelte 5 component and returns a Svelte 4 compatible component constructor.
+ *
+ * @deprecated Use this only as a temporary solution to migrate your imperative component code to Svelte 5.
+ *
+ * @template {Record<string, any>} Props
+ * @template {Record<string, any>} Exports
+ * @template {Record<string, any>} Events
+ * @template {Record<string, any>} Slots
+ *
+ * @param {SvelteComponent<Props, Events, Slots>} component
+ * @returns {typeof SvelteComponent<Props, Events, Slots> & Exports}
+ */
+export function asClassComponent(component) {
+	const component_constructor = as_class_component(component);
+	/** @type {(props?: {}, opts?: { $$slots?: {}; context?: Map<any, any>; csp?: Csp; transformError?: (error: unknown) => unknown }) => LegacyRenderResult & PromiseLike<LegacyRenderResult> } */
+	const _render = (props, { context, csp, transformError } = {}) => {
+		// @ts-expect-error the typings are off, but this will work if the component is compiled in SSR mode
+		const result = render(component, { props, context, csp, transformError });
+
+		const munged = Object.defineProperties(
+			/** @type {LegacyRenderResult & PromiseLike<LegacyRenderResult>} */ ({}),
+			{
+				css: {
+					value: { code: '', map: null }
+				},
+				head: {
+					get: () => result.head
+				},
+				html: {
+					get: () => result.body
+				},
+				then: {
+					/**
+					 * this is not type-safe, but honestly it's the best I can do right now, and it's a straightforward function.
+					 *
+					 * @template TResult1
+					 * @template [TResult2=never]
+					 * @param { (value: LegacyRenderResult) => TResult1 } onfulfilled
+					 * @param { (reason: unknown) => TResult2 } onrejected
+					 */
+					value: (onfulfilled, onrejected) => {
+						if (!async_mode_flag) {
+							const user_result = onfulfilled({
+								css: munged.css,
+								head: munged.head,
+								html: munged.html
+							});
+							return Promise.resolve(user_result);
+						}
+
+						return result.then((result) => {
+							return onfulfilled({
+								css: munged.css,
+								head: result.head,
+								html: result.body,
+								hashes: result.hashes
+							});
+						}, onrejected);
+					}
+				}
+			}
+		);
+
+		return munged;
+	};
+
+	// @ts-expect-error this is present for SSR
+	component_constructor.render = _render;
+
+	// @ts-ignore
+	return component_constructor;
+}
+
+/**
+ * Runs the given function once immediately on the server, and works like `$effect.pre` on the client.
+ *
+ * @deprecated Use this only as a temporary solution to migrate your component code to Svelte 5.
+ * @param {() => void | (() => void)} fn
+ * @returns {void}
+ */
+export function run(fn) {
+	fn();
+}
+
+const noop = () => {};
+
+// event stuff, no need to worry about it for SSR but needs to be there or it will crash
+export {
+	noop as handlers,
+	noop as createBubbler,
+	noop as once,
+	noop as preventDefault,
+	noop as self,
+	noop as stopImmediatePropagation,
+	noop as stopPropagation,
+	noop as trusted,
+	noop as passive,
+	noop as nonpassive
+};

package/src/motion/index.js

@@ -0,0 +1,32 @@
+import { MediaQuery } from 'svelte/reactivity';
+
+export * from './spring.js';
+export * from './tweened.js';
+
+/**
+ * A [media query](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery) that matches if the user [prefers reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).
+ *
+ * ```svelte
+ * <script>
+ * 	import { prefersReducedMotion } from 'svelte/motion';
+ * 	import { fly } from 'svelte/transition';
+ *
+ * 	let visible = $state(false);
+ * </script>
+ *
+ * <button onclick={() => visible = !visible}>
+ * 	toggle
+ * </button>
+ *
+ * {#if visible}
+ * 	<p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>
+ * 		flies in, unless the user prefers reduced motion
+ * 	</p>
+ * {/if}
+ * ```
+ * @type {MediaQuery}
+ * @since 5.7.0
+ */
+export const prefersReducedMotion = /*@__PURE__*/ new MediaQuery(
+	'(prefers-reduced-motion: reduce)'
+);