Merge branch 'main' into better-effect-pruning

Author: Rich-Harris

.changeset/itchy-games-guess.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't clone non-proxies in `$inspect`

.changeset/six-shirts-scream.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: avoid recursion error when tagging circular references

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;

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<T>}
  */
-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<T, Snapshot<T>>} 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<T>}
  */
-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<T>} */ (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,

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] }
+		]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/inspect-trace-circular-reference/main.svelte

@@ -0,0 +1,10 @@
+<script>
+    const filesState = $state({ files: {} });
+    let nodes = { id: 1, items: [{ id: 2, items: [{ id: 3 }, { id: 4 }] }] };
+    filesState.files = nodes;
+    function test() {
+        $inspect.trace();
+        filesState.files.items[0].parent = filesState.files;
+    }
+    $effect(test);
+</script>