diff --git a/.changeset/four-spiders-type.md b/.changeset/four-spiders-type.md new file mode 100644 index 0000000000..9a4056c50a --- /dev/null +++ b/.changeset/four-spiders-type.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: add labels to `@const` tags and props diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js index c1be1e3220..34acdd6bb9 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js @@ -17,7 +17,13 @@ export function ConstTag(node, context) { // TODO we can almost certainly share some code with $derived(...) if (declaration.id.type === 'Identifier') { const init = build_expression(context, declaration.init, node.metadata.expression); - context.state.init.push(b.const(declaration.id, create_derived(context.state, b.thunk(init)))); + let expression = create_derived(context.state, b.thunk(init)); + + if (dev) { + expression = b.call('$.tag', expression, b.literal(declaration.id.name)); + } + + context.state.init.push(b.const(declaration.id, expression)); context.state.transform[declaration.id.name] = { read: get_value }; @@ -55,7 +61,13 @@ export function ConstTag(node, context) { ]) ); - context.state.init.push(b.const(tmp, create_derived(context.state, fn))); + let expression = create_derived(context.state, fn); + + if (dev) { + expression = b.call('$.tag', expression, b.literal('[@const]')); + } + + context.state.init.push(b.const(tmp, expression)); // we need to eagerly evaluate the expression in order to hit any // 'Cannot access x before initialization' errors diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js index f39d45bb04..28bfa88d96 100644 --- a/packages/svelte/src/internal/client/reactivity/props.js +++ b/packages/svelte/src/internal/client/reactivity/props.js @@ -393,6 +393,10 @@ export function prop(props, key, flags, fallback) { return getter(); }); + if (DEV) { + d.label = key; + } + // Capture the initial value if it's bindable if (bindable) get(d);