move showLog, showCopyButton to DefaultNode, add regexp, error types

.changeset/heavy-breads-brush.md

@@ -0,0 +1,5 @@
+---
+'svelte-tree-view': minor
+---
+
+move showCopy & showLogButton to DefaultNode, add regexp & error types

packages/site/src/components/DiffValue.svelte

@@ -3,7 +3,12 @@
 
   import type { NodeProps } from 'svelte-tree-view'
 
-  let props: NodeProps = $props()
+  type DiffValueProps = NodeProps & {
+    showLogButton?: boolean
+    showCopyButton?: boolean
+  }
+
+  let { showLogButton, showCopyButton, ...props }: DiffValueProps = $props()
   let value = $derived(props.node.getValue())
   const { formatValue } = props.getTreeContext()
 
@@ -37,7 +42,7 @@
   }
 </script>
 
-<DefaultNode {...props}>
+<DefaultNode {...props} {showLogButton} {showCopyButton}>
   {#snippet valueSnippet(node)}
     {#if Array.isArray(value)}
       <!-- The why https://github.com/benjamine/jsondiffpatch/blob/master/docs/deltas.md -->

packages/site/src/components/TailwindNode.svelte

@@ -3,7 +3,13 @@
 
   import type { NodeProps } from 'svelte-tree-view'
 
-  let { node, TreeViewNode, getTreeContext }: NodeProps = $props()
+  type TailwindNodeProps = NodeProps & {
+    showLogButton?: boolean
+    showCopyButton?: boolean
+  }
+
+  let { node, TreeViewNode, getTreeContext, showLogButton, showCopyButton }: TailwindNodeProps =
+    $props()
 
   const { viewProps, collapseOrScrollIntoCircularNode } = getTreeContext()
 
@@ -143,7 +149,7 @@
 
     <!-- Action buttons -->
     <div class="action-buttons">
-      {#if $viewProps.showLogButton}
+      {#if showLogButton}
         <button
           class="action-button log-button"
           onclick={() => handleLogNode(node)}
@@ -159,7 +165,7 @@
           </svg>
         </button>
       {/if}
-      {#if $viewProps.showCopyButton}
+      {#if showCopyButton}
         <button
           class="action-button copy-button"
           onclick={() => handleCopyNodeToClipboard(node)}

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

@@ -25,14 +25,16 @@
 
 <TreeView
   data={$parsedData}
-  showLogButton={$treeOpts.showLogButton}
-  showCopyButton={$treeOpts.showCopyButton}
   recursionOpts={$parsedRecursionOpts}
   valueFormatter={$parsedValueFormatter}
   class="w-1/2 bg-(--tree-view-base00) px-4"
 >
   {#snippet treeNode(props)}
-    <DefaultNode {...props} />
+    <DefaultNode
+      {...props}
+      showLogButton={$treeOpts.showLogButton}
+      showCopyButton={$treeOpts.showCopyButton}
+    />
   {/snippet}
 </TreeView>
 

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

@@ -28,14 +28,16 @@
 
 <TreeView
   data={$parsedData}
-  showLogButton={$treeOpts.showLogButton}
-  showCopyButton={$treeOpts.showCopyButton}
   recursionOpts={$parsedRecursionOpts}
   valueFormatter={$parsedValueFormatter}
   class="w-1/2 bg-(--tree-view-base00) px-4"
 >
   {#snippet treeNode(props)}
-    <DefaultNode {...props} />
+    <DefaultNode
+      {...props}
+      showLogButton={$treeOpts.showLogButton}
+      showCopyButton={$treeOpts.showCopyButton}
+    />
   {/snippet}
 </TreeView>
 

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

@@ -31,14 +31,16 @@
 
 <TreeView
   data={$parsedData}
-  showLogButton={$treeOpts.showLogButton}
-  showCopyButton={$treeOpts.showCopyButton}
   recursionOpts={$parsedRecursionOpts}
   valueFormatter={$parsedValueFormatter}
   class="w-1/2 bg-(--tree-view-base00) px-4"
 >
   {#snippet treeNode(props)}
-    <DiffValue {...props} />
+    <DiffValue
+      {...props}
+      showLogButton={$treeOpts.showLogButton}
+      showCopyButton={$treeOpts.showCopyButton}
+    />
   {/snippet}
 </TreeView>
 

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

@@ -21,8 +21,6 @@
 
 <TreeView
   data={$parsedData}
-  showLogButton={$treeOpts.showLogButton}
-  showCopyButton={$treeOpts.showCopyButton}
   recursionOpts={$parsedRecursionOpts}
   valueFormatter={$parsedValueFormatter}
 >
@@ -32,7 +30,11 @@
     </div>
   {/snippet}
   {#snippet treeNode(props)}
-    <TailwindNode {...props} />
+    <TailwindNode
+      {...props}
+      showLogButton={$treeOpts.showLogButton}
+      showCopyButton={$treeOpts.showCopyButton}
+    />
   {/snippet}
 </TreeView>
 

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

@@ -77,12 +77,22 @@
   import type { NodeProps } from './types'
 
   type DefaultNodeProps = NodeProps & {
+    showLogButton?: boolean
+    showCopyButton?: boolean
     keySnippet?: Snippet<[TreeNode]>
     valueSnippet?: Snippet<[TreeNode]>
   }
 
-  let { node, keySnippet, valueSnippet, TreeViewNode, getTreeContext }: DefaultNodeProps = $props()
-  const { viewProps, formatValue, collapseOrScrollIntoCircularNode } = getTreeContext()
+  let {
+    node,
+    showLogButton,
+    showCopyButton,
+    keySnippet,
+    valueSnippet,
+    TreeViewNode,
+    getTreeContext
+  }: DefaultNodeProps = $props()
+  const { formatValue, collapseOrScrollIntoCircularNode } = getTreeContext()
   let hasChildren = $derived(node.children.length > 0)
   let descend = $derived(!node.collapsed && hasChildren)
   let valueStr = $derived(formatValue(node.getValue(), node))
@@ -137,10 +147,10 @@
       {/if}
     </div>
     <div class="buttons">
-      {#if $viewProps.showLogButton}
+      {#if showLogButton}
         <button class="log-copy-button" onclick={() => handleLogNode(node)}>log</button>
       {/if}
-      {#if $viewProps.showCopyButton}
+      {#if showCopyButton}
         <button class="log-copy-button" onclick={() => handleCopyNodeToClipboard(node)}>copy</button
         >
       {/if}

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

@@ -5,7 +5,7 @@
   import TreeViewNode from './TreeViewNode.svelte'
   import { createStore, type TreeStore } from './store'
 
-  import type { Props } from './types'
+  import type { TreeViewElementProps } from './types'
 
   const DEFAULT_RECURSION_OPTS = {
     maxDepth: 16,
@@ -18,18 +18,14 @@
     data,
     rootNode,
     treeNode,
-    showLogButton,
-    showCopyButton,
     recursionOpts,
     valueFormatter,
     onUpdate,
     ...rest
-  }: Props = $props()
+  }: TreeViewElementProps = $props()
 
   let propsObj = {
     treeNode,
-    showLogButton,
-    showCopyButton,
     recursionOpts: { ...DEFAULT_RECURSION_OPTS, ...recursionOpts },
     valueFormatter,
     onUpdate
@@ -51,8 +47,6 @@
     // in the recomputeTree.
     propsObj = {
       treeNode,
-      showLogButton,
-      showCopyButton,
       recursionOpts: propsObj.recursionOpts,
       valueFormatter,
       onUpdate

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

@@ -2,13 +2,19 @@
   import TreeView from '../TreeView.svelte'
   import DefaultNode from '../DefaultNode.svelte'
 
-  import type { Props } from '../types'
+  import type { TreeViewProps } from '../types'
+  import type { HTMLAttributes } from 'svelte/elements'
 
-  let props: Props = $props()
+  interface TestProps extends TreeViewProps, HTMLAttributes<HTMLUListElement> {
+    showLogButton?: boolean
+    showCopyButton?: boolean
+  }
+
+  let { showLogButton, showCopyButton, ...props }: TestProps = $props()
 </script>
 
 <TreeView {...props}>
-  {#snippet treeNode(props)}
-    <DefaultNode {...props} />
+  {#snippet treeNode(nodeProps)}
+    <DefaultNode {...nodeProps} {showLogButton} {showCopyButton} />
   {/snippet}
 </TreeView>

packages/svelte-tree-view/src/lib/store-methods.ts

@@ -20,6 +20,10 @@ export function formatValue(
       return `${node.circularOfId ? 'circular' : ''} () ${val.size} entries`
     case 'date':
       return `${val.toISOString()}`
+    case 'regexp':
+      return `${val}`
+    case 'error':
+      return `${val.name}: ${val.message}`
     case 'string':
       return `"${val}"`
     case 'number':

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

@@ -48,7 +48,7 @@ export const createStore = (initialProps: StoreOptions) => {
    * @param id
    */
   function toggleCollapse(id: string) {
-    const node = state.treeMap[id]
+    const node = state.treeMap[id] as TreeNode | undefined
     if (!node) {
       throw Error(`Attempted to collapse non-existent node: ` + JSON.stringify(node))
     }

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

@@ -3,6 +3,10 @@ import type { TreeNode, ValueType } from './types'
 export function getValueType(value: any): ValueType {
   if (Array.isArray(value)) {
     return 'array'
+  } else if (value instanceof RegExp) {
+    return 'regexp'
+  } else if (value instanceof Error) {
+    return 'error'
   } else if (value instanceof Map) {
     return 'map'
   } else if (value instanceof Set) {

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

@@ -7,6 +7,8 @@ export type ValueType =
   | 'map'
   | 'set'
   | 'date'
+  | 'regexp'
+  | 'error'
   | 'object'
   | 'function'
   | 'string'
@@ -118,11 +120,8 @@ export interface TreeViewProps<T = any> {
    * The rendered treeNode. To use the default implementation use 'svelte-tree-view/DefaultNode.svelte' export
    */
   treeNode: Snippet<[NodeProps<T>]>
-
-  showLogButton?: boolean
-  showCopyButton?: boolean
   recursionOpts?: TreeRecursionOpts<T>
-  onUpdate?: (newMap: Record<string, TreeNode>) => void
+  onUpdate?: (newMap: Record<string, TreeNode<T>>) => void
   /**
    * For custom formatting of the value string. Returning undefined will pass the value to the default formatter
    * @param val
@@ -132,4 +131,4 @@ export interface TreeViewProps<T = any> {
   valueFormatter?: (val: any, n: TreeNode<T>) => string | undefined
 }
 
-export type Props = TreeViewProps & HTMLAttributes<HTMLUListElement>
+export type TreeViewElementProps = TreeViewProps & HTMLAttributes<HTMLUListElement>