make treeNode required, update tests & components

Author: TeemuKoivisto

packages/site/src/components/DiffValue.svelte

@@ -1,20 +1,13 @@
 <script lang="ts">
+  import { DefaultNode } from 'svelte-tree-view'
+
   import type { NodeProps } from 'svelte-tree-view'
 
-  let {
-    node,
-    TreeViewNode,
-    getTreeContext,
-    handleLogNode,
-    handleCopyNodeToClipboard,
-    handleToggleCollapse
-  }: NodeProps = $props()
+  let props: NodeProps = $props()
+
   const {
-    propsStore: { props: propsObj, formatValue }
-  } = getTreeContext()
-  let hasChildren = $derived(node.children.length > 0)
-  let descend = $derived(!node.collapsed && hasChildren)
-  let value = $derived(node.getValue())
+    propsStore: { formatValue }
+  } = props.getTreeContext()
 
   function replaceSpacesWithNonBreakingSpace(value: string) {
     return value.replace(/\s/gm, ' ')
@@ -46,29 +39,8 @@
   }
 </script>
 
-<li class="row" class:collapsed={node.collapsed && hasChildren} data-tree-id={node.id}>
-  {#if hasChildren}
-    <button class={`arrow-btn ${node.collapsed ? 'collapsed' : ''}`} onclick={handleToggleCollapse}>
-      ▶
-    </button>
-  {/if}
-  <div
-    class="node-key"
-    class:has-children={hasChildren}
-    class:p-left={!hasChildren}
-    onclick={handleToggleCollapse}
-    role="presentation"
-  >
-    {node.key}:
-  </div>
-  <div
-    class="node-value"
-    data-type={node.type}
-    class:expanded={!node.collapsed && hasChildren}
-    class:has-children={hasChildren}
-    onclick={handleToggleCollapse}
-    role="presentation"
-  >
+<DefaultNode {...props}>
+  {#snippet value(node)}
     {#if Array.isArray(value)}
       <!-- The why https://github.com/benjamine/jsondiffpatch/blob/master/docs/deltas.md -->
       {#if value.length === 1}
@@ -97,25 +69,8 @@
     {:else}
       {formatValue(value, node)}
     {/if}
-  </div>
-  <div class="buttons">
-    {#if $propsObj.showLogButton}
-      <button class="log-copy-button" onclick={handleLogNode}>log</button>
-    {/if}
-    {#if $propsObj.showCopyButton}
-      <button class="log-copy-button" onclick={handleCopyNodeToClipboard}>copy</button>
-    {/if}
-  </div>
-</li>
-{#if descend}
-  <li class="row">
-    <ul>
-      {#each node.children as id}
-        <TreeViewNode {id} />
-      {/each}
-    </ul>
-  </li>
-{/if}
+  {/snippet}
+</DefaultNode>
 
 <style lang="postcss">
   .added {
@@ -146,92 +101,4 @@
   .arrow {
     color: #87cc86;
   }
-
-  ul {
-    display: flex;
-    flex-direction: column;
-    height: max-content;
-    list-style: none;
-    padding: 0;
-    padding-left: var(--tree-view-left-indent);
-    margin: 0;
-    width: 100%;
-  }
-  li {
-    align-items: baseline;
-    display: flex;
-    height: max-content;
-    line-height: var(--tree-view-line-height);
-    list-style: none;
-    width: 100%;
-  }
-  li + li {
-    margin-top: 0.25em;
-  }
-  .empty-block {
-    visibility: hidden;
-  }
-  .node-key {
-    color: var(--tree-view-base0D);
-    margin-right: var(--tree-view-key-margin-right);
-    &.has-children {
-      cursor: pointer;
-    }
-    &.p-left {
-      padding-left: 1.1em;
-    }
-  }
-  .node-value {
-    color: var(--tree-view-base0B);
-    margin-right: 0.5em;
-    word-break: break-all;
-    &[data-type='number'],
-    &[data-type='boolean'] {
-      color: var(--tree-view-base09);
-    }
-    &[data-type='null'],
-    &[data-type='undefined'] {
-      color: var(--tree-view-base08);
-    }
-    &.expanded {
-      color: var(--tree-view-base03);
-    }
-    &.has-children {
-      cursor: pointer;
-    }
-  }
-  .arrow-btn {
-    background: transparent;
-    border: 0;
-    color: var(--tree-view-base0D);
-    cursor: pointer;
-    margin-right: 0.7em;
-    padding: 0;
-    transition: all 150ms ease 0s;
-    transform: rotateZ(90deg);
-    transform-origin: 47% 43%;
-    position: relative;
-    line-height: 1.1em;
-    font-size: 0.75em;
-    &.collapsed {
-      transform: rotateZ(0deg);
-    }
-  }
-  .buttons {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .log-copy-button {
-    background: transparent;
-    border: 0;
-    color: var(--tree-view-base0D);
-    cursor: pointer;
-    margin: 0;
-    padding: 0 0.5em;
-    &:hover {
-      background: rgba(rgb(255, 162, 177), 0.4);
-      border-radius: 2px;
-      color: var(--tree-view-base07);
-    }
-  }
 </style>

packages/site/src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import TreeView from 'svelte-tree-view'
+  import TreeView, { DefaultNode } from 'svelte-tree-view'
 
   import { mapDocDeltaChildren } from '$lib/mapDocDeltaChildren'
   import {
@@ -36,6 +36,9 @@
       {@render children()}
     </ul>
   {/snippet}
+  {#snippet treeNode(props)}
+    <DefaultNode {...props} />
+  {/snippet}
 </TreeView>
 
 <style lang="postcss">

packages/site/src/routes/circular/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import TreeView from 'svelte-tree-view'
+  import TreeView, { DefaultNode } from 'svelte-tree-view'
 
   import { mapDocDeltaChildren } from '$lib/mapDocDeltaChildren'
   import {
@@ -39,6 +39,9 @@
       {@render children()}
     </ul>
   {/snippet}
+  {#snippet treeNode(props)}
+    <DefaultNode {...props} />
+  {/snippet}
 </TreeView>
 
 <style lang="postcss">

packages/svelte-tree-view/src/lib/DefaultNode.svelte

@@ -1,14 +1,22 @@
 <script lang="ts">
-  import type { NodeProps } from './types'
+  import type { Snippet } from 'svelte'
+  import type { NodeProps, TreeNode } from './types'
+
+  type DefaultNodeProps = NodeProps & {
+    key?: Snippet<[TreeNode]>
+    value?: Snippet<[TreeNode]>
+  }
 
   let {
     node,
+    key,
+    value,
     TreeViewNode,
     getTreeContext,
     handleLogNode,
     handleCopyNodeToClipboard,
     handleToggleCollapse
-  }: NodeProps = $props()
+  }: DefaultNodeProps = $props()
   const {
     propsStore: { props: propsObj, formatValue }
   } = getTreeContext()
@@ -30,7 +38,11 @@
     onclick={handleToggleCollapse}
     role="presentation"
   >
-    {node.key}:
+    {#if key}
+      {@render key(node)}
+    {:else}
+      {node.key}:
+    {/if}
   </div>
   <div
     class="node-value"
@@ -40,7 +52,11 @@
     onclick={handleToggleCollapse}
     role="presentation"
   >
-    {valueStr}
+    {#if value}
+      {@render value(node)}
+    {:else}
+      {valueStr}
+    {/if}
   </div>
   <div class="buttons">
     {#if $propsObj.showLogButton}

packages/svelte-tree-view/src/lib/TreeViewNode.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { getContext } from 'svelte'
 
-  import DefaultNode from './DefaultNode.svelte'
   import TreeViewNode from './TreeViewNode.svelte'
 
   import type { Stores } from './stores'
@@ -50,8 +49,4 @@
   })
 </script>
 
-{#if $propsObj.treeNode}
-  {@render $propsObj.treeNode(nodeProps)}
-{:else}
-  <DefaultNode {...nodeProps} />
-{/if}
+{@render $propsObj.treeNode(nodeProps)}

packages/svelte-tree-view/src/lib/__tests__/DefaultTree.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import TreeView from '../TreeView.svelte'
+  import DefaultNode from '../DefaultNode.svelte'
+
+  import type { Props } from '../types'
+
+  let props: Props = $props()
+</script>
+
+<TreeView {...props}>
+  {#snippet treeNode(props)}
+    <DefaultNode {...props} />
+  {/snippet}
+</TreeView>

packages/svelte-tree-view/src/lib/__tests__/TreeView.spec.ts

@@ -1,7 +1,7 @@
 import { render, fireEvent, findAllByText } from '@testing-library/svelte'
 import { describe, expect, it, vi } from 'vitest'
 
-import TreeView from '../TreeView.svelte'
+import DefaultTree from './DefaultTree.svelte'
 
 import example1 from './__fixtures__/example1.json'
 import { generateObj } from './generateObj'
@@ -27,7 +27,7 @@ async function clickByText(container: HTMLElement, text: string, index = 0) {
 
 describe('TreeView', () => {
   it('should render', async () => {
-    const results = render(TreeView, {
+    const results = render(DefaultTree, {
       data: example1,
       recursionOpts: {
         shouldExpandNode: () => true
@@ -40,7 +40,7 @@ describe('TreeView', () => {
   })
 
   it('should render with almost all props defined', async () => {
-    const results = render(TreeView, {
+    const results = render(DefaultTree, {
       data: generateObj(0, 4),
       showLogButton: true,
       showCopyButton: true,
@@ -119,7 +119,7 @@ describe('TreeView', () => {
       ])
     }
     let map: any
-    const results = render(TreeView, {
+    const results = render(DefaultTree, {
       data,
       recursionOpts: {
         maxDepth: 4
@@ -198,7 +198,7 @@ describe('TreeView', () => {
   })
 
   it('should not map primitive values and renders them correctly in list', async () => {
-    const results = render(TreeView, {
+    const results = render(DefaultTree, {
       data: undefined
     })
     window.HTMLElement.prototype.scrollIntoView = vi.fn()

packages/svelte-tree-view/src/lib/types.ts

@@ -1,4 +1,4 @@
-import { type Component, type Snippet } from 'svelte'
+import type { Component, Snippet } from 'svelte'
 import type { HTMLAttributes } from 'svelte/elements'
 import type { Stores } from './stores'
 
@@ -174,7 +174,7 @@ export interface TreeViewProps<T = any> {
   /**
    * Custom tree node. Uses DefaultNode.svelte by default
    */
-  treeNode?: Snippet<[NodeProps<T>]>
+  treeNode: Snippet<[NodeProps<T>]>
   theme?: Base16Theme
   showLogButton?: boolean
   showCopyButton?: boolean