diff --git a/.changeset/tall-shrimps-worry.md b/.changeset/tall-shrimps-worry.md new file mode 100644 index 0000000000..7f09311301 --- /dev/null +++ b/.changeset/tall-shrimps-worry.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: add snippet marker symbol to children prop 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 c06e2d6e75..c80153a327 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 @@ -819,15 +819,21 @@ function serialize_inline_component(node, component_name, context) { const body = create_block(node, `${node.name}_${slot_name}`, children[slot_name], context); if (body.length === 0) continue; - const fn = b.arrow( + const slot_fn = b.arrow( [b.id('$$anchor'), b.id('$$slotProps')], b.block([...(slot_name === 'default' ? default_lets : []), ...body]) ); if (slot_name === 'default') { - push_prop(b.prop('init', b.id('children'), fn)); + push_prop( + b.prop( + 'init', + b.id('children'), + context.state.options.dev ? b.call('$.add_snippet_symbol', slot_fn) : slot_fn + ) + ); } else { - serialized_slots.push(b.prop('init', b.key(slot_name), fn)); + serialized_slots.push(b.prop('init', b.key(slot_name), slot_fn)); } } 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 fe478d0a27..ffba6d09db 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 @@ -847,26 +847,21 @@ function serialize_inline_component(node, component_name, context) { const body = create_block(node, children[slot_name], context); if (body.length === 0) continue; + const slot_fn = b.arrow( + [b.id('$$payload'), b.id('$$slotProps')], + b.block([...(slot_name === 'default' ? default_lets : []), ...body]) + ); + if (slot_name === 'default') { push_prop( b.prop( 'init', b.id('children'), - b.arrow( - [b.id('$$payload'), b.id('$$slotProps')], - b.block([...(slot_name === 'default' ? default_lets : []), ...body]) - ) + context.state.options.dev ? b.call('$.add_snippet_symbol', slot_fn) : slot_fn ) ); } else { - const slot = b.prop( - 'init', - b.literal(slot_name), - b.arrow( - [b.id('$$payload'), b.id('$$slotProps')], - b.block([...(slot_name === 'default' ? default_lets : []), ...body]) - ) - ); + const slot = b.prop('init', b.literal(slot_name), slot_fn); serialized_slots.push(slot); } } diff --git a/packages/svelte/src/internal/client/validate.js b/packages/svelte/src/internal/client/validate.js index b33f95635f..5c0378920e 100644 --- a/packages/svelte/src/internal/client/validate.js +++ b/packages/svelte/src/internal/client/validate.js @@ -119,7 +119,7 @@ export function add_snippet_symbol(fn) { export function validate_snippet(snippet_fn) { if (snippet_fn[symbol] !== true) { throw new Error( - 'The argument to `{@html ...}` must be a snippet function, not a component or some other kind of function. ' + + '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/runtime-runes/samples/snippet-validation-error/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-validation-error/_config.js index 4b38ceb3ec..01c2773b32 100644 --- a/packages/svelte/tests/runtime-runes/samples/snippet-validation-error/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/snippet-validation-error/_config.js @@ -5,6 +5,6 @@ export default test({ dev: true }, error: - 'The argument to `{@html ...}` must be a snippet function, not a component or some other kind of function. ' + + '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 ...}`.' });