From 5ebe8729d0549c500faf626dc9418bf0863af8c9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 28 Oct 2024 19:58:40 -0400
Subject: [PATCH 1/5] simplify

---
 packages/repl/src/lib/Output/AstNode.svelte | 12 ++++--------
 packages/repl/src/lib/Output/AstView.svelte |  2 +-
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/repl/src/lib/Output/AstNode.svelte b/packages/repl/src/lib/Output/AstNode.svelte
index a1c02e1c80..32d01ee3c6 100644
--- a/packages/repl/src/lib/Output/AstNode.svelte
+++ b/packages/repl/src/lib/Output/AstNode.svelte
@@ -9,21 +9,17 @@
 	interface Props {
 		key?: string;
 		value: Ast;
-		collapsed?: boolean;
+		root?: boolean;
 		path_nodes?: Ast[];
 		autoscroll?: boolean;
 	}
 
-	let {
-		key = '',
-		value,
-		collapsed = $bindable(true),
-		path_nodes = [],
-		autoscroll = true
-	}: Props = $props();
+	let { key = '', value, root = false, path_nodes = [], autoscroll = true }: Props = $props();
 
 	const { toggleable } = get_repl_context();
 
+	let collapsed = $state(!root);
+
 	let list_item_el = $state() as HTMLLIElement;
 
 	let is_root = $derived(path_nodes[0] === value);
diff --git a/packages/repl/src/lib/Output/AstView.svelte b/packages/repl/src/lib/Output/AstView.svelte
index b1cacf4af3..61d615ceed 100644
--- a/packages/repl/src/lib/Output/AstView.svelte
+++ b/packages/repl/src/lib/Output/AstView.svelte
@@ -65,7 +65,7 @@
 		<code>
 			{#if typeof ast === 'object'}
 				<ul>
-					<AstNode value={ast} {path_nodes} {autoscroll} collapsed={false} />
+					<AstNode value={ast} {path_nodes} {autoscroll} root />
 				</ul>
 			{:else}
 				<p>No AST available</p>

From 58fc7792b442a5470d0b54a8896685c486640196 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 28 Oct 2024 20:04:21 -0400
Subject: [PATCH 2/5] shuffle code around

---
 packages/repl/src/lib/Output/AstNode.svelte | 44 ++++++++++-----------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/packages/repl/src/lib/Output/AstNode.svelte b/packages/repl/src/lib/Output/AstNode.svelte
index 32d01ee3c6..d15bf8d78d 100644
--- a/packages/repl/src/lib/Output/AstNode.svelte
+++ b/packages/repl/src/lib/Output/AstNode.svelte
@@ -22,12 +22,11 @@
 
 	let list_item_el = $state() as HTMLLIElement;
 
-	let is_root = $derived(path_nodes[0] === value);
 	let is_leaf = $derived(path_nodes[path_nodes.length - 1] === value);
-	let is_ast_array = $derived(Array.isArray(value));
-	let is_collapsable = $derived(value && typeof value === 'object');
+	let is_array = $derived(Array.isArray(value));
+	let is_primitive = $derived(value === null || typeof value !== 'object');
 	let is_markable = $derived(
-		is_collapsable &&
+		!is_primitive &&
 			'start' in value &&
 			'end' in value &&
 			typeof value.start === 'number' &&
@@ -38,9 +37,9 @@
 	let preview_text = $state('');
 
 	$effect(() => {
-		if (!is_collapsable || !collapsed) return;
+		if (is_primitive || !collapsed) return;
 
-		if (is_ast_array) {
+		if (is_array) {
 			if (!('length' in value)) return;
 
 			preview_text = `[ ${value.length} element${value.length === 1 ? '' : 's'} ]`;
@@ -91,36 +90,35 @@
 
 <li
 	bind:this={list_item_el}
-	class:marked={!is_root && is_leaf}
+	class:marked={!root && is_leaf}
 	onmouseover={handle_mark_text}
 	onfocus={handle_mark_text}
 	onmouseleave={handle_unmark_text}
 >
-	{#if !is_root && is_collapsable}
+	{#if !root && !is_primitive}
 		<button class="ast-toggle" class:open={!collapsed} onclick={() => (collapsed = !collapsed)}>
 			{key_text}
 		</button>
 	{:else if key_text}
 		<span>{key_text}</span>
 	{/if}
-	{#if is_collapsable}
-		{#if collapsed && !is_root}
-			<button class="preview" onclick={() => (collapsed = !collapsed)}>
-				{preview_text}
-			</button>
-		{:else}
-			<span>{is_ast_array ? '[' : '{'}</span>
-			<ul>
-				{#each Object.entries(value) as [k, v]}
-					<AstNode key={is_ast_array ? '' : k} value={v} {path_nodes} {autoscroll} />
-				{/each}
-			</ul>
-			<span>{is_ast_array ? ']' : '}'}</span>
-		{/if}
-	{:else}
+
+	{#if is_primitive}
 		<span class="token {typeof value}">
 			{JSON.stringify(value)}
 		</span>
+	{:else if collapsed && !root}
+		<button class="preview" onclick={() => (collapsed = !collapsed)}>
+			{preview_text}
+		</button>
+	{:else}
+		<span>{is_array ? '[' : '{'}</span>
+		<ul>
+			{#each Object.entries(value) as [k, v]}
+				<AstNode key={is_array ? '' : k} value={v} {path_nodes} {autoscroll} />
+			{/each}
+		</ul>
+		<span>{is_array ? ']' : '}'}</span>
 	{/if}
 </li>
 

From 3c5c57d32bde6115e8d31c839dcb2fbf6c145630 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 28 Oct 2024 21:17:31 -0400
Subject: [PATCH 3/5] nicer AST view

---
 packages/repl/src/lib/Output/AstNode.svelte | 123 +++++++++++---------
 packages/repl/src/lib/Output/AstView.svelte |   2 +-
 2 files changed, 67 insertions(+), 58 deletions(-)

diff --git a/packages/repl/src/lib/Output/AstNode.svelte b/packages/repl/src/lib/Output/AstNode.svelte
index d15bf8d78d..695e184ae9 100644
--- a/packages/repl/src/lib/Output/AstNode.svelte
+++ b/packages/repl/src/lib/Output/AstNode.svelte
@@ -9,16 +9,17 @@
 	interface Props {
 		key?: string;
 		value: Ast;
-		root?: boolean;
 		path_nodes?: Ast[];
 		autoscroll?: boolean;
+		depth?: number;
 	}
 
-	let { key = '', value, root = false, path_nodes = [], autoscroll = true }: Props = $props();
+	let { key = '', value, path_nodes = [], autoscroll = true, depth = 0 }: Props = $props();
 
 	const { toggleable } = get_repl_context();
 
-	let collapsed = $state(!root);
+	let root = depth === 0;
+	let open = $state(root);
 
 	let list_item_el = $state() as HTMLLIElement;
 
@@ -34,22 +35,8 @@
 	);
 	let key_text = $derived(key ? `${key}:` : '');
 
-	let preview_text = $state('');
-
 	$effect(() => {
-		if (is_primitive || !collapsed) return;
-
-		if (is_array) {
-			if (!('length' in value)) return;
-
-			preview_text = `[ ${value.length} element${value.length === 1 ? '' : 's'} ]`;
-		} else {
-			preview_text = `{ ${Object.keys(value).join(', ')} }`;
-		}
-	});
-
-	$effect(() => {
-		collapsed = !path_nodes.includes(value);
+		open = path_nodes.includes(value);
 	});
 
 	$effect(() => {
@@ -95,30 +82,56 @@
 	onfocus={handle_mark_text}
 	onmouseleave={handle_unmark_text}
 >
-	{#if !root && !is_primitive}
-		<button class="ast-toggle" class:open={!collapsed} onclick={() => (collapsed = !collapsed)}>
-			{key_text}
-		</button>
-	{:else if key_text}
-		<span>{key_text}</span>
-	{/if}
-
-	{#if is_primitive}
-		<span class="token {typeof value}">
-			{JSON.stringify(value)}
+	{#if is_primitive || (is_array && value.length === 0)}
+		<span class="value">
+			{#if key_text}
+				<span>{key_text}</span>
+			{/if}
+
+			{#if value == undefined}
+				<span class="token comment">{String(value)}</span>
+			{:else}
+				<span class="token {typeof value}">
+					{JSON.stringify(value)}
+				</span>
+			{/if}
 		</span>
-	{:else if collapsed && !root}
-		<button class="preview" onclick={() => (collapsed = !collapsed)}>
-			{preview_text}
-		</button>
 	{:else}
-		<span>{is_array ? '[' : '{'}</span>
-		<ul>
-			{#each Object.entries(value) as [k, v]}
-				<AstNode key={is_array ? '' : k} value={v} {path_nodes} {autoscroll} />
-			{/each}
-		</ul>
-		<span>{is_array ? ']' : '}'}</span>
+		<details bind:open>
+			<summary>
+				{#if key}
+					<span class="key">{key}</span>:
+				{/if}
+
+				{#if is_array}
+					[{#if !open}
+						<span class="token comment">...</span>]
+						<span class="token comment">({value.length})</span>
+					{/if}
+				{:else}
+					{#if value.type}
+						<span class="token comment">{value.type}</span>
+					{/if}
+					{'{'}{#if !open}<span class="token comment">...</span>}{/if}
+				{/if}
+			</summary>
+
+			{#if is_array}
+				<ul>
+					{#each value as v}
+						<AstNode value={v} {path_nodes} {autoscroll} depth={depth + 1} />
+					{/each}
+				</ul>
+				<span>]</span>
+			{:else}
+				<ul>
+					{#each Object.entries(value) as [k, v]}
+						<AstNode key={k} value={v} {path_nodes} {autoscroll} depth={depth + 1} />
+					{/each}
+				</ul>
+				<span>}</span>
+			{/if}
+		</details>
 	{/if}
 </li>
 
@@ -137,26 +150,18 @@
 		background-color: var(--sk-highlight-color);
 	}
 
-	button {
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-
-	.ast-toggle {
+	summary {
 		position: relative;
-	}
+		display: block;
+		cursor: pointer;
 
-	.ast-toggle::before {
-		content: '\25B6';
-		position: absolute;
-		bottom: 0;
-		left: -1.3rem;
-		opacity: 0.7;
-	}
+		.key {
+			text-decoration: underline;
+		}
 
-	.ast-toggle.open::before {
-		content: '\25BC';
+		&:hover .key {
+			text-decoration: underline;
+		}
 	}
 
 	.token {
@@ -170,4 +175,8 @@
 	.token.number {
 		color: var(--sk-code-number);
 	}
+
+	.token.comment {
+		color: var(--sk-code-comment);
+	}
 </style>
diff --git a/packages/repl/src/lib/Output/AstView.svelte b/packages/repl/src/lib/Output/AstView.svelte
index 61d615ceed..2ebf9e0afe 100644
--- a/packages/repl/src/lib/Output/AstView.svelte
+++ b/packages/repl/src/lib/Output/AstView.svelte
@@ -65,7 +65,7 @@
 		<code>
 			{#if typeof ast === 'object'}
 				<ul>
-					<AstNode value={ast} {path_nodes} {autoscroll} root />
+					<AstNode value={ast} {path_nodes} {autoscroll} />
 				</ul>
 			{:else}
 				<p>No AST available</p>

From 23b773aaa3b5b767e85816dc06ac6e391eeb44e1 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 28 Oct 2024 21:33:38 -0400
Subject: [PATCH 4/5] simplify

---
 packages/repl/src/lib/Output/AstNode.svelte | 22 +++++++--------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/packages/repl/src/lib/Output/AstNode.svelte b/packages/repl/src/lib/Output/AstNode.svelte
index 695e184ae9..f5a7991eff 100644
--- a/packages/repl/src/lib/Output/AstNode.svelte
+++ b/packages/repl/src/lib/Output/AstNode.svelte
@@ -116,21 +116,13 @@
 				{/if}
 			</summary>
 
-			{#if is_array}
-				<ul>
-					{#each value as v}
-						<AstNode value={v} {path_nodes} {autoscroll} depth={depth + 1} />
-					{/each}
-				</ul>
-				<span>]</span>
-			{:else}
-				<ul>
-					{#each Object.entries(value) as [k, v]}
-						<AstNode key={k} value={v} {path_nodes} {autoscroll} depth={depth + 1} />
-					{/each}
-				</ul>
-				<span>}</span>
-			{/if}
+			<ul>
+				{#each Object.entries(value) as [k, v]}
+					<AstNode key={!is_array && k} value={v} {path_nodes} {autoscroll} depth={depth + 1} />
+				{/each}
+			</ul>
+
+			<span>{is_array ? ']' : '}'}</span>
 		</details>
 	{/if}
 </li>

From 497d8d759224ff2f06b0ff56da07cff3615ce92f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 28 Oct 2024 21:38:06 -0400
Subject: [PATCH 5/5] check

---
 packages/repl/src/lib/Output/AstNode.svelte | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/repl/src/lib/Output/AstNode.svelte b/packages/repl/src/lib/Output/AstNode.svelte
index f5a7991eff..559915d3ff 100644
--- a/packages/repl/src/lib/Output/AstNode.svelte
+++ b/packages/repl/src/lib/Output/AstNode.svelte
@@ -118,7 +118,13 @@
 
 			<ul>
 				{#each Object.entries(value) as [k, v]}
-					<AstNode key={!is_array && k} value={v} {path_nodes} {autoscroll} depth={depth + 1} />
+					<AstNode
+						key={is_array ? undefined : k}
+						value={v}
+						{path_nodes}
+						{autoscroll}
+						depth={depth + 1}
+					/>
 				{/each}
 			</ul>