feat: Variadic snippets

.changeset/curvy-cups-cough.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: snippets can now take multiple arguments, support default parameters. Because of this, the type signature has changed

packages/svelte/elements.d.ts

@@ -68,7 +68,7 @@ export type ToggleEventHandler<T extends EventTarget> = EventHandler<ToggleEvent
 export interface DOMAttributes<T extends EventTarget> {
 	// Implicit children prop every element has
 	// Add this here so that libraries doing `$props<HTMLButtonAttributes>()` don't need a separate interface
-	children?: import('svelte').Snippet<void>;
+	children?: import('svelte').Snippet;
 
 	// Clipboard Events
 	'on:copy'?: ClipboardEventHandler<T> | undefined | null;

packages/svelte/package.json

@@ -10,6 +10,7 @@
   },
   "files": [
     "src",
+    "!src/**/*.test.*",
     "types",
     "compiler.cjs",
     "*.d.ts",

packages/svelte/src/compiler/errors.js

@@ -90,7 +90,10 @@ const parse = {
 	'duplicate-script-element': () =>
 		`A component can have a single top-level <script> element and/or a single top-level <script context="module"> element`,
 	'invalid-render-expression': () => 'expected an identifier followed by (...)',
-	'invalid-render-arguments': () => 'expected at most one argument'
+	'invalid-render-arguments': () => 'expected at most one argument',
+	'invalid-render-spread-argument': () => 'cannot use spread arguments in {@render ...} tags',
+	'invalid-snippet-rest-parameter': () =>
+		'snippets do not support rest parameters; use an array instead'
 };
 
 /** @satisfies {Errors} */

packages/svelte/src/compiler/legacy.js

@@ -356,7 +356,7 @@ export function convert(source, ast) {
 					start: node.start,
 					end: node.end,
 					expression: node.expression,
-					context: node.context,
+					parameters: node.parameters,
 					children: node.body.nodes.map((child) => visit(child))
 				};
 			},

packages/svelte/src/compiler/phases/1-parse/read/context.js

@@ -98,24 +98,40 @@ export default function read_context(parser) {
  * @returns {any}
  */
 function read_type_annotation(parser) {
-	const index = parser.index;
+	const start = parser.index;
 	parser.allow_whitespace();
 
-	if (parser.eat(':')) {
-		// we need to trick Acorn into parsing the type annotation
-		const insert = '_ as ';
-		let a = parser.index - insert.length;
-		const template = ' '.repeat(a) + insert + parser.template.slice(parser.index);
-		let expression = parse_expression_at(template, parser.ts, a);
+	if (!parser.eat(':')) {
+		parser.index = start;
+		return undefined;
+	}
 
-		// `array as item: string, index` becomes `string, index`, which is mistaken as a sequence expression - fix that
-		if (expression.type === 'SequenceExpression') {
-			expression = expression.expressions[0];
-		}
+	// we need to trick Acorn into parsing the type annotation
+	const insert = '_ as ';
+	let a = parser.index - insert.length;
+	const template =
+		parser.template.slice(0, a).replace(/[^\n]/g, ' ') +
+		insert +
+		parser.template.slice(parser.index);
+	let expression = parse_expression_at(template, parser.ts, a);
 
-		parser.index = /** @type {number} */ (expression.end);
-		return /** @type {any} */ (expression).typeAnnotation;
-	} else {
-		parser.index = index;
+	// `foo: bar = baz` gets mangled — fix it
+	if (expression.type === 'AssignmentExpression') {
+		let b = expression.right.start;
+		while (template[b] !== '=') b -= 1;
+		expression = parse_expression_at(template.slice(0, b), parser.ts, a);
 	}
+
+	// `array as item: string, index` becomes `string, index`, which is mistaken as a sequence expression - fix that
+	if (expression.type === 'SequenceExpression') {
+		expression = expression.expressions[0];
+	}
+
+	parser.index = /** @type {number} */ (expression.end);
+	return {
+		type: 'TSTypeAnnotation',
+		start,
+		end: parser.index,
+		typeAnnotation: /** @type {any} */ (expression).typeAnnotation
+	};
 }

packages/svelte/src/compiler/phases/1-parse/state/tag.js

@@ -274,9 +274,28 @@ function open(parser) {
 
 		parser.allow_whitespace();
 
-		const context = parser.match(')') ? null : read_context(parser);
+		/** @type {import('estree').Pattern[]} */
+		const parameters = [];
+
+		while (!parser.match(')')) {
+			let pattern = read_context(parser);
+
+			parser.allow_whitespace();
+			if (parser.eat('=')) {
+				parser.allow_whitespace();
+				pattern = {
+					type: 'AssignmentPattern',
+					left: pattern,
+					right: read_expression(parser)
+				};
+			}
+
+			parameters.push(pattern);
+
+			if (!parser.eat(',')) break;
+			parser.allow_whitespace();
+		}
 
-		parser.allow_whitespace();
 		parser.eat(')', true);
 
 		parser.allow_whitespace();
@@ -294,7 +313,7 @@ function open(parser) {
 					end: name_end,
 					name
 				},
-				context,
+				parameters,
 				body: create_fragment()
 			})
 		);
@@ -589,10 +608,6 @@ function special(parser) {
 			error(expression, 'invalid-render-expression');
 		}
 
-		if (expression.arguments.length > 1) {
-			error(expression.arguments[1], 'invalid-render-arguments');
-		}
-
 		parser.allow_whitespace();
 		parser.eat('}', true);
 
@@ -602,7 +617,7 @@ function special(parser) {
 				start,
 				end: parser.index,
 				expression: expression.callee,
-				argument: expression.arguments[0] ?? null
+				arguments: expression.arguments
 			})
 		);
 	}

packages/svelte/src/compiler/phases/2-analyze/validation.js

@@ -566,6 +566,13 @@ const validation = {
 			parent_element: node.name
 		});
 	},
+	RenderTag(node, context) {
+		for (const arg of node.arguments) {
+			if (arg.type === 'SpreadElement') {
+				error(arg, 'invalid-render-spread-argument');
+			}
+		}
+	},
 	SvelteHead(node) {
 		const attribute = node.attributes[0];
 		if (attribute) {

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -1498,13 +1498,7 @@ function process_children(nodes, parent, { visit, state }) {
 		);
 		const assignment = serialize_template_literal(sequence, visit, state)[1];
 		const init = b.stmt(b.assignment('=', b.member(text_id, b.id('nodeValue')), assignment));
-		const singular = b.stmt(
-			b.call(
-				'$.text_effect',
-				text_id,
-				b.thunk(serialize_template_literal(sequence, visit, state)[1])
-			)
-		);
+		const singular = b.stmt(b.call('$.text_effect', text_id, b.thunk(assignment)));
 
 		if (contains_call_expression && !within_bound_contenteditable) {
 			state.update_effects.push(singular);
@@ -1776,8 +1770,8 @@ export const template_visitors = {
 
 		/** @type {import('estree').Expression[]} */
 		const args = [context.state.node];
-		if (node.argument) {
-			args.push(b.thunk(/** @type {import('estree').Expression} */ (context.visit(node.argument))));
+		for (const arg of node.arguments) {
+			args.push(b.thunk(/** @type {import('estree').Expression} */ (context.visit(arg))));
 		}
 
 		let snippet_function = /** @type {import('estree').Expression} */ (
@@ -2472,61 +2466,67 @@ export const template_visitors = {
 	},
 	SnippetBlock(node, context) {
 		// TODO hoist where possible
+		/** @type {import('estree').Pattern[]} */
 		const args = [b.id('$$anchor')];
 
 		/** @type {import('estree').BlockStatement} */
 		let body;
 
-		if (node.context) {
-			const id = node.context.type === 'Identifier' ? node.context : b.id('$$context');
-			args.push(id);
+		/** @type {import('estree').Statement[]} */
+		const declarations = [];
+
+		for (let i = 0; i < node.parameters.length; i++) {
+			const argument = node.parameters[i];
 
-			/** @type {import('estree').Statement[]} */
-			const declarations = [];
+			if (!argument) continue;
 
-			// some of this is duplicated with EachBlock — TODO dedupe?
-			if (node.context.type === 'Identifier') {
+			if (argument.type === 'Identifier') {
+				args.push({
+					type: 'AssignmentPattern',
+					left: argument,
+					right: b.id('$.noop')
+				});
 				const binding = /** @type {import('#compiler').Binding} */ (
-					context.state.scope.get(id.name)
+					context.state.scope.get(argument.name)
 				);
-				binding.expression = b.call(id);
-			} else {
-				const paths = extract_paths(node.context);
+				binding.expression = b.call(argument);
+				continue;
+			}
 
-				for (const path of paths) {
-					const name = /** @type {import('estree').Identifier} */ (path.node).name;
-					const binding = /** @type {import('#compiler').Binding} */ (
-						context.state.scope.get(name)
-					);
-					declarations.push(
-						b.let(
-							path.node,
-							b.thunk(
-								/** @type {import('estree').Expression} */ (
-									context.visit(path.expression?.(b.call('$$context')))
-								)
+			let arg_alias = `$$arg${i}`;
+			args.push(b.id(arg_alias));
+
+			const paths = extract_paths(argument);
+
+			for (const path of paths) {
+				const name = /** @type {import('estree').Identifier} */ (path.node).name;
+				const binding = /** @type {import('#compiler').Binding} */ (context.state.scope.get(name));
+				declarations.push(
+					b.let(
+						path.node,
+						b.thunk(
+							/** @type {import('estree').Expression} */ (
+								context.visit(path.expression?.(b.maybe_call(b.id(arg_alias))))
 							)
 						)
-					);
-
-					// we need to eagerly evaluate the expression in order to hit any
-					// 'Cannot access x before initialization' errors
-					if (context.state.options.dev) {
-						declarations.push(b.stmt(b.call(name)));
-					}
+					)
+				);
 
-					binding.expression = b.call(name);
+				// we need to eagerly evaluate the expression in order to hit any
+				// 'Cannot access x before initialization' errors
+				if (context.state.options.dev) {
+					declarations.push(b.stmt(b.call(name)));
 				}
-			}
 
-			body = b.block([
-				...declarations,
-				.../** @type {import('estree').BlockStatement} */ (context.visit(node.body)).body
-			]);
-		} else {
-			body = /** @type {import('estree').BlockStatement} */ (context.visit(node.body));
+				binding.expression = b.call(name);
+			}
 		}
 
+		body = b.block([
+			...declarations,
+			.../** @type {import('estree').BlockStatement} */ (context.visit(node.body)).body
+		]);
+
 		const path = context.path;
 		// If we're top-level, then we can create a function for the snippet so that it can be referenced
 		// in the props declaration (default value pattern).

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -1134,21 +1134,14 @@ const template_visitors = {
 		const snippet_function = state.options.dev
 			? b.call('$.validate_snippet', expression)
 			: expression;
-		if (node.argument) {
-			state.template.push(
-				t_statement(
-					b.stmt(
-						b.call(
-							snippet_function,
-							b.id('$$payload'),
-							/** @type {import('estree').Expression} */ (context.visit(node.argument))
-						)
-					)
-				)
-			);
-		} else {
-			state.template.push(t_statement(b.stmt(b.call(snippet_function, b.id('$$payload')))));
-		}
+
+		const snippet_args = node.arguments.map((arg) => {
+			return /** @type {import('estree').Expression} */ (context.visit(arg));
+		});
+
+		state.template.push(
+			t_statement(b.stmt(b.call(snippet_function, b.id('$$payload'), ...snippet_args)))
+		);
 
 		state.template.push(t_expression(anchor_id));
 	},
@@ -1451,19 +1444,14 @@ const template_visitors = {
 	},
 	SnippetBlock(node, context) {
 		// TODO hoist where possible
-		/** @type {import('estree').Pattern[]} */
-		const args = [b.id('$$payload')];
-		if (node.context) {
-			args.push(node.context);
-		}
-
 		context.state.init.push(
 			b.function_declaration(
 				node.expression,
-				args,
+				[b.id('$$payload'), ...node.parameters],
 				/** @type {import('estree').BlockStatement} */ (context.visit(node.body))
 			)
 		);
+
 		if (context.state.options.dev) {
 			context.state.init.push(b.stmt(b.call('$.add_snippet_symbol', node.expression)));
 		}

packages/svelte/src/compiler/phases/scope.js

@@ -592,8 +592,8 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 			const child_scope = state.scope.child();
 			scopes.set(node, child_scope);
 
-			if (node.context) {
-				for (const id of extract_identifiers(node.context)) {
+			for (const param of node.parameters) {
+				for (const id of extract_identifiers(param)) {
 					child_scope.declare(id, 'each', 'let');
 				}
 			}