From 00f60ce628fb1906c09a2324247c9b189297c648 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Wed, 11 Oct 2023 18:55:58 +0700
Subject: [PATCH 1/3] feat: show event listeners in details

---
 src/app.css                            |  2 ++
 src/lib/nodes/ElementAttributes.svelte |  8 ++---
 src/lib/panel/PropertyList.svelte      |  2 +-
 src/lib/runtime.ts                     |  2 +-
 src/lib/store.ts                       | 46 ++++++++++++++++++--------
 src/routes/+layout.svelte              | 24 +++++++++++---
 6 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/src/app.css b/src/app.css
index 6824477..d12d85f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,4 +1,6 @@
 :root {
+	tab-size: 2;
+
 	--background: rgb(255, 255, 255);
 	--color: rgb(74, 74, 79);
 
diff --git a/src/lib/nodes/ElementAttributes.svelte b/src/lib/nodes/ElementAttributes.svelte
index 8a9421b..c76a41e 100644
--- a/src/lib/nodes/ElementAttributes.svelte
+++ b/src/lib/nodes/ElementAttributes.svelte
@@ -30,11 +30,11 @@
 {/each}
 
 {#each listeners as { event, handler, modifiers }}
+	{@const suffix = modifiers?.length ? `|${modifiers.join('|')}` : ''}
+
 	<span>&nbsp;</span>
-	<span class="attr-name" data-tooltip={typeof handler === 'function' ? handler() : handler}>
-		on:
-		<Indexer text={event} />
-		{#if modifiers && modifiers.length}|{modifiers.join('|')}{/if}
+	<span class="attr-name" data-tooltip={handler}>
+		<Indexer text="on:{event}{suffix}" />
 	</span>
 {/each}
 
diff --git a/src/lib/panel/PropertyList.svelte b/src/lib/panel/PropertyList.svelte
index f52121e..b4618d1 100644
--- a/src/lib/panel/PropertyList.svelte
+++ b/src/lib/panel/PropertyList.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Expandable from './Expandable.svelte';
 
-	export let entries: Array<{ key: string; value: string }> = [];
+	export let entries: Array<{ key: string; value: any }> = [];
 	export let id: number;
 	export let readonly = false;
 
diff --git a/src/lib/runtime.ts b/src/lib/runtime.ts
index 99b6ebc..aee1faa 100644
--- a/src/lib/runtime.ts
+++ b/src/lib/runtime.ts
@@ -46,7 +46,7 @@ function resolveEventBubble(node: any) {
 			const handler = parentListener.handler;
 			if (!handler) return null;
 
-			return '// From parent\n' + (typeof handler === 'function' ? handler() : handler);
+			return `// From parent\n${handler}`;
 		};
 	}
 }
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 3c125bf..d3b2479 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -1,5 +1,38 @@
 import { writable } from 'svelte/store';
 
+type Overwrite<A, B> = Omit<A, keyof B> & B;
+
+type DebugNode = Overwrite<
+	SvelteBlockDetail,
+	{
+		invalidate(): void;
+		expanded: boolean;
+		detail?: {
+			attributes?: Array<{
+				key: string;
+				value: string;
+				bounded?: boolean;
+				flash?: boolean;
+			}>;
+			listeners?: Array<{
+				event: any;
+				handler: any;
+				modifiers: any;
+			}>;
+			ctx: any;
+			source: string;
+			nodeValue: string;
+		};
+
+		tagName: string;
+		parent: DebugNode;
+		children: DebugNode[];
+		dom?: HTMLLIElement;
+	}
+>;
+export const selected = writable<undefined | DebugNode>(undefined);
+export const hovered = writable<undefined | DebugNode>(undefined);
+export const root = writable<DebugNode[]>([]);
 export const visibility = writable<{ [key: string]: boolean }>({
 	component: true,
 	element: true,
@@ -10,19 +43,6 @@ export const visibility = writable<{ [key: string]: boolean }>({
 	anchor: false,
 });
 
-type DebugNode = Omit<SvelteBlockDetail, 'parent' | 'children'> & {
-	invalidate(): void;
-	expanded: boolean;
-
-	tagName: string;
-	parent: DebugNode;
-	children: DebugNode[];
-	dom?: HTMLLIElement;
-};
-export const selected = writable<undefined | DebugNode>(undefined);
-export const hovered = writable<undefined | DebugNode>(undefined);
-export const root = writable<DebugNode[]>([]);
-
 export const query = writable('');
 
 export type Profiler = {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0e56966..d22cdbf 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -128,22 +128,36 @@
 
 	<!-- component details -->
 	<Resizable axis="x">
+		{@const events = $selected?.detail?.listeners?.map((l) => {
+			const suffix = l.modifiers?.length ? `|${l.modifiers.join('|')}` : '';
+			const value = { __is: 'function', source: l.handler };
+			return { key: l.event + suffix, value };
+		})}
+
 		{#if $selected?.type === 'component'}
 			<h2>Props</h2>
-			<PropertyList id={$selected.id} entries={$selected.detail.attributes} />
+			<PropertyList id={$selected.id} entries={$selected.detail?.attributes} />
+
+			<Divider type="horizontal" />
+
+			<h2>Events</h2>
+			<PropertyList id={$selected.id} entries={events} />
 
 			<Divider type="horizontal" />
 
 			<h2>State</h2>
-			<PropertyList id={$selected.id} entries={$selected.detail.ctx} />
+			<PropertyList id={$selected.id} entries={$selected.detail?.ctx} />
 		{:else if $selected?.type === 'block' || $selected?.type === 'iteration'}
 			<h2>State</h2>
-
-			<PropertyList readonly id={$selected.id} entries={$selected.detail.ctx} />
+			<PropertyList readonly id={$selected.id} entries={$selected.detail?.ctx} />
 		{:else if $selected?.type === 'element'}
 			<h2>Attributes</h2>
+			<PropertyList readonly id={$selected.id} entries={$selected.detail?.attributes} />
+
+			<Divider type="horizontal" />
 
-			<PropertyList readonly id={$selected.id} entries={$selected.detail.attributes} />
+			<h2>Events</h2>
+			<PropertyList id={$selected.id} entries={events} />
 		{/if}
 	</Resizable>
 {:else}

From 3963b6f316a7da2050f8b7f57db944d7b0b4efce Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Wed, 11 Oct 2023 19:00:26 +0700
Subject: [PATCH 2/3] lint

---
 src/lib/nodes/Block.svelte | 2 +-
 src/lib/nodes/Node.svelte  | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/nodes/Block.svelte b/src/lib/nodes/Block.svelte
index b000eaf..f5ed2eb 100644
--- a/src/lib/nodes/Block.svelte
+++ b/src/lib/nodes/Block.svelte
@@ -6,7 +6,7 @@
 	export let hover: boolean;
 	export let selected: boolean;
 	export let tagName: string;
-	export let source: string;
+	export let source: string | undefined;
 	export let expanded: boolean;
 </script>
 
diff --git a/src/lib/nodes/Node.svelte b/src/lib/nodes/Node.svelte
index a9a23a2..8a0a75d 100644
--- a/src/lib/nodes/Node.svelte
+++ b/src/lib/nodes/Node.svelte
@@ -45,8 +45,8 @@
 				tagName={node.tagName}
 				selected={active}
 				hover={current}
-				attributes={node.detail.attributes}
-				listeners={node.detail.listeners}
+				attributes={node.detail?.attributes || []}
+				listeners={node.detail?.listeners || []}
 				hasChildren={!!node.children.length}
 				{style}
 				bind:expanded={node.expanded}
@@ -62,7 +62,7 @@
 				tagName={node.tagName}
 				selected={active}
 				hover={current}
-				source={node.detail.source}
+				source={node.detail?.source}
 				{style}
 				bind:expanded={node.expanded}
 			>
@@ -107,7 +107,7 @@
 			</Slot>
 		{:else if node.type === 'text'}
 			<div {style}>
-				<Indexer text={node.detail.nodeValue} />
+				<Indexer text={node.detail?.nodeValue} />
 			</div>
 		{:else if node.type === 'anchor'}
 			<Anchor {style} />

From 2531b8226f5fa6cf5b726c5ac6ce1d4be08587b8 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Fri, 13 Oct 2023 17:03:03 +0700
Subject: [PATCH 3/3] reuse type

---
 src/lib/store.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/store.ts b/src/lib/store.ts
index d3b2479..e5ff2ac 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -47,7 +47,7 @@ export const query = writable('');
 
 export type Profiler = {
 	type: 'mount' | 'patch' | 'detach';
-	node: { id: string; type: string; tagName: string };
+	node: DebugNode;
 	duration: number;
 	start: number;
 	end: number;