fix DiffValue, refactor recomputeTree

Author: TeemuKoivisto

.changeset/crazy-gifts-wonder.md

@@ -0,0 +1,5 @@
+---
+'svelte-tree-view': minor
+---
+
+make treeNode required, update site to use new API

packages/site/src/components/DiffValue.svelte

@@ -4,7 +4,7 @@
   import type { NodeProps } from 'svelte-tree-view'
 
   let props: NodeProps = $props()
-
+  let value = $derived(props.node.getValue())
   const {
     propsStore: { formatValue }
   } = props.getTreeContext()
@@ -40,7 +40,7 @@
 </script>
 
 <DefaultNode {...props}>
-  {#snippet value(node)}
+  {#snippet valueSnippet(node)}
     {#if Array.isArray(value)}
       <!-- The why https://github.com/benjamine/jsondiffpatch/blob/master/docs/deltas.md -->
       {#if value.length === 1}

packages/site/src/lib/parser.ts

@@ -13,15 +13,14 @@ export const parseRecursionOpts = (
 ): Record<string, unknown> | undefined => {
   try {
     const parsed = new Function(`return ${str}`)()
-    console.log('parsed', parsed)
     if (parsed && typeof parsed === 'object') {
       parsed.isCircularNode(testNode, new Map())
       parsed.shouldExpandNode(testNode)
       parsed.mapChildren([], 'array', testNode)
       return parsed
     }
   } catch (e) {
-    console.log('e', e)
+    console.log(e)
   }
   return undefined
 }
@@ -37,7 +36,7 @@ export const parseValueFormatter = (
       return parsed
     }
   } catch (e) {
-    console.log('e', e)
+    console.log(e)
   }
   return undefined
 }

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

@@ -3,14 +3,14 @@
   import type { NodeProps, TreeNode } from './types'
 
   type DefaultNodeProps = NodeProps & {
-    key?: Snippet<[TreeNode]>
-    value?: Snippet<[TreeNode]>
+    keySnippet?: Snippet<[TreeNode]>
+    valueSnippet?: Snippet<[TreeNode]>
   }
 
   let {
     node,
-    key,
-    value,
+    keySnippet,
+    valueSnippet,
     TreeViewNode,
     getTreeContext,
     handleLogNode,
@@ -38,8 +38,8 @@
     onclick={handleToggleCollapse}
     role="presentation"
   >
-    {#if key}
-      {@render key(node)}
+    {#if keySnippet}
+      {@render keySnippet(node)}
     {:else}
       {node.key}:
     {/if}
@@ -52,8 +52,8 @@
     onclick={handleToggleCollapse}
     role="presentation"
   >
-    {#if value}
-      {@render value(node)}
+    {#if valueSnippet}
+      {@render valueSnippet(node)}
     {:else}
       {valueStr}
     {/if}

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

@@ -42,7 +42,7 @@
   const rootElementStore = createRootElementStore()
   const treeStore = createTreeStore(propsStore)
   const newRecOpts = $derived({ ...DEFAULT_RECURSION_OPTS, ...recursionOpts })
-  const treeChildren = $derived(treeStore.treeMap['[]']?.children)
+  const treeChildren = $derived(treeStore.rootNode.children)
 
   setContext<Stores>('svelte-tree-view', {
     propsStore,
@@ -77,7 +77,7 @@
     const shouldRecompute = oldRecOptions?.shouldExpandNode !== opts.shouldExpandNode
     // Use untrack to prevent triggering this effect again
     untrack(() => {
-      treeStore.update(newData, opts, shouldRecompute)
+      treeStore.recompute(newData, opts, shouldRecompute)
       propsStore.setProps(propsObj)
       propsObj.recursionOpts = opts
     })

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

@@ -1,38 +1,49 @@
-import { get, writable } from 'svelte/store'
+import { get } from 'svelte/store'
 
-import { createNode, recomputeTree, recurseObjectProperties } from '../tree-utils.svelte'
+import { createNode, recurseObjectProperties } from '../tree-utils.svelte'
 import type { TreeNode, TreeRecursionOpts } from '../types'
 import type { PropsStore } from './props'
 
 export type TreeStore = ReturnType<typeof createTreeStore>
 
 export const createTreeStore = (propsStore: PropsStore) => {
-  const [defaultRootNode] = createNode(0, 'root', [], 0, null, {})
-  const tree = writable<TreeNode>(defaultRootNode)
-  const treeMap = $state<Record<string, TreeNode>>({})
-  const iteratedValues = writable<Map<any, TreeNode>>(new Map())
+  const [defaultRootNode] = createNode(-1, 'root', [], 0, null, {})
+  const treeMap = $state<Record<string, TreeNode>>({
+    [defaultRootNode.id]: defaultRootNode
+  })
+  const rootNode = $derived(treeMap[defaultRootNode.id])
+  const iteratedValues = new Map<any, TreeNode>()
 
   return {
-    tree,
     treeMap,
-    defaultRootNode,
+    rootNode,
 
-    update(data: unknown, recursionOpts: TreeRecursionOpts<any>, recomputeExpandNode: boolean) {
-      const recomputed = recomputeTree(data, treeMap, recursionOpts, recomputeExpandNode)
-      if (recomputed.tree) {
-        tree.set(recomputed.tree)
-      } else {
-        tree.set(defaultRootNode)
+    recompute(data: unknown, recursionOpts: TreeRecursionOpts<any>, recomputeExpandNode: boolean) {
+      const oldIds = new Set(Object.keys(treeMap))
+      iteratedValues.clear()
+      recurseObjectProperties(
+        defaultRootNode.index,
+        defaultRootNode.key,
+        data,
+        defaultRootNode.depth,
+        true,
+        null,
+        treeMap,
+        oldIds,
+        iteratedValues,
+        recomputeExpandNode,
+        recursionOpts
+      )
+      for (const id of oldIds) {
+        delete treeMap[id]
       }
-      iteratedValues.set(recomputed.iteratedValues)
       get(propsStore.props).onUpdate?.(treeMap)
     },
 
     toggleCollapse(id: string) {
       const node = treeMap[id]
       if (!node) {
-        console.warn(`Attempted to collapse non-existent node: ${id}`)
-        return
+        return console.warn(`Attempted to collapse non-existent node: ${id}`)
       }
       node.collapsed = !node.collapsed
       const recursionOpts = get(propsStore.recursionOpts)
@@ -50,7 +61,6 @@ export const createTreeStore = (propsStore: PropsStore) => {
         // Only root node has no parent and it should not be expandable
         throw Error('No parent in expandNodeChildren for node: ' + node)
       }
-      const previouslyIterated = get(iteratedValues)
       const nodeWithUpdatedChildren = recurseObjectProperties(
         node.index,
         node.key,
@@ -60,14 +70,13 @@ export const createTreeStore = (propsStore: PropsStore) => {
         parent,
         treeMap,
         new Set(),
-        previouslyIterated,
+        iteratedValues,
         false, // Never recompute shouldExpandNode since it may override the collapsing of this node
         recursionOpts
       )
       if (!nodeWithUpdatedChildren) return
       treeMap[nodeWithUpdatedChildren.id] = nodeWithUpdatedChildren
       treeMap[parent.id] = parent
-      iteratedValues.set(previouslyIterated)
       get(propsStore.props).onUpdate?.(treeMap)
     },
 

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

@@ -16,7 +16,6 @@ export function createNode(
     oldNode.getValue = () => value
     oldNode.depth = depth
     oldNode.type = getValueType(value)
-    oldNode.circularOfId = null
     oldNode.children = []
     return [oldNode, oldNode]
   }
@@ -198,30 +197,3 @@ export function recurseObjectProperties(
 
   return node
 }
-
-export function recomputeTree(
-  data: unknown,
-  oldTreeMap: Record<string, TreeNode>,
-  recursionOpts: TreeRecursionOpts,
-  recomputeExpandNode: boolean
-) {
-  const oldIds = new Set(Object.keys(oldTreeMap))
-  const iteratedValues = new Map<any, TreeNode>()
-  const newTree = recurseObjectProperties(
-    -1,
-    'root',
-    data,
-    0,
-    true,
-    null,
-    oldTreeMap,
-    oldIds,
-    iteratedValues,
-    recomputeExpandNode,
-    recursionOpts
-  )
-  for (const id of oldIds) {
-    delete oldTreeMap[id]
-  }
-  return { tree: newTree, iteratedValues }
-}