improve break experience

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

@@ -316,6 +316,16 @@ export const javascript_visitors_runes = {
 					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)));
 			}

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

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

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

@@ -1858,9 +1858,10 @@ export function log_table(get_values) {
 
 /**
  * @param {() => import('./types.js').MaybeSignal<>[]} get_values
+ * @param {(...value: any) => void} break_fn
  * @returns {void}
  */
-export function log_break(get_values) {
+export function log_break(get_values, break_fn) {
 	if (DEV) {
 		let initial = true;
 
@@ -1873,10 +1874,7 @@ export function log_break(get_values) {
 				return;
 			}
 
-			// eslint-disable-next-line no-console
-			console.log(...values);
-			// eslint-disable-next-line no-debugger
-			debugger;
+			break_fn(...values);
 		});
 	}
 }

playgrounds/sandbox/run.js

@@ -48,6 +48,7 @@ for (const generate of ['client', 'server']) {
 		}
 
 		const compiled = compile(source, {
+			dev: true,
 			filename: input,
 			generate,
 			runes: argv.runes