fix: group iteration nodes in one each block (#145)

src/app.d.ts

@@ -55,9 +55,11 @@ declare global {
 		detail?: any;
 		tagName?: string;
 
-		parent?: SvelteBlockDetail;
-		parentBlock?: SvelteBlockDetail;
 		children: SvelteBlockDetail[];
+		/** `type: 'element' | 'component'` */
+		parent?: SvelteBlockDetail;
+		/** like `parent` but `type: 'component'`  */
+		container?: SvelteBlockDetail;
 
 		block: SvelteComponentDetail['component']['$$']['fragment'];
 		ctx: Array<any>; // TODO: do we need this typed?

src/client/index.js

@@ -111,6 +111,7 @@ function serialize(node) {
 		id: node.id,
 		type: node.type,
 		tagName: node.tagName,
+		detail: {},
 	});
 	switch (node.type) {
 		case 'component': {

src/client/svelte.js

@@ -23,8 +23,8 @@ const nodes = {
 		this.map.set(node.detail, node);
 
 		let target = source && this.map.get(source);
-		if (!target || target.parentBlock != node.parentBlock) {
-			target = node.parentBlock;
+		if (!target || target.container != node.container) {
+			target = node.container;
 		}
 		node.parent = target;
 
@@ -94,14 +94,14 @@ document.addEventListener('SvelteRegisterBlock', ({ detail }) => {
 				type: 'block',
 				detail: rest,
 				tagName: type === 'pending' ? 'await' : type,
-				parentBlock: parent,
+				container: parent,
 				children: [],
 			});
 
 			switch (type) {
 				case 'then':
 				case 'catch':
-					if (!node.parentBlock) node.parentBlock = last_promise;
+					if (!node.container) node.container = last_promise;
 					break;
 
 				case 'slot':
@@ -129,25 +129,26 @@ document.addEventListener('SvelteRegisterBlock', ({ detail }) => {
 			}
 
 			if (type === 'each') {
-				const group =
-					(parent && nodes.map.get(parent.id + id)) ||
+				let group = parent && nodes.map.get(parent.id + id);
+				if (!group) {
 					// @ts-expect-error - each block fallback
-					/** @type {SvelteBlockDetail} */ ({
+					group = /** @type {SvelteBlockDetail} */ ({
 						version: '',
 						id: pointer++,
 						type: 'block',
 						tagName: 'each',
-						parentBlock: parent,
+						container: parent,
 						children: [],
 						detail: {
 							ctx: {},
 							source: detail.source,
 						},
 					});
-				parent && nodes.map.set(parent.id + id, group);
-				nodes.add({ node: group, target, anchor });
+					parent && nodes.map.set(parent.id + id, group);
+					nodes.add({ node: group, target, anchor });
+				}
 
-				node.parentBlock = group;
+				node.container = group;
 				node.type = 'iteration';
 
 				// @ts-expect-error - overloaded nodes
@@ -185,7 +186,7 @@ document.addEventListener('SvelteRegisterBlock', ({ detail }) => {
 			const node = nodes.map.get(current_node_id);
 			if (node) {
 				if (node.tagName === 'await') {
-					last_promise = node.parentBlock;
+					last_promise = node.container;
 				}
 				nodes.remove(node);
 			}
@@ -217,7 +218,7 @@ document.addEventListener('SvelteDOMInsert', ({ detail }) => {
 				type,
 				detail: element,
 				tagName: element.nodeName.toLowerCase(),
-				parentBlock: current_block,
+				container: current_block,
 				children: [],
 			},
 		});

src/lib/nodes/Iteration.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import Ellipsis from './Ellipsis.svelte';
+
+	export let expanded: boolean;
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="expandable" on:dblclick={() => (expanded = !expanded)}>
+	<span>&#8618;</span>
+	{#if !expanded}
+		<Ellipsis on:click={() => (expanded = true)} />
+	{/if}
+</div>
+
+{#if expanded}
+	<slot />
+{/if}

src/lib/nodes/Node.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import Indexer from '$lib/components/Indexer.svelte';
-	import Element from './Element.svelte';
 	import Block from './Block.svelte';
+	import Element from './Element.svelte';
+	import Iteration from './Iteration.svelte';
 	import Slot from './Slot.svelte';
 
 	import { background } from '$lib/runtime';
@@ -56,32 +57,21 @@
 				</ul>
 			</Element>
 		{:else if node.type === 'block'}
-			<Block tagName={node.tagName} source={node.detail?.source} bind:expanded={node.expanded}>
+			<Block tagName={node.tagName} source={node.detail.source} bind:expanded={node.expanded}>
 				<ul>
 					{#each node.children as child (child.id)}
 						<svelte:self node={child} depth={depth + 1} />
 					{/each}
 				</ul>
 			</Block>
 		{:else if node.type === 'iteration'}
-			<ul>
-				<!-- TODO: figure this out
-				<span
-					class:selected={current}
-					class:hover={active}
-					style:z-index="1"
-					style:position="absolute"
-					style:left="{left - 4}px"
-					style:transform="translateX(-100%)"
-				>
-					&#8618;
-				</span>
-				-->
-
-				{#each node.children as child (child.id)}
-					<svelte:self node={child} depth={depth + 1} />
-				{/each}
-			</ul>
+			<Iteration bind:expanded={node.expanded}>
+				<ul>
+					{#each node.children as child (child.id)}
+						<svelte:self node={child} depth={depth + 1} />
+					{/each}
+				</ul>
+			</Iteration>
 		{:else if node.type === 'slot'}
 			<Slot tagName={node.tagName} bind:expanded={node.expanded}>
 				<ul>
@@ -92,7 +82,7 @@
 			</Slot>
 		{:else if node.type === 'text'}
 			<div>
-				<Indexer text={node.detail?.nodeValue} />
+				<Indexer text={node.detail.nodeValue} />
 			</div>
 		{:else if node.type === 'anchor'}
 			<div>#anchor</div>

src/lib/runtime.ts

@@ -1,4 +1,4 @@
-import { hovered, root, selected } from './store';
+import { type DebugNode, hovered, root, selected } from './store';
 
 const tabId = chrome.devtools.inspectedWindow.tabId;
 const port = chrome.runtime.connect({ name: `${tabId}` });
@@ -11,21 +11,7 @@ export const background = {
 	},
 };
 
-const nodes = new Map();
-
-function insertNode(node: any, target: any, anchorId: number) {
-	node.parent = target;
-
-	const index = anchorId ? target.children.findIndex((o: any) => o.id === anchorId) : -1;
-
-	if (index !== -1) {
-		target.children.splice(index, 0, node);
-	} else {
-		target.children.push(node);
-	}
-
-	target.invalidate();
-}
+const nodes = new Map<null | number, DebugNode>();
 
 function resolveEventBubble(node: any) {
 	if (!node.detail || !node.detail.listeners) return;
@@ -65,47 +51,43 @@ port.onMessage.addListener(({ type, payload }) => {
 		}
 
 		case 'courier/node:add': {
-			const { node, target, anchor } = payload;
+			const { node, target, anchor } = payload as {
+				node: DebugNode;
+				target: null | number;
+				anchor: null | number;
+			};
 
 			node.children = [];
 			node.expanded = false;
 			node.invalidate = () => {};
 			resolveEventBubble(node);
 
-			const map_node = nodes.get(target);
+			const parent = nodes.get(target);
 			nodes.set(node.id, node);
+			if (!parent) return root.update((n) => [...n, node]);
 
-			if (map_node) {
-				insertNode(node, map_node, anchor);
-				return;
-			}
-
-			if (node._timeout) return;
-
-			node._timeout = setTimeout(() => {
-				delete node._timeout;
-				const targetNode = nodes.get(target);
-				if (targetNode) insertNode(node, targetNode, anchor);
-				else root.update((o) => [...o, node]);
-			}, 100);
+			const index = parent.children.findIndex((n) => n.id === anchor);
+			if (index === -1) parent.children.push(node);
+			else parent.children.splice(index, 0, node);
 
-			break;
+			return (node.parent = parent).invalidate();
 		}
 
 		case 'courier/node:remove': {
-			const current = nodes.get(payload.node.id);
-			nodes.delete(current.id);
-			if (!current.parent) break;
+			const node = payload.node as SvelteBlockDetail;
+			const current = nodes.get(node.id);
+			if (current) nodes.delete(current.id);
+			if (!current?.parent) return;
 
-			const index = current.parent.children.findIndex((o: any) => o.id === current.id);
+			const index = current.parent.children.findIndex((o) => o.id === current.id);
 			current.parent.children.splice(index, 1);
-			current.parent.invalidate();
-			break;
+			return current.parent.invalidate();
 		}
 
 		case 'courier/node:update': {
-			const current = nodes.get(payload.node.id);
-			if (!current) return; // TODO: investigate why this happens
+			const node = payload.node as SvelteBlockDetail;
+			const current = nodes.get(node.id);
+			if (!current) return;
 			Object.assign(current, payload.node);
 			resolveEventBubble(current);
 

src/lib/store.ts

@@ -2,12 +2,12 @@ import { writable } from 'svelte/store';
 
 type Overwrite<A, B> = Omit<A, keyof B> & B;
 
-type DebugNode = Overwrite<
+export type DebugNode = Overwrite<
 	SvelteBlockDetail,
 	{
 		invalidate(): void;
 		expanded: boolean;
-		detail?: {
+		detail: {
 			attributes?: Array<{
 				key: string;
 				value: string;

src/routes/+layout.svelte

@@ -124,15 +124,15 @@
 
 	<!-- component details -->
 	<Resizable axis="x">
-		{@const events = $selected?.detail?.listeners?.map((l) => {
+		{@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" />
 
@@ -142,13 +142,13 @@
 			<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} />
+			<PropertyList readonly id={$selected.id} entries={$selected.detail.attributes} />
 
 			<Divider type="horizontal" />