From 140d6b1e2cd5fb837b6e14fec208f3c71d6456d0 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Mon, 4 Nov 2024 22:36:29 +0000
Subject: [PATCH] feat: allow reserved snippet names when embedded in component

---
 .changeset/strong-donkeys-matter.md              |  5 +++++
 .../src/compiler/phases/1-parse/state/tag.js     |  2 +-
 .../compiler/phases/3-transform/client/utils.js  | 14 ++++++++++++++
 .../3-transform/client/visitors/SnippetBlock.js  |  7 ++++++-
 .../client/visitors/shared/component.js          | 13 +++++++------
 .../3-transform/server/visitors/SnippetBlock.js  |  8 +++++++-
 .../server/visitors/shared/component.js          | 14 ++++++++------
 .../src/compiler/phases/3-transform/utils.js     | 16 +++++++++++++++-
 .../samples/snippet-reserved/Child.svelte        |  5 +++++
 .../samples/snippet-reserved/_config.js          |  5 +++++
 .../samples/snippet-reserved/main.svelte         |  9 +++++++++
 11 files changed, 82 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/strong-donkeys-matter.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-reserved/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-reserved/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-reserved/main.svelte

diff --git a/.changeset/strong-donkeys-matter.md b/.changeset/strong-donkeys-matter.md
new file mode 100644
index 000000000000..c37dda5cd670
--- /dev/null
+++ b/.changeset/strong-donkeys-matter.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: allow reserved snippet names when embedded in component
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 de118960ecea..8d11710399c4 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/tag.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
@@ -271,7 +271,7 @@ function open(parser) {
 		parser.require_whitespace();
 
 		const name_start = parser.index;
-		const name = parser.read_identifier();
+		const name = parser.read_identifier(parser.stack.at(-1)?.type === 'Component');
 		const name_end = parser.index;
 
 		if (name === null) {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
index 2647f0a3be3b..bb1f6c9e3881 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -326,3 +326,17 @@ export function can_inline_variable(binding) {
 		binding.initial?.type === 'Literal'
 	);
 }
+
+/**
+ * @param {Statement[]} statements
+ */
+export function get_variable_declaration_name(statements) {
+	if (
+		statements.length !== 1 ||
+		statements[0].type !== 'VariableDeclaration' ||
+		statements[0].declarations[0].id?.type !== 'Identifier'
+	) {
+		return null;
+	}
+	return statements[0].declarations[0].id.name;
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
index 814fd3b0fb29..272d29b24607 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
@@ -1,6 +1,7 @@
 /** @import { BlockStatement, Expression, Identifier, Pattern, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
+import { is_reserved } from '../../../../../utils.js';
 import { dev } from '../../../../state.js';
 import { extract_paths } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
@@ -79,7 +80,11 @@ export function SnippetBlock(node, context) {
 		snippet = b.call('$.wrap_snippet', b.id(context.state.analysis.name), snippet);
 	}
 
-	const declaration = b.const(node.expression, snippet);
+	const id_expression =
+		node.expression.type === 'Identifier' && is_reserved(node.expression.name)
+			? b.id(`$_${node.expression.name}`)
+			: node.expression;
+	const declaration = b.const(id_expression, snippet);
 
 	// Top-level snippets are hoisted so they can be referenced in the `<script>`
 	if (context.path.length === 1 && context.path[0].type === 'Fragment') {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 8e1a53670708..cc872e971c5e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -4,7 +4,7 @@
 import { dev, is_ignored } from '../../../../../state.js';
 import { get_attribute_chunks } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
-import { create_derived } from '../../utils.js';
+import { create_derived, get_variable_declaration_name } from '../../utils.js';
 import { build_bind_this, validate_binding } from '../shared/utils.js';
 import { build_attribute_value } from '../shared/element.js';
 import { build_event_handler } from './events.js';
@@ -230,15 +230,16 @@ export function build_component(node, component_name, context, anchor = context.
 	// Group children by slot
 	for (const child of node.fragment.nodes) {
 		if (child.type === 'SnippetBlock') {
+			/** @type {Statement[]} */
+			const init = [];
 			// 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
-			});
+			context.visit(child, { ...context.state, init });
+			snippet_declarations.push(...init);
+			const name = /** @type { string } */ (get_variable_declaration_name(init));
 
-			push_prop(b.prop('init', child.expression, child.expression));
+			push_prop(b.prop('init', child.expression, b.id(name)));
 
 			// Interop: allows people to pass snippets when component still uses slots
 			serialized_slots.push(
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SnippetBlock.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SnippetBlock.js
index ec06dd5ec7f7..eb9693fc3865 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SnippetBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SnippetBlock.js
@@ -1,6 +1,7 @@
 /** @import { BlockStatement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
+import { is_reserved } from '../../../../../utils.js';
 import * as b from '../../../../utils/builders.js';
 
 /**
@@ -8,8 +9,13 @@ import * as b from '../../../../utils/builders.js';
  * @param {ComponentContext} context
  */
 export function SnippetBlock(node, context) {
+	const id_expression =
+		node.expression.type === 'Identifier' && is_reserved(node.expression.name)
+			? b.id(`$_${node.expression.name}`)
+			: node.expression;
+
 	const fn = b.function_declaration(
-		node.expression,
+		id_expression,
 		[b.id('$$payload'), ...node.parameters],
 		/** @type {BlockStatement} */ (context.visit(node.body))
 	);
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
index 79df3cdd04c6..40bbdb4d3ddf 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
@@ -4,6 +4,7 @@
 import { empty_comment, build_attribute_value } from './utils.js';
 import * as b from '../../../../../utils/builders.js';
 import { is_element_node } from '../../../../nodes.js';
+import { get_variable_declaration_name } from '../../../utils.js';
 
 /**
  * @param {AST.Component | AST.SvelteComponent | AST.SvelteSelf} node
@@ -109,19 +110,20 @@ export function build_inline_component(node, expression, context) {
 	// Group children by slot
 	for (const child of node.fragment.nodes) {
 		if (child.type === 'SnippetBlock') {
+			/** @type {Statement[]} */
+			const init = [];
 			// 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
-			});
+			context.visit(child, { ...context.state, init });
+			snippet_declarations.push(...init);
+			const name = /** @type { string } */ (get_variable_declaration_name(init));
 
-			push_prop(b.prop('init', child.expression, child.expression));
+			push_prop(b.prop('init', child.expression, b.id(name)));
 
 			// 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)
+				b.init(child.expression.name === 'children' ? 'default' : name, b.true)
 			);
 
 			continue;
diff --git a/packages/svelte/src/compiler/phases/3-transform/utils.js b/packages/svelte/src/compiler/phases/3-transform/utils.js
index 809c627098e8..f0c941e9b971 100644
--- a/packages/svelte/src/compiler/phases/3-transform/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/utils.js
@@ -1,7 +1,7 @@
 /** @import { Context } from 'zimmerframe' */
 /** @import { TransformState } from './types.js' */
 /** @import { AST, Binding, Namespace, SvelteNode, ValidatedCompileOptions } from '#compiler' */
-/** @import { Node, Expression, CallExpression } from 'estree' */
+/** @import { Node, Expression, CallExpression, Statement } from 'estree' */
 import {
 	regex_ends_with_whitespaces,
 	regex_not_whitespace,
@@ -452,3 +452,17 @@ export function transform_inspect_rune(node, context) {
 		return b.call('$.inspect', as_fn ? b.thunk(b.array(arg)) : b.array(arg));
 	}
 }
+
+/**
+ * @param {Statement[]} statements
+ */
+export function get_variable_declaration_name(statements) {
+	if (
+		statements.length !== 1 ||
+		statements[0].type !== 'FunctionDeclaration' ||
+		statements[0].id.type !== 'Identifier'
+	) {
+		return null;
+	}
+	return statements[0].id.name;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-reserved/Child.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-reserved/Child.svelte
new file mode 100644
index 000000000000..f11face986ca
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-reserved/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	const { catch: catch_snippet } = $props();
+</script>
+
+{@render catch_snippet()}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-reserved/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-reserved/_config.js
new file mode 100644
index 000000000000..33e7def9f1a2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-reserved/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<p>hello world</p>`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-reserved/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-reserved/main.svelte
new file mode 100644
index 000000000000..c8b3a6348406
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-reserved/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child>
+	{#snippet catch()}
+		<p>hello world</p>
+	{/snippet}
+</Child>