@depup/svelte 5.53.3-depup.0

package/src/compiler/phases/3-transform/server/transform-server.js

@@ -0,0 +1,428 @@
+/** @import * as ESTree from 'estree' */
+/** @import { AST, ValidatedCompileOptions, ValidatedModuleCompileOptions } from '#compiler' */
+/** @import { ComponentServerTransformState, ComponentVisitors, ServerTransformState, Visitors } from './types.js' */
+/** @import { Analysis, ComponentAnalysis } from '../../types.js' */
+import { walk } from 'zimmerframe';
+import { set_scope } from '../../scope.js';
+import { extract_identifiers } from '../../../utils/ast.js';
+import * as b from '#compiler/builders';
+import { component_name, dev, filename } from '../../../state.js';
+import { render_stylesheet } from '../css/index.js';
+import { AssignmentExpression } from './visitors/AssignmentExpression.js';
+import { AwaitBlock } from './visitors/AwaitBlock.js';
+import { AwaitExpression } from './visitors/AwaitExpression.js';
+import { CallExpression } from './visitors/CallExpression.js';
+import { ClassBody } from './visitors/ClassBody.js';
+import { Component } from './visitors/Component.js';
+import { ConstTag } from './visitors/ConstTag.js';
+import { DebugTag } from './visitors/DebugTag.js';
+import { EachBlock } from './visitors/EachBlock.js';
+import { ExpressionStatement } from './visitors/ExpressionStatement.js';
+import { Fragment } from './visitors/Fragment.js';
+import { HtmlTag } from './visitors/HtmlTag.js';
+import { Identifier } from './visitors/Identifier.js';
+import { IfBlock } from './visitors/IfBlock.js';
+import { KeyBlock } from './visitors/KeyBlock.js';
+import { LabeledStatement } from './visitors/LabeledStatement.js';
+import { MemberExpression } from './visitors/MemberExpression.js';
+import { Program } from './visitors/Program.js';
+import { PropertyDefinition } from './visitors/PropertyDefinition.js';
+import { RegularElement } from './visitors/RegularElement.js';
+import { RenderTag } from './visitors/RenderTag.js';
+import { SlotElement } from './visitors/SlotElement.js';
+import { SnippetBlock } from './visitors/SnippetBlock.js';
+import { SpreadAttribute } from './visitors/SpreadAttribute.js';
+import { SvelteComponent } from './visitors/SvelteComponent.js';
+import { SvelteElement } from './visitors/SvelteElement.js';
+import { SvelteFragment } from './visitors/SvelteFragment.js';
+import { SvelteHead } from './visitors/SvelteHead.js';
+import { SvelteSelf } from './visitors/SvelteSelf.js';
+import { TitleElement } from './visitors/TitleElement.js';
+import { UpdateExpression } from './visitors/UpdateExpression.js';
+import { VariableDeclaration } from './visitors/VariableDeclaration.js';
+import { SvelteBoundary } from './visitors/SvelteBoundary.js';
+
+/** @type {Visitors} */
+const global_visitors = {
+	_: set_scope,
+	AssignmentExpression,
+	AwaitExpression,
+	CallExpression,
+	ClassBody,
+	ExpressionStatement,
+	Identifier,
+	LabeledStatement,
+	MemberExpression,
+	Program,
+	PropertyDefinition,
+	UpdateExpression,
+	VariableDeclaration
+};
+
+/** @type {ComponentVisitors} */
+const template_visitors = {
+	AwaitBlock,
+	Component,
+	ConstTag,
+	DebugTag,
+	EachBlock,
+	Fragment,
+	HtmlTag,
+	IfBlock,
+	KeyBlock,
+	RegularElement,
+	RenderTag,
+	SlotElement,
+	SnippetBlock,
+	SpreadAttribute,
+	SvelteComponent,
+	SvelteElement,
+	SvelteFragment,
+	SvelteHead,
+	SvelteSelf,
+	TitleElement,
+	SvelteBoundary
+};
+
+/**
+ * @param {ComponentAnalysis} analysis
+ * @param {ValidatedCompileOptions} options
+ * @returns {ESTree.Program}
+ */
+export function server_component(analysis, options) {
+	/** @type {ComponentServerTransformState} */
+	const state = {
+		analysis,
+		options,
+		scope: analysis.module.scope,
+		scopes: analysis.module.scopes,
+		hoisted: [b.import_all('$', 'svelte/internal/server'), ...analysis.instance_body.hoisted],
+		legacy_reactive_statements: new Map(),
+		// these are set inside the `Fragment` visitor, and cannot be used until then
+		init: /** @type {any} */ (null),
+		template: /** @type {any} */ (null),
+		namespace: options.namespace,
+		preserve_whitespace: options.preserveWhitespace,
+		state_fields: new Map(),
+		is_standalone: false,
+		is_instance: false
+	};
+
+	const module = /** @type {ESTree.Program} */ (
+		walk(/** @type {AST.SvelteNode} */ (analysis.module.ast), state, global_visitors)
+	);
+
+	const instance = /** @type {ESTree.Program} */ (
+		walk(
+			/** @type {AST.SvelteNode} */ (analysis.instance.ast),
+			{ ...state, scopes: analysis.instance.scopes, is_instance: true },
+			{
+				...global_visitors,
+				ImportDeclaration(node) {
+					state.hoisted.push(node);
+					return b.empty;
+				},
+				ExportNamedDeclaration(node, context) {
+					if (node.declaration) {
+						return context.visit(node.declaration);
+					}
+
+					return b.empty;
+				}
+			}
+		)
+	);
+
+	const template = /** @type {ESTree.Program} */ (
+		walk(
+			/** @type {AST.SvelteNode} */ (analysis.template.ast),
+			{ ...state, scopes: analysis.template.scopes },
+			// @ts-expect-error don't know, don't care
+			{ ...global_visitors, ...template_visitors }
+		)
+	);
+
+	/** @type {ESTree.VariableDeclarator[]} */
+	const legacy_reactive_declarations = [];
+
+	for (const [node] of analysis.reactive_statements) {
+		const statement = [...state.legacy_reactive_statements].find(([n]) => n === node);
+		if (statement === undefined) {
+			throw new Error('Could not find reactive statement');
+		}
+
+		if (
+			node.body.type === 'ExpressionStatement' &&
+			node.body.expression.type === 'AssignmentExpression'
+		) {
+			for (const id of extract_identifiers(node.body.expression.left)) {
+				const binding = analysis.instance.scope.get(id.name);
+				if (binding?.kind === 'legacy_reactive') {
+					legacy_reactive_declarations.push(b.declarator(id));
+				}
+			}
+		}
+
+		instance.body.push(statement[1]);
+	}
+
+	if (legacy_reactive_declarations.length > 0) {
+		instance.body.unshift({
+			type: 'VariableDeclaration',
+			kind: 'let',
+			declarations: legacy_reactive_declarations
+		});
+	}
+
+	// If the component binds to a child, we need to put the template in a loop and repeat until legacy bindings are stable.
+	// We can remove this once the legacy syntax is gone.
+	if (analysis.uses_component_bindings) {
+		const snippets = template.body.filter(
+			// @ts-expect-error
+			(node) => node.type === 'FunctionDeclaration' && node.___snippet
+		);
+
+		const rest = template.body.filter(
+			// @ts-expect-error
+			(node) => node.type !== 'FunctionDeclaration' || !node.___snippet
+		);
+
+		template.body = [
+			...snippets,
+			b.let('$$settled', b.true),
+			b.let('$$inner_renderer'),
+			b.function_declaration(
+				b.id('$$render_inner'),
+				[b.id('$$renderer')],
+				b.block(/** @type {ESTree.Statement[]} */ (rest))
+			),
+			b.do_while(
+				b.unary('!', b.id('$$settled')),
+				b.block([
+					b.stmt(b.assignment('=', b.id('$$settled'), b.true)),
+					b.stmt(b.assignment('=', b.id('$$inner_renderer'), b.call('$$renderer.copy'))),
+					b.stmt(b.call('$$render_inner', b.id('$$inner_renderer')))
+				])
+			),
+			b.stmt(b.call('$$renderer.subsume', b.id('$$inner_renderer')))
+		];
+	}
+
+	if (
+		[...analysis.instance.scope.declarations.values()].some(
+			(binding) => binding.kind === 'store_sub'
+		)
+	) {
+		instance.body.unshift(b.var('$$store_subs'));
+		template.body.push(
+			b.if(b.id('$$store_subs'), b.stmt(b.call('$.unsubscribe_stores', b.id('$$store_subs'))))
+		);
+	}
+
+	// Propagate values of bound props upwards if they're undefined in the parent and have a value.
+	// Don't do this as part of the props retrieval because people could eagerly mutate the prop in the instance script.
+	/** @type {ESTree.Property[]} */
+	const props = [];
+
+	for (const [name, binding] of analysis.instance.scope.declarations) {
+		if (binding.kind === 'bindable_prop' && !name.startsWith('$$')) {
+			props.push(b.init(binding.prop_alias ?? name, b.id(name)));
+		}
+	}
+
+	for (const { name, alias } of analysis.exports) {
+		props.push(b.init(alias ?? name, b.id(name)));
+	}
+
+	if (props.length > 0) {
+		// This has no effect in runes mode other than throwing an error when someone passes
+		// undefined to a binding that has a default value.
+		template.body.push(b.stmt(b.call('$.bind_props', b.id('$$props'), b.object(props))));
+	}
+
+	let component_block = b.block([
+		.../** @type {ESTree.Statement[]} */ (instance.body),
+		.../** @type {ESTree.Statement[]} */ (template.body)
+	]);
+
+	// trick esrap into including comments
+	component_block.loc = instance.loc;
+
+	if (analysis.props_id) {
+		// need to be placed on first line of the component for hydration
+		component_block.body.unshift(
+			b.const(analysis.props_id, b.call('$.props_id', b.id('$$renderer')))
+		);
+	}
+
+	let should_inject_context = dev || analysis.needs_context;
+
+	if (should_inject_context) {
+		component_block = b.block([
+			b.stmt(
+				b.call(
+					'$$renderer.component',
+					b.arrow([b.id('$$renderer')], component_block, false),
+					dev && b.id(component_name)
+				)
+			)
+		]);
+	}
+
+	if (analysis.uses_rest_props) {
+		/** @type {string[]} */
+		const named_props = analysis.exports.map(({ name, alias }) => alias ?? name);
+		for (const [name, binding] of analysis.instance.scope.declarations) {
+			if (binding.kind === 'bindable_prop') named_props.push(binding.prop_alias ?? name);
+		}
+
+		component_block.body.unshift(
+			b.const(
+				'$$restProps',
+				b.call(
+					'$.rest_props',
+					b.id('$$sanitized_props'),
+					b.array(named_props.map((name) => b.literal(name)))
+				)
+			)
+		);
+	}
+
+	if (analysis.uses_props || analysis.uses_rest_props) {
+		component_block.body.unshift(
+			b.const('$$sanitized_props', b.call('$.sanitize_props', b.id('$$props')))
+		);
+	}
+
+	if (analysis.uses_slots) {
+		component_block.body.unshift(b.const('$$slots', b.call('$.sanitize_slots', b.id('$$props'))));
+	}
+
+	const body = [...state.hoisted, ...module.body];
+
+	if (analysis.css.ast !== null && options.css === 'injected' && !options.customElement) {
+		const hash = b.literal(analysis.css.hash);
+		const code = b.literal(render_stylesheet(analysis.source, analysis, options).code);
+
+		body.push(b.const('$$css', b.object([b.init('hash', hash), b.init('code', code)])));
+		component_block.body.unshift(b.stmt(b.call('$$renderer.global.css.add', b.id('$$css'))));
+	}
+
+	let should_inject_props =
+		should_inject_context ||
+		props.length > 0 ||
+		analysis.needs_props ||
+		analysis.uses_props ||
+		analysis.uses_rest_props ||
+		analysis.uses_slots ||
+		analysis.slot_names.size > 0;
+
+	const component_function = b.function_declaration(
+		b.id(analysis.name),
+		should_inject_props ? [b.id('$$renderer'), b.id('$$props')] : [b.id('$$renderer')],
+		component_block
+	);
+
+	if (options.compatibility.componentApi === 4) {
+		body.unshift(b.imports([['render', '$$_render']], 'svelte/server'));
+		body.push(
+			component_function,
+			b.stmt(
+				b.assignment(
+					'=',
+					b.member_id(`${analysis.name}.render`),
+					b.function(
+						null,
+						[b.id('$$props'), b.id('$$opts')],
+						b.block([
+							b.return(
+								b.call(
+									'$$_render',
+									b.id(analysis.name),
+									b.object([
+										b.init('props', b.id('$$props')),
+										b.init('context', b.member(b.id('$$opts'), 'context', false, true))
+									])
+								)
+							)
+						])
+					)
+				)
+			),
+			b.export_default(b.id(analysis.name))
+		);
+	} else if (dev) {
+		body.push(
+			component_function,
+			b.stmt(
+				b.assignment(
+					'=',
+					b.member_id(`${analysis.name}.render`),
+					b.function(
+						null,
+						[],
+						b.block([
+							b.throw_error(
+								`Component.render(...) is no longer valid in Svelte 5. ` +
+									'See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information'
+							)
+						])
+					)
+				)
+			),
+			b.export_default(b.id(analysis.name))
+		);
+	} else {
+		body.push(b.export_default(component_function));
+	}
+
+	if (dev) {
+		// add `App[$.FILENAME] = 'App.svelte'` so that we can print useful messages later
+		body.unshift(
+			b.stmt(
+				b.assignment('=', b.member(b.id(analysis.name), '$.FILENAME', true), b.literal(filename))
+			)
+		);
+	}
+
+	if (options.experimental.async) {
+		body.unshift(b.imports([], 'svelte/internal/flags/async'));
+	}
+
+	return {
+		type: 'Program',
+		sourceType: 'module',
+		body
+	};
+}
+
+/**
+ * @param {Analysis} analysis
+ * @param {ValidatedModuleCompileOptions} options
+ * @returns {ESTree.Program}
+ */
+export function server_module(analysis, options) {
+	/** @type {ServerTransformState} */
+	const state = {
+		analysis,
+		options,
+		scope: analysis.module.scope,
+		scopes: analysis.module.scopes,
+		// this is an anomaly — it can only be used in components, but it needs
+		// to be present for `javascript_visitors_legacy` and so is included in module
+		// transform state as well as component transform state
+		legacy_reactive_statements: new Map(),
+		state_fields: new Map(),
+		is_instance: false
+	};
+
+	const module = /** @type {ESTree.Program} */ (
+		walk(/** @type {AST.SvelteNode} */ (analysis.module.ast), state, global_visitors)
+	);
+
+	return {
+		type: 'Program',
+		sourceType: 'module',
+		body: [b.import_all('$', 'svelte/internal/server'), ...module.body]
+	};
+}

package/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js

@@ -0,0 +1,124 @@
+/** @import { AssignmentExpression, AssignmentOperator, Expression, Pattern } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { Context, ServerTransformState } from '../types.js' */
+import * as b from '#compiler/builders';
+import { build_assignment_value } from '../../../../utils/ast.js';
+import { get_name } from '../../../nodes.js';
+import { get_rune } from '../../../scope.js';
+import { visit_assignment_expression } from '../../shared/assignments.js';
+
+/**
+ * @param {AssignmentExpression} node
+ * @param {Context} context
+ */
+export function AssignmentExpression(node, context) {
+	return visit_assignment_expression(node, context, build_assignment) ?? context.next();
+}
+
+/**
+ * Only returns an expression if this is not a `$store` assignment, as others can be kept as-is
+ * @param {AssignmentOperator} operator
+ * @param {Pattern} left
+ * @param {Expression} right
+ * @param {import('zimmerframe').Context<AST.SvelteNode, ServerTransformState>} context
+ * @returns {Expression | null}
+ */
+function build_assignment(operator, left, right, context) {
+	if (
+		context.state.analysis.runes &&
+		left.type === 'MemberExpression' &&
+		left.object.type === 'ThisExpression' &&
+		!left.computed
+	) {
+		const name = get_name(left.property);
+		const field = name && context.state.state_fields.get(name);
+
+		// special case — state declaration in class constructor
+		if (field && field.node.type === 'AssignmentExpression' && left === field.node.left) {
+			const rune = get_rune(right, context.state.scope);
+
+			if (rune) {
+				const key =
+					left.property.type === 'PrivateIdentifier' || rune === '$state' || rune === '$state.raw'
+						? left.property
+						: field.key;
+
+				return b.assignment(
+					operator,
+					b.member(b.this, key, key.type === 'Literal'),
+					/** @type {Expression} */ (context.visit(right))
+				);
+			}
+		} else if (
+			field &&
+			(field.type === '$derived' || field.type === '$derived.by') &&
+			left.property.type === 'PrivateIdentifier'
+		) {
+			let value = /** @type {Expression} */ (
+				context.visit(build_assignment_value(operator, left, right))
+			);
+			return b.call(b.member(b.this, name), value);
+		}
+	}
+
+	let object = left;
+
+	while (object.type === 'MemberExpression') {
+		// @ts-expect-error
+		object = object.object;
+	}
+
+	if (object.type !== 'Identifier') {
+		return null;
+	}
+
+	if (is_store_name(object.name)) {
+		const name = object.name.slice(1);
+
+		if (!context.state.scope.get(name)) {
+			return null;
+		}
+
+		if (object === left) {
+			let value = /** @type {Expression} */ (
+				context.visit(build_assignment_value(operator, left, right))
+			);
+
+			return b.call('$.store_set', b.id(name), value);
+		}
+
+		return b.call(
+			'$.store_mutate',
+			b.assignment('??=', b.id('$$store_subs'), b.object([])),
+			b.literal(object.name),
+			b.id(name),
+			b.assignment(
+				operator,
+				/** @type {Pattern} */ (context.visit(left)),
+				/** @type {Expression} */ (context.visit(right))
+			)
+		);
+	}
+
+	const binding = context.state.scope.get(object.name);
+
+	// TODO 6.0 this won't work perfectly: once a derived is written to, it will
+	// no longer recompute. It might be better to disallow writing to deriveds
+	// on the server, to prevent this bug occurring
+	if (binding?.kind === 'derived' && object === left) {
+		let value = /** @type {Expression} */ (
+			context.visit(build_assignment_value(operator, left, right))
+		);
+
+		return b.call(binding.node, value);
+	}
+
+	return null;
+}
+
+/**
+ * @param {string} name
+ */
+function is_store_name(name) {
+	return name[0] === '$' && /[A-Za-z_]/.test(name[1]);
+}

package/src/compiler/phases/3-transform/server/visitors/AwaitBlock.js

@@ -0,0 +1,36 @@
+/** @import { BlockStatement, Expression, Pattern, Statement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types.js' */
+import * as b from '#compiler/builders';
+import { block_close, create_child_block } from './shared/utils.js';
+
+/**
+ * @param {AST.AwaitBlock} node
+ * @param {ComponentContext} context
+ */
+export function AwaitBlock(node, context) {
+	/** @type {Statement} */
+	let statement = b.stmt(
+		b.call(
+			'$.await',
+			b.id('$$renderer'),
+			/** @type {Expression} */ (context.visit(node.expression)),
+			b.thunk(
+				node.pending ? /** @type {BlockStatement} */ (context.visit(node.pending)) : b.block([])
+			),
+			b.arrow(
+				node.value ? [/** @type {Pattern} */ (context.visit(node.value))] : [],
+				node.then ? /** @type {BlockStatement} */ (context.visit(node.then)) : b.block([])
+			)
+		)
+	);
+
+	context.state.template.push(
+		...create_child_block(
+			[statement],
+			node.metadata.expression.blockers(),
+			node.metadata.expression.has_await
+		),
+		block_close
+	);
+}

package/src/compiler/phases/3-transform/server/visitors/AwaitExpression.js

@@ -0,0 +1,40 @@
+/** @import { AwaitExpression, Expression } from 'estree' */
+/** @import { Context } from '../types' */
+import { save } from '../../../../utils/ast.js';
+
+/**
+ * @param {AwaitExpression} node
+ * @param {Context} context
+ */
+export function AwaitExpression(node, context) {
+	const argument = /** @type {Expression} */ (context.visit(node.argument));
+
+	if (context.state.analysis.pickled_awaits.has(node)) {
+		return save(argument);
+	}
+
+	// we also need to restore context after block expressions
+	let i = context.path.length;
+	while (i--) {
+		const parent = context.path[i];
+
+		if (
+			parent.type === 'ArrowFunctionExpression' ||
+			parent.type === 'FunctionExpression' ||
+			parent.type === 'FunctionDeclaration'
+		) {
+			break;
+		}
+
+		// @ts-ignore
+		if (parent.metadata) {
+			if (parent.type !== 'ExpressionTag' && parent.type !== 'Fragment') {
+				return save(argument);
+			}
+
+			break;
+		}
+	}
+
+	return argument === node.argument ? node : { ...node, argument };
+}

package/src/compiler/phases/3-transform/server/visitors/CallExpression.js

@@ -0,0 +1,71 @@
+/** @import { CallExpression, Expression, MemberExpression } from 'estree' */
+/** @import { Context } from '../types.js' */
+import { dev, is_ignored } from '../../../../state.js';
+import * as b from '#compiler/builders';
+import { get_rune } from '../../../scope.js';
+import { get_inspect_args } from '../../utils.js';
+
+/**
+ * @param {CallExpression} node
+ * @param {Context} context
+ */
+export function CallExpression(node, context) {
+	const rune = get_rune(node, context.state.scope);
+
+	if (
+		rune === '$host' ||
+		rune === '$effect' ||
+		rune === '$effect.pre' ||
+		rune === '$inspect.trace'
+	) {
+		// we will only encounter `$effect` etc if they are top-level statements in the <script>
+		// following an `await`, otherwise they are removed by the ExpressionStatement visitor
+		return b.void0;
+	}
+
+	if (rune === '$effect.tracking') {
+		return b.false;
+	}
+
+	if (rune === '$effect.root') {
+		// ignore $effect.root() calls, just return a noop which mimics the cleanup function
+		return b.arrow([], b.block([]));
+	}
+
+	if (rune === '$effect.pending') {
+		return b.literal(0);
+	}
+
+	if (rune === '$state' || rune === '$state.raw') {
+		return node.arguments[0] ? context.visit(node.arguments[0]) : b.void0;
+	}
+
+	if (rune === '$derived' || rune === '$derived.by') {
+		const fn = /** @type {Expression} */ (context.visit(node.arguments[0]));
+		return b.call('$.derived', rune === '$derived' ? b.thunk(fn) : fn);
+	}
+
+	if (rune === '$state.eager') {
+		return node.arguments[0];
+	}
+
+	if (rune === '$state.snapshot') {
+		return b.call(
+			'$.snapshot',
+			/** @type {Expression} */ (context.visit(node.arguments[0])),
+			is_ignored(node, 'state_snapshot_uncloneable') && b.true
+		);
+	}
+
+	if (rune === '$inspect' || rune === '$inspect().with') {
+		if (!dev) return b.empty;
+
+		const { args, inspector } = get_inspect_args(rune, node, context.visit);
+
+		return rune === '$inspect'
+			? b.call(inspector, b.literal('$inspect('), ...args, b.literal(')'))
+			: b.call(inspector, b.literal('init'), ...args);
+	}
+
+	context.next();
+}