From 2c4efbf85c8c3d03dfbe2393607e0b25682ae4e5 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Tue, 27 Feb 2024 18:20:28 +0100
Subject: [PATCH 1/3] feat: allow arbitrary call expressions for render tags

closes #9582
---
 .changeset/ten-jokes-divide.md                |  5 +++
 packages/svelte/src/compiler/errors.js        |  2 +-
 .../src/compiler/phases/1-parse/state/tag.js  | 10 +++--
 .../compiler/phases/2-analyze/validation.js   |  9 +++-
 .../3-transform/client/visitors/template.js   | 27 +++++++++---
 .../3-transform/server/transform-server.js    | 23 ++++++++--
 .../svelte/src/compiler/types/template.d.ts   |  8 ++--
 packages/svelte/src/internal/client/render.js |  6 ++-
 .../svelte/src/internal/client/validate.js    |  2 +-
 .../samples/snippets/output.json              | 44 +++++++++++++------
 .../samples/snippet-expressions/_config.js    | 23 ++++++++++
 .../samples/snippet-expressions/child.svelte  |  7 +++
 .../samples/snippet-expressions/main.svelte   | 17 +++++++
 packages/svelte/types/index.d.ts              |  5 +--
 14 files changed, 149 insertions(+), 39 deletions(-)
 create mode 100644 .changeset/ten-jokes-divide.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-expressions/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-expressions/child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-expressions/main.svelte

diff --git a/.changeset/ten-jokes-divide.md b/.changeset/ten-jokes-divide.md
new file mode 100644
index 000000000000..179357fb29a3
--- /dev/null
+++ b/.changeset/ten-jokes-divide.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: allow arbitrary call expressions and optional chaining for snippets
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index f2207c9336e2..7c5fcaaf6fef 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -89,7 +89,7 @@ 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-spread-argument': () => 'cannot use spread arguments in {@render ...} tags',
 	'invalid-snippet-rest-parameter': () =>
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/tag.js b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
index 27c3b7e9af90..a457a82059f3 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/tag.js
+++ b/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
 		});
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/validation.js b/packages/svelte/src/compiler/phases/2-analyze/validation.js
index 1790e073eccd..2cc6d3ecb774 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/validation.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/validation.js
@@ -604,11 +604,16 @@ const validation = {
 		});
 	},
 	RenderTag(node, context) {
-		for (const arg of node.arguments) {
+		const raw_args =
+			node.expression.type === 'CallExpression'
+				? node.expression.arguments
+				: node.expression.expression.arguments;
+		for (const arg of raw_args) {
 			if (arg.type === 'SpreadElement') {
 				error(arg, 'invalid-render-spread-argument');
 			}
 		}
+
 		const is_inside_textarea = context.path.find((n) => {
 			return (
 				n.type === 'SvelteElement' &&
@@ -622,7 +627,7 @@ const validation = {
 				node,
 				'invalid-tag-placement',
 				'inside <textarea> or <svelte:element this="textarea">',
-				node.expression.name
+				'render'
 			);
 		}
 	},
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index 0bd8d9235dcb..8753c2ab25d9 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -1864,18 +1864,24 @@ 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 =
+			node.expression.type === 'CallExpression'
+				? node.expression.callee
+				: node.expression.expression.callee;
+		const raw_args =
+			node.expression.type === 'CallExpression'
+				? node.expression.arguments
+				: node.expression.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 +1891,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 }) {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
index 26cccdd99236..7d8dc04ec6d2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
@@ -1141,17 +1141,34 @@ 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 =
+			node.expression.type === 'CallExpression'
+				? node.expression.callee
+				: node.expression.expression.callee;
+		const raw_args =
+			node.expression.type === 'CallExpression'
+				? node.expression.arguments
+				: node.expression.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));
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index ec8319e5759b..5d794cee09e6 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/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;
diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index fe3db6c0ebf6..c956c96a4a8a 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/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);
diff --git a/packages/svelte/src/internal/client/validate.js b/packages/svelte/src/internal/client/validate.js
index 83124697a867..442d91190b9a 100644
--- a/packages/svelte/src/internal/client/validate.js
+++ b/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 ...}`.'
diff --git a/packages/svelte/tests/parser-modern/samples/snippets/output.json b/packages/svelte/tests/parser-modern/samples/snippets/output.json
index c8f6b2bcda78..a1b96c588c07 100644
--- a/packages/svelte/tests/parser-modern/samples/snippets/output.json
+++ b/packages/svelte/tests/parser-modern/samples/snippets/output.json
@@ -131,9 +131,9 @@
 				"start": 83,
 				"end": 101,
 				"expression": {
-					"type": "Identifier",
+					"type": "CallExpression",
 					"start": 92,
-					"end": 95,
+					"end": 100,
 					"loc": {
 						"start": {
 							"line": 7,
@@ -141,29 +141,45 @@
 						},
 						"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
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-expressions/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-expressions/_config.js
new file mode 100644
index 000000000000..89f4bf277fcb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-expressions/_config.js
@@ -0,0 +1,23 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<p>foo</p>
+		<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>foo</p>
+				<button>toggle</button>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-expressions/child.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-expressions/child.svelte
new file mode 100644
index 000000000000..0ece03934f2a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-expressions/child.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { snippets, snippet, optional } = $props();
+</script>
+
+{@render snippets[snippet]()}
+<hr>
+{@render optional?.()}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-expressions/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-expressions/main.svelte
new file mode 100644
index 000000000000..72d67e38194d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-expressions/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Child from './child.svelte';
+	let snippet = $state(0);
+	let show = $state(false);
+</script>
+
+{#snippet foo()}
+	<p>foo</p>
+{/snippet}
+
+{#snippet bar()}
+	<p>bar</p>
+{/snippet}
+
+<Child snippets={[foo, bar]} {snippet} optional={show ? foo : undefined} />
+
+<button on:click={() => { snippet = 1; show = true; }}>toggle</button>
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index d3fb1f340d58..b2dbb04b94a9 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -475,7 +475,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, SpreadElement } from 'estree';
+	import type { AssignmentExpression, ClassDeclaration, Expression, FunctionDeclaration, Identifier, ImportDeclaration, ArrayExpression, MemberExpression, ObjectExpression, Pattern, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, FunctionExpression, Node, Program, ChainExpression, SimpleCallExpression } from 'estree';
 	import type { Location } from 'locate-character';
 	import type { SourceMap } from 'magic-string';
 	import type { Context } from 'zimmerframe';
@@ -1197,8 +1197,7 @@ declare module 'svelte/compiler' {
 	/** A `{@render foo(...)} tag */
 	interface RenderTag extends BaseNode {
 		type: 'RenderTag';
-		expression: Identifier;
-		arguments: Array<Expression | SpreadElement>;
+		expression: SimpleCallExpression | (ChainExpression & { expression: SimpleCallExpression });
 	}
 
 	type Tag = ExpressionTag | HtmlTag | ConstTag | DebugTag | RenderTag;

From 576d07e9cc57cbbc393dc63aa7d5a3eb41e157f3 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Wed, 28 Feb 2024 10:01:34 +0100
Subject: [PATCH 2/3] more tests

---
 .../samples/snippet-expressions/_config.js    | 19 +++++++++++++++++++
 .../samples/snippet-expressions/child.svelte  | 14 ++++++++++++++
 .../samples/snippet-expressions/main.svelte   |  6 +++---
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-expressions/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-expressions/_config.js
index 89f4bf277fcb..3ae1bd835850 100644
--- a/packages/svelte/tests/runtime-runes/samples/snippet-expressions/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-expressions/_config.js
@@ -4,6 +4,15 @@ 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>
 	`,
 
@@ -15,6 +24,16 @@ export default test({
 			`
 				<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>
 			`
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-expressions/child.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-expressions/child.svelte
index 0ece03934f2a..2713f7d9897a 100644
--- a/packages/svelte/tests/runtime-runes/samples/snippet-expressions/child.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-expressions/child.svelte
@@ -1,7 +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()?.()}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-expressions/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-expressions/main.svelte
index 72d67e38194d..a5e45d7b0e6e 100644
--- a/packages/svelte/tests/runtime-runes/samples/snippet-expressions/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-expressions/main.svelte
@@ -1,6 +1,6 @@
 <script>
 	import Child from './child.svelte';
-	let snippet = $state(0);
+	let snippet = $state('foo');
 	let show = $state(false);
 </script>
 
@@ -12,6 +12,6 @@
 	<p>bar</p>
 {/snippet}
 
-<Child snippets={[foo, bar]} {snippet} optional={show ? foo : undefined} />
+<Child snippets={{foo, bar}} {snippet} optional={show ? foo : undefined} />
 
-<button on:click={() => { snippet = 1; show = true; }}>toggle</button>
+<button on:click={() => { snippet = 'bar'; show = true; }}>toggle</button>

From aef04e50d1a63dd712839aa9ab4a5af09df2d6c2 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Wed, 28 Feb 2024 10:13:25 +0100
Subject: [PATCH 3/3] prevent apply/call/bind

---
 packages/svelte/src/compiler/errors.js          |  2 ++
 .../src/compiler/phases/2-analyze/validation.js | 17 ++++++++++++-----
 .../3-transform/client/visitors/template.js     | 13 ++++---------
 .../3-transform/server/transform-server.js      | 17 ++++++++---------
 packages/svelte/src/compiler/utils/ast.js       |  9 +++++++++
 .../samples/render-tag-invalid-call/_config.js  |  8 ++++++++
 .../samples/render-tag-invalid-call/main.svelte |  1 +
 7 files changed, 44 insertions(+), 23 deletions(-)
 create mode 100644 packages/svelte/tests/compiler-errors/samples/render-tag-invalid-call/_config.js
 create mode 100644 packages/svelte/tests/compiler-errors/samples/render-tag-invalid-call/main.svelte

diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 7c5fcaaf6fef..213b689d3ead 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -91,6 +91,8 @@ const parse = {
 		`A component can have a single top-level <script> element and/or a single top-level <script context="module"> element`,
 	'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'
diff --git a/packages/svelte/src/compiler/phases/2-analyze/validation.js b/packages/svelte/src/compiler/phases/2-analyze/validation.js
index 2cc6d3ecb774..cd186f85c56e 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/validation.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/validation.js
@@ -4,7 +4,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';
@@ -604,16 +605,22 @@ const validation = {
 		});
 	},
 	RenderTag(node, context) {
-		const raw_args =
-			node.expression.type === 'CallExpression'
-				? node.expression.arguments
-				: node.expression.expression.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' &&
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index 8753c2ab25d9..f54113375e3e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/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,14 +1865,8 @@ export const template_visitors = {
 	},
 	RenderTag(node, context) {
 		context.state.template.push('<!>');
-		const callee =
-			node.expression.type === 'CallExpression'
-				? node.expression.callee
-				: node.expression.expression.callee;
-		const raw_args =
-			node.expression.type === 'CallExpression'
-				? node.expression.arguments
-				: node.expression.expression.arguments;
+		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';
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
index 7d8dc04ec6d2..fde4c416a9bb 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
+++ b/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 {
@@ -1141,14 +1146,8 @@ const template_visitors = {
 		state.init.push(anchor);
 		state.template.push(t_expression(anchor_id));
 
-		const callee =
-			node.expression.type === 'CallExpression'
-				? node.expression.callee
-				: node.expression.expression.callee;
-		const raw_args =
-			node.expression.type === 'CallExpression'
-				? node.expression.arguments
-				: node.expression.expression.arguments;
+		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
diff --git a/packages/svelte/src/compiler/utils/ast.js b/packages/svelte/src/compiler/utils/ast.js
index 464c2081f3e2..0ff09079bc9a 100644
--- a/packages/svelte/src/compiler/utils/ast.js
+++ b/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;
+}
diff --git a/packages/svelte/tests/compiler-errors/samples/render-tag-invalid-call/_config.js b/packages/svelte/tests/compiler-errors/samples/render-tag-invalid-call/_config.js
new file mode 100644
index 000000000000..47bd37699ca7
--- /dev/null
+++ b/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'
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/render-tag-invalid-call/main.svelte b/packages/svelte/tests/compiler-errors/samples/render-tag-invalid-call/main.svelte
new file mode 100644
index 000000000000..b299998eb84b
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/render-tag-invalid-call/main.svelte
@@ -0,0 +1 @@
+{@render snippet.apply(null, [1, 2, 3])}
\ No newline at end of file