fix: allow accessing snippet in script tag (#15789)

* fix: allow accessing snippet in script tag * branches are identical * update test * rename test * fix validation (we were mutating the wrong array) * tidy up * remove submodule * changeset --------- Co-authored-by: Rich Harris <rich.harris@vercel.com>

Author: paoloricciuti

.changeset/few-horses-wink.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: use function declaration for snippets in server output to avoid TDZ violation

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

@@ -1,4 +1,4 @@
-/** @import { ArrowFunctionExpression, BlockStatement, CallExpression } from 'estree' */
+/** @import { BlockStatement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import { dev } from '../../../../state.js';
@@ -9,27 +9,21 @@ import * as b from '#compiler/builders';
  * @param {ComponentContext} context
  */
 export function SnippetBlock(node, context) {
-const body = /** @type {BlockStatement} */ (context.visit(node.body));
+let fn = b.function_declaration(
+node.expression,
+[b.id('$$payload'), ...node.parameters],
+/** @type {BlockStatement} */ (context.visit(node.body))
+);
 
-if (dev) {
-body.body.unshift(b.stmt(b.call('$.validate_snippet_args', b.id('$$payload'))));
-}
+// @ts-expect-error - TODO remove this hack once $$render_inner for legacy bindings is gone
+fn.___snippet = true;
 
-/** @type {ArrowFunctionExpression | CallExpression} */
-let fn = b.arrow([b.id('$$payload'), ...node.parameters], body);
+const statements = node.metadata.can_hoist ? context.state.hoisted : context.state.init;
 
 if (dev) {
-fn = b.call('$.prevent_snippet_stringification', fn);
+fn.body.body.unshift(b.stmt(b.call('$.validate_snippet_args', b.id('$$payload'))));
+statements.push(b.stmt(b.call('$.prevent_snippet_stringification', fn.id)));
 }
 
-const declaration = b.declaration('const', [b.declarator(node.expression, fn)]);
-
-// @ts-expect-error - TODO remove this hack once $$render_inner for legacy bindings is gone
-fn.___snippet = true;
-
-if (node.metadata.can_hoist) {
-context.state.hoisted.push(declaration);
-} else {
-context.state.init.push(declaration);
-}
+statements.push(fn);
 }

packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/_config.js

@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+compileOptions: {
+dev: true
+}
+});

packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/fn.js

@@ -0,0 +1,3 @@
+export function fn(snippet) {
+return snippet;
+}

packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/main.svelte

@@ -0,0 +1,10 @@
+<script>
+import { fn } from "./fn.js";
+let variable = $state("var");
+
+fn(test);
+</script>
+
+{#snippet test()}
+{variable}
+{/snippet}

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

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+compileOptions: {
+dev: true
+},
+
+error: 'invalid_snippet_arguments'
+});

packages/svelte/tests/runtime-runes/samples/snippet-invalid-call/main.svelte

@@ -0,0 +1,7 @@
+<script>
+test();
+</script>
+
+{#snippet test()}
+<p>hello</p>
+{/snippet}

packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js

@@ -1,9 +1,9 @@
 import * as $ from 'svelte/internal/server';
 import TextInput from './Child.svelte';
 
-const snippet = ($$payload) => {
+function snippet($$payload) {
 $$payload.out += `<!---->Something`;
-};
+}
 
 export default function Bind_component_snippet($$payload) {
 let value = '';