feat: show event listeners in details (#157)

Author: ignatiusmb

src/app.css

@@ -1,4 +1,6 @@
 :root {
+tab-size: 2;
+
 --background: rgb(255, 255, 255);
 --color: rgb(74, 74, 79);
 

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>
 

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}
 

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} />

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;
 

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}`;
 };
 }
 }

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,24 +43,11 @@ 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 = {
 type: 'mount' | 'patch' | 'detach';
-node: { id: string; type: string; tagName: string };
+node: DebugNode;
 duration: number;
 start: number;
 end: number;

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}