diff --git a/.changeset/ten-peaches-sleep.md b/.changeset/ten-peaches-sleep.md new file mode 100644 index 0000000000..fa13017112 --- /dev/null +++ b/.changeset/ten-peaches-sleep.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: better support for top-level snippet declarations 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 d62f1fcb49..7c06cac973 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 @@ -2477,7 +2477,14 @@ export const template_visitors = { body = /** @type {import('estree').BlockStatement} */ (context.visit(node.body)); } - context.state.init.push(b.const(node.expression, b.arrow(args, 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). + if (path.length === 1 && path[0].type === 'Fragment') { + context.state.init.push(b.function_declaration(node.expression, args, body)); + } else { + context.state.init.push(b.const(node.expression, b.arrow(args, body))); + } if (context.state.options.dev) { context.state.init.push(b.stmt(b.call('$.add_snippet_symbol', node.expression))); } diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-top-level/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-top-level/_config.js new file mode 100644 index 0000000000..129a573402 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/snippet-top-level/_config.js @@ -0,0 +1,8 @@ +import { test } from '../../test'; + +export default test({ + compileOptions: { + dev: true // Render in dev mode to check that the validation error is not thrown + }, + html: `
hello world
` +}); diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-top-level/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-top-level/main.svelte new file mode 100644 index 0000000000..b5da34accb --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/snippet-top-level/main.svelte @@ -0,0 +1,7 @@ + +{@render children()} +{#snippet snippet()} +hello world
+{/snippet}