refactor: simplify node styling (#163)

sveltejs · Oct 18, 2023 · 8821ba6 · 8821ba6
1 parent 37ffe98
commit 8821ba6
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 111 deletions.
diff --git a/src/app.css b/src/app.css
@@ -55,7 +55,7 @@ ul {
 	content: '';
 	position: absolute;
 	top: 0;
-	left: calc(var(--left, 3px) - 3px);
+	left: calc(var(--indent, 6px) - 6px);
 
 	border-top: 0.375rem solid rgba(135, 135, 137, 0.9);
 	border-right: 0.25rem solid transparent;

diff --git a/src/lib/components/Indexer.svelte b/src/lib/components/Indexer.svelte
@@ -2,13 +2,12 @@
 	import { query } from '$lib/store';
 
 	export let text = '';
-	export let style = '';
-	export let hover = false;
+	export let color = '';
 
 	$: i = text.indexOf($query);
 </script>
 
-<div {style} class:hover>
+<p style:color>
 	{#if i === -1 || $query.length < 2}
 		<span>{text}</span>
 	{:else}
@@ -18,11 +17,12 @@
 			<span>{text.slice(i + $query.length)}</span>
 		{/if}
 	{/if}
-</div>
+</p>
 
 <style>
-	div {
-		display: flex;
+	p {
+		display: inline-flex;
+		margin: 0;
 	}
 	span {
 		overflow: hidden;

diff --git a/src/lib/nodes/Block.svelte b/src/lib/nodes/Block.svelte
@@ -2,23 +2,13 @@
 	import Indexer from '../components/Indexer.svelte';
 	import Ellipsis from './Ellipsis.svelte';
 
-	export let style: string;
-	export let hover: boolean;
-	export let selected: boolean;
 	export let tagName: string;
 	export let source: string | undefined;
 	export let expanded: boolean;
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-	{style}
-	class:expanded
-	class:hover
-	class:selected
-	class="expandable tag-open tag-name"
-	on:dblclick={() => (expanded = !expanded)}
->
+<div class:expanded class="expandable tag-open tag-name" on:dblclick={() => (expanded = !expanded)}>
 	{#if source}
 		<span>{source}</span>
 	{:else}
@@ -32,13 +22,13 @@
 {#if expanded}
 	<slot />
 
-	<Indexer text={`{/${tagName}}`} {hover} {style} />
+	<div>
+		<Indexer text={`{/${tagName}}`} />
+	</div>
 {/if}
 
 <style>
 	div {
-		width: 100%;
-		display: flex;
 		color: rgb(151, 164, 179);
 	}
 

diff --git a/src/lib/nodes/Element.svelte b/src/lib/nodes/Element.svelte
@@ -5,12 +5,9 @@
 
 	import type { ComponentProps } from 'svelte';
 
-	export let expanded: boolean;
-	export let hasChildren: boolean;
-	export let hover: boolean;
-	export let selected: boolean;
-	export let style: string;
 	export let tagName: string;
+	export let hasChildren: boolean;
+	export let expanded: boolean;
 
 	export let attributes: ComponentProps<ElementAttributes>['attributes'];
 	export let listeners: ComponentProps<ElementAttributes>['listeners'];
@@ -52,15 +49,7 @@
 </script>
 
 {#if hasChildren}
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div
-		{style}
-		class:expanded
-		class:hover
-		class:selected
-		class="expandable"
-		on:dblclick={() => (expanded = !expanded)}
-	>
+	<div role="group" class:expanded class="expandable" on:dblclick={() => (expanded = !expanded)}>
 		<span>&lt;</span>
 		<span class="tag-name">
 			<Indexer text={tagName} />
@@ -79,7 +68,7 @@
 	</div>
 	{#if expanded}
 		<slot />
-		<div class:hover {style}>
+		<div>
 			<span>&lt;/</span>
 			<span class="tag-name">
 				<Indexer text={tagName} />
@@ -88,7 +77,7 @@
 		</div>
 	{/if}
 {:else}
-	<div class:hover class:selected {style}>
+	<div>
 		<span>&lt;</span>
 		<span class="tag-name">
 			<Indexer text={tagName} />
@@ -99,12 +88,6 @@
 {/if}
 
 <style>
-	div {
-		width: 100%;
-		display: flex;
-		flex-wrap: wrap;
-	}
-
 	.tag-name {
 		color: rgb(0, 116, 232);
 	}

diff --git a/src/lib/nodes/Node.svelte b/src/lib/nodes/Node.svelte
@@ -3,7 +3,6 @@
 	import Element from './Element.svelte';
 	import Block from './Block.svelte';
 	import Slot from './Slot.svelte';
-	import Anchor from './Anchor.svelte';
 
 	import { background } from '$lib/runtime';
 	import { visibility, hovered, selected } from '$lib/store';
@@ -22,15 +21,13 @@
 </script>
 
 {#if $visibility[node.type]}
-	{@const active = $selected?.id === node.id}
-	{@const current = $hovered?.id === node.id}
-	{@const style = `padding-left: ${depth * 12}px`}
-	{@const left = depth * 12 + 4}
-
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<li
 		class:flash
+		style:--indent="{depth * 12}px"
+		data-current={$selected?.id === node.id || null}
+		data-hovered={$hovered?.id === node.id || null}
 		bind:this={node.dom}
 		on:animationend={() => (flash = false)}
 		on:click|stopPropagation={() => selected.set(node)}
@@ -43,37 +40,27 @@
 		{#if node.type === 'component' || node.type === 'element'}
 			<Element
 				tagName={node.tagName}
-				selected={active}
-				hover={current}
 				attributes={node.detail?.attributes || []}
 				listeners={node.detail?.listeners || []}
 				hasChildren={!!node.children.length}
-				{style}
 				bind:expanded={node.expanded}
 			>
-				<ul class:active style:--left="{left}px">
+				<ul>
 					{#each node.children as child (child.id)}
 						<svelte:self node={child} depth={depth + 1} />
 					{/each}
 				</ul>
 			</Element>
 		{:else if node.type === 'block'}
-			<Block
-				tagName={node.tagName}
-				selected={active}
-				hover={current}
-				source={node.detail?.source}
-				{style}
-				bind:expanded={node.expanded}
-			>
-				<ul class:active style:--left="{left}px">
+			<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 class:active style:--left="{left}px">
+			<ul>
 				<!-- TODO: figure this out
 				<span
 					class:selected={current}
@@ -92,25 +79,19 @@
 				{/each}
 			</ul>
 		{:else if node.type === 'slot'}
-			<Slot
-				tagName={node.tagName}
-				selected={active}
-				hover={current}
-				{style}
-				bind:expanded={node.expanded}
-			>
-				<ul class:active style:--left="{left}px">
+			<Slot tagName={node.tagName} bind:expanded={node.expanded}>
+				<ul>
 					{#each node.children as child (child.id)}
 						<svelte:self node={child} depth={depth + 1} />
 					{/each}
 				</ul>
 			</Slot>
 		{:else if node.type === 'text'}
-			<div {style}>
+			<div>
 				<Indexer text={node.detail?.nodeValue} />
 			</div>
 		{:else if node.type === 'anchor'}
-			<Anchor {style} />
+			<div>#anchor</div>
 		{/if}
 	</li>
 {:else}
@@ -128,19 +109,28 @@
 		line-height: 1.5;
 		font-size: 0.75rem;
 	}
-
 	ul {
 		width: 100%;
 		position: relative;
 	}
-	ul.active::before {
+
+	li :global(div) {
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+		padding-left: calc(var(--indent) + 6px);
+	}
+	li[data-hovered] > :global(div) {
+		background: #f0f9fe;
+	}
+	li[data-current] > ul::before {
 		content: '';
 		z-index: 1;
 		width: 0.125rem;
 		position: absolute;
 		top: 0.2rem;
 		bottom: 0.15rem;
-		left: calc(var(--left) - 0.75rem);
+		left: calc(var(--indent) - 0.75rem);
 		background: #e0e0e2;
 	}
 
@@ -151,28 +141,21 @@
 		animation: flash 0.8s ease-in-out;
 	}
 
-	li :global(.selected),
-	li :global(.selected *),
-	li :global(.hover.selected) {
+	li[data-current] > :global(div:first-child),
+	li[data-current][data-hovered] > :global(div) {
 		background: rgb(0, 116, 232);
 	}
-
-	li :global(> .selected::after) {
+	li[data-current] > :global(div:first-child:after) {
 		content: '== $n';
 		margin-left: 0.5rem;
 	}
 
-	li :global(.hover) {
-		background: #f0f9fe;
-	}
-
-	:global(.dark) li :global(.hover) {
+	:global(.dark) li[data-hovered] > :global(div) {
 		background: rgb(53, 59, 72);
 	}
 
-	:global(.dark) li :global(.selected),
-	:global(.dark) li :global(.selected *),
-	:global(.dark) li :global(.hover.selected) {
+	:global(.dark) li[data-current] > :global(div:first-child),
+	:global(.dark) li[data-current][data-hovered] > :global(div) {
 		background: rgb(32, 78, 138);
 	}
 

diff --git a/src/lib/nodes/Slot.svelte b/src/lib/nodes/Slot.svelte
@@ -2,38 +2,23 @@
 	import Indexer from '../components/Indexer.svelte';
 	import Ellipsis from './Ellipsis.svelte';
 
-	export let style: string;
-	export let hover: boolean;
-	export let selected: boolean;
 	export let tagName: string;
 	export let expanded: boolean;
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-	{style}
-	class:expanded
-	class:hover
-	class:selected
-	class="expandable tag-open tag-name"
-	on:dblclick={() => (expanded = !expanded)}
->
-	<Indexer text={`<${tagName}>`} style="color: #c586c0" />
+<div class:expanded class="expandable tag-open tag-name" on:dblclick={() => (expanded = !expanded)}>
+	<Indexer text={`<${tagName}>`} color="#c586c0" />
 
 	{#if !expanded}
 		<Ellipsis on:click={() => (expanded = true)} />
-		<Indexer text={`</${tagName}>`} style="color: #c586c0" />
+		<Indexer text={`</${tagName}>`} color="#c586c0" />
 	{/if}
 </div>
 {#if expanded}
 	<slot />
 
-	<Indexer text={`</${tagName}>`} {hover} style="color: #c586c0; {style}" />
+	<div>
+		<Indexer text={`</${tagName}>`} color="#c586c0" />
+	</div>
 {/if}
-
-<style>
-	div {
-		width: 100%;
-		display: flex;
-	}
-</style>
diff --git a/src/lib/panel/Expandable.svelte b/src/lib/panel/Expandable.svelte
@@ -48,7 +48,7 @@
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <li
 	data-tooltip={error || null}
-	style:--left="-0.5rem"
+	style:--indent="-3px"
 	style:--y-pad="0.125rem"
 	class:expanded
 	class:expandable