@depup/svelte 5.53.3-depup.0

package/src/compiler/phases/3-transform/client/visitors/RenderTag.js

@@ -0,0 +1,95 @@
+/** @import { Expression, Statement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { unwrap_optional } from '../../../../utils/ast.js';
+import * as b from '#compiler/builders';
+import { add_svelte_meta, build_expression, Memoizer } from './shared/utils.js';
+
+/**
+ * @param {AST.RenderTag} node
+ * @param {ComponentContext} context
+ */
+export function RenderTag(node, context) {
+	context.state.template.push_comment();
+
+	const call = unwrap_optional(node.expression);
+
+	/** @type {Expression[]} */
+	let args = [];
+
+	const memoizer = new Memoizer();
+
+	for (let i = 0; i < call.arguments.length; i++) {
+		const arg = /** @type {Expression} */ (call.arguments[i]);
+		const metadata = node.metadata.arguments[i];
+		let expression = build_expression(context, arg, metadata);
+		const memoized = memoizer.add(expression, metadata);
+
+		if (expression !== memoized) {
+			expression = b.call('$.get', memoized);
+		}
+
+		args.push(b.thunk(expression));
+	}
+
+	memoizer.apply();
+
+	/** @type {Statement[]} */
+	const statements = memoizer.deriveds(context.state.analysis.runes);
+
+	let snippet_function = build_expression(
+		context,
+		/** @type {Expression} */ (call.callee),
+		node.metadata.expression
+	);
+
+	if (node.metadata.dynamic) {
+		// If we have a chain expression then ensure a nullish snippet function gets turned into an empty one
+		if (node.expression.type === 'ChainExpression') {
+			snippet_function = b.logical('??', snippet_function, b.id('$.noop'));
+		}
+
+		statements.push(
+			add_svelte_meta(
+				b.call('$.snippet', context.state.node, b.thunk(snippet_function), ...args),
+				node,
+				'render'
+			)
+		);
+	} else {
+		statements.push(
+			add_svelte_meta(
+				(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
+					snippet_function,
+					context.state.node,
+					...args
+				),
+				node,
+				'render'
+			)
+		);
+	}
+
+	const async_values = memoizer.async_values();
+	const blockers = memoizer.blockers();
+
+	if (async_values || blockers) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					blockers,
+					memoizer.async_values(),
+					b.arrow([context.state.node, ...memoizer.async_ids()], b.block(statements))
+				)
+			)
+		);
+
+		if (context.state.is_standalone) {
+			context.state.init.push(b.stmt(b.call('$.next')));
+		}
+	} else {
+		context.state.init.push(statements.length === 1 ? statements[0] : b.block(statements));
+	}
+}

package/src/compiler/phases/3-transform/client/visitors/SlotElement.js

@@ -0,0 +1,94 @@
+/** @import { BlockStatement, Expression, ExpressionStatement, Literal, Property, Statement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '#compiler/builders';
+import { build_attribute_value } from './shared/element.js';
+import { Memoizer } from './shared/utils.js';
+
+/**
+ * @param {AST.SlotElement} node
+ * @param {ComponentContext} context
+ */
+export function SlotElement(node, context) {
+	// <slot {a}>fallback</slot>  -->   $.slot($$slots.default, { get a() { .. } }, () => ...fallback);
+	context.state.template.push_comment();
+
+	/** @type {Property[]} */
+	const props = [];
+
+	/** @type {Expression[]} */
+	const spreads = [];
+
+	/** @type {ExpressionStatement[]} */
+	const lets = [];
+
+	const memoizer = new Memoizer();
+
+	let name = b.literal('default');
+
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'SpreadAttribute') {
+			spreads.push(b.thunk(/** @type {Expression} */ (context.visit(attribute))));
+		} else if (attribute.type === 'Attribute') {
+			const { value, has_state } = build_attribute_value(
+				attribute.value,
+				context,
+				(value, metadata) =>
+					metadata.has_call || metadata.has_await
+						? b.call('$.get', memoizer.add(value, metadata))
+						: value
+			);
+
+			if (attribute.name === 'name') {
+				name = /** @type {Literal} */ (value);
+			} else if (attribute.name !== 'slot') {
+				if (has_state) {
+					props.push(b.get(attribute.name, [b.return(value)]));
+				} else {
+					props.push(b.init(attribute.name, value));
+				}
+			}
+		} else if (attribute.type === 'LetDirective') {
+			context.visit(attribute, { ...context.state, let_directives: lets });
+		}
+	}
+
+	memoizer.apply();
+
+	// Let bindings first, they can be used on attributes
+	context.state.init.push(...lets);
+
+	/** @type {Statement[]} */
+	const statements = memoizer.deriveds(context.state.analysis.runes);
+
+	const props_expression =
+		spreads.length === 0 ? b.object(props) : b.call('$.spread_props', b.object(props), ...spreads);
+
+	const fallback =
+		node.fragment.nodes.length === 0
+			? b.null
+			: b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.fragment)));
+
+	statements.push(
+		b.stmt(b.call('$.slot', context.state.node, b.id('$$props'), name, props_expression, fallback))
+	);
+
+	const async_values = memoizer.async_values();
+	const blockers = memoizer.blockers();
+
+	if (async_values || blockers) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					blockers,
+					async_values,
+					b.arrow([context.state.node, ...memoizer.async_ids()], b.block(statements))
+				)
+			)
+		);
+	} else {
+		context.state.init.push(statements.length === 1 ? statements[0] : b.block(statements));
+	}
+}

package/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js

@@ -0,0 +1,94 @@
+/** @import { AssignmentPattern, BlockStatement, Expression, Identifier, Statement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { dev } from '../../../../state.js';
+import { extract_paths } from '../../../../utils/ast.js';
+import * as b from '#compiler/builders';
+import { get_value } from './shared/declarations.js';
+
+/**
+ * @param {AST.SnippetBlock} node
+ * @param {ComponentContext} context
+ */
+export function SnippetBlock(node, context) {
+	// TODO hoist where possible
+	/** @type {(Identifier | AssignmentPattern)[]} */
+	const args = [b.id('$$anchor')];
+	/** @type {BlockStatement} */
+	let body;
+
+	/** @type {Statement[]} */
+	const declarations = [];
+
+	const transform = { ...context.state.transform };
+	const child_state = { ...context.state, transform };
+
+	for (let i = 0; i < node.parameters.length; i++) {
+		const argument = node.parameters[i];
+
+		if (!argument) continue;
+
+		if (argument.type === 'Identifier') {
+			args.push(b.assignment_pattern(argument, b.id('$.noop')));
+			transform[argument.name] = { read: b.call };
+
+			continue;
+		}
+
+		let arg_alias = `$$arg${i}`;
+		args.push(b.id(arg_alias));
+
+		const { inserts, paths } = extract_paths(argument, b.maybe_call(b.id(arg_alias)));
+
+		for (const { id, value } of inserts) {
+			id.name = context.state.scope.generate('$$array');
+			transform[id.name] = { read: get_value };
+
+			declarations.push(
+				b.var(id, b.call('$.derived', /** @type {Expression} */ (context.visit(b.thunk(value)))))
+			);
+		}
+
+		for (const path of paths) {
+			const name = /** @type {Identifier} */ (path.node).name;
+			const needs_derived = path.has_default_value; // to ensure that default value is only called once
+			const fn = b.thunk(/** @type {Expression} */ (context.visit(path.expression, child_state)));
+
+			declarations.push(b.let(path.node, needs_derived ? b.call('$.derived_safe_equal', fn) : fn));
+
+			transform[name] = {
+				read: needs_derived ? get_value : b.call
+			};
+
+			// we need to eagerly evaluate the expression in order to hit any
+			// 'Cannot access x before initialization' errors
+			if (dev) {
+				declarations.push(b.stmt(transform[name].read(b.id(name))));
+			}
+		}
+	}
+	const block = /** @type {BlockStatement} */ (context.visit(node.body, child_state)).body;
+	body = b.block([
+		dev ? b.stmt(b.call('$.validate_snippet_args', b.spread(b.id('arguments')))) : b.empty,
+		...declarations,
+		...block
+	]);
+
+	// in dev we use a FunctionExpression (not arrow function) so we can use `arguments`
+	let snippet = dev
+		? b.call('$.wrap_snippet', b.id(context.state.analysis.name), b.function(null, args, body))
+		: b.arrow(args, body);
+
+	const declaration = b.const(node.expression, snippet);
+
+	// Top-level snippets are hoisted so they can be referenced in the `<script>`
+	if (context.path.length === 1 && context.path[0].type === 'Fragment') {
+		if (node.metadata.can_hoist) {
+			context.state.module_level_snippets.push(declaration);
+		} else {
+			context.state.instance_level_snippets.push(declaration);
+		}
+	} else {
+		context.state.snippets.push(declaration);
+	}
+}

package/src/compiler/phases/3-transform/client/visitors/SpreadAttribute.js

@@ -0,0 +1,10 @@
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+
+/**
+ * @param {AST.SpreadAttribute} node
+ * @param {ComponentContext} context
+ */
+export function SpreadAttribute(node, context) {
+	return context.visit(node.expression);
+}

package/src/compiler/phases/3-transform/client/visitors/SvelteBody.js

@@ -0,0 +1,11 @@
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { visit_special_element } from './shared/special_element.js';
+
+/**
+ * @param {AST.SvelteBody} node
+ * @param {ComponentContext} context
+ */
+export function SvelteBody(node, context) {
+	visit_special_element(node, '$.document.body', context);
+}

package/src/compiler/phases/3-transform/client/visitors/SvelteBoundary.js

@@ -0,0 +1,126 @@
+/** @import { BlockStatement, Statement, Expression, VariableDeclaration } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { dev } from '../../../../state.js';
+import * as b from '#compiler/builders';
+
+/**
+ * @param {AST.SvelteBoundary} node
+ * @param {ComponentContext} context
+ */
+export function SvelteBoundary(node, context) {
+	const props = b.object([]);
+
+	for (const attribute of node.attributes) {
+		if (attribute.type !== 'Attribute' || attribute.value === true) {
+			// these can't exist, because they would have caused validation
+			// to fail, but typescript doesn't know that
+			continue;
+		}
+
+		const chunk = Array.isArray(attribute.value)
+			? /** @type {AST.ExpressionTag} */ (attribute.value[0])
+			: attribute.value;
+
+		const expression = /** @type {Expression} */ (context.visit(chunk.expression, context.state));
+
+		if (chunk.metadata.expression.has_state) {
+			props.properties.push(b.get(attribute.name, [b.return(expression)]));
+		} else {
+			props.properties.push(b.init(attribute.name, expression));
+		}
+	}
+
+	const nodes = [];
+
+	/** @type {Statement[]} */
+	const const_tags = [];
+
+	/** @type {Statement[]} */
+	const hoisted = [];
+
+	let has_const = false;
+
+	// const tags need to live inside the boundary, but might also be referenced in hoisted snippets.
+	// to resolve this we cheat: we duplicate const tags inside snippets
+	// We'll revert this behavior in the future, it was a mistake to allow this (Component snippets also don't do this).
+	for (const child of node.fragment.nodes) {
+		if (child.type === 'ConstTag') {
+			has_const = true;
+			if (!context.state.options.experimental.async) {
+				context.visit(child, {
+					...context.state,
+					consts: const_tags,
+					scope: context.state.scopes.get(node.fragment) ?? context.state.scope
+				});
+			}
+		}
+	}
+
+	for (const child of node.fragment.nodes) {
+		if (child.type === 'ConstTag') {
+			if (context.state.options.experimental.async) {
+				nodes.push(child);
+			}
+			continue;
+		}
+
+		if (child.type === 'SnippetBlock') {
+			if (
+				context.state.options.experimental.async &&
+				has_const &&
+				!['failed', 'pending'].includes(child.expression.name)
+			) {
+				// we can't hoist snippets as they may reference const tags, so we just keep them in the fragment
+				nodes.push(child);
+			} else {
+				/** @type {Statement[]} */
+				const statements = [];
+
+				context.visit(child, { ...context.state, snippets: statements });
+
+				const snippet = /** @type {VariableDeclaration} */ (statements[0]);
+
+				const snippet_fn = dev
+					? // @ts-expect-error we know this shape is correct
+						snippet.declarations[0].init.arguments[1]
+					: snippet.declarations[0].init;
+
+				if (!context.state.options.experimental.async) {
+					snippet_fn.body.body.unshift(
+						...const_tags.filter((node) => node.type === 'VariableDeclaration')
+					);
+				}
+
+				if (['failed', 'pending'].includes(child.expression.name)) {
+					props.properties.push(b.prop('init', child.expression, child.expression));
+				}
+
+				hoisted.push(snippet);
+			}
+
+			continue;
+		}
+
+		nodes.push(child);
+	}
+
+	const block = /** @type {BlockStatement} */ (
+		context.visit(
+			{ ...node.fragment, nodes },
+			// Since we're creating a new fragment the reference in scopes can't match, so we gotta attach the right scope manually
+			{ ...context.state, scope: context.state.scopes.get(node.fragment) ?? context.state.scope }
+		)
+	);
+
+	if (!context.state.options.experimental.async) {
+		block.body.unshift(...const_tags);
+	}
+
+	const boundary = b.stmt(
+		b.call('$.boundary', context.state.node, props, b.arrow([b.id('$$anchor')], block))
+	);
+
+	context.state.template.push_comment();
+	context.state.init.push(hoisted.length > 0 ? b.block([...hoisted, boundary]) : boundary);
+}

package/src/compiler/phases/3-transform/client/visitors/SvelteComponent.js

@@ -0,0 +1,13 @@
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { build_component } from './shared/component.js';
+import * as b from '#compiler/builders';
+
+/**
+ * @param {AST.SvelteComponent} node
+ * @param {ComponentContext} context
+ */
+export function SvelteComponent(node, context) {
+	const component = build_component(node, '$$component', null, context);
+	context.state.init.push(component);
+}

package/src/compiler/phases/3-transform/client/visitors/SvelteDocument.js

@@ -0,0 +1,11 @@
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { visit_special_element } from './shared/special_element.js';
+
+/**
+ * @param {AST.SvelteDocument} node
+ * @param {ComponentContext} context
+ */
+export function SvelteDocument(node, context) {
+	visit_special_element(node, '$.document', context);
+}

package/src/compiler/phases/3-transform/client/visitors/SvelteElement.js

@@ -0,0 +1,161 @@
+/** @import { BlockStatement, Expression, ExpressionStatement, Statement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { dev, locator } from '../../../../state.js';
+import { is_text_attribute } from '../../../../utils/ast.js';
+import * as b from '#compiler/builders';
+import { determine_namespace_for_children } from '../../utils.js';
+import {
+	build_attribute_value,
+	build_attribute_effect,
+	build_set_class
+} from './shared/element.js';
+import { build_render_statement, Memoizer } from './shared/utils.js';
+
+/**
+ * @param {AST.SvelteElement} node
+ * @param {ComponentContext} context
+ */
+export function SvelteElement(node, context) {
+	context.state.template.push_comment();
+
+	/** @type {Array<AST.Attribute | AST.SpreadAttribute>} */
+	const attributes = [];
+
+	/** @type {AST.Attribute['value'] | undefined} */
+	let dynamic_namespace = undefined;
+
+	/** @type {AST.ClassDirective[]} */
+	const class_directives = [];
+
+	/** @type {AST.StyleDirective[]} */
+	const style_directives = [];
+
+	/** @type {ExpressionStatement[]} */
+	const statements = [];
+
+	// Create a temporary context which picks up the init/update statements.
+	// They'll then be added to the function parameter of $.element
+	const element_id = b.id(context.state.scope.generate('$$element'));
+
+	/** @type {ComponentContext} */
+	const inner_context = {
+		...context,
+		state: {
+			...context.state,
+			node: element_id,
+			init: [],
+			update: [],
+			after_update: [],
+			memoizer: new Memoizer()
+		}
+	};
+
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'Attribute') {
+			if (attribute.name === 'xmlns' && !is_text_attribute(attribute)) {
+				dynamic_namespace = attribute.value;
+			}
+			attributes.push(attribute);
+		} else if (attribute.type === 'SpreadAttribute') {
+			attributes.push(attribute);
+		} else if (attribute.type === 'ClassDirective') {
+			class_directives.push(attribute);
+		} else if (attribute.type === 'StyleDirective') {
+			style_directives.push(attribute);
+		} else if (attribute.type === 'LetDirective') {
+			statements.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+		} else if (attribute.type === 'OnDirective') {
+			const handler = /** @type {Expression} */ (context.visit(attribute, inner_context.state));
+			inner_context.state.after_update.push(b.stmt(handler));
+		} else {
+			context.visit(attribute, inner_context.state);
+		}
+	}
+
+	if (
+		attributes.length === 1 &&
+		attributes[0].type === 'Attribute' &&
+		attributes[0].name.toLowerCase() === 'class' &&
+		is_text_attribute(attributes[0])
+	) {
+		build_set_class(node, element_id, attributes[0], class_directives, inner_context, false);
+	} else if (attributes.length) {
+		// Always use spread because we don't know whether the element is a custom element or not,
+		// therefore we need to do the "how to set an attribute" logic at runtime.
+		build_attribute_effect(
+			attributes,
+			class_directives,
+			style_directives,
+			inner_context,
+			node,
+			element_id
+		);
+	}
+
+	const has_await = node.metadata.expression.has_await;
+	const has_blockers = node.metadata.expression.has_blockers();
+
+	const expression = /** @type {Expression} */ (context.visit(node.tag));
+	const get_tag = b.thunk(has_await ? b.call('$.get', b.id('$$tag')) : expression);
+
+	/** @type {Statement[]} */
+	const inner = inner_context.state.init;
+	if (inner_context.state.update.length > 0) {
+		inner.push(build_render_statement(inner_context.state));
+	}
+	inner.push(...inner_context.state.after_update);
+	inner.push(
+		.../** @type {BlockStatement} */ (
+			context.visit(node.fragment, {
+				...context.state,
+				metadata: {
+					...context.state.metadata,
+					namespace: determine_namespace_for_children(node, context.state.metadata.namespace)
+				}
+			})
+		).body
+	);
+
+	if (dev) {
+		statements.push(b.stmt(b.call('$.validate_dynamic_element_tag', get_tag)));
+		if (node.fragment.nodes.length > 0) {
+			statements.push(b.stmt(b.call('$.validate_void_dynamic_element', get_tag)));
+		}
+	}
+
+	const location = dev && locator(node.start);
+
+	statements.push(
+		b.stmt(
+			b.call(
+				'$.element',
+				context.state.node,
+				get_tag,
+				node.metadata.svg || node.metadata.mathml ? b.true : b.false,
+				inner.length > 0 && b.arrow([element_id, b.id('$$anchor')], b.block(inner)),
+				dynamic_namespace && b.thunk(build_attribute_value(dynamic_namespace, context).value),
+				location && b.array([b.literal(location.line), b.literal(location.column)])
+			)
+		)
+	);
+
+	if (has_await || has_blockers) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					node.metadata.expression.blockers(),
+					has_await ? b.array([b.thunk(expression, true)]) : b.void0,
+					b.arrow(
+						has_await ? [context.state.node, b.id('$$tag')] : [context.state.node],
+						b.block(statements)
+					)
+				)
+			)
+		);
+	} else {
+		context.state.init.push(statements.length === 1 ? statements[0] : b.block(statements));
+	}
+}

package/src/compiler/phases/3-transform/client/visitors/SvelteFragment.js

@@ -0,0 +1,17 @@
+/** @import { BlockStatement, ExpressionStatement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+
+/**
+ * @param {AST.SvelteFragment} node
+ * @param {ComponentContext} context
+ */
+export function SvelteFragment(node, context) {
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'LetDirective') {
+			context.visit(attribute);
+		}
+	}
+
+	context.state.init.push(.../** @type {BlockStatement} */ (context.visit(node.fragment)).body);
+}

package/src/compiler/phases/3-transform/client/visitors/SvelteHead.js

@@ -0,0 +1,23 @@
+/** @import { BlockStatement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '#compiler/builders';
+import { hash } from '../../../../../utils.js';
+import { filename } from '../../../../state.js';
+
+/**
+ * @param {AST.SvelteHead} node
+ * @param {ComponentContext} context
+ */
+export function SvelteHead(node, context) {
+	// TODO attributes?
+	context.state.init.push(
+		b.stmt(
+			b.call(
+				b.id('$.head', node.name_loc),
+				b.literal(hash(filename)),
+				b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.fragment)))
+			)
+		)
+	);
+}

package/src/compiler/phases/3-transform/client/visitors/SvelteSelf.js

@@ -0,0 +1,13 @@
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { component_name } from '../../../../state.js';
+import { build_component } from './shared/component.js';
+
+/**
+ * @param {AST.SvelteSelf} node
+ * @param {ComponentContext} context
+ */
+export function SvelteSelf(node, context) {
+	const component = build_component(node, component_name, node.name_loc, context);
+	context.state.init.push(component);
+}

package/src/compiler/phases/3-transform/client/visitors/SvelteWindow.js

@@ -0,0 +1,11 @@
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { visit_special_element } from './shared/special_element.js';
+
+/**
+ * @param {AST.SvelteWindow} node
+ * @param {ComponentContext} context
+ */
+export function SvelteWindow(node, context) {
+	visit_special_element(node, '$.window', context);
+}