From 8122453c675822e4fc1bff53152af75813683ca4 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Tue, 28 Nov 2023 00:58:45 +0000
Subject: [PATCH] improve break experience

---
 .../3-transform/client/visitors/javascript-runes.js    | 10 ++++++++++
 packages/svelte/src/compiler/utils/builders.js         |  2 +-
 packages/svelte/src/internal/client/runtime.js         |  8 +++-----
 playgrounds/sandbox/run.js                             |  1 +
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js
index d32e8fcbb6..a3bbf0388f 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js
+++ b/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)));
 			}
diff --git a/packages/svelte/src/compiler/utils/builders.js b/packages/svelte/src/compiler/utils/builders.js
index dd6cff6f91..bce8468cf9 100644
--- a/packages/svelte/src/compiler/utils/builders.js
+++ b/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}
  */
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 2da30a7660..f9fecd485e 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/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);
 		});
 	}
 }
diff --git a/playgrounds/sandbox/run.js b/playgrounds/sandbox/run.js
index e387bd44e7..15cdc0e8b8 100644
--- a/playgrounds/sandbox/run.js
+++ b/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