From 817d81bdbcc7654a8034c21a69def4214de87954 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 10 Apr 2025 11:42:29 -0400
Subject: [PATCH] use class-based reacgtivity for logs in playground

---
 .../tutorial/[...slug]/OutputRollup.svelte    |  2 +-
 packages/repl/package.json                    |  4 ++--
 packages/repl/src/lib/Output/Viewer.svelte    | 22 +++++++++----------
 .../src/lib/Output/console/Console.svelte     | 19 +---------------
 .../src/lib/Output/console/ConsoleLine.svelte |  2 +-
 .../repl/src/lib/Output/console/Log.svelte.ts | 22 +++++++++++++++++++
 packages/repl/src/lib/Output/console/index.ts |  2 ++
 7 files changed, 39 insertions(+), 34 deletions(-)
 create mode 100644 packages/repl/src/lib/Output/console/Log.svelte.ts
 create mode 100644 packages/repl/src/lib/Output/console/index.ts

diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
index 5a3da4434f..d562d82b39 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import Viewer from '@sveltejs/repl/viewer';
-	import Console, { type Log } from '@sveltejs/repl/console';
+	import { Console, type Log } from '@sveltejs/repl/console';
 	import { theme } from '@sveltejs/site-kit/state';
 	import Chrome from './Chrome.svelte';
 	import Loading from './Loading.svelte';
diff --git a/packages/repl/package.json b/packages/repl/package.json
index ae41a13a38..3bd9bada03 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -45,8 +45,8 @@
 			"svelte": "./src/lib/Workspace.svelte.ts"
 		},
 		"./console": {
-			"types": "./src/lib/Output/console/Console.svelte",
-			"svelte": "./src/lib/Output/console/Console.svelte"
+			"types": "./src/lib/Output/console/index.ts",
+			"svelte": "./src/lib/Output/console/index.ts"
 		}
 	},
 	"files": [
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index 8f973970e6..846a8c65f2 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -5,7 +5,7 @@
 	import Message from '../Message.svelte';
 	import PaneWithPanel from './PaneWithPanel.svelte';
 	import ReplProxy from './ReplProxy.js';
-	import Console, { type Log } from './console/Console.svelte';
+	import Console from './console/Console.svelte';
 	import getLocationFromStack from './get-location-from-stack';
 	import srcdoc from './srcdoc/index.html?raw';
 	import srcdoc_styles from './srcdoc/styles.css?raw';
@@ -13,6 +13,7 @@
 	import type { CompileError } from 'svelte/compiler';
 	import type Bundler from '../Bundler.svelte';
 	import type { BundleResult } from '../public';
+	import { Log } from './console/Log.svelte';
 
 	interface Props {
 		error: Error | null;
@@ -48,7 +49,7 @@
 	let context = get_repl_context();
 	let bundle = $derived((bundler ?? context?.bundler)?.result);
 
-	let logs: Log[] = $state.raw([]); // we don't want to proxify the logged values
+	let logs: Log[] = $state([]);
 	let log_group_stack: Log[][] = [];
 
 	// svelte-ignore state_referenced_locally
@@ -255,19 +256,18 @@
 		error = e;
 	}
 
-	function push_logs(log: Log) {
+	function push_logs(data: any) {
+		const log = new Log(data);
 		current_log_group.push((last_console_event = log));
-		logs = [...logs, log];
 		onLog?.(logs);
 	}
 
-	function group_logs(log: Log) {
-		log.logs = [];
+	function group_logs(data: any) {
+		const log = new Log(data);
 		current_log_group.push(log);
 		// TODO: Investigate
 		log_group_stack.push(current_log_group);
 		current_log_group = log.logs;
-		logs = [...logs];
 		onLog?.(logs);
 	}
 
@@ -278,14 +278,12 @@
 	}
 
 	function increment_duplicate_log() {
-		const last_log = current_log_group[current_log_group.length - 1];
+		last_console_event.count += 1;
 
-		if (last_log) {
-			last_log.count = (last_log.count || 1) + 1;
-			logs = [...logs];
+		if (current_log_group.includes(last_console_event)) {
 			onLog?.(logs);
 		} else {
-			last_console_event.count = 1;
+			// console was cleared
 			push_logs(last_console_event);
 		}
 	}
diff --git a/packages/repl/src/lib/Output/console/Console.svelte b/packages/repl/src/lib/Output/console/Console.svelte
index 4c27f3ecec..1d05afa0b3 100644
--- a/packages/repl/src/lib/Output/console/Console.svelte
+++ b/packages/repl/src/lib/Output/console/Console.svelte
@@ -1,23 +1,6 @@
-<script module lang="ts">
-	export type Log = {
-		command: 'info' | 'warn' | 'error' | 'table' | 'group' | 'clear' | 'unclonable';
-		action?: 'console';
-		args?: any[];
-		collapsed?: boolean;
-		expanded?: boolean;
-		count?: number;
-		logs?: Log[];
-		stack?: Array<{
-			label?: string;
-			location?: string;
-		}>;
-		data?: any;
-		columns?: string[];
-	};
-</script>
-
 <script lang="ts">
 	import ConsoleLine from './ConsoleLine.svelte';
+	import type { Log } from './Log.svelte';
 
 	export let logs: Log[];
 </script>
diff --git a/packages/repl/src/lib/Output/console/ConsoleLine.svelte b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
index 07273506a0..7cce4e0b9d 100644
--- a/packages/repl/src/lib/Output/console/ConsoleLine.svelte
+++ b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import JSONNode from '@sveltejs/svelte-json-tree';
 	import ConsoleTable from './ConsoleTable.svelte';
-	import type { Log } from './Console.svelte';
+	import type { Log } from './Log.svelte';
 
 	export let log: Log;
 	export let depth = 0;
diff --git a/packages/repl/src/lib/Output/console/Log.svelte.ts b/packages/repl/src/lib/Output/console/Log.svelte.ts
new file mode 100644
index 0000000000..9e165ec5b7
--- /dev/null
+++ b/packages/repl/src/lib/Output/console/Log.svelte.ts
@@ -0,0 +1,22 @@
+type Command = 'info' | 'warn' | 'error' | 'table' | 'group' | 'clear' | 'unclonable';
+
+export class Log {
+	command: Command;
+	args?: any[];
+	stack?: Array<{
+		label?: string;
+		location?: string;
+	}>;
+	data?: any;
+	columns?: string[];
+
+	collapsed = $state(false);
+	expanded = $state(false);
+	count = $state(1);
+	logs = $state([]);
+
+	constructor(data: any) {
+		this.command = data.command;
+		Object.assign(this, data);
+	}
+}
diff --git a/packages/repl/src/lib/Output/console/index.ts b/packages/repl/src/lib/Output/console/index.ts
new file mode 100644
index 0000000000..463db6060d
--- /dev/null
+++ b/packages/repl/src/lib/Output/console/index.ts
@@ -0,0 +1,2 @@
+export { default as Console } from './Console.svelte';
+export { Log } from './Log.svelte';