feat: add $log rune

.changeset/chatty-hotels-grin.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: add $log rune

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

@@ -660,6 +660,14 @@ const runes_scope_js_tweaker = {
 
 /** @type {import('./types').Visitors} */
 const runes_scope_tweaker = {
+	CallExpression(node, { state, next }) {
+		const rune = get_rune(node, state.scope);
+
+		// `$log(foo)` should not trigger the `static-state-reference` warning
+		if (rune?.startsWith('$log')) {
+			next({ ...state, function_depth: state.function_depth + 1 });
+		}
+	},
 	VariableDeclarator(node, { state }) {
 		const init = unwrap_ts_expression(node.init);
 		if (!init || init.type !== 'CallExpression') return;
@@ -880,6 +888,7 @@ const common_visitors = {
 	Identifier(node, context) {
 		const parent = /** @type {import('estree').Node} */ (context.path.at(-1));
 		if (!is_reference(node, parent)) return;
+
 		const binding = context.state.scope.get(node.name);
 
 		// if no binding, means some global variable

packages/svelte/src/compiler/phases/3-transform/client/utils.js

@@ -288,7 +288,8 @@ function get_hoistable_params(node, context) {
 				params.push(b.id(binding.node.name.slice(1)));
 				params.push(b.id(binding.node.name));
 			} else {
-				params.push(binding.node);
+				// create a copy to remove start/end tags which would mess up source maps
+				params.push(b.id(binding.node.name));
 			}
 		}
 	}

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

@@ -136,7 +136,12 @@ export const javascript_visitors_runes = {
 		for (const declarator of node.declarations) {
 			const init = unwrap_ts_expression(declarator.init);
 			const rune = get_rune(init, state.scope);
-			if (!rune || rune === '$effect.active' || rune === '$effect.root') {
+			if (
+				!rune ||
+				rune === '$effect.active' ||
+				rune === '$effect.root' ||
+				rune.startsWith('$log')
+			) {
 				if (init != null && is_hoistable_function(init)) {
 					const hoistable_function = visit(init);
 					state.hoisted.push(
@@ -307,6 +312,29 @@ export const javascript_visitors_runes = {
 			return b.call('$.user_root_effect', ...args);
 		}
 
+		if (rune?.startsWith('$log')) {
+			if (state.options.dev) {
+				const args = /** @type {import('estree').Expression[]} */ (
+					node.arguments.map((arg) => visit(arg))
+				);
+
+				if (rune === '$log.break') {
+					return b.call(
+						'$.log_break',
+						b.thunk(b.array(args)),
+						b.arrow(
+							[b.rest(b.id('values'))],
+							b.block([b.stmt(b.call('console.log', b.spread(b.id('values')))), b.debugger])
+						)
+					);
+				}
+				const callee = rune === '$log' ? '$.log' : `$.log_${rune.slice(5)}`;
+				return b.call(callee, b.thunk(b.array(args)));
+			}
+
+			return b.unary('void', b.literal(0));
+		}
+
 		next();
 	}
 };

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -575,7 +575,7 @@ const javascript_visitors_runes = {
 		for (const declarator of node.declarations) {
 			const init = unwrap_ts_expression(declarator.init);
 			const rune = get_rune(init, state.scope);
-			if (!rune || rune === '$effect.active') {
+			if (!rune || rune === '$effect.active' || rune.startsWith('$log')) {
 				declarations.push(/** @type {import('estree').VariableDeclarator} */ (visit(declarator)));
 				continue;
 			}
@@ -630,13 +630,27 @@ const javascript_visitors_runes = {
 		}
 		context.next();
 	},
-	CallExpression(node, { state, next }) {
+	CallExpression(node, { state, next, visit }) {
 		const rune = get_rune(node, state.scope);
 
 		if (rune === '$effect.active') {
 			return b.literal(false);
 		}
 
+		if (rune?.startsWith('$log')) {
+			if ((rune === '$log' || rune === '$log.table') && state.options.dev) {
+				const callee = rune === '$log' ? 'console.log' : 'console.table';
+
+				const args = /** @type {import('estree').Expression[]} */ (
+					node.arguments.map((arg) => visit(arg))
+				);
+
+				return b.call(callee, ...args);
+			}
+
+			return b.unary('void', b.literal(0));
+		}
+
 		next();
 	}
 };

packages/svelte/src/compiler/phases/constants.js

@@ -77,7 +77,11 @@ export const Runes = [
 	'$effect',
 	'$effect.pre',
 	'$effect.active',
-	'$effect.root'
+	'$effect.root',
+	'$log',
+	'$log.break',
+	'$log.trace',
+	'$log.table'
 ];
 
 /**

packages/svelte/src/compiler/utils/builders.js

@@ -72,7 +72,7 @@ export function labeled(name, body) {
 
 /**
  * @param {string | import('estree').Expression} callee
- * @param {...import('estree').Expression} args
+ * @param {...(import('estree').Expression | import('estree').SpreadElement)} args
  * @returns {import('estree').CallExpression}
  */
 export function call(callee, ...args) {