@depup/svelte 5.53.3-depup.0

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

@@ -0,0 +1,35 @@
+/** @import { UpdateExpression } from 'estree' */
+/** @import { Context } from '../types.js' */
+import * as b from '#compiler/builders';
+
+/**
+ * @param {UpdateExpression} node
+ * @param {Context} context
+ */
+export function UpdateExpression(node, context) {
+	const argument = node.argument;
+
+	if (argument.type === 'Identifier') {
+		const binding = context.state.scope.get(argument.name);
+
+		if (binding?.kind === 'store_sub') {
+			return b.call(
+				node.prefix ? '$.update_store_pre' : '$.update_store',
+				b.assignment('??=', b.id('$$store_subs'), b.object([])),
+				b.literal(argument.name),
+				b.id(argument.name.slice(1)),
+				node.operator === '--' && b.literal(-1)
+			);
+		}
+
+		if (binding?.kind === 'derived') {
+			return b.call(
+				node.prefix ? '$.update_derived_pre' : '$.update_derived',
+				binding.node,
+				node.operator === '--' && b.literal(-1)
+			);
+		}
+	}
+
+	return context.next();
+}

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

@@ -0,0 +1,247 @@
+/** @import { VariableDeclaration, VariableDeclarator, Expression, CallExpression, Pattern, Identifier } from 'estree' */
+/** @import { Binding } from '#compiler' */
+/** @import { Context } from '../types.js' */
+/** @import { ComponentAnalysis } from '../../../types.js' */
+/** @import { Scope } from '../../../scope.js' */
+import { build_fallback, extract_paths } from '../../../../utils/ast.js';
+import * as b from '#compiler/builders';
+import { get_rune } from '../../../scope.js';
+import { walk } from 'zimmerframe';
+
+/**
+ * @param {VariableDeclaration} node
+ * @param {Context} context
+ */
+export function VariableDeclaration(node, context) {
+	/** @type {VariableDeclarator[]} */
+	const declarations = [];
+
+	if (context.state.analysis.runes) {
+		for (const declarator of node.declarations) {
+			const init = declarator.init;
+			const rune = get_rune(init, context.state.scope);
+			if (!rune || rune === '$effect.tracking' || rune === '$inspect' || rune === '$effect.root') {
+				declarations.push(/** @type {VariableDeclarator} */ (context.visit(declarator)));
+				continue;
+			}
+
+			if (rune === '$props.id') {
+				// skip
+				continue;
+			}
+
+			if (rune === '$props') {
+				let has_rest = false;
+				// remove $bindable() from props declaration
+				let id = walk(declarator.id, null, {
+					RestElement(node, context) {
+						if (context.path.at(-1) === declarator.id) {
+							has_rest = true;
+						}
+					},
+					AssignmentPattern(node) {
+						if (
+							node.right.type === 'CallExpression' &&
+							get_rune(node.right, context.state.scope) === '$bindable'
+						) {
+							const right = node.right.arguments.length
+								? /** @type {Expression} */ (context.visit(node.right.arguments[0]))
+								: b.void0;
+							return b.assignment_pattern(node.left, right);
+						}
+					}
+				});
+
+				// if `$$slots` is declared separately, deconflict
+				const slots_name = /** @type {ComponentAnalysis} */ (context.state.analysis).uses_slots
+					? b.id('$$slots_')
+					: b.id('$$slots');
+
+				if (id.type === 'ObjectPattern' && has_rest) {
+					// If a rest pattern is used within an object pattern, we need to ensure we don't expose $$slots or $$events
+					id.properties.splice(
+						id.properties.length - 1,
+						0,
+						// @ts-ignore
+						b.prop('init', b.id('$$slots'), slots_name),
+						b.prop('init', b.id('$$events'), b.id('$$events'))
+					);
+				} else if (id.type === 'Identifier') {
+					// If $props is referenced as an identifier, we need to ensure we don't expose $$slots or $$events as properties
+					// on the identifier reference
+					id = b.object_pattern([
+						b.prop('init', b.id('$$slots'), slots_name),
+						b.prop('init', b.id('$$events'), b.id('$$events')),
+						b.rest(b.id(id.name))
+					]);
+				}
+				declarations.push(
+					b.declarator(/** @type {Pattern} */ (context.visit(id)), b.id('$$props'))
+				);
+				continue;
+			}
+
+			const args = /** @type {CallExpression} */ (init).arguments;
+			const value = args.length > 0 ? /** @type {Expression} */ (context.visit(args[0])) : b.void0;
+
+			if (rune === '$derived' || rune === '$derived.by') {
+				const is_async =
+					rune === '$derived' &&
+					context.state.analysis.async_deriveds.has(
+						/** @type {CallExpression} */ (declarator.init)
+					);
+
+				let init = is_async
+					? b.await(b.call('$.async_derived', b.thunk(value, true)))
+					: b.call('$.derived', rune === '$derived' ? b.thunk(value) : value);
+
+				if (declarator.id.type === 'Identifier') {
+					declarations.push(
+						b.declarator(/** @type {Pattern} */ (context.visit(declarator.id)), init)
+					);
+				} else {
+					const call = /** @type {CallExpression} */ (declarator.init);
+
+					let rhs = value;
+
+					if (rune !== '$derived' || call.arguments[0].type !== 'Identifier') {
+						const id = b.id(context.state.scope.generate('$$d'));
+
+						rhs = b.call(id);
+						declarations.push(b.declarator(id, init));
+					}
+
+					const { inserts, paths } = extract_paths(declarator.id, rhs);
+
+					for (const { id, value } of inserts) {
+						id.name = context.state.scope.generate('$$derived_array');
+
+						const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
+						const call = b.call('$.derived', expression);
+
+						declarations.push(b.declarator(id, call));
+					}
+
+					for (const path of paths) {
+						const expression = /** @type {Expression} */ (context.visit(path.expression));
+						const call = b.call('$.derived', b.thunk(expression));
+
+						declarations.push(b.declarator(path.node, call));
+					}
+				}
+
+				continue;
+			}
+
+			if (declarator.id.type === 'Identifier') {
+				declarations.push(b.declarator(declarator.id, value));
+				continue;
+			}
+
+			declarations.push(...create_state_declarators(declarator, context.state.scope, value));
+		}
+	} else {
+		for (const declarator of node.declarations) {
+			const bindings = /** @type {Binding[]} */ (context.state.scope.get_bindings(declarator));
+			const has_state = bindings.some((binding) => binding.kind === 'state');
+			const has_props = bindings.some((binding) => binding.kind === 'bindable_prop');
+
+			if (!has_state && !has_props) {
+				declarations.push(/** @type {VariableDeclarator} */ (context.visit(declarator)));
+				continue;
+			}
+
+			if (has_props) {
+				if (declarator.id.type !== 'Identifier') {
+					// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
+					// means that foo and bar are the props (i.e. the leaves are the prop names), not x and z.
+					const tmp = b.id(context.state.scope.generate('tmp'));
+					const { inserts, paths } = extract_paths(declarator.id, tmp);
+
+					declarations.push(
+						b.declarator(
+							tmp,
+							/** @type {Expression} */ (context.visit(/** @type {Expression} */ (declarator.init)))
+						)
+					);
+
+					for (const { id, value } of inserts) {
+						id.name = context.state.scope.generate('$$array');
+						declarations.push(b.declarator(id, value));
+					}
+
+					for (const path of paths) {
+						const value = path.expression;
+						const name = /** @type {Identifier} */ (path.node).name;
+						const binding = /** @type {Binding} */ (context.state.scope.get(name));
+						const prop = b.member(b.id('$$props'), b.literal(binding.prop_alias ?? name), true);
+						declarations.push(b.declarator(path.node, build_fallback(prop, value)));
+					}
+
+					continue;
+				}
+
+				const binding = /** @type {Binding} */ (context.state.scope.get(declarator.id.name));
+				const prop = b.member(
+					b.id('$$props'),
+					b.literal(binding.prop_alias ?? declarator.id.name),
+					true
+				);
+
+				/** @type {Expression} */
+				let init = prop;
+				if (declarator.init) {
+					const default_value = /** @type {Expression} */ (context.visit(declarator.init));
+					init = build_fallback(prop, default_value);
+				}
+
+				declarations.push(b.declarator(declarator.id, init));
+
+				continue;
+			}
+
+			declarations.push(
+				...create_state_declarators(
+					declarator,
+					context.state.scope,
+					/** @type {Expression} */ (declarator.init && context.visit(declarator.init))
+				)
+			);
+		}
+	}
+
+	if (declarations.length === 0) {
+		return b.empty;
+	}
+
+	return {
+		...node,
+		declarations
+	};
+}
+
+/**
+ * @param {VariableDeclarator} declarator
+ * @param {Scope} scope
+ * @param {Expression} value
+ * @returns {VariableDeclarator[]}
+ */
+function create_state_declarators(declarator, scope, value) {
+	if (declarator.id.type === 'Identifier') {
+		return [b.declarator(declarator.id, value)];
+	}
+
+	const tmp = b.id(scope.generate('tmp'));
+	const { paths, inserts } = extract_paths(declarator.id, tmp);
+	return [
+		b.declarator(tmp, value), // TODO inject declarator for opts, so we can use it below
+		...inserts.map(({ id, value }) => {
+			id.name = scope.generate('$$array');
+			return b.declarator(id, value);
+		}),
+		...paths.map((path) => {
+			const value = path.expression;
+			return b.declarator(path.node, value);
+		})
+	];
+}

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

@@ -0,0 +1,359 @@
+/** @import { BlockStatement, Expression, Pattern, Property, SequenceExpression, Statement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../../types.js' */
+import {
+	empty_comment,
+	build_attribute_value,
+	PromiseOptimiser,
+	block_open_else,
+	block_open,
+	block_close
+} from './utils.js';
+import * as b from '#compiler/builders';
+import { is_element_node } from '../../../../nodes.js';
+import { dev } from '../../../../../state.js';
+
+/**
+ * @param {AST.Component | AST.SvelteComponent | AST.SvelteSelf} node
+ * @param {Expression} expression
+ * @param {ComponentContext} context
+ */
+export function build_inline_component(node, expression, context) {
+	/** @type {Array<Property[] | Expression>} */
+	const props_and_spreads = [];
+	/** @type {Array<() => void>} */
+	const delayed_props = [];
+
+	/** @type {Property[]} */
+	const custom_css_props = [];
+
+	/** @type {Record<string, AST.LetDirective[]>} */
+	const lets = { default: [] };
+
+	/**
+	 * Children in the default slot are evaluated in the component scope,
+	 * children in named slots are evaluated in the parent scope
+	 */
+	const child_state = {
+		...context.state,
+		scope: node.metadata.scopes.default
+	};
+
+	/** @type {Record<string, AST.TemplateNode[]>} */
+	const children = {};
+
+	/**
+	 * If this component has a slot property, it is a named slot within another component. In this case
+	 * the slot scope applies to the component itself, too, and not just its children.
+	 */
+	const slot_scope_applies_to_itself = node.attributes.some(
+		(node) => node.type === 'Attribute' && node.name === 'slot'
+	);
+
+	/**
+	 * Components may have a children prop and also have child nodes. In this case, we assume
+	 * that the child component isn't using render tags yet and pass the slot as $$slots.default.
+	 * We're not doing it for spread attributes, as this would result in too many false positives.
+	 */
+	let has_children_prop = false;
+
+	/**
+	 * @param {Property} prop
+	 * @param {boolean} [delay]
+	 */
+	function push_prop(prop, delay = false) {
+		const do_push = () => {
+			const current = props_and_spreads.at(-1);
+			const current_is_props = Array.isArray(current);
+			const props = current_is_props ? current : [];
+			props.push(prop);
+			if (!current_is_props) {
+				props_and_spreads.push(props);
+			}
+		};
+
+		if (delay) {
+			delayed_props.push(do_push);
+		} else {
+			do_push();
+		}
+	}
+
+	const optimiser = new PromiseOptimiser();
+
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'LetDirective') {
+			if (!slot_scope_applies_to_itself) {
+				lets.default.push(attribute);
+			}
+		} else if (attribute.type === 'SpreadAttribute') {
+			let expression = /** @type {Expression} */ (context.visit(attribute));
+			props_and_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.startsWith('--')) {
+				custom_css_props.push(b.init(attribute.name, value));
+				continue;
+			}
+
+			if (attribute.name === 'children') {
+				has_children_prop = true;
+			}
+
+			push_prop(b.prop('init', b.key(attribute.name), value));
+		} else if (attribute.type === 'BindDirective') {
+			// Bindings are a bit special: we don't want to add them to (async) deriveds but we need to check if they have blockers
+			optimiser.check_blockers(attribute.metadata.expression);
+
+			if (attribute.name === 'this') {
+				// bind:this is client-only, but we still need to check for blockers to ensure
+				// the server generates matching hydration markers if the client wraps in $.async
+				continue;
+			}
+
+			if (attribute.expression.type === 'SequenceExpression') {
+				const [get, set] = /** @type {SequenceExpression} */ (context.visit(attribute.expression))
+					.expressions;
+				const get_id = b.id(context.state.scope.generate('bind_get'));
+				const set_id = b.id(context.state.scope.generate('bind_set'));
+
+				context.state.init.push(b.var(get_id, get));
+				context.state.init.push(b.var(set_id, set));
+
+				push_prop(b.get(attribute.name, [b.return(b.call(get_id))]));
+				push_prop(b.set(attribute.name, [b.stmt(b.call(set_id, b.id('$$value')))]));
+			} else {
+				// Delay prop pushes so bindings come at the end, to avoid spreads overwriting them
+				push_prop(
+					b.get(attribute.name, [
+						b.return(/** @type {Expression} */ (context.visit(attribute.expression)))
+					]),
+					true
+				);
+
+				push_prop(
+					b.set(attribute.name, [
+						b.stmt(
+							/** @type {Expression} */ (
+								context.visit(b.assignment('=', attribute.expression, b.id('$$value')))
+							)
+						),
+						b.stmt(b.assignment('=', b.id('$$settled'), b.false))
+					]),
+					true
+				);
+			}
+		} else if (attribute.type === 'AttachTag') {
+			// While we don't run attachments on the server, on the client they might generate a surrounding blocker function which generates
+			// extra comments, and to prevent hydration mismatches we therefore have to account for them here to generate similar comments on the server.
+			optimiser.check_blockers(attribute.metadata.expression);
+		}
+	}
+
+	delayed_props.forEach((fn) => fn());
+
+	/** @type {Statement[]} */
+	const snippet_declarations = [];
+
+	/** @type {Property[]} */
+	const serialized_slots = [];
+
+	// Group children by slot
+	for (const child of node.fragment.nodes) {
+		if (child.type === 'SnippetBlock') {
+			// the SnippetBlock visitor adds a declaration to `init`, but if it's directly
+			// inside a component then we want to hoist them into a block so that they
+			// can be used as props without creating conflicts
+			context.visit(child, {
+				...context.state,
+				init: snippet_declarations
+			});
+
+			push_prop(b.prop('init', child.expression, child.expression));
+
+			// Interop: allows people to pass snippets when component still uses slots
+			serialized_slots.push(
+				b.init(child.expression.name === 'children' ? 'default' : child.expression.name, b.true)
+			);
+
+			continue;
+		}
+
+		let slot_name = 'default';
+		if (is_element_node(child)) {
+			const slot = /** @type {AST.Attribute | undefined} */ (
+				child.attributes.find(
+					(attribute) => attribute.type === 'Attribute' && attribute.name === 'slot'
+				)
+			);
+
+			if (slot !== undefined) {
+				slot_name = /** @type {AST.Text[]} */ (slot.value)[0].data;
+
+				lets[slot_name] = child.attributes.filter((attribute) => attribute.type === 'LetDirective');
+			} else if (child.type === 'SvelteFragment') {
+				lets.default.push(
+					...child.attributes.filter((attribute) => attribute.type === 'LetDirective')
+				);
+			}
+		}
+
+		children[slot_name] = children[slot_name] || [];
+		children[slot_name].push(child);
+	}
+
+	// Serialize each slot
+	for (const slot_name of Object.keys(children)) {
+		const block = /** @type {BlockStatement} */ (
+			context.visit(
+				{
+					...node.fragment,
+					// @ts-expect-error
+					nodes: children[slot_name]
+				},
+				slot_name === 'default'
+					? child_state
+					: {
+							...context.state,
+							scope: node.metadata.scopes[slot_name]
+						}
+			)
+		);
+
+		if (block.body.length === 0) continue;
+
+		/** @type {Pattern[]} */
+		const params = [b.id('$$renderer')];
+
+		if (lets[slot_name].length > 0) {
+			const pattern = b.object_pattern(
+				lets[slot_name].map((node) => {
+					if (node.expression === null) {
+						return b.init(node.name, b.id(node.name));
+					}
+
+					if (node.expression.type === 'ObjectExpression') {
+						// @ts-expect-error it gets parsed as an `ObjectExpression` but is really an `ObjectPattern`
+						return b.init(node.name, b.object_pattern(node.expression.properties));
+					}
+
+					if (node.expression.type === 'ArrayExpression') {
+						// @ts-expect-error it gets parsed as an `ArrayExpression` but is really an `ArrayPattern`
+						return b.init(node.name, b.array_pattern(node.expression.elements));
+					}
+
+					return b.init(node.name, node.expression);
+				})
+			);
+
+			params.push(pattern);
+		}
+
+		const slot_fn = b.arrow(params, b.block(block.body));
+
+		if (slot_name === 'default' && !has_children_prop) {
+			if (
+				lets.default.length === 0 &&
+				children.default.every(
+					(node) =>
+						node.type !== 'SvelteFragment' ||
+						!node.attributes.some((attr) => attr.type === 'LetDirective')
+				)
+			) {
+				// create `children` prop...
+				push_prop(
+					b.prop(
+						'init',
+						b.id('children'),
+						dev ? b.call('$.prevent_snippet_stringification', slot_fn) : slot_fn
+					)
+				);
+
+				// and `$$slots.default: true` so that `<slot>` on the child works
+				serialized_slots.push(b.init(slot_name, b.true));
+			} else {
+				// create `$$slots.default`...
+				serialized_slots.push(b.init(slot_name, slot_fn));
+
+				// and a `children` prop that errors
+				push_prop(b.init('children', b.id('$.invalid_default_snippet')));
+			}
+		} else {
+			serialized_slots.push(b.init(slot_name, slot_fn));
+		}
+	}
+
+	if (serialized_slots.length > 0) {
+		push_prop(b.prop('init', b.id('$$slots'), b.object(serialized_slots)));
+	}
+
+	const props_expression =
+		props_and_spreads.length === 0 ||
+		(props_and_spreads.length === 1 && Array.isArray(props_and_spreads[0]))
+			? b.object(/** @type {Property[]} */ (props_and_spreads[0] || []))
+			: b.call(
+					'$.spread_props',
+					b.array(props_and_spreads.map((p) => (Array.isArray(p) ? b.object(p) : p)))
+				);
+
+	const dynamic =
+		node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic);
+
+	/** @type {Statement} */
+	let statement = b.stmt(b.call(expression, b.id('$$renderer'), props_expression));
+
+	if (dynamic) {
+		statement = b.if(
+			expression,
+			b.block([
+				b.stmt(b.call('$$renderer.push', block_open)),
+				statement,
+				b.stmt(b.call('$$renderer.push', block_close))
+			]),
+			b.block([
+				b.stmt(b.call('$$renderer.push', block_open_else)),
+				b.stmt(b.call('$$renderer.push', block_close))
+			])
+		);
+	}
+
+	if (snippet_declarations.length > 0) {
+		statement = b.block([...snippet_declarations, statement]);
+	}
+
+	if (custom_css_props.length > 0) {
+		statement = b.stmt(
+			b.call(
+				'$.css_props',
+				b.id('$$renderer'),
+				b.literal(context.state.namespace === 'svg' ? false : true),
+				b.object(custom_css_props),
+				b.thunk(b.block([statement])),
+				dynamic && b.true
+			)
+		);
+	}
+
+	if (node.type !== 'SvelteSelf') {
+		// Component name itself could be blocked on async values
+		optimiser.check_blockers(node.metadata.expression);
+	}
+
+	context.state.template.push(...optimiser.render_block([statement]));
+
+	if (
+		!dynamic &&
+		!optimiser.is_async() &&
+		!context.state.is_standalone &&
+		custom_css_props.length === 0
+	) {
+		context.state.template.push(empty_comment);
+	}
+}