make inspect take a single argument

Author: Rich-Harris

packages/svelte/src/compiler/phases/2-analyze/validation.js

@@ -521,13 +521,19 @@ function validate_call_expression(node, scope, path) {
 
 	if (rune === '$effect.active') {
 		if (node.arguments.length !== 0) {
-			error(node, 'invalid-rune-args-length', '$effect.active', [0]);
+			error(node, 'invalid-rune-args-length', rune, [0]);
 		}
 	}
 
 	if (rune === '$effect.root') {
 		if (node.arguments.length !== 1) {
-			error(node, 'invalid-rune-args-length', '$effect.root', [1]);
+			error(node, 'invalid-rune-args-length', rune, [1]);
+		}
+	}
+
+	if (rune === '$inspect') {
+		if (node.arguments.length < 1 || node.arguments.length > 2) {
+			error(node, 'invalid-rune-args-length', rune, [1, 2]);
 		}
 	}
 }

packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js

@@ -309,11 +309,12 @@ export const javascript_visitors_runes = {
 
 		if (rune === '$inspect') {
 			if (state.options.dev) {
-				const args = /** @type {import('estree').Expression[]} */ (
-					node.arguments.map((arg) => visit(arg))
-				);
+				const arg = /** @type {import('estree').Expression} */ (visit(node.arguments[0]));
+				const fn =
+					node.arguments[1] &&
+					/** @type {import('estree').Expression} */ (visit(node.arguments[1]));
 
-				return b.call('$.inspect', b.thunk(b.array(args)));
+				return b.call('$.inspect', b.thunk(arg), fn);
 			}
 
 			return b.unary('void', b.literal(0));

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

@@ -1794,28 +1794,22 @@ function deep_read(value, visited = new Set()) {
 }
 
 /**
- * @param {() => import('./types.js').MaybeSignal<>[]} get_values
+ * @param {() => import('./types.js').MaybeSignal<>} get_value
+ * @param {Function} inspect
  * @returns {void}
  */
-export function inspect(get_values) {
+export function inspect(get_value, inspect = console.log) {
 	let initial = true;
 
 	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));
-			} else {
-				// eslint-disable-next-line no-console
-				console.log(...values);
-			}
+			const value = get_value();
+			inspect(value, initial ? 'init' : 'update');
 		};
 
 		inspect_fn = fn;
-		const values = get_values();
-		deep_read(values);
+		const value = get_value();
+		deep_read(value);
 		inspect_fn = null;
 
 		const signals = inspect_captured_signals.slice();

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

@@ -2,8 +2,8 @@
 	let x = $state(0);
 	let y = $state(0);
 
-	$inspect(x, (changed, x) => {
-		if (changed) console.log(new Error(), x);
+	$inspect(x, (x, type) => {
+		if (type === 'update') console.log(new Error(), x);
 	});
 </script>
 

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

@@ -29,6 +29,6 @@ export default test({
 		b2.click();
 		await Promise.resolve();
 
-		assert.deepEqual(log, [0, 1]);
+		assert.deepEqual(log, [0, 'init', 1, 'update']);
 	}
 });

sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md

@@ -243,8 +243,8 @@ Note that you can still use `export const` and `export function` to expose thing
 
 ## `$inspect`
 
-The `$inspect` rune is roughly equivalent to `console.log`, with the exception that it will re-run whenever the
-arguments change. `$inspect` tracks reactive state deeply, meaning that updating something inside an object
+The `$inspect` rune is roughly equivalent to `console.log`, with the exception that it will re-run whenever its
+argument changes. `$inspect` tracks reactive state deeply, meaning that updating something inside an object
 or array using [fine-grained reactivity](/docs/fine-grained-reactivity) will cause it to re-fire.
 
 ```svelte
@@ -259,15 +259,15 @@ or array using [fine-grained reactivity](/docs/fine-grained-reactivity) will cau
 <input bind:value={message} />
 ```
 
-If the last argument is a function, it will be invoked instead of `console.log`. The first argument is `changed` —
-`false` when it initially runs, `true` thereafter — followed by the current values:
+If a callback is also provided, it will be invoked instead of `console.log`. The first argument to the callback
+is the current value. The second is either `"init"` or `"update"`.
 
 ```svelte
 <script>
 	let count = $state(0);
 
-	$inspect(count, (changed, count) => {
-		if (changed) {
+	$inspect(count, (count, type) => {
+		if (type === 'update') {
 			// or `console.trace`, or whatever you want. This makes it
 			// easy to find what caused the state to update
 			debugger;