@depup/svelte 5.53.3-depup.0

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

@@ -0,0 +1,186 @@
+/** @import { Expression, Statement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentClientTransformState, ComponentContext } from '../types' */
+import * as b from '#compiler/builders';
+import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../../../constants.js';
+import { clean_nodes, infer_namespace } from '../../utils.js';
+import { transform_template } from '../transform-template/index.js';
+import { Template } from '../transform-template/template.js';
+import { process_children } from './shared/fragment.js';
+import { build_render_statement, Memoizer } from './shared/utils.js';
+
+/**
+ * @param {AST.Fragment} node
+ * @param {ComponentContext} context
+ */
+export function Fragment(node, context) {
+	// Creates a new block which looks roughly like this:
+	// ```js
+	// // hoisted:
+	// const block_name = $.from_html(`...`);
+	//
+	// // for the main block:
+	// const id = block_name();
+	// // init stuff and possibly render effect
+	// $.append($$anchor, id);
+	// ```
+	// Adds the hoisted parts to `context.state.hoisted` and returns the statements of the main block.
+
+	const parent = context.path.at(-1) ?? node;
+
+	const namespace = infer_namespace(context.state.metadata.namespace, parent, node.nodes);
+
+	const { hoisted, trimmed, is_standalone, is_text_first } = clean_nodes(
+		parent,
+		node.nodes,
+		context.path,
+		namespace,
+		context.state,
+		context.state.preserve_whitespace,
+		context.state.options.preserveComments
+	);
+
+	if (hoisted.length === 0 && trimmed.length === 0) {
+		return b.block([]);
+	}
+
+	const is_single_element = trimmed.length === 1 && trimmed[0].type === 'RegularElement';
+	const is_single_child_not_needing_template =
+		trimmed.length === 1 &&
+		(trimmed[0].type === 'SvelteFragment' ||
+			trimmed[0].type === 'TitleElement' ||
+			(trimmed[0].type === 'IfBlock' &&
+				trimmed[0].elseif &&
+				/** @type {AST.IfBlock} */ (parent).metadata.flattened?.includes(trimmed[0])));
+	const template_name = context.state.scope.root.unique('root'); // TODO infer name from parent
+
+	/** @type {Statement[]} */
+	const body = [];
+
+	/** @type {Statement | undefined} */
+	let close = undefined;
+
+	/** @type {ComponentClientTransformState} */
+	const state = {
+		...context.state,
+		init: [],
+		snippets: [],
+		consts: [],
+		let_directives: [],
+		update: [],
+		after_update: [],
+		memoizer: new Memoizer(),
+		template: new Template(),
+		transform: { ...context.state.transform },
+		metadata: {
+			namespace,
+			bound_contenteditable: context.state.metadata.bound_contenteditable
+		},
+		async_consts: undefined
+	};
+
+	for (const node of hoisted) {
+		context.visit(node, state);
+	}
+
+	if (is_single_element) {
+		const element = /** @type {AST.RegularElement} */ (trimmed[0]);
+
+		const id = b.id(context.state.scope.generate(element.name), element.name_loc);
+
+		context.visit(element, {
+			...state,
+			node: id
+		});
+
+		let flags = state.template.needs_import_node ? TEMPLATE_USE_IMPORT_NODE : undefined;
+
+		const template = transform_template(state, namespace, flags);
+		state.hoisted.push(b.var(template_name, template));
+
+		state.init.unshift(b.var(id, b.call(template_name)));
+		close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
+	} else if (is_single_child_not_needing_template) {
+		context.visit(trimmed[0], state);
+	} else if (trimmed.length === 1 && trimmed[0].type === 'Text') {
+		const id = b.id(context.state.scope.generate('text'));
+		state.init.unshift(b.var(id, b.call('$.text', b.literal(trimmed[0].data))));
+		close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
+	} else if (trimmed.length > 0) {
+		const id = b.id(context.state.scope.generate('fragment'));
+
+		const use_space_template =
+			trimmed.some((node) => node.type === 'ExpressionTag') &&
+			trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag');
+
+		if (use_space_template) {
+			// special case — we can use `$.text` instead of creating a unique template
+			const id = b.id(context.state.scope.generate('text'));
+
+			process_children(trimmed, () => id, false, {
+				...context,
+				state
+			});
+
+			state.init.unshift(b.var(id, b.call('$.text')));
+			close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
+		} else if (is_standalone) {
+			// no need to create a template, we can just use the existing block's anchor
+			process_children(trimmed, () => b.id('$$anchor'), false, {
+				...context,
+				state: { ...state, is_standalone }
+			});
+		} else {
+			/** @type {(is_text: boolean) => Expression} */
+			const expression = (is_text) => b.call('$.first_child', id, is_text && b.true);
+
+			process_children(trimmed, expression, false, { ...context, state });
+
+			let flags = TEMPLATE_FRAGMENT;
+
+			if (state.template.needs_import_node) {
+				flags |= TEMPLATE_USE_IMPORT_NODE;
+			}
+
+			if (state.template.nodes.length === 1 && state.template.nodes[0].type === 'comment') {
+				// special case — we can use `$.comment` instead of creating a unique template
+				state.init.unshift(b.var(id, b.call('$.comment')));
+			} else {
+				const template = transform_template(state, namespace, flags);
+				state.hoisted.push(b.var(template_name, template));
+
+				state.init.unshift(b.var(id, b.call(template_name)));
+			}
+
+			close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
+		}
+	}
+
+	body.push(...state.snippets, ...state.let_directives, ...state.consts);
+
+	if (state.async_consts && state.async_consts.thunks.length > 0) {
+		body.push(b.var(state.async_consts.id, b.call('$.run', b.array(state.async_consts.thunks))));
+	}
+
+	if (is_text_first) {
+		// skip over inserted comment
+		body.push(b.stmt(b.call('$.next')));
+	}
+
+	body.push(...state.init);
+
+	if (state.update.length > 0) {
+		body.push(build_render_statement(state));
+	}
+
+	body.push(...state.after_update);
+
+	if (close !== undefined) {
+		// It's important that close is the last statement in the block, as any previous statements
+		// could contain element insertions into the template, which the close statement needs to
+		// know of when constructing the list of current inner elements.
+		body.push(close);
+	}
+
+	return b.block(body);
+}

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

@@ -0,0 +1,12 @@
+/** @import { FunctionDeclaration } from 'estree' */
+/** @import { ComponentContext } from '../types' */
+
+/**
+ * @param {FunctionDeclaration} node
+ * @param {ComponentContext} context
+ */
+export function FunctionDeclaration(node, context) {
+	const state = { ...context.state, in_constructor: false, in_derived: false };
+
+	context.next(state);
+}

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

@@ -0,0 +1,11 @@
+/** @import { FunctionExpression } from 'estree' */
+/** @import { ComponentContext } from '../types' */
+import { visit_function } from './shared/function.js';
+
+/**
+ * @param {FunctionExpression} node
+ * @param {ComponentContext} context
+ */
+export function FunctionExpression(node, context) {
+	return visit_function(node, context);
+}

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

@@ -0,0 +1,53 @@
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { is_ignored } from '../../../../state.js';
+import * as b from '#compiler/builders';
+import { build_expression } from './shared/utils.js';
+
+/**
+ * @param {AST.HtmlTag} node
+ * @param {ComponentContext} context
+ */
+export function HtmlTag(node, context) {
+	context.state.template.push_comment();
+
+	const has_await = node.metadata.expression.has_await;
+	const has_blockers = node.metadata.expression.has_blockers();
+
+	const expression = build_expression(context, node.expression, node.metadata.expression);
+	const html = has_await ? b.call('$.get', b.id('$$html')) : expression;
+
+	const is_svg = context.state.metadata.namespace === 'svg';
+	const is_mathml = context.state.metadata.namespace === 'mathml';
+
+	const statement = b.stmt(
+		b.call(
+			'$.html',
+			context.state.node,
+			b.thunk(html),
+			is_svg && b.true,
+			is_mathml && b.true,
+			is_ignored(node, 'hydration_html_changed') && b.true
+		)
+	);
+
+	// push into init, so that bindings run afterwards, which might trigger another run and override hydration
+	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('$$html')] : [context.state.node],
+						b.block([statement])
+					)
+				)
+			)
+		);
+	} else {
+		context.state.init.push(statement);
+	}
+}

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

@@ -0,0 +1,45 @@
+/** @import { Identifier, Node } from 'estree' */
+/** @import { Context } from '../types' */
+import is_reference from 'is-reference';
+import * as b from '#compiler/builders';
+import { build_getter } from '../utils.js';
+
+/**
+ * @param {Identifier} node
+ * @param {Context} context
+ */
+export function Identifier(node, context) {
+	const parent = /** @type {Node} */ (context.path.at(-1));
+
+	if (is_reference(node, parent)) {
+		if (node.name === '$$props') {
+			return b.id('$$sanitized_props');
+		}
+
+		// Optimize prop access: If it's a member read access, we can use the $$props object directly
+		const binding = context.state.scope.get(node.name);
+		if (
+			context.state.analysis.runes && // can't do this in legacy mode because the proxy does more than just read/write
+			binding !== null &&
+			node !== binding.node &&
+			binding.kind === 'rest_prop'
+		) {
+			const grand_parent = context.path.at(-2);
+
+			if (
+				parent?.type === 'MemberExpression' &&
+				!parent.computed &&
+				grand_parent?.type !== 'AssignmentExpression' &&
+				grand_parent?.type !== 'UpdateExpression'
+			) {
+				const key = /** @type {Identifier} */ (parent.property);
+
+				if (!binding.metadata?.exclude_props?.includes(key.name)) {
+					return b.id('$$props');
+				}
+			}
+		}
+
+		return build_getter(node, context.state);
+	}
+}

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

@@ -0,0 +1,131 @@
+/** @import { BlockStatement, Expression, IfStatement, Statement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '#compiler/builders';
+import { build_expression, add_svelte_meta } from './shared/utils.js';
+
+/**
+ * @param {AST.IfBlock} node
+ * @param {ComponentContext} context
+ */
+export function IfBlock(node, context) {
+	context.state.template.push_comment();
+
+	/** @type {Statement[]} */
+	const statements = [];
+
+	const has_await = node.metadata.expression.has_await;
+	const has_blockers = node.metadata.expression.has_blockers();
+	const expression = build_expression(context, node.test, node.metadata.expression);
+
+	// Build the if/else-if/else chain
+	let index = 0;
+	/** @type {IfStatement | undefined} */
+	let first_if;
+	/** @type {IfStatement | undefined} */
+	let last_if;
+	/** @type {AST.IfBlock | undefined} */
+	let last_alt;
+
+	for (const branch of [node, ...(node.metadata.flattened ?? [])]) {
+		const consequent = /** @type {BlockStatement} */ (context.visit(branch.consequent));
+		const consequent_id = b.id(context.state.scope.generate('consequent'));
+		statements.push(b.var(consequent_id, b.arrow([b.id('$$anchor')], consequent)));
+
+		// Build the test expression for this branch
+		/** @type {Expression} */
+		let test;
+
+		if (branch.metadata.expression.has_await) {
+			// Top-level condition with await: already resolved by $.async wrapper
+			test = b.call('$.get', b.id('$$condition'));
+		} else {
+			const expression = build_expression(context, branch.test, branch.metadata.expression);
+
+			if (branch.metadata.expression.has_call) {
+				const derived_id = b.id(context.state.scope.generate('d'));
+				statements.push(b.var(derived_id, b.call('$.derived', b.arrow([], expression))));
+				test = b.call('$.get', derived_id);
+			} else {
+				test = expression;
+			}
+		}
+
+		const render_call = b.stmt(b.call('$$render', consequent_id, index > 0 && b.literal(index)));
+		const new_if = b.if(test, render_call);
+
+		if (last_if) {
+			last_if.alternate = new_if;
+		} else {
+			first_if = new_if;
+		}
+
+		last_alt = branch;
+		last_if = new_if;
+		index++;
+	}
+
+	// Handle final alternate (else branch, remaining async chain, or nothing)
+	if (last_if && last_alt?.alternate) {
+		const alternate = /** @type {BlockStatement} */ (context.visit(last_alt.alternate));
+		const alternate_id = b.id(context.state.scope.generate('alternate'));
+		statements.push(b.var(alternate_id, b.arrow([b.id('$$anchor')], alternate)));
+
+		last_if.alternate = b.stmt(b.call('$$render', alternate_id, b.literal(false)));
+	}
+
+	// Build $.if() arguments
+	/** @type {Expression[]} */
+	const args = [
+		context.state.node,
+		b.arrow([b.id('$$render')], first_if ? b.block([first_if]) : b.block([]))
+	];
+
+	if (node.elseif) {
+		// We treat this...
+		//
+		//   {#if x}
+		//     ...
+		//   {:else}
+		//     {#if y}
+		//       <div transition:foo>...</div>
+		//     {/if}
+		//   {/if}
+		//
+		// ...slightly differently to this...
+		//
+		//   {#if x}
+		//     ...
+		//   {:else if y}
+		//     <div transition:foo>...</div>
+		//   {/if}
+		//
+		// ...even though they're logically equivalent. In the first case, the
+		// transition will only play when `y` changes, but in the second it
+		// should play when `x` or `y` change — both are considered 'local'.
+		// This could also be a non-flattened elseif (because it has an async expression).
+		// In both cases mark as elseif so the runtime uses EFFECT_TRANSPARENT for transitions.
+		args.push(b.true);
+	}
+
+	statements.push(add_svelte_meta(b.call('$.if', ...args), node, 'if'));
+
+	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('$$condition')] : [context.state.node],
+						b.block(statements)
+					)
+				)
+			)
+		);
+	} else {
+		context.state.init.push(b.block(statements));
+	}
+}

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

@@ -0,0 +1,45 @@
+/** @import { Expression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '#compiler/builders';
+import { build_expression, add_svelte_meta } from './shared/utils.js';
+
+/**
+ * @param {AST.KeyBlock} node
+ * @param {ComponentContext} context
+ */
+export function KeyBlock(node, context) {
+	context.state.template.push_comment();
+
+	const has_await = node.metadata.expression.has_await;
+	const has_blockers = node.metadata.expression.has_blockers();
+
+	const expression = build_expression(context, node.expression, node.metadata.expression);
+	const key = b.thunk(has_await ? b.call('$.get', b.id('$$key')) : expression);
+	const body = /** @type {Expression} */ (context.visit(node.fragment));
+
+	const statement = add_svelte_meta(
+		b.call('$.key', context.state.node, key, b.arrow([b.id('$$anchor')], body)),
+		node,
+		'key'
+	);
+
+	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('$$key')] : [context.state.node],
+						b.block([statement])
+					)
+				)
+			)
+		);
+	} else {
+		context.state.init.push(statement);
+	}
+}

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

@@ -0,0 +1,64 @@
+/** @import { Expression, LabeledStatement, Statement } from 'estree' */
+/** @import { ReactiveStatement } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '#compiler/builders';
+import { build_getter } from '../utils.js';
+
+/**
+ * @param {LabeledStatement} node
+ * @param {ComponentContext} context
+ */
+export function LabeledStatement(node, context) {
+	if (context.state.analysis.runes || context.path.length > 1 || node.label.name !== '$') {
+		context.next();
+		return;
+	}
+
+	// To recreate Svelte 4 behaviour, we track the dependencies
+	// the compiler can 'see', but we untrack the effect itself
+	const reactive_statement = /** @type {ReactiveStatement} */ (
+		context.state.analysis.reactive_statements.get(node)
+	);
+
+	if (!reactive_statement) return; // not the instance context
+
+	let serialized_body = /** @type {Statement} */ (context.visit(node.body));
+
+	if (serialized_body.type !== 'BlockStatement') {
+		serialized_body = b.block([serialized_body]);
+	}
+
+	const body = serialized_body.body;
+
+	/** @type {Expression[]} */
+	const sequence = [];
+
+	for (const binding of reactive_statement.dependencies) {
+		if (binding.kind === 'normal' && binding.declaration_kind !== 'import') continue;
+
+		const name = binding.node.name;
+		let serialized = build_getter(b.id(name), context.state);
+
+		// If the binding is a prop, we need to deep read it because it could be fine-grained $state
+		// from a runes-component, where mutations don't trigger an update on the prop as a whole.
+		if (name === '$$props' || name === '$$restProps' || binding.kind === 'bindable_prop') {
+			serialized = b.call('$.deep_read_state', serialized);
+		}
+
+		sequence.push(serialized);
+	}
+
+	// these statements will be topologically ordered later
+	context.state.legacy_reactive_statements.set(
+		node,
+		b.stmt(
+			b.call(
+				'$.legacy_pre_effect',
+				sequence.length > 0 ? b.thunk(b.sequence(sequence)) : b.thunk(b.block([])),
+				b.thunk(b.block(body))
+			)
+		)
+	);
+
+	return b.empty;
+}

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

@@ -0,0 +1,55 @@
+/** @import { Expression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '#compiler/builders';
+import { create_derived } from '../utils.js';
+
+/**
+ * @param {AST.LetDirective} node
+ * @param {ComponentContext} context
+ */
+export function LetDirective(node, context) {
+	// let:x        -->  const x = $.derived(() => $$slotProps.x);
+	// let:x={{y, z}}  -->  const derived_x = $.derived(() => { const { y, z } = $$slotProps.x; return { y, z }));
+	if (node.expression && node.expression.type !== 'Identifier') {
+		const name = context.state.scope.generate(node.name);
+		const bindings = context.state.scope.get_bindings(node);
+
+		for (const binding of bindings) {
+			context.state.transform[binding.node.name] = {
+				read: (node) => b.member(b.call('$.get', b.id(name)), node)
+			};
+		}
+
+		context.state.let_directives.push(
+			b.const(
+				name,
+				b.call(
+					'$.derived',
+					b.thunk(
+						b.block([
+							b.let(
+								/** @type {Expression} */ (node.expression).type === 'ObjectExpression'
+									? // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
+										b.object_pattern(node.expression.properties)
+									: // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
+										b.array_pattern(node.expression.elements),
+								b.member(b.id('$$slotProps'), node.name)
+							),
+							b.return(b.object(bindings.map((binding) => b.init(binding.node.name, binding.node))))
+						])
+					)
+				)
+			)
+		);
+	} else {
+		const name = node.expression === null ? node.name : node.expression.name;
+		context.state.transform[name] = {
+			read: (node) => b.call('$.get', node)
+		};
+
+		context.state.let_directives.push(
+			b.const(name, create_derived(context.state, b.member(b.id('$$slotProps'), node.name)))
+		);
+	}
+}

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

@@ -0,0 +1,23 @@
+/** @import { MemberExpression } from 'estree' */
+/** @import { Context } from '../types' */
+import * as b from '#compiler/builders';
+
+/**
+ * @param {MemberExpression} node
+ * @param {Context} context
+ */
+export function MemberExpression(node, context) {
+	// rewrite `this.#foo` as `this.#foo.v` inside a constructor
+	if (node.property.type === 'PrivateIdentifier') {
+		const field = context.state.state_fields.get('#' + node.property.name);
+
+		if (field) {
+			return context.state.in_constructor &&
+				(field.type === '$state.raw' || field.type === '$state')
+				? b.member(node, 'v')
+				: b.call('$.get', node);
+		}
+	}
+
+	context.next();
+}

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

@@ -0,0 +1,38 @@
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '#compiler/builders';
+import { build_event, build_event_handler } from './shared/events.js';
+
+const modifiers = /** @type {const} */ ([
+	'stopPropagation',
+	'stopImmediatePropagation',
+	'preventDefault',
+	'self',
+	'trusted',
+	'once'
+]);
+
+/**
+ * @param {AST.OnDirective} node
+ * @param {ComponentContext} context
+ */
+export function OnDirective(node, context) {
+	if (!node.expression) {
+		context.state.analysis.needs_props = true;
+	}
+
+	let handler = build_event_handler(node.expression, node.metadata.expression, context);
+
+	for (const modifier of modifiers) {
+		if (node.modifiers.includes(modifier)) {
+			handler = b.call('$.' + modifier, handler);
+		}
+	}
+
+	const capture = node.modifiers.includes('capture');
+	const passive =
+		node.modifiers.includes('passive') ||
+		(node.modifiers.includes('nonpassive') ? false : undefined);
+
+	return build_event(context, node.name, handler, capture, passive, false);
+}