feat: allow arbitrary call expressions for render tags (#10656)

closes #9582

Author: dummdidumm

.changeset/ten-jokes-divide.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: allow arbitrary call expressions and optional chaining for snippets

packages/svelte/src/compiler/errors.js

@@ -89,8 +89,10 @@ const parse = {
 	'duplicate-style-element': () => `A component can have a single top-level <style> element`,
 	'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-expression': () => '{@render ...} tags can only contain call expressions',
 	'invalid-render-arguments': () => 'expected at most one argument',
+	'invalid-render-call': () =>
+		'Calling a snippet function using apply, bind or call is not allowed',
 	'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'

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

@@ -577,7 +577,12 @@ function special(parser) {
 
 		const expression = read_expression(parser);
 
-		if (expression.type !== 'CallExpression' || expression.callee.type !== 'Identifier') {
+		if (
+			expression.type !== 'CallExpression' &&
+			(expression.type !== 'ChainExpression' ||
+				expression.expression.type !== 'CallExpression' ||
+				!expression.expression.optional)
+		) {
 			error(expression, 'invalid-render-expression');
 		}
 
@@ -589,8 +594,7 @@ function special(parser) {
 			type: 'RenderTag',
 			start,
 			end: parser.index,
-			expression: expression.callee,
-			arguments: expression.arguments
+			expression: expression
 		});
 	}
 }

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

@@ -9,7 +9,8 @@ import {
 	get_parent,
 	is_expression_attribute,
 	is_text_attribute,
-	object
+	object,
+	unwrap_optional
 } from '../../utils/ast.js';
 import { warn } from '../../warnings.js';
 import fuzzymatch from '../1-parse/utils/fuzzymatch.js';
@@ -487,11 +488,22 @@ const validation = {
 		});
 	},
 	RenderTag(node, context) {
-		for (const arg of node.arguments) {
+		const raw_args = unwrap_optional(node.expression).arguments;
+		for (const arg of raw_args) {
 			if (arg.type === 'SpreadElement') {
 				error(arg, 'invalid-render-spread-argument');
 			}
 		}
+
+		const callee = unwrap_optional(node.expression).callee;
+		if (
+			callee.type === 'MemberExpression' &&
+			callee.property.type === 'Identifier' &&
+			['bind', 'apply', 'call'].includes(callee.property.name)
+		) {
+			error(node, 'invalid-render-call');
+		}
+
 		const is_inside_textarea = context.path.find((n) => {
 			return (
 				n.type === 'SvelteElement' &&
@@ -505,7 +517,7 @@ const validation = {
 				node,
 				'invalid-tag-placement',
 				'inside <textarea> or <svelte:element this="textarea">',
-				node.expression.name
+				'render'
 			);
 		}
 	},

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

@@ -3,7 +3,8 @@ import {
 	extract_paths,
 	is_event_attribute,
 	is_text_attribute,
-	object
+	object,
+	unwrap_optional
 } from '../../../../utils/ast.js';
 import { binding_properties } from '../../../bindings.js';
 import {
@@ -1864,18 +1865,18 @@ export const template_visitors = {
 	},
 	RenderTag(node, context) {
 		context.state.template.push('<!>');
-		const binding = context.state.scope.get(node.expression.name);
-		const is_reactive = binding?.kind !== 'normal' || node.expression.type !== 'Identifier';
+		const callee = unwrap_optional(node.expression).callee;
+		const raw_args = unwrap_optional(node.expression).arguments;
+		const is_reactive =
+			callee.type !== 'Identifier' || context.state.scope.get(callee.name)?.kind !== 'normal';
 
 		/** @type {import('estree').Expression[]} */
 		const args = [context.state.node];
-		for (const arg of node.arguments) {
+		for (const arg of raw_args) {
 			args.push(b.thunk(/** @type {import('estree').Expression} */ (context.visit(arg))));
 		}
 
-		let snippet_function = /** @type {import('estree').Expression} */ (
-			context.visit(node.expression)
-		);
+		let snippet_function = /** @type {import('estree').Expression} */ (context.visit(callee));
 		if (context.state.options.dev) {
 			snippet_function = b.call('$.validate_snippet', snippet_function);
 		}
@@ -1885,7 +1886,14 @@ export const template_visitors = {
 				b.stmt(b.call('$.snippet_effect', b.thunk(snippet_function), ...args))
 			);
 		} else {
-			context.state.after_update.push(b.stmt(b.call(snippet_function, ...args)));
+			context.state.after_update.push(
+				b.stmt(
+					(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
+						snippet_function,
+						...args
+					)
+				)
+			);
 		}
 	},
 	AnimateDirective(node, { state, visit }) {

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

@@ -1,6 +1,11 @@
 import { walk } from 'zimmerframe';
 import { set_scope, get_rune } from '../../scope.js';
-import { extract_identifiers, extract_paths, is_event_attribute } from '../../../utils/ast.js';
+import {
+	extract_identifiers,
+	extract_paths,
+	is_event_attribute,
+	unwrap_optional
+} from '../../../utils/ast.js';
 import * as b from '../../../utils/builders.js';
 import is_reference from 'is-reference';
 import {
@@ -1161,17 +1166,28 @@ const template_visitors = {
 		state.init.push(anchor);
 		state.template.push(t_expression(anchor_id));
 
-		const expression = /** @type {import('estree').Expression} */ (context.visit(node.expression));
+		const callee = unwrap_optional(node.expression).callee;
+		const raw_args = unwrap_optional(node.expression).arguments;
+
+		const expression = /** @type {import('estree').Expression} */ (context.visit(callee));
 		const snippet_function = state.options.dev
 			? b.call('$.validate_snippet', expression)
 			: expression;
 
-		const snippet_args = node.arguments.map((arg) => {
+		const snippet_args = raw_args.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)))
+			t_statement(
+				b.stmt(
+					(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
+						snippet_function,
+						b.id('$$payload'),
+						...snippet_args
+					)
+				)
+			)
 		);
 
 		state.template.push(t_expression(anchor_id));

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

@@ -13,7 +13,10 @@ import type {
 	ObjectExpression,
 	Pattern,
 	Program,
-	SpreadElement
+	SpreadElement,
+	CallExpression,
+	ChainExpression,
+	SimpleCallExpression
 } from 'estree';
 import type { Atrule, Rule } from './css';
 
@@ -151,8 +154,7 @@ export interface DebugTag extends BaseNode {
 /** A `{@render foo(...)} tag */
 export interface RenderTag extends BaseNode {
 	type: 'RenderTag';
-	expression: Identifier;
-	arguments: Array<Expression | SpreadElement>;
+	expression: SimpleCallExpression | (ChainExpression & { expression: SimpleCallExpression });
 }
 
 type Tag = ExpressionTag | HtmlTag | ConstTag | DebugTag | RenderTag;

packages/svelte/src/compiler/utils/ast.js

@@ -361,3 +361,12 @@ export function is_simple_expression(node) {
 
 	return false;
 }
+
+/**
+ * @template {import('estree').SimpleCallExpression | import('estree').MemberExpression} T
+ * @param {import('estree').ChainExpression & { expression : T } | T} node
+ * @returns {T}
+ */
+export function unwrap_optional(node) {
+	return node.type === 'ChainExpression' ? node.expression : node;
+}

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

@@ -2684,7 +2684,7 @@ export function sanitize_slots(props) {
 }
 
 /**
- * @param {() => Function} get_snippet
+ * @param {() => Function | null | undefined} get_snippet
  * @param {Node} node
  * @param {(() => any)[]} args
  * @returns {void}
@@ -2695,7 +2695,9 @@ export function snippet_effect(get_snippet, node, ...args) {
 		// 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));
+		if (snippet) {
+			untrack(() => snippet(node, ...args));
+		}
 		return () => {
 			if (block.d !== null) {
 				remove(block.d);

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

@@ -118,7 +118,7 @@ export function add_snippet_symbol(fn) {
  * @param {any} snippet_fn
  */
 export function validate_snippet(snippet_fn) {
-	if (snippet_fn[snippet_symbol] !== true) {
+	if (snippet_fn && snippet_fn[snippet_symbol] !== true) {
 		throw new Error(
 			'The argument to `{@render ...}` must be a snippet function, not a component or some other kind of function. ' +
 				'If you want to dynamically render one snippet or another, use `$derived` and pass its result to `{@render ...}`.'

packages/svelte/tests/compiler-errors/samples/render-tag-invalid-call/_config.js

@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'invalid-render-call',
+		message: 'Calling a snippet function using apply, bind or call is not allowed'
+	}
+});

packages/svelte/tests/compiler-errors/samples/render-tag-invalid-call/main.svelte

@@ -0,0 +1 @@
+{@render snippet.apply(null, [1, 2, 3])}

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

@@ -131,39 +131,55 @@
 				"start": 83,
 				"end": 101,
 				"expression": {
-					"type": "Identifier",
+					"type": "CallExpression",
 					"start": 92,
-					"end": 95,
+					"end": 100,
 					"loc": {
 						"start": {
 							"line": 7,
 							"column": 9
 						},
 						"end": {
 							"line": 7,
-							"column": 12
+							"column": 17
 						}
 					},
-					"name": "foo"
-				},
-				"arguments": [
-					{
+					"callee": {
 						"type": "Identifier",
-						"start": 96,
-						"end": 99,
+						"start": 92,
+						"end": 95,
 						"loc": {
 							"start": {
 								"line": 7,
-								"column": 13
+								"column": 9
 							},
 							"end": {
 								"line": 7,
-								"column": 16
+								"column": 12
 							}
 						},
-						"name": "msg"
-					}
-				]
+						"name": "foo"
+					},
+					"arguments": [
+						{
+							"type": "Identifier",
+							"start": 96,
+							"end": 99,
+							"loc": {
+								"start": {
+									"line": 7,
+									"column": 13
+								},
+								"end": {
+									"line": 7,
+									"column": 16
+								}
+							},
+							"name": "msg"
+						}
+					],
+					"optional": false
+				}
 			}
 		],
 		"transparent": false

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

@@ -0,0 +1,42 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<p>foo</p>
+		<hr>
+		<p>foo</p>
+		<hr>
+		<p>foo</p>
+		<hr>
+		<p>foo</p>
+		<hr>
+		<p>bar</p>
+		<hr>
+		<hr>
+		<button>toggle</button>
+	`,
+
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+		await btn?.click();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>bar</p>
+				<hr>
+				<p>bar</p>
+				<hr>
+				<p>foo</p>
+				<hr>
+				<p>foo</p>
+				<hr>
+				<p>foo</p>
+				<hr>
+				<p>foo</p>
+				<hr>
+				<p>foo</p>
+				<button>toggle</button>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/snippet-expressions/child.svelte

@@ -0,0 +1,21 @@
+<script>
+	let { snippets, snippet, optional } = $props();
+
+	function getOptional() {
+		return optional;
+	}
+</script>
+
+{@render snippets[snippet]()}
+<hr>
+{@render snippets?.[snippet]?.()}
+<hr>
+{@render snippets.foo()}
+<hr>
+{@render snippets.foo?.()}
+<hr>
+{@render (optional ?? snippets.bar)()}
+<hr>
+{@render optional?.()}
+<hr>
+{@render getOptional()?.()}