use class-based reacgtivity for logs in playground (#1290)

Author: Rich-Harris

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';

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": [

packages/repl/src/lib/Output/Viewer.svelte

@@ -5,14 +5,15 @@
 	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';
 	import ErrorOverlay from './ErrorOverlay.svelte';
 	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);
 		}
 	}

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>

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;

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);
+	}
+}

packages/repl/src/lib/Output/console/index.ts

@@ -0,0 +1,2 @@
+export { default as Console } from './Console.svelte';
+export { Log } from './Log.svelte';