fix: recursively checks for invisible nodes (#165)

Author: ignatiusmb

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>