@depup/svelte 5.53.3-depup.0

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

@@ -0,0 +1,216 @@
+/** @import { Expression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext, ComponentServerTransformState } from '../types.js' */
+/** @import { Scope } from '../../../scope.js' */
+import { is_void } from '../../../../../utils.js';
+import { dev, locator } from '../../../../state.js';
+import * as b from '#compiler/builders';
+import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
+import { build_element_attributes, prepare_element_spread_object } from './shared/element.js';
+import { process_children, build_template, PromiseOptimiser } from './shared/utils.js';
+import { is_customizable_select_element } from '../../../nodes.js';
+
+/**
+ * @param {AST.RegularElement} node
+ * @param {ComponentContext} context
+ */
+export function RegularElement(node, context) {
+	const name = context.state.namespace === 'html' ? node.name.toLowerCase() : node.name;
+	const namespace = determine_namespace_for_children(node, context.state.namespace);
+
+	/** @type {ComponentServerTransformState} */
+	const state = {
+		...context.state,
+		namespace,
+		preserve_whitespace:
+			context.state.preserve_whitespace || node.name === 'pre' || node.name === 'textarea',
+		init: [],
+		template: []
+	};
+
+	const node_is_void = is_void(name);
+
+	const optimiser = new PromiseOptimiser();
+
+	// If this element needs special handling (like <select value> / <option>),
+	// avoid calling build_element_attributes here to prevent evaluating/awaiting
+	// attribute expressions twice. We'll handle attributes in the special branch.
+	const is_select_special =
+		name === 'select' &&
+		node.attributes.some(
+			(attribute) =>
+				((attribute.type === 'Attribute' || attribute.type === 'BindDirective') &&
+					attribute.name === 'value') ||
+				attribute.type === 'SpreadAttribute'
+		);
+	const is_option_special = name === 'option';
+	const is_special = is_select_special || is_option_special;
+
+	let body = /** @type {Expression | null} */ (null);
+	if (!is_special) {
+		// only open the tag in the non-special path
+		state.template.push(b.literal(`<${name}`));
+		body = build_element_attributes(node, { ...context, state }, optimiser.transform);
+		state.template.push(b.literal(node_is_void ? '/>' : '>')); // add `/>` for XHTML compliance
+	}
+
+	if ((name === 'script' || name === 'style') && node.fragment.nodes.length === 1) {
+		state.template.push(
+			b.literal(/** @type {AST.Text} */ (node.fragment.nodes[0]).data),
+			b.literal(`</${name}>`)
+		);
+
+		context.state.template.push(
+			...optimiser.render([...state.init, ...build_template(state.template)])
+		);
+
+		return;
+	}
+
+	const { hoisted, trimmed } = clean_nodes(
+		node,
+		node.fragment.nodes,
+		context.path,
+		namespace,
+		{
+			...state,
+			scope: /** @type {Scope} */ (state.scopes.get(node.fragment))
+		},
+		state.preserve_whitespace,
+		state.options.preserveComments
+	);
+
+	for (const node of hoisted) {
+		context.visit(node, state);
+	}
+
+	if (dev) {
+		const location = locator(node.start);
+		state.template.push(
+			b.stmt(
+				b.call(
+					'$.push_element',
+					b.id('$$renderer'),
+					b.literal(name),
+					b.literal(location.line),
+					b.literal(location.column)
+				)
+			)
+		);
+	}
+
+	if (is_select_special) {
+		const inner_state = { ...state, template: [], init: [] };
+		process_children(trimmed, { ...context, state: inner_state });
+
+		const fn = b.arrow(
+			[b.id('$$renderer')],
+			b.block([...state.init, ...build_template(inner_state.template)])
+		);
+
+		const [attributes, ...rest] = prepare_element_spread_object(node, context, optimiser.transform);
+
+		if (is_customizable_select_element(node)) {
+			rest.push(b.true);
+		}
+
+		const statement = b.stmt(b.call('$$renderer.select', attributes, fn, ...rest));
+
+		context.state.template.push(...optimiser.render([...state.init, statement]));
+
+		return;
+	}
+
+	if (is_option_special) {
+		let body;
+
+		if (node.metadata.synthetic_value_node) {
+			body = optimiser.transform(
+				node.metadata.synthetic_value_node.expression,
+				node.metadata.synthetic_value_node.metadata.expression
+			);
+		} else {
+			const inner_state = { ...state, template: [], init: [] };
+			process_children(trimmed, { ...context, state: inner_state });
+
+			/** @type {import('estree').Statement[]} */
+			const body_statements = [...state.init, ...build_template(inner_state.template)];
+
+			if (dev) {
+				const location = locator(node.start);
+				body_statements.unshift(
+					b.stmt(
+						b.call(
+							'$.push_element',
+							b.id('$$renderer'),
+							b.literal(name),
+							b.literal(location.line),
+							b.literal(location.column)
+						)
+					)
+				);
+				body_statements.push(b.stmt(b.call('$.pop_element')));
+			}
+
+			body = b.arrow([b.id('$$renderer')], b.block(body_statements));
+		}
+
+		const [attributes, ...rest] = prepare_element_spread_object(node, context, optimiser.transform);
+
+		if (is_customizable_select_element(node)) {
+			rest.push(b.true);
+		}
+
+		const statement = b.stmt(b.call('$$renderer.option', attributes, body, ...rest));
+
+		context.state.template.push(...optimiser.render([...state.init, statement]));
+
+		return;
+	}
+
+	if (body !== null) {
+		// if this is a `<textarea>` value or a contenteditable binding, we only add
+		// the body if the attribute/binding is falsy
+		const inner_state = { ...state, template: [], init: [] };
+		process_children(trimmed, { ...context, state: inner_state });
+
+		let id = /** @type {Expression} */ (body);
+
+		if (body.type !== 'Identifier') {
+			id = b.id(state.scope.generate('$$body'));
+			state.template.push(b.const(id, body));
+		}
+
+		// Use the body expression as the body if it's truthy, otherwise use the inner template
+		state.template.push(
+			b.if(
+				id,
+				b.block(build_template([id])),
+				b.block([...inner_state.init, ...build_template(inner_state.template)])
+			)
+		);
+	} else {
+		// For optgroup or select with rich content, add hydration marker at the start
+		process_children(trimmed, { ...context, state });
+		if ((name === 'optgroup' || name === 'select') && is_customizable_select_element(node)) {
+			state.template.push(b.literal('<!>'));
+		}
+	}
+
+	if (!node_is_void) {
+		state.template.push(b.literal(`</${name}>`));
+	}
+
+	if (dev) {
+		state.template.push(b.stmt(b.call('$.pop_element')));
+	}
+
+	if (optimiser.is_async()) {
+		context.state.template.push(
+			...optimiser.render([...state.init, ...build_template(state.template)])
+		);
+	} else {
+		context.state.init.push(...state.init);
+		context.state.template.push(...state.template);
+	}
+}

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

@@ -0,0 +1,45 @@
+/** @import { Expression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types.js' */
+import { unwrap_optional } from '../../../../utils/ast.js';
+import * as b from '#compiler/builders';
+import { empty_comment, PromiseOptimiser } from './shared/utils.js';
+
+/**
+ * @param {AST.RenderTag} node
+ * @param {ComponentContext} context
+ */
+export function RenderTag(node, context) {
+	const optimiser = new PromiseOptimiser();
+
+	const callee = unwrap_optional(node.expression).callee;
+	const raw_args = unwrap_optional(node.expression).arguments;
+
+	const snippet_function = optimiser.transform(
+		/** @type {Expression} */ (context.visit(callee)),
+		node.metadata.expression
+	);
+
+	const snippet_args = raw_args.map((arg, i) => {
+		return optimiser.transform(
+			/** @type {Expression} */ (context.visit(arg)),
+			node.metadata.arguments[i]
+		);
+	});
+
+	let statement = b.stmt(
+		(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
+			snippet_function,
+			b.id('$$renderer'),
+			...snippet_args
+		)
+	);
+
+	context.state.template.push(...optimiser.render_block([statement]));
+
+	// If the render tag is wrapped in $.async, that $.async call already contains surrounding markers,
+	// so we don't need to (or rather must not, to avoid hydration mismatches) add our own.
+	if (!optimiser.is_async() && !context.state.is_standalone) {
+		context.state.template.push(empty_comment);
+	}
+}

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

@@ -0,0 +1,68 @@
+/** @import { BlockStatement, Expression, Literal, Property } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types.js' */
+import * as b from '#compiler/builders';
+import {
+	build_attribute_value,
+	PromiseOptimiser,
+	block_open,
+	block_close
+} from './shared/utils.js';
+
+/**
+ * @param {AST.SlotElement} node
+ * @param {ComponentContext} context
+ */
+export function SlotElement(node, context) {
+	/** @type {Property[]} */
+	const props = [];
+
+	/** @type {Expression[]} */
+	const spreads = [];
+
+	const optimiser = new PromiseOptimiser();
+
+	let name = b.literal('default');
+
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'SpreadAttribute') {
+			let expression = /** @type {Expression} */ (context.visit(attribute));
+			spreads.push(optimiser.transform(expression, attribute.metadata.expression));
+		} else if (attribute.type === 'Attribute') {
+			const value = build_attribute_value(
+				attribute.value,
+				context,
+				optimiser.transform,
+				false,
+				true
+			);
+
+			if (attribute.name === 'name') {
+				name = /** @type {Literal} */ (value);
+			} else if (attribute.name !== 'slot') {
+				props.push(b.init(attribute.name, value));
+			}
+		}
+	}
+
+	const props_expression =
+		spreads.length === 0
+			? b.object(props)
+			: b.call('$.spread_props', b.array([b.object(props), ...spreads]));
+
+	const fallback =
+		node.fragment.nodes.length === 0
+			? b.null
+			: b.thunk(/** @type {BlockStatement} */ (context.visit(node.fragment)));
+
+	const slot = b.call(
+		'$.slot',
+		b.id('$$renderer'),
+		b.id('$$props'),
+		name,
+		props_expression,
+		fallback
+	);
+
+	context.state.template.push(block_open, ...optimiser.render_block([b.stmt(slot)]), block_close);
+}

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

@@ -0,0 +1,29 @@
+/** @import { BlockStatement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types.js' */
+import { dev } from '../../../../state.js';
+import * as b from '#compiler/builders';
+
+/**
+ * @param {AST.SnippetBlock} node
+ * @param {ComponentContext} context
+ */
+export function SnippetBlock(node, context) {
+	let fn = b.function_declaration(
+		node.expression,
+		[b.id('$$renderer'), ...node.parameters],
+		/** @type {BlockStatement} */ (context.visit(node.body))
+	);
+
+	// @ts-expect-error - TODO remove this hack once $$render_inner for legacy bindings is gone
+	fn.___snippet = true;
+
+	const statements = node.metadata.can_hoist ? context.state.hoisted : context.state.init;
+
+	if (dev) {
+		fn.body.body.unshift(b.stmt(b.call('$.validate_snippet_args', b.id('$$renderer'))));
+		statements.push(b.stmt(b.call('$.prevent_snippet_stringification', fn.id)));
+	}
+
+	statements.push(fn);
+}

package/src/compiler/phases/3-transform/server/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/server/visitors/SvelteBoundary.js

@@ -0,0 +1,139 @@
+/** @import { BlockStatement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '#compiler/builders';
+import {
+	block_close,
+	block_open,
+	block_open_else,
+	build_attribute_value,
+	build_template
+} from './shared/utils.js';
+
+/**
+ * @param {AST.SvelteBoundary} node
+ * @param {ComponentContext} context
+ */
+export function SvelteBoundary(node, context) {
+	// Extract the `failed` snippet/attribute
+	const failed_snippet = /** @type {AST.SnippetBlock | undefined} */ (
+		node.fragment.nodes.find(
+			(node) => node.type === 'SnippetBlock' && node.expression.name === 'failed'
+		)
+	);
+	const failed_attribute = /** @type {AST.Attribute} */ (
+		node.attributes.find((node) => node.type === 'Attribute' && node.name === 'failed')
+	);
+
+	// Extract the `pending` snippet/attribute
+	const pending_attribute = /** @type {AST.Attribute} */ (
+		node.attributes.find((node) => node.type === 'Attribute' && node.name === 'pending')
+	);
+	const is_pending_attr_nullish =
+		pending_attribute &&
+		typeof pending_attribute.value === 'object' &&
+		!Array.isArray(pending_attribute.value) &&
+		!context.state.scope.evaluate(pending_attribute.value.expression).is_defined;
+	const pending_snippet = /** @type {AST.SnippetBlock | undefined} */ (
+		node.fragment.nodes.find(
+			(node) => node.type === 'SnippetBlock' && node.expression.name === 'pending'
+		)
+	);
+
+	const children_nodes = node.fragment.nodes.filter(
+		(child) =>
+			!(child.type === 'SnippetBlock' && ['failed', 'pending'].includes(child.expression.name))
+	);
+
+	const children_fragment = { ...node.fragment, nodes: children_nodes };
+	const children_block = /** @type {BlockStatement} */ (
+		context.visit(children_fragment, {
+			...context.state,
+			scope: context.state.scopes.get(node.fragment) ?? context.state.scope
+		})
+	);
+
+	/** @type {BlockStatement} */
+	let children_body;
+
+	if (pending_attribute || pending_snippet) {
+		if (pending_attribute && is_pending_attr_nullish && !pending_snippet) {
+			const { callee, pending_block } = build_pending_attribute_block(pending_attribute, context);
+
+			children_body = b.block([
+				b.if(
+					callee,
+					pending_block,
+					b.block(build_template([block_open, children_block, block_close]))
+				)
+			]);
+		} else {
+			children_body = pending_attribute
+				? build_pending_attribute_block(pending_attribute, context).pending_block
+				: build_pending_snippet_block(/** @type {AST.SnippetBlock} */ (pending_snippet), context);
+		}
+	} else {
+		children_body = b.block(build_template([block_open, children_block, block_close]));
+	}
+
+	// When there's no `failed` snippet/attribute, skip the boundary wrapper entirely
+	// (saves bytes / more performant at runtime)
+	if (!failed_snippet && !failed_attribute) {
+		context.state.template.push(...children_body.body);
+		return;
+	}
+
+	const props = b.object([]);
+	if (failed_attribute && !failed_snippet) {
+		const failed_callee = build_attribute_value(
+			failed_attribute.value,
+			context,
+			(expression) => expression,
+			false,
+			true
+		);
+
+		props.properties.push(b.init('failed', failed_callee));
+	} else if (failed_snippet) {
+		context.visit(failed_snippet, context.state);
+		props.properties.push(b.init('failed', failed_snippet.expression));
+	}
+
+	context.state.template.push(
+		b.stmt(b.call('$$renderer.boundary', props, b.arrow([b.id('$$renderer')], children_body)))
+	);
+}
+
+/**
+ * @param {AST.Attribute} attribute
+ * @param {ComponentContext} context
+ */
+function build_pending_attribute_block(attribute, context) {
+	const callee = build_attribute_value(
+		attribute.value,
+		context,
+		(expression) => expression,
+		false,
+		true
+	);
+	const pending = b.call(callee, b.id('$$renderer'));
+
+	return {
+		callee,
+		pending_block: b.block(build_template([block_open_else, b.stmt(pending), block_close]))
+	};
+}
+
+/**
+ * @param {AST.SnippetBlock} snippet
+ * @param {ComponentContext} context
+ */
+function build_pending_snippet_block(snippet, context) {
+	return b.block(
+		build_template([
+			block_open_else,
+			/** @type {BlockStatement} */ (context.visit(snippet.body)),
+			block_close
+		])
+	);
+}

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

@@ -0,0 +1,12 @@
+/** @import { Expression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types.js' */
+import { build_inline_component } from './shared/component.js';
+
+/**
+ * @param {AST.SvelteComponent} node
+ * @param {ComponentContext} context
+ */
+export function SvelteComponent(node, context) {
+	build_inline_component(node, /** @type {Expression} */ (context.visit(node.expression)), context);
+}

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

@@ -0,0 +1,89 @@
+/** @import { BlockStatement, Expression, Statement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types.js' */
+import { dev, locator } from '../../../../state.js';
+import * as b from '#compiler/builders';
+import { determine_namespace_for_children } from '../../utils.js';
+import { build_element_attributes } from './shared/element.js';
+import { build_template, create_child_block, PromiseOptimiser } from './shared/utils.js';
+
+/**
+ * @param {AST.SvelteElement} node
+ * @param {ComponentContext} context
+ */
+export function SvelteElement(node, context) {
+	let tag = /** @type {Expression} */ (context.visit(node.tag));
+
+	if (dev) {
+		// Ensure getters/function calls aren't called multiple times.
+		// If we ever start referencing `tag` more than once in prod, move this out of the if block.
+		if (tag.type !== 'Identifier') {
+			const tag_id = context.state.scope.generate('$$tag');
+			context.state.init.push(b.const(tag_id, tag));
+			tag = b.id(tag_id);
+		}
+
+		context.state.init.push(b.stmt(b.call('$.validate_dynamic_element_tag', b.thunk(tag))));
+		if (node.fragment.nodes.length > 0) {
+			context.state.init.push(b.stmt(b.call('$.validate_void_dynamic_element', b.thunk(tag))));
+		}
+	}
+
+	const state = {
+		...context.state,
+		namespace: determine_namespace_for_children(node, context.state.namespace),
+		template: [],
+		init: []
+	};
+
+	const optimiser = new PromiseOptimiser();
+
+	/** @type {Statement[]} */
+	let statements = [];
+
+	build_element_attributes(node, { ...context, state }, optimiser.transform);
+
+	if (dev) {
+		const location = locator(node.start);
+		statements.push(
+			b.stmt(
+				b.call(
+					'$.push_element',
+					b.id('$$renderer'),
+					tag,
+					b.literal(location.line),
+					b.literal(location.column)
+				)
+			)
+		);
+	}
+
+	const attributes = b.block([...state.init, ...build_template(state.template)]);
+	const children = /** @type {BlockStatement} */ (context.visit(node.fragment, state));
+
+	statements.push(
+		...optimiser.render([
+			b.stmt(
+				b.call(
+					'$.element',
+					b.id('$$renderer'),
+					tag,
+					attributes.body.length > 0 && b.thunk(attributes),
+					children.body.length > 0 && b.thunk(children)
+				)
+			)
+		])
+	);
+
+	if (dev) {
+		statements.push(b.stmt(b.call('$.pop_element')));
+	}
+
+	context.state.template.push(
+		...create_child_block(
+			statements,
+			node.metadata.expression.blockers(),
+			node.metadata.expression.has_await
+		)
+	);
+}

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

@@ -0,0 +1,11 @@
+/** @import { BlockStatement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+
+/**
+ * @param {AST.SvelteFragment} node
+ * @param {ComponentContext} context
+ */
+export function SvelteFragment(node, context) {
+	context.state.template.push(/** @type {BlockStatement} */ (context.visit(node.fragment)));
+}

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

@@ -0,0 +1,25 @@
+/** @import { BlockStatement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types.js' */
+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) {
+	const block = /** @type {BlockStatement} */ (context.visit(node.fragment));
+
+	context.state.template.push(
+		b.stmt(
+			b.call(
+				'$.head',
+				b.literal(hash(filename)),
+				b.id('$$renderer'),
+				b.arrow([b.id('$$renderer')], block)
+			)
+		)
+	);
+}

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

@@ -0,0 +1,12 @@
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types.js' */
+import * as b from '#compiler/builders';
+import { build_inline_component } from './shared/component.js';
+
+/**
+ * @param {AST.SvelteSelf} node
+ * @param {ComponentContext} context
+ */
+export function SvelteSelf(node, context) {
+	build_inline_component(node, b.id(context.state.analysis.name), context);
+}

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

@@ -0,0 +1,21 @@
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types.js' */
+import * as b from '#compiler/builders';
+import { process_children, build_template } from './shared/utils.js';
+
+/**
+ * @param {AST.TitleElement} node
+ * @param {ComponentContext} context
+ */
+export function TitleElement(node, context) {
+	// title is guaranteed to contain only text/expression tag children
+	const template = [b.literal('<title>')];
+	process_children(node.fragment.nodes, { ...context, state: { ...context.state, template } });
+	template.push(b.literal('</title>'));
+
+	context.state.init.push(
+		b.stmt(
+			b.call('$$renderer.title', b.arrow([b.id('$$renderer')], b.block(build_template(template))))
+		)
+	);
+}