fix: recursively checks for invisible nodes (#165)

src/lib/nodes/Element.svelte

@@ -6,7 +6,7 @@
 	import type { ComponentProps } from 'svelte';
 
 	export let tagName: string;
-	export let hasChildren: boolean;
+	export let empty: boolean;
 	export let expanded: boolean;
 
 	export let attributes: ComponentProps<ElementAttributes>['attributes'];
@@ -48,7 +48,16 @@
 	});
 </script>
 
-{#if hasChildren}
+{#if empty}
+	<div>
+		<span>&lt;</span>
+		<span class="tag-name">
+			<Indexer text={tagName} />
+		</span>
+		<ElementAttributes attributes={cached} {listeners} />
+		<span>&nbsp;/&gt;</span>
+	</div>
+{:else}
 	<div role="group" class:expanded class="expandable" on:dblclick={() => (expanded = !expanded)}>
 		<span>&lt;</span>
 		<span class="tag-name">
@@ -76,15 +85,6 @@
 			<span>&gt;</span>
 		</div>
 	{/if}
-{:else}
-	<div>
-		<span>&lt;</span>
-		<span class="tag-name">
-			<Indexer text={tagName} />
-		</span>
-		<ElementAttributes attributes={cached} {listeners} />
-		<span>&nbsp;/&gt;</span>
-	</div>
 {/if}
 
 <style>

src/lib/nodes/Node.svelte

@@ -5,13 +5,17 @@
 	import Slot from './Slot.svelte';
 
 	import { background } from '$lib/runtime';
-	import { visibility, hovered, selected } from '$lib/store';
+	import { hovered, selected, visibility } from '$lib/store';
 
 	export let node: NonNullable<typeof $selected>;
 	export let depth = 1;
 
 	node.invalidate = () => (node = node);
 
+	function invisible(n: typeof node): boolean {
+		return !$visibility[n.type] && n.children.every(invisible);
+	}
+
 	let lastLength = node.children.length;
 	let flash = false;
 	$: {
@@ -42,7 +46,7 @@
 				tagName={node.tagName}
 				attributes={node.detail?.attributes || []}
 				listeners={node.detail?.listeners || []}
-				hasChildren={!!node.children.length}
+				empty={!node.children.length || node.children.every(invisible)}
 				bind:expanded={node.expanded}
 			>
 				<ul>