fix: @debug does not work with proxied-state (#13690)

* fix: @debug must use $state.snapshot() on value

* changeset

* add test

---------

Co-authored-by: Dominic Gannaway <dg@domgan.com>
pull/13752/head
adiGuba 2 months ago committed by GitHub
parent 28c8d2b95d
commit ad578a5da5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: @debug does not work with proxied-state

@ -9,9 +9,15 @@ import * as b from '../../../../utils/builders.js';
*/ */
export function DebugTag(node, context) { export function DebugTag(node, context) {
const object = b.object( const object = b.object(
node.identifiers.map((identifier) => node.identifiers.map((identifier) => {
b.prop('init', identifier, /** @type {Expression} */ (context.visit(identifier))) const visited = b.call('$.snapshot', /** @type {Expression} */ (context.visit(identifier)));
)
return b.prop(
'init',
identifier,
context.state.analysis.runes ? visited : b.call('$.untrack', b.thunk(visited))
);
})
); );
const call = b.call('console.log', object); const call = b.call('console.log', object);

@ -0,0 +1,22 @@
import { flushSync } from 'svelte';
import { test } from '../../test';
export default test({
compileOptions: {
dev: true
},
test({ assert, target, logs }) {
const b1 = target.querySelector('button');
b1?.click();
flushSync();
b1?.click();
flushSync();
assert.deepEqual(logs, [
{ count: { current: 0 } },
{ count: { current: 1 } },
{ count: { current: 2 } }
]);
}
});

@ -0,0 +1,7 @@
<script>
let count = $state({ current: 0 });
</script>
{@debug count}
<button onclick={()=> count.current++}>+</button>
Loading…
Cancel
Save