implement custom inspect functions

packages/svelte/src/internal/client/runtime.js

@@ -166,8 +166,8 @@ function create_source_signal(flags, value) {
 			v: value,
 			// context: We can remove this if we get rid of beforeUpdate/afterUpdate
 			x: null,
-			// debug: this is for DEV only
+			// this is for DEV only
-			d: new Set()
+			inspect: new Set()
 		};
 	}
 	return {
@@ -778,9 +778,9 @@ export function exposable(fn) {
  */
 export function get(signal) {
 	// @ts-expect-error
-	if (DEV && signal.d && inspect_fn) {
+	if (DEV && signal.inspect && inspect_fn) {
 		// @ts-expect-error
-		signal.d.add(inspect_fn);
+		signal.inspect.add(inspect_fn);
 		// @ts-expect-error
 		inspect_captured_signals.push(signal);
 	}
@@ -990,12 +990,6 @@ function mark_signal_consumers(signal, to_status, force_schedule) {
  * @returns {void}
  */
 export function set_signal_value(signal, value) {
-	// @ts-expect-error
-	if (DEV && signal.d) {
-		// @ts-expect-error
-		for (const fn of signal.d) fn();
-	}
-
 	if (
 		!current_untracking &&
 		!ignore_mutation_validation &&
@@ -1052,6 +1046,12 @@ export function set_signal_value(signal, value) {
 			}
 		}
 	}
+
+	// @ts-expect-error
+	if (DEV && signal.inspect) {
+		// @ts-expect-error
+		for (const fn of signal.inspect) fn();
+	}
 }
 
 /**
@@ -1802,6 +1802,8 @@ export function inspect(get_values) {
 
 	pre_effect(() => {
 		const fn = () => {
+			const values = get_values();
+
 			if (typeof values.at(-1) === 'function') {
 				const inspect = /** @type {Function} */ (values[values.length - 1]);
 				inspect(!initial, ...values.slice(0, -1));
@@ -1825,7 +1827,7 @@ export function inspect(get_values) {
 
 		return () => {
 			for (const s of signals) {
-				s.d.delete(fn);
+				s.inspect.delete(fn);
 			}
 		};
 	});

packages/svelte/src/internal/client/types.d.ts

@@ -81,8 +81,8 @@ export type SourceSignal<V = unknown> = {
 };
 
 export type SourceSignalDebug = {
-	/** debug: This is DEV only */
+	/** This is DEV only */
-	d: Set<Function>;
+	inspect: Set<Function>;
 };
 
 export type ComputationSignal<V = unknown> = {

packages/svelte/tests/runtime-runes/samples/inspect-trace/_config.js

@@ -32,8 +32,7 @@ export default test({
 		await Promise.resolve();
 
 		assert.ok(
-			log[0].stack.startsWith('ExpectedError: $log.trace') &&
+			log[0].stack.startsWith('Error:') && log[0].stack.includes('HTMLButtonElement.on_click')
-				log[0].stack.includes('HTMLButtonElement.on_click')
 		);
 		assert.deepEqual(log[1], 1);
 	}

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

@@ -2,7 +2,9 @@
 	let x = $state(0);
 	let y = $state(0);
 
-	$log.table(x);
+	$inspect(x, (changed, x) => {
+		if (changed) console.log(new Error(), x);
+	});
 </script>
 
 <button on:click={() => x++}>{x}</button>

packages/svelte/tests/runtime-runes/samples/inspect/main.svelte

@@ -2,7 +2,7 @@
 	let x = $state(0);
 	let y = $state(0);
 
-	$log(x);
+	$inspect(x);
 </script>
 
 <button on:click={() => x++}>{x}</button>

packages/svelte/tests/runtime-runes/samples/log-table/_config.js

@@ -1,34 +0,0 @@
-import { test } from '../../test';
-
-/**
- * @type {any[]}
- */
-let log;
-/**
- * @type {typeof console.log}}
- */
-let original_log;
-
-export default test({
-	compileOptions: {
-		dev: true
-	},
-	before_test() {
-		log = [];
-		original_log = console.table;
-		console.log = (...v) => {
-			log.push(...v);
-		};
-	},
-	after_test() {
-		console.table = original_log;
-	},
-	async test({ assert, target, component }) {
-		const [b1, b2] = target.querySelectorAll('button');
-		b1.click();
-		b2.click();
-		await Promise.resolve();
-
-		assert.deepEqual(log, [0, 1]);
-	}
-});

packages/svelte/tests/runtime-runes/samples/log-trace/main.svelte

@@ -1,9 +0,0 @@
-<script>
-	let x = $state(0);
-	let y = $state(0);
-
-	$log.trace(x);
-</script>
-
-<button on:click={() => x++}>{x}</button>
-<button on:click={() => y++}>{y}</button>