From ad19a1a0f5e4fccab6e2acd05e88eb58169ff74e Mon Sep 17 00:00:00 2001 From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com> Date: Thu, 14 Aug 2025 12:50:59 -0700 Subject: [PATCH 1/5] fix: don't clone non-proxies in `$inspect` (#16617) * fix: don't clone non-proxies in `$inspect` * apply suggestion * lint --- .changeset/itchy-games-guess.md | 5 ++++ packages/svelte/src/internal/shared/clone.js | 27 +++++++++++++------- 2 files changed, 23 insertions(+), 9 deletions(-) create mode 100644 .changeset/itchy-games-guess.md diff --git a/.changeset/itchy-games-guess.md b/.changeset/itchy-games-guess.md new file mode 100644 index 0000000000..44516cfc21 --- /dev/null +++ b/.changeset/itchy-games-guess.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: don't clone non-proxies in `$inspect` diff --git a/packages/svelte/src/internal/shared/clone.js b/packages/svelte/src/internal/shared/clone.js index 4632fc3d68..b8f99ee198 100644 --- a/packages/svelte/src/internal/shared/clone.js +++ b/packages/svelte/src/internal/shared/clone.js @@ -15,14 +15,15 @@ const empty = []; * @template T * @param {T} value * @param {boolean} [skip_warning] + * @param {boolean} [no_tojson] * @returns {Snapshot} */ -export function snapshot(value, skip_warning = false) { +export function snapshot(value, skip_warning = false, no_tojson = false) { if (DEV && !skip_warning) { /** @type {string[]} */ const paths = []; - const copy = clone(value, new Map(), '', paths); + const copy = clone(value, new Map(), '', paths, null, no_tojson); if (paths.length === 1 && paths[0] === '') { // value could not be cloned w.state_snapshot_uncloneable(); @@ -40,7 +41,7 @@ export function snapshot(value, skip_warning = false) { return copy; } - return clone(value, new Map(), '', empty); + return clone(value, new Map(), '', empty, null, no_tojson); } /** @@ -49,10 +50,11 @@ export function snapshot(value, skip_warning = false) { * @param {Map>} cloned * @param {string} path * @param {string[]} paths - * @param {null | T} original The original value, if `value` was produced from a `toJSON` call + * @param {null | T} [original] The original value, if `value` was produced from a `toJSON` call + * @param {boolean} [no_tojson] * @returns {Snapshot} */ -function clone(value, cloned, path, paths, original = null) { +function clone(value, cloned, path, paths, original = null, no_tojson = false) { if (typeof value === 'object' && value !== null) { var unwrapped = cloned.get(value); if (unwrapped !== undefined) return unwrapped; @@ -71,7 +73,7 @@ function clone(value, cloned, path, paths, original = null) { for (var i = 0; i < value.length; i += 1) { var element = value[i]; if (i in value) { - copy[i] = clone(element, cloned, DEV ? `${path}[${i}]` : path, paths); + copy[i] = clone(element, cloned, DEV ? `${path}[${i}]` : path, paths, null, no_tojson); } } @@ -88,8 +90,15 @@ function clone(value, cloned, path, paths, original = null) { } for (var key in value) { - // @ts-expect-error - copy[key] = clone(value[key], cloned, DEV ? `${path}.${key}` : path, paths); + copy[key] = clone( + // @ts-expect-error + value[key], + cloned, + DEV ? `${path}.${key}` : path, + paths, + null, + no_tojson + ); } return copy; @@ -99,7 +108,7 @@ function clone(value, cloned, path, paths, original = null) { return /** @type {Snapshot} */ (structuredClone(value)); } - if (typeof (/** @type {T & { toJSON?: any } } */ (value).toJSON) === 'function') { + if (typeof (/** @type {T & { toJSON?: any } } */ (value).toJSON) === 'function' && !no_tojson) { return clone( /** @type {T & { toJSON(): any } } */ (value).toJSON(), cloned, From a543559acfb21ecc509873790158ba16db4089fd Mon Sep 17 00:00:00 2001 From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com> Date: Thu, 14 Aug 2025 13:36:29 -0700 Subject: [PATCH 2/5] fix: avoid recursion error when tagging circular references (#16622) * fix: avoid recursion error when tagging circular references * try suggestion * add some logging * make logging clearer * more * try this * add test * tweak * fix? * fix?? --- .changeset/six-shirts-scream.md | 5 ++++ packages/svelte/src/internal/client/proxy.js | 11 +++++--- .../_config.js | 26 +++++++++++++++++++ .../main.svelte | 10 +++++++ 4 files changed, 48 insertions(+), 4 deletions(-) create mode 100644 .changeset/six-shirts-scream.md create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-trace-circular-reference/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-trace-circular-reference/main.svelte diff --git a/.changeset/six-shirts-scream.md b/.changeset/six-shirts-scream.md new file mode 100644 index 0000000000..ac4d183474 --- /dev/null +++ b/.changeset/six-shirts-scream.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: avoid recursion error when tagging circular references diff --git a/packages/svelte/src/internal/client/proxy.js b/packages/svelte/src/internal/client/proxy.js index 3ae4b87ed5..dae3791eb0 100644 --- a/packages/svelte/src/internal/client/proxy.js +++ b/packages/svelte/src/internal/client/proxy.js @@ -93,9 +93,11 @@ export function proxy(value) { /** Used in dev for $inspect.trace() */ var path = ''; - + let updating = false; /** @param {string} new_path */ function update_path(new_path) { + if (updating) return; + updating = true; path = new_path; tag(version, `${path} version`); @@ -104,6 +106,7 @@ export function proxy(value) { for (const [prop, source] of sources) { tag(source, get_label(path, prop)); } + updating = false; } return new Proxy(/** @type {any} */ (value), { @@ -284,13 +287,13 @@ export function proxy(value) { if (s === undefined) { if (!has || get_descriptor(target, prop)?.writable) { s = with_parent(() => source(undefined, stack)); - set(s, proxy(value)); - - sources.set(prop, s); if (DEV) { tag(s, get_label(path, prop)); } + set(s, proxy(value)); + + sources.set(prop, s); } } else { has = s.v !== UNINITIALIZED; diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-circular-reference/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace-circular-reference/_config.js new file mode 100644 index 0000000000..ca81c7854a --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-circular-reference/_config.js @@ -0,0 +1,26 @@ +import { test } from '../../test'; +import { normalise_trace_logs } from '../../../helpers.js'; + +export default test({ + compileOptions: { + dev: true + }, + + test({ assert, logs }) { + const files = { id: 1, items: [{ id: 2, items: [{ id: 3 }, { id: 4 }] }] }; + // @ts-expect-error + files.items[0].parent = files; + assert.deepEqual(normalise_trace_logs(logs), [ + { log: 'test (main.svelte:5:4)' }, + { log: '$state', highlighted: true }, + { log: 'filesState.files', highlighted: false }, + { log: files }, + { log: '$state', highlighted: true }, + { log: 'filesState.files.items[0].parent.items', highlighted: false }, + { log: files.items }, + { log: '$state', highlighted: true }, + { log: 'filesState.files.items[0].parent.items[0]', highlighted: false }, + { log: files.items[0] } + ]); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-circular-reference/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-trace-circular-reference/main.svelte new file mode 100644 index 0000000000..7640d48f77 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-circular-reference/main.svelte @@ -0,0 +1,10 @@ + \ No newline at end of file From 036d4588abb0b053a22a156664b92474244dfe47 Mon Sep 17 00:00:00 2001 From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com> Date: Thu, 14 Aug 2025 16:33:55 -0700 Subject: [PATCH 3/5] fix: actually use the changes from #16617 (#16626) * quick fix * fix failing test --- packages/svelte/src/internal/client/dev/inspect.js | 2 +- .../samples/inspect-recursive-2/main.svelte | 14 ++++---------- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/packages/svelte/src/internal/client/dev/inspect.js b/packages/svelte/src/internal/client/dev/inspect.js index c593f2622c..f79cf47299 100644 --- a/packages/svelte/src/internal/client/dev/inspect.js +++ b/packages/svelte/src/internal/client/dev/inspect.js @@ -26,7 +26,7 @@ export function inspect(get_value, inspector = console.log) { return; } - var snap = snapshot(value, true); + var snap = snapshot(value, true, true); untrack(() => { inspector(initial ? 'init' : 'update', ...snap); }); diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/main.svelte index f7874d2192..23a1c237c3 100644 --- a/packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/main.svelte @@ -1,21 +1,15 @@ + +

A

diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-destroy-then-create/B.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-component-destroy-then-create/B.svelte new file mode 100644 index 0000000000..459aa313c4 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-destroy-then-create/B.svelte @@ -0,0 +1,8 @@ + + +

B

diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-destroy-then-create/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-component-destroy-then-create/_config.js new file mode 100644 index 0000000000..e750c48a00 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-destroy-then-create/_config.js @@ -0,0 +1,13 @@ +import { test } from '../../test'; +import { flushSync } from 'svelte'; + +export default test({ + mode: ['client', 'hydrate'], + + async test({ assert, target, logs }) { + const [button] = target.querySelectorAll('button'); + + flushSync(() => button.click()); + assert.deepEqual(logs, ['create A', 'destroy A', 'create B']); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-destroy-then-create/main.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-component-destroy-then-create/main.svelte new file mode 100644 index 0000000000..c9ef5430a4 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-destroy-then-create/main.svelte @@ -0,0 +1,13 @@ + + + + + From 7b2d7746277dae6372ed7b836ad895bde536dc89 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 15 Aug 2025 17:09:33 -0400 Subject: [PATCH 5/5] chore: update/simplify test (#16630) * update/simplify test * oops * simplify effect-order-7 --- .../samples/effect-order-6/A.svelte | 7 ++++--- .../samples/effect-order-6/B.svelte | 4 +--- .../samples/effect-order-6/Child.svelte | 20 ------------------- .../samples/effect-order-6/_config.js | 2 +- .../samples/effect-order-6/main.svelte | 20 ++++++++++++------- .../samples/effect-order-7/A.svelte | 6 +++--- .../samples/effect-order-7/B.svelte | 4 +--- .../samples/effect-order-7/Child.svelte | 20 ------------------- .../samples/effect-order-7/main.svelte | 19 ++++++++++++------ 9 files changed, 36 insertions(+), 66 deletions(-) delete mode 100644 packages/svelte/tests/runtime-runes/samples/effect-order-6/Child.svelte delete mode 100644 packages/svelte/tests/runtime-runes/samples/effect-order-7/Child.svelte diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-6/A.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-6/A.svelte index 2e789a0460..22b8ed0f20 100644 --- a/packages/svelte/tests/runtime-runes/samples/effect-order-6/A.svelte +++ b/packages/svelte/tests/runtime-runes/samples/effect-order-6/A.svelte @@ -1,11 +1,12 @@ - + diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-6/B.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-6/B.svelte index 1fad19bc15..2233961177 100644 --- a/packages/svelte/tests/runtime-runes/samples/effect-order-6/B.svelte +++ b/packages/svelte/tests/runtime-runes/samples/effect-order-6/B.svelte @@ -1,7 +1,5 @@ - - - -{#if object?.boolean} - - {@render children(object.boolean)} -{/if} diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-6/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-order-6/_config.js index 8f9077e954..91e1569e46 100644 --- a/packages/svelte/tests/runtime-runes/samples/effect-order-6/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/effect-order-6/_config.js @@ -8,6 +8,6 @@ export default test({ flushSync(() => open.click()); flushSync(() => close.click()); - assert.deepEqual(logs, [true]); + assert.deepEqual(logs, [{ boolean: true, closed: false }]); } }); diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-6/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-6/main.svelte index eee487fa13..08f6fc48da 100644 --- a/packages/svelte/tests/runtime-runes/samples/effect-order-6/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/effect-order-6/main.svelte @@ -1,6 +1,15 @@ @@ -15,9 +24,6 @@
- - {#snippet children(boolean)} - - {/snippet} - - +{#if object} + +{/if} diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-7/A.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-7/A.svelte index 54f4869d62..b55c8f4115 100644 --- a/packages/svelte/tests/runtime-runes/samples/effect-order-7/A.svelte +++ b/packages/svelte/tests/runtime-runes/samples/effect-order-7/A.svelte @@ -1,9 +1,9 @@ -{boolean} +{boolean} {closed} - + diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-7/B.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-7/B.svelte index 2a2e634db1..7b33c342f5 100644 --- a/packages/svelte/tests/runtime-runes/samples/effect-order-7/B.svelte +++ b/packages/svelte/tests/runtime-runes/samples/effect-order-7/B.svelte @@ -1,7 +1,5 @@ - - - -{#if object?.nested} - - {@render children(object.nested)} -{/if} diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-7/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-7/main.svelte index c9c45c50cf..d9e9eb17ad 100644 --- a/packages/svelte/tests/runtime-runes/samples/effect-order-7/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/effect-order-7/main.svelte @@ -1,6 +1,15 @@ @@ -15,8 +24,6 @@
- - {#snippet children(nested)} -
- {/snippet} - +{#if object} + +{/if}