feat: Variadic snippets (#9988)

* give this another try

* fix: lint

* fix: Forgot to save

* feat: it works boiiii

* look, ok, it did work, i just needed to update the snapshots

* bruh

* changeset

* feat: ok I think the client snippet block finally works

* feat: current tests pass; I'm sure I'm missing stuff for new things

* fix: snapshot

* feat: I think non-destructured rest should work now?

* chore: duplicated computation

* feat: Tests (passing and failing

* feat: it's... alive?

* chore: Clean up my messes

* chore: devtime stuff

* fix: fmt

* chore: see if this fixes repl

* chore: make naming more offensive

* fix: Don't throw on missing keys, return undefined as it usually would

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

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

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

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* fix: Hopefully default param values now work

* dumb

* types

* feat: Test it

* fix: Turns out javascript parameters are optional

* feat: The Final Solution

* document function

* feat: Better bracket matching, unit tests

* feat: exclude test files from publish

* feat: More unit tests

* feat: Use more efficient parsing for @const

* Update .changeset/curvy-cups-cough.md

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Update packages/svelte/package.json

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Update packages/svelte/src/compiler/phases/1-parse/utils/bracket.js

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* fix: changesets

* chore: additional comments

* fix: kill foreach

* fix: foreach again

* feat: Docs

* Revert "fix: kill foreach"

This reverts commit 9a688cc543.

* fix: My own stupidity

* fix: style

* fix - maybe

* Update sites/svelte-5-preview/src/routes/docs/content/01-api/03-snippets.md

* Update tag.js

Co-authored-by: Rich Harris <richard.a.harris@gmail.com>

* Update .changeset/curvy-cups-cough.md

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* chore: Remove rest params

* Delete .changeset/eighty-rivers-wash.md

* fix: Honestly idk why it was broken but it's fixed now

* fix: var name lol

* fix: typegen

* fix: idk

* fix: It looks like a bunch of unformatted shit came in through main?? idk

* Revert "fix: It looks like a bunch of unformatted shit came in through main?? idk"

This reverts commit ab851d5627.

* fix: format again

* this is getting ridiculous

* Update tag.js

Co-authored-by: Rich Harris <richard.a.harris@gmail.com>

* fix errors

* simplify a bit

* use read_context

* use read_context for const as well

* remove unused code

* unused import

* unused export

* remove spread args. sorry elliott

* tidy up SnippetBlock interface

* fix test

* simplify

* tweak

* revert example, so that it matches the surrounding text

* move PropsWithChildren back to public.d.ts

* update typing docs, so that it flows from previous example

* temporarily revert const parsing changes, to get prettier working again (???)

* oops

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>

.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(':')) {
+	if (!parser.eat(':')) {
-		// we need to trick Acorn into parsing the type annotation
+		parser.index = start;
-		const insert = '_ as ';
+		return undefined;
-		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);
 
-		// `array as item: string, index` becomes `string, index`, which is mistaken as a sequence expression - fix that
+	// we need to trick Acorn into parsing the type annotation
-		if (expression.type === 'SequenceExpression') {
+	const insert = '_ as ';
-			expression = expression.expressions[0];
+	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);
+	// `foo: bar = baz` gets mangled — fix it
-		return /** @type {any} */ (expression).typeAnnotation;
+	if (expression.type === 'AssignmentExpression') {
-	} else {
+		let b = expression.right.start;
-		parser.index = index;
+		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(
+		const singular = b.stmt(b.call('$.text_effect', text_id, b.thunk(assignment)));
-			b.call(
-				'$.text_effect',
-				text_id,
-				b.thunk(serialize_template_literal(sequence, visit, state)[1])
-			)
-		);
 
 		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) {
+		for (const arg of node.arguments) {
-			args.push(b.thunk(/** @type {import('estree').Expression} */ (context.visit(node.argument))));
+			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) {
+		/** @type {import('estree').Statement[]} */
-			const id = node.context.type === 'Identifier' ? node.context : b.id('$$context');
+		const declarations = [];
-			args.push(id);
+
+		for (let i = 0; i < node.parameters.length; i++) {
+			const argument = node.parameters[i];
 
-			/** @type {import('estree').Statement[]} */
+			if (!argument) continue;
-			const declarations = [];
 
-			// some of this is duplicated with EachBlock — TODO dedupe?
+			if (argument.type === 'Identifier') {
-			if (node.context.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);
+				binding.expression = b.call(argument);
-			} else {
+				continue;
-				const paths = extract_paths(node.context);
+			}
 
-				for (const path of paths) {
+			let arg_alias = `$$arg${i}`;
-					const name = /** @type {import('estree').Identifier} */ (path.node).name;
+			args.push(b.id(arg_alias));
-					const binding = /** @type {import('#compiler').Binding} */ (
+
-						context.state.scope.get(name)
+			const paths = extract_paths(argument);
-					);
+
-					declarations.push(
+			for (const path of paths) {
-						b.let(
+				const name = /** @type {import('estree').Identifier} */ (path.node).name;
-							path.node,
+				const binding = /** @type {import('#compiler').Binding} */ (context.state.scope.get(name));
-							b.thunk(
+				declarations.push(
-								/** @type {import('estree').Expression} */ (
+					b.let(
-									context.visit(path.expression?.(b.call('$$context')))
+						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([
+				binding.expression = b.call(name);
-				...declarations,
+			}
-				.../** @type {import('estree').BlockStatement} */ (context.visit(node.body)).body
-			]);
-		} else {
-			body = /** @type {import('estree').BlockStatement} */ (context.visit(node.body));
 		}
 
+		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(
+		const snippet_args = node.arguments.map((arg) => {
-				t_statement(
+			return /** @type {import('estree').Expression} */ (context.visit(arg));
-					b.stmt(
+		});
-						b.call(
+
-							snippet_function,
+		state.template.push(
-							b.id('$$payload'),
+			t_statement(b.stmt(b.call(snippet_function, b.id('$$payload'), ...snippet_args)))
-							/** @type {import('estree').Expression} */ (context.visit(node.argument))
+		);
-						)
-					)
-				)
-			);
-		} else {
-			state.template.push(t_statement(b.stmt(b.call(snippet_function, b.id('$$payload')))));
-		}
 
 		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 param of node.parameters) {
-				for (const id of extract_identifiers(node.context)) {
+				for (const id of extract_identifiers(param)) {
 					child_scope.declare(id, 'each', 'let');
 				}
 			}

packages/svelte/src/compiler/types/template.d.ts

@@ -2,6 +2,7 @@ import type { Binding } from '#compiler';
 import type {
 	ArrayExpression,
 	ArrowFunctionExpression,
+	ArrayPattern,
 	VariableDeclaration,
 	VariableDeclarator,
 	Expression,
@@ -12,7 +13,8 @@ import type {
 	Node,
 	ObjectExpression,
 	Pattern,
-	Program
+	Program,
+	SpreadElement
 } from 'estree';
 
 export interface BaseNode {
@@ -146,7 +148,7 @@ export interface DebugTag extends BaseNode {
 export interface RenderTag extends BaseNode {
 	type: 'RenderTag';
 	expression: Identifier;
-	argument: null | Expression;
+	arguments: Array<Expression | SpreadElement>;
 }
 
 type Tag = ExpressionTag | HtmlTag | ConstTag | DebugTag | RenderTag;
@@ -416,7 +418,7 @@ export interface KeyBlock extends BaseNode {
 export interface SnippetBlock extends BaseNode {
 	type: 'SnippetBlock';
 	expression: Identifier;
-	context: null | Pattern;
+	parameters: Pattern[];
 	body: Fragment;
 }
 

packages/svelte/src/internal/client/render.js

@@ -2960,16 +2960,16 @@ export function sanitize_slots(props) {
 /**
  * @param {() => Function} get_snippet
  * @param {Node} node
- * @param {() => any} args
+ * @param {(() => any)[]} args
  * @returns {void}
  */
-export function snippet_effect(get_snippet, node, args) {
+export function snippet_effect(get_snippet, node, ...args) {
 	const block = create_snippet_block();
 	render_effect(() => {
 		// Only rerender when the snippet function itself changes,
 		// not when an eagerly-read prop inside the snippet function changes
 		const snippet = get_snippet();
-		untrack(() => snippet(node, args));
+		untrack(() => snippet(node, ...args));
 		return () => {
 			if (block.d !== null) {
 				remove(block.d);

packages/svelte/src/internal/client/runtime.js

@@ -1,6 +1,6 @@
 import { DEV } from 'esm-env';
 import { subscribe_to_store } from '../../store/utils.js';
-import { EMPTY_FUNC, run_all } from '../common.js';
+import { noop, run_all } from '../common.js';
 import {
 	array_prototype,
 	get_descriptor,
@@ -865,7 +865,7 @@ export function store_get(store, store_name, stores) {
 			store: null,
 			last_value: null,
 			value: mutable_source(UNINITIALIZED),
-			unsubscribe: EMPTY_FUNC
+			unsubscribe: noop
 		};
 		// TODO: can we remove this code? it was refactored out when we split up source/comptued signals
 		// push_destroy_fn(entry.value, () => {
@@ -895,7 +895,7 @@ export function store_get(store, store_name, stores) {
 function connect_store_to_signal(store, source) {
 	if (store == null) {
 		set(source, undefined);
-		return EMPTY_FUNC;
+		return noop;
 	}
 
 	/** @param {V} v */

packages/svelte/src/internal/common.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-export const EMPTY_FUNC = () => {};
+export const noop = () => {};
 
 // Adapted from https://github.com/then/is-promise/blob/master/index.js
 // Distributed under MIT License https://github.com/then/is-promise/blob/master/LICENSE

packages/svelte/src/internal/index.js

@@ -53,3 +53,4 @@ export {
 	$window as window,
 	$document as document
 } from './client/operations.js';
+export { noop } from './common.js';

packages/svelte/src/internal/server/index.js

@@ -1,6 +1,6 @@
 import * as $ from '../client/runtime.js';
 import { set_is_ssr } from '../client/runtime.js';
-import { is_promise } from '../common.js';
+import { is_promise, noop } from '../common.js';
 import { subscribe_to_store } from '../../store/utils.js';
 import { DOMBooleanAttributes } from '../../constants.js';
 
@@ -523,10 +523,6 @@ export function bind_props(props_parent, props_now) {
 	}
 }
 
-function noop() {
-	// noop
-}
-
 /**
  * @template V
  * @param {Promise<V>} promise

packages/svelte/src/main/public.d.ts

@@ -23,7 +23,7 @@ type PropsWithChildren<Props, Slots> = Props &
 	(Props extends { children?: any }
 		? {}
 		: Slots extends { default: any }
-			? { children?: Snippet }
+			? { children?: Snippet<[]> }
 			: {});
 
 /**
@@ -190,11 +190,20 @@ declare const SnippetReturn: unique symbol;
  * ```
  * You can only call a snippet through the `{@render ...}` tag.
  */
-export interface Snippet<T = void> {
+export type Snippet<T extends unknown[] = []> =
-	(arg: T): typeof SnippetReturn & {
+	// this conditional allows tuples but not arrays. Arrays would indicate a
-		_: 'functions passed to {@render ...} tags must use the `Snippet` type imported from "svelte"';
+	// rest parameter type, which is not supported. If rest parameters are added
-	};
+	// in the future, the condition can be removed.
-}
+	number extends T['length']
+		? never
+		: {
+				(
+					this: void,
+					...args: T
+				): typeof SnippetReturn & {
+					_: 'functions passed to {@render ...} tags must use the `Snippet` type imported from "svelte"';
+				};
+			};
 
 interface DispatchOptions {
 	cancelable?: boolean;

packages/svelte/src/store/index.js

@@ -1,3 +1,4 @@
+import { noop } from '../internal/common.js';
 import { subscribe_to_store } from './utils.js';
 
 /**
@@ -5,10 +6,6 @@ import { subscribe_to_store } from './utils.js';
  */
 const subscriber_queue = [];
 
-/** @returns {void} */
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-function noop() {}
-
 /**
  * Creates a `Readable` store that allows reading by subscription.
  *

packages/svelte/src/store/utils.js

@@ -1,4 +1,4 @@
-import { EMPTY_FUNC } from '../internal/common.js';
+import { noop } from '../internal/common.js';
 
 /**
  * @template T
@@ -15,7 +15,7 @@ export function subscribe_to_store(store, run, invalidate) {
 		// @ts-expect-error
 		if (invalidate) invalidate(undefined);
 
-		return EMPTY_FUNC;
+		return noop;
 	}
 
 	// Svelte store takes a private second argument

packages/svelte/tests/parser-modern/samples/snippets/output.json

@@ -24,27 +24,34 @@
 					"end": 42,
 					"name": "foo"
 				},
-				"context": {
+				"parameters": [
-					"type": "Identifier",
+					{
-					"name": "msg",
+						"type": "Identifier",
-					"start": 43,
+						"start": 43,
-					"end": 54,
-					"typeAnnotation": {
-						"type": "TSStringKeyword",
-						"start": 48,
 						"end": 54,
-						"loc": {
+						"name": "msg",
-							"start": {
+						"typeAnnotation": {
-								"line": 1,
+							"type": "TSTypeAnnotation",
-								"column": 48
+							"start": 46,
-							},
+							"end": 54,
-							"end": {
+							"typeAnnotation": {
-								"line": 1,
+								"type": "TSStringKeyword",
-								"column": 54
+								"start": 48,
+								"end": 54,
+								"loc": {
+									"start": {
+										"line": 3,
+										"column": 19
+									},
+									"end": {
+										"line": 3,
+										"column": 25
+									}
+								}
 							}
 						}
 					}
-				},
+				],
 				"body": {
 					"type": "Fragment",
 					"nodes": [
@@ -127,22 +134,24 @@
 					},
 					"name": "foo"
 				},
-				"argument": {
+				"arguments": [
-					"type": "Identifier",
+					{
-					"start": 96,
+						"type": "Identifier",
-					"end": 99,
+						"start": 96,
-					"loc": {
+						"end": 99,
-						"start": {
+						"loc": {
-							"line": 7,
+							"start": {
-							"column": 13
+								"line": 7,
+								"column": 13
+							},
+							"end": {
+								"line": 7,
+								"column": 16
+							}
 						},
-						"end": {
+						"name": "msg"
-							"line": 7,
+					}
-							"column": 16
+				]
-						}
-					},
-					"name": "msg"
-				}
 			}
 		],
 		"transparent": false

packages/svelte/tests/runtime-runes/samples/snippet-argument-destructured-multiple/_config.js

@@ -0,0 +1,21 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<p>clicks: 0, doubled: 0</p>
+		<button>click me</button>
+	`,
+
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		await btn?.click();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>clicks: 1, doubled: 2</p>
+				<button>click me</button>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/snippet-argument-destructured-multiple/main.svelte

@@ -0,0 +1,14 @@
+<script>
+	let count = $state(0);
+	let doubled = $derived(count * 2);
+</script>
+
+{#snippet foo({ count }, { doubled })}
+	<p>clicks: {count}, doubled: {doubled}</p>
+{/snippet}
+
+{@render foo({ count }, { doubled })}
+
+<button on:click={() => count += 1}>
+	click me
+</button>

packages/svelte/tests/runtime-runes/samples/snippet-argument-multiple/_config.js

@@ -0,0 +1,21 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<p>clicks: 0, doubled: 0</p>
+		<button>click me</button>
+	`,
+
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		await btn?.click();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>clicks: 1, doubled: 2</p>
+				<button>click me</button>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/snippet-argument-multiple/main.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	let count = $state(0);
+	let doubled = $derived(count * 2);
+</script>
+
+{#snippet foo(n: number, doubled: number)}
+	<p>clicks: {n}, doubled: {doubled}</p>
+{/snippet}
+
+{@render foo(count, doubled)}
+
+<button on:click={() => count += 1}>
+	click me
+</button>

packages/svelte/tests/runtime-runes/samples/snippet-complicated-defaults/_config.js

@@ -0,0 +1,31 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		/** @type {HTMLButtonElement | null} */
+		const increment = target.querySelector('#increment');
+		/** @type {HTMLButtonElement | null} */
+		const change_ref = target.querySelector('#change-ref');
+		/** @type {HTMLParagraphElement | null} */
+		const count = target.querySelector('#count');
+		/** @type {HTMLParagraphElement | null} */
+		const fallback_count = target.querySelector('#fallback-count');
+
+		assert.htmlEqual(count?.innerHTML ?? '', 'Count: 0');
+		assert.htmlEqual(fallback_count?.innerHTML ?? '', 'Fallback count: 0');
+
+		await increment?.click();
+		assert.htmlEqual(count?.innerHTML ?? '', 'Count: 1');
+		assert.htmlEqual(fallback_count?.innerHTML ?? '', 'Fallback count: 0');
+
+		await change_ref?.click();
+		await increment?.click();
+		assert.htmlEqual(count?.innerHTML ?? '', 'Count: 1');
+		assert.htmlEqual(fallback_count?.innerHTML ?? '', 'Fallback count: 1');
+
+		await change_ref?.click();
+		await increment?.click();
+		assert.htmlEqual(count?.innerHTML ?? '', 'Count: 2');
+		assert.htmlEqual(fallback_count?.innerHTML ?? '', 'Fallback count: 1');
+	}
+});

packages/svelte/tests/runtime-runes/samples/snippet-complicated-defaults/main.svelte

@@ -0,0 +1,26 @@
+<script>
+	function box(value) {
+		let state = $state(value);
+		return {
+			get value() {
+				return state
+			},
+			set value(v) {
+				state = v
+			}
+		}
+	}
+
+  let count = box(0);
+	let fallback_count = box(0);
+	let toggle_state = $state(false);
+</script>
+
+{#snippet counter(c = count)}
+	<p id="count">Count: {count.value}</p>
+	<p id="fallback-count">Fallback count: {fallback_count.value}</p>
+  <button id="increment" on:click={() => (c.value += 1)}>Click to change referenced state value</button>
+	<button id="change-ref" on:click={() => toggle_state = !toggle_state}>Click to change state reference</button>
+{/snippet}
+
+{@render counter(toggle_state ? fallback_count : undefined)}

packages/svelte/tests/runtime-runes/samples/snippet-optional-arguments/_config.js

@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const count = target.querySelector('button');
+		const fallback = target.querySelector('p');
+
+		assert.htmlEqual(count?.innerHTML ?? '', '0');
+		assert.htmlEqual(fallback?.innerHTML ?? '', 'fallback');
+
+		await count?.click();
+		assert.htmlEqual(count?.innerHTML ?? '', '1');
+		assert.htmlEqual(fallback?.innerHTML ?? '', 'fallback');
+	}
+});

packages/svelte/tests/runtime-runes/samples/snippet-optional-arguments/main.svelte

@@ -0,0 +1,28 @@
+<script>
+	function box(value) {
+		let state = $state(value);
+
+		return {
+			get value() {
+				return state
+			},
+			set value(v) {
+				state = v;
+			}
+		}
+	}
+
+	let count = box(0);
+</script>
+
+{#snippet counter(c)}
+	{#if c}
+  	<button on:click={() => (c.value += 1)}>{c.value}</button>
+	{:else}
+		<p>fallback</p>
+	{/if}
+{/snippet}
+
+{@render counter()}
+{@render counter(count)}
+

packages/svelte/tests/types/snippet.ts

@@ -20,18 +20,18 @@ const d: Snippet<boolean> = (a: string, b: number) => {
 const e: Snippet = (a: string) => {
 	return return_type;
 };
+// @ts-expect-error
 const f: Snippet = (a) => {
-	// @ts-expect-error
 	a?.x;
 	return return_type;
 };
-const g: Snippet<boolean> = (a) => {
+const g: Snippet<[boolean]> = (a) => {
 	// @ts-expect-error
 	a === '';
 	a === true;
 	return return_type;
 };
-const h: Snippet<{ a: true }> = (a) => {
+const h: Snippet<[{ a: true }]> = (a) => {
 	a.a === true;
 	return return_type;
 };

packages/svelte/types/index.d.ts

@@ -24,7 +24,7 @@ declare module 'svelte' {
 		(Props extends { children?: any }
 			? {}
 			: Slots extends { default: any }
-				? { children?: Snippet }
+				? { children?: Snippet<[]> }
 				: {});
 
 	/**
@@ -191,11 +191,20 @@ declare module 'svelte' {
 	 * ```
 	 * You can only call a snippet through the `{@render ...}` tag.
 	 */
-	export interface Snippet<T = void> {
+	export type Snippet<T extends unknown[] = []> =
-		(arg: T): typeof SnippetReturn & {
+		// this conditional allows tuples but not arrays. Arrays would indicate a
-			_: 'functions passed to {@render ...} tags must use the `Snippet` type imported from "svelte"';
+		// rest parameter type, which is not supported. If rest parameters are added
-		};
+		// in the future, the condition can be removed.
-	}
+		number extends T['length']
+			? never
+			: {
+					(
+						this: void,
+						...args: T
+					): typeof SnippetReturn & {
+						_: 'functions passed to {@render ...} tags must use the `Snippet` type imported from "svelte"';
+					};
+				};
 
 	interface DispatchOptions {
 		cancelable?: boolean;
@@ -316,7 +325,9 @@ declare module 'svelte' {
 		new (options: ComponentConstructorOptions<Props & (Props extends {
 			children?: any;
 		} ? {} : {} | {
-			children?: Snippet<void> | undefined;
+			children?: ((this: void) => unique symbol & {
+				_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+			}) | undefined;
 		})>): SvelteComponent<Props, Events, any>;
 	}, options: {
 		target: Node;
@@ -339,7 +350,9 @@ declare module 'svelte' {
 		new (options: ComponentConstructorOptions<Props & (Props extends {
 			children?: any;
 		} ? {} : {} | {
-			children?: Snippet<void> | undefined;
+			children?: ((this: void) => unique symbol & {
+				_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+			}) | undefined;
 		})>): SvelteComponent<Props, Events, any>;
 	}, options: {
 		target: Node;
@@ -479,7 +492,7 @@ declare module 'svelte/animate' {
 }
 
 declare module 'svelte/compiler' {
-	import type { AssignmentExpression, ClassDeclaration, Expression, FunctionDeclaration, Identifier, ImportDeclaration, ArrayExpression, MemberExpression, ObjectExpression, Pattern, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, FunctionExpression, Node, Program } from 'estree';
+	import type { AssignmentExpression, ClassDeclaration, Expression, FunctionDeclaration, Identifier, ImportDeclaration, ArrayExpression, MemberExpression, ObjectExpression, Pattern, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, FunctionExpression, Node, Program, SpreadElement } from 'estree';
 	import type { Location } from 'locate-character';
 	import type { SourceMap } from 'magic-string';
 	import type { Context } from 'zimmerframe';
@@ -1180,7 +1193,7 @@ declare module 'svelte/compiler' {
 	interface RenderTag extends BaseNode {
 		type: 'RenderTag';
 		expression: Identifier;
-		argument: null | Expression;
+		arguments: Array<Expression | SpreadElement>;
 	}
 
 	type Tag = ExpressionTag | HtmlTag | ConstTag | DebugTag | RenderTag;
@@ -1450,7 +1463,7 @@ declare module 'svelte/compiler' {
 	interface SnippetBlock extends BaseNode {
 		type: 'SnippetBlock';
 		expression: Identifier;
-		context: null | Pattern;
+		parameters: Pattern[];
 		body: Fragment;
 	}
 
@@ -1727,7 +1740,9 @@ declare module 'svelte/legacy' {
 		} ? {} : Slots extends {
 			default: any;
 		} ? {
-			children?: Snippet<void> | undefined;
+			children?: ((this: void) => unique symbol & {
+				_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+			}) | undefined;
 		} : {})>): SvelteComponent<Props, Events, Slots>;
 	} & Exports;
 	// This should contain all the public interfaces (not all of them are actually importable, check current Svelte for which ones are).
@@ -1755,7 +1770,7 @@ declare module 'svelte/legacy' {
 		(Props extends { children?: any }
 			? {}
 			: Slots extends { default: any }
-				? { children?: Snippet }
+				? { children?: Snippet<[]> }
 				: {});
 
 	/**
@@ -1853,11 +1868,20 @@ declare module 'svelte/legacy' {
 	 * ```
 	 * You can only call a snippet through the `{@render ...}` tag.
 	 */
-	interface Snippet<T = void> {
+	type Snippet<T extends unknown[] = []> =
-		(arg: T): typeof SnippetReturn & {
+		// this conditional allows tuples but not arrays. Arrays would indicate a
-			_: 'functions passed to {@render ...} tags must use the `Snippet` type imported from "svelte"';
+		// rest parameter type, which is not supported. If rest parameters are added
-		};
+		// in the future, the condition can be removed.
-	}
+		number extends T['length']
+			? never
+			: {
+					(
+						this: void,
+						...args: T
+					): typeof SnippetReturn & {
+						_: 'functions passed to {@render ...} tags must use the `Snippet` type imported from "svelte"';
+					};
+				};
 }
 
 declare module 'svelte/motion' {

sites/svelte-5-preview/src/routes/docs/content/01-api/03-snippets.md

@@ -58,7 +58,7 @@ Snippets, and _render tags_, are a way to create reusable chunks of markup insid
 {/each}
 ```
 
-A snippet can have at most one parameter. You can destructure it, just like a function argument ([demo](/#H4sIAAAAAAAAE5VTYW-bMBD9KyeiKYlEY4jWfSAk2n5H6QcXDmwVbMs2SzuL_z6DTRqp2rQJ2Ycfd_ced2eXtLxHkxRPLhF0wKRIfiiVpIl9V_PB_MTeoj8bOep6RkpTa67spRKV7dECH2iHBs7wNCOVdcFU1ui6gC2zVpmCEMVrMw4HxaSVhnzLMnLMsm26Ol95Y1kBHr9BDHnHbAHHO6ymynIpfF7LuAncwKgBCj0Xrx_5mMb2jh3f6KB6PNRy2AaXKf1fuY__KPfxj3KlQGikL5aQdpUxm-dTJUryUVdRsvwSqEviX2fIbYzgSvmCt7wbNe4ceMUpRIoUFkkpBBkw7ZfMZXC-BLKSDx3Q3p5djJrA-SR-X4K9DdHT6u-jo-flFlKSO3ThIDcSR6LIKUhGWrN1QGhs16LLbXgbjoe5U1PkozCfzu7uy2WtpfuuUTSo1_9ffPZrJKGLoyuwNxjBv0Q4wmdSR2aFi9jS2Pc-FIrlEKeilcI-GP4LfVtxOM1gyO1XSLp6vtD6tdNyFE0BV8YtngKuaNNw0RWQx_jKDlR33M9E5h-PQhZxfxEt6gIaLdWDYbSR191RvcFXv_LMb7p7obssXZ5Dvt_f9HgzdzZKibOZZ9mXmHkdTTpaefqsd4OIay4_hksd_I0fZMNbjk1SWD3i9Dz9BpdEPu8sBAAA)):
+Snippet parameters can be destructured ([demo](/#H4sIAAAAAAAAE5VTYW-bMBD9KyeiKYlEY4jWfSAk2n5H6QcXDmwVbMs2SzuL_z6DTRqp2rQJ2Ycfd_ced2eXtLxHkxRPLhF0wKRIfiiVpIl9V_PB_MTeoj8bOep6RkpTa67spRKV7dECH2iHBs7wNCOVdcFU1ui6gC2zVpmCEMVrMw4HxaSVhnzLMnLMsm26Ol95Y1kBHr9BDHnHbAHHO6ymynIpfF7LuAncwKgBCj0Xrx_5mMb2jh3f6KB6PNRy2AaXKf1fuY__KPfxj3KlQGikL5aQdpUxm-dTJUryUVdRsvwSqEviX2fIbYzgSvmCt7wbNe4ceMUpRIoUFkkpBBkw7ZfMZXC-BLKSDx3Q3p5djJrA-SR-X4K9DdHT6u-jo-flFlKSO3ThIDcSR6LIKUhGWrN1QGhs16LLbXgbjoe5U1PkozCfzu7uy2WtpfuuUTSo1_9ffPZrJKGLoyuwNxjBv0Q4wmdSR2aFi9jS2Pc-FIrlEKeilcI-GP4LfVtxOM1gyO1XSLp6vtD6tdNyFE0BV8YtngKuaNNw0RWQx_jKDlR33M9E5h-PQhZxfxEt6gIaLdWDYbSR191RvcFXv_LMb7p7obssXZ5Dvt_f9HgzdzZKibOZZ9mXmHkdTTpaefqsd4OIay4_hksd_I0fZMNbjk1SWD3i9Dz9BpdEPu8sBAAA)):
 
 ```svelte
 {#snippet figure({ src, caption, width, height })}
@@ -69,6 +69,8 @@ A snippet can have at most one parameter. You can destructure it, just like a fu
 {/snippet}
 ```
 
+Like function declarations, snippets can have an arbitrary number of parameters, which can have default values. You cannot use rest parameters however.
+
 ## Snippet scope
 
 Snippets can be declared anywhere inside your component. They can reference values declared outside themselves, for example in the `<script>` tag or in `{#each ...}` blocks ([demo](/#H4sIAAAAAAAAE12P0QrCMAxFfyWrwhSEvc8p-h1OcG5RC10bmkyQ0n-3HQPBx3vCPUmCemiDrOpLULYbUdXqTKR2Sj6UA7_RCKbMbvJ9Jg33XpMcW9uKQYEAIzJ3T4QD3LSUDE-PnYA4YET4uOkGMc3W5B3xZrtvbVP9HDas2GqiZHqhMW6Tr9jGbG_oOCMImcUCwrIpFk1FqRyqpRpn0cmjHdAvnrIzuscyq_4nd3dPPD01ukE_NA6qFj9hvMYvGjJADw8BAAA=))...
@@ -217,12 +219,45 @@ Any content inside the component tags that is _not_ a snippet declaration implic
 
 > Note that you cannot have a prop called `children` if you also have content inside the component — for this reason, you should avoid having props with that name
 
+## Typing snippets
+
+Snippets implement the `Snippet` interface imported from `'svelte'`:
+
+```diff
+-<script>
+-	let { data, children, row } = $props();
++<script lang="ts">
++	import type { Snippet } from 'svelte';
++
++	let { data, children, row } = $props<{
++		data: any[];
++		children: Snippet;
++		row: Snippet<[any]>;
++	}>();
+</script>
+```
+
+With this change, red squigglies will appear if you try and use the component without providing a `data` prop and a `row` snippet. Notice that the type argument provided to `Snippet` is a tuple, since snippets can have multiple parameters.
+
+We can tighten things up further by declaring a generic, so that `data` and `row` refer to the same type:
+
+```diff
+-<script lang="ts">
++<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+
+	let { data, children, row } = $props<{
+-		data: any[];
++		data: T[];
+		children: Snippet;
+-		row: Snippet<[any]>;
++		row: Snippet<[T]>;
+	}>();
+</script>
+```
+
 ## Snippets and slots
 
 In Svelte 4, content can be passed to components using [slots](https://svelte.dev/docs/special-elements#slot). Snippets are more powerful and flexible, and as such slots are deprecated in Svelte 5.
 
 They continue to work, however, and you can mix and match snippets and slots in your components.
-
-## Typing snippets
-
-Right now, it's not possible to add types for snippets and their parameters. This is something we hope to address before we ship Svelte 5.

vitest.config.js

@@ -37,6 +37,7 @@ export default defineConfig({
 		dir: '.',
 		reporters: ['dot'],
 		include: [
+			'packages/svelte/**/*.test.ts',
 			'packages/svelte/tests/*/test.ts',
 			'packages/svelte/tests/runtime-browser/test-ssr.ts'
 		],