playground: better console (#11719)

* remove unused code

* better console

* simplify

* simplify

* fix

* fix

* fix

* fix console.table

* more table tweaks

* improve table styles

* tweaks

* bump svelte-json-tree

* tweak group styles

* level -> command

* remove stack from assertions

* nicer style for duplicates

* styles

* tidy/simplify

* tweaks

* tweaks

* tweaks

* fixes

* better stack traces (albeit not sourcemapped yet)

Author: Rich-Harris

pnpm-lock.yaml

@@ -53,7 +53,7 @@
     "esm-env": "^1.0.0",
     "marked": "^7.0.2",
     "resolve.exports": "^2.0.2",
-    "svelte-json-tree": "^2.1.0",
+    "svelte-json-tree": "^2.2.0",
     "zimmerframe": "^1.1.1"
   }
 }

sites/svelte-5-preview/package.json

@@ -1,27 +1,35 @@
 let uid = 1;
 
-const noop = () => {};
-
 export default class ReplProxy {
 	/** @type {HTMLIFrameElement} */
 	iframe;
 
 	/** @type {import("./proxy").Handlers} */
-	handlers = {
-		on_fetch_progress: noop,
-		on_console: noop,
-		on_error: noop,
-		on_console_group: noop,
-		on_console_group_collapsed: noop,
-		on_console_group_end: noop,
-		on_unhandled_rejection: noop
-	};
+	handlers;
 
 	/** @type {Map<number, { resolve: (value: any) => void, reject: (value: any) => void }>} */
 	pending_cmds = new Map();
 
-	/** @param {MessageEvent<any>} e */
-	handle_event = (e) => this.handle_repl_message(e);
+	/** @param {MessageEvent<any>} event */
+	handle_event = (event) => {
+		if (event.source !== this.iframe.contentWindow) return;
+
+		const { action, args } = event.data;
+
+		switch (action) {
+			case 'cmd_error':
+			case 'cmd_ok':
+				return this.handle_command_message(event.data);
+			case 'fetch_progress':
+				return this.handlers.on_fetch_progress(args.remaining);
+			case 'error':
+				return this.handlers.on_error(event.data);
+			case 'unhandledrejection':
+				return this.handlers.on_unhandled_rejection(event.data);
+			case 'console':
+				return this.handlers.on_console(event.data);
+		}
+	};
 
 	/**
 	 * @param {HTMLIFrameElement} iframe
@@ -77,35 +85,6 @@ export default class ReplProxy {
 		}
 	}
 
-	/**
-	 * @param {MessageEvent<any>} event
-	 */
-	handle_repl_message(event) {
-		if (event.source !== this.iframe.contentWindow) return;
-
-		const { action, args } = event.data;
-
-		switch (action) {
-			case 'cmd_error':
-			case 'cmd_ok':
-				return this.handle_command_message(event.data);
-			case 'fetch_progress':
-				return this.handlers.on_fetch_progress(args.remaining);
-			case 'error':
-				return this.handlers.on_error(event.data);
-			case 'unhandledrejection':
-				return this.handlers.on_unhandled_rejection(event.data);
-			case 'console':
-				return this.handlers.on_console(event.data);
-			case 'console_group':
-				return this.handlers.on_console_group(event.data);
-			case 'console_group_collapsed':
-				return this.handlers.on_console_group_collapsed(event.data);
-			case 'console_group_end':
-				return this.handlers.on_console_group_end(event.data);
-		}
-	}
-
 	/** @param {string} script */
 	eval(script) {
 		return this.iframe_command('eval', { script });

sites/svelte-5-preview/src/lib/Output/ReplProxy.js

@@ -55,32 +55,36 @@
 				pending_imports = progress;
 			},
 			on_error: (event) => {
-				push_logs({ level: 'error', args: [event.value] });
+				push_logs({ command: 'error', args: [event.value] });
 			},
 			on_unhandled_rejection: (event) => {
 				let error = event.value;
 				if (typeof error === 'string') error = { message: error };
 				error.message = 'Uncaught (in promise): ' + error.message;
-				push_logs({ level: 'error', args: [error] });
+				push_logs({ command: 'error', args: [error] });
 			},
 			on_console: (log) => {
-				if (log.level === 'clear') {
-					clear_logs();
-					push_logs(log);
-				} else if (log.duplicate) {
-					increment_duplicate_log();
-				} else {
-					push_logs(log);
+				switch (log.command) {
+					case 'clear':
+						clear_logs();
+						push_logs(log);
+						break;
+
+					case 'group':
+						group_logs(log);
+						break;
+
+					case 'groupEnd':
+						ungroup_logs();
+						break;
+
+					case 'duplicate':
+						increment_duplicate_log();
+						break;
+
+					default:
+						push_logs(log);
 				}
-			},
-			on_console_group: (action) => {
-				group_logs(action.label, false);
-			},
-			on_console_group_end: () => {
-				ungroup_logs();
-			},
-			on_console_group_collapsed: (action) => {
-				group_logs(action.label, true);
 			}
 		});
 
@@ -202,17 +206,13 @@
 		logs = logs;
 	}
 
-	/**
-	 * @param {string} label
-	 * @param {boolean} collapsed
-	 */
-	function group_logs(label, collapsed) {
-		/** @type {import('./console/console').Log} */
-		const group_log = { level: 'group', label, collapsed, logs: [] };
-		current_log_group.push({ level: 'group', label, collapsed, logs: [] });
+	/** @param {import('./console/console').Log} log */
+	function group_logs(log) {
+		log.logs = [];
+		current_log_group.push(log);
 		// TODO: Investigate
 		log_group_stack.push(current_log_group);
-		current_log_group = group_log.logs ?? [];
+		current_log_group = log.logs;
 		logs = logs;
 	}
 
@@ -284,7 +284,7 @@
 		</div>
 
 		<section slot="panel-body">
-			<Console {logs} {theme} on:clear={clear_logs} />
+			<Console {logs} />
 		</section>
 	</PaneWithPanel>
 

sites/svelte-5-preview/src/lib/Output/Viewer.svelte

@@ -3,34 +3,44 @@
 
 	/** @type {import('./console').Log[]} */
 	export let logs;
-
-	/** @type {'light' | 'dark'} */
-	export let theme;
 </script>
 
-<div class="container" class:dark={theme === 'dark'}>
+<div class="container">
 	{#each logs as log}
 		<ConsoleLine {log} />
 	{/each}
 </div>
 
 <style>
 	.container {
+		--error-fg: #da106e;
+		--error-bg: #fff0f0;
+		--error-border: rgb(242, 214, 219);
+		--warning-bg: rgb(254, 251, 218);
+		--warning-border: rgb(242, 232, 163);
 		--json-tree-string-color: var(--sk-code-string);
-	}
-	.dark {
-		--json-tree-property-color: #72a2d3;
-		--json-tree-string-color: #6cd1c7;
-		--json-tree-symbol-color: #6cd1c7;
-		--json-tree-boolean-color: #9681f7;
-		--json-tree-function-color: #e59b6f;
-		--json-tree-number-color: #9681f7;
-		--json-tree-label-color: #9ca0a5;
-		--json-tree-arrow-color: #e8eaed;
-		--json-tree-null-color: #81868a;
-		--json-tree-undefined-color: #81868a;
-		--json-tree-date-color: #9ca0a5;
-		--json-tree-operator-color: #e8eaed;
-		--json-tree-regex-color: #6cd1c7;
+		--json-tree-font-family: var(--sk-font-mono);
+
+		:global(.dark) & {
+			--error-fg: rgb(235, 78, 109);
+			--error-bg: rgb(71, 48, 54);
+			--error-border: rgb(109, 65, 76);
+			--warning-bg: rgb(64, 56, 34);
+			--warning-border: rgb(86, 86, 51);
+
+			--json-tree-property-color: #72a2d3;
+			--json-tree-string-color: #6cd1c7;
+			--json-tree-symbol-color: #6cd1c7;
+			--json-tree-boolean-color: #9681f7;
+			--json-tree-function-color: #e59b6f;
+			--json-tree-number-color: #9681f7;
+			--json-tree-label-color: #9ca0a5;
+			--json-tree-arrow-color: #e8eaed;
+			--json-tree-null-color: #81868a;
+			--json-tree-undefined-color: #81868a;
+			--json-tree-date-color: #9ca0a5;
+			--json-tree-operator-color: #e8eaed;
+			--json-tree-regex-color: #6cd1c7;
+		}
 	}
 </style>