refactor treemap into proxy for improved perf (#24)

* rename tree, tree-utils with svelte prefix

* refactor site state to treeOpts

* change value to getValue, add onUpdate without breaking tests

* reuse old node in createNode

* update

* wip

* change children to list of ids, fix recurOpts in site

* fix parseValueFormatter

* update snapshots

* fix valueFormat number as value

* working $proxy version of treemap, wee

* recreate snapshots

* remove unused code

Author: TeemuKoivisto

.prettierignore

@@ -1,8 +1,9 @@
 package.json
 pnpm-lock.yaml
 node_modules
-package
+pkg
 .svelte-kit
+**/__snapshots__/*.json
 build
 dist
 tmp

packages/site/src/components/DataSelector.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-  import { DATA, state, setExampleData } from '$lib/store'
+  import { DATA, treeOpts, setExampleData } from '$lib/store'
 </script>
 
 <div class="mt-2 flex items-center gap-2">
   <label for="data-selector" class="control-label">Example Data:</label>
   <div>
     <select
       id="data-selector"
-      value={$state.selectedData}
+      value={$treeOpts.selectedData}
       oninput={e => setExampleData(e.currentTarget.value)}
       class="control-select"
     >

packages/site/src/components/DiffValue.svelte

@@ -14,7 +14,7 @@
   } = getTreeContext()
   let hasChildren = $derived(node.children.length > 0)
   let descend = $derived(!node.collapsed && hasChildren)
-  let value = $derived(node.value)
+  let value = $derived(node.getValue())
 
   function replaceSpacesWithNonBreakingSpace(value: string) {
     return value.replace(/\s/gm, ' ')
@@ -110,8 +110,8 @@
 {#if descend}
   <li class="row">
     <ul>
-      {#each node.children as child}
-        <TreeViewNode id={child.id} />
+      {#each node.children as id}
+        <TreeViewNode {id} />
       {/each}
     </ul>
   </li>

packages/site/src/components/PropsForm.svelte

@@ -1,41 +1,41 @@
 <script lang="ts">
-  import { state, update } from '$lib/store'
+  import { treeOpts, update } from '$lib/store'
 </script>
 
 <fieldset class="container-sm flex flex-col border-2 p-2 text-sm">
   <legend class="text-0A px-2 text-base">Available props</legend>
   <div class="m-2 mt-0">
     <div class="field">
       <label for="leftIndent">--tree-view-left-indent</label>
-      <input id="leftIndent" class="bg-01 text-0B w-20 pl-1" bind:value={$state.leftIndent} />
+      <input id="leftIndent" class="bg-01 text-0B w-20 pl-1" bind:value={$treeOpts.leftIndent} />
     </div>
     <div class="field">
       <label for="lineHeight">--tree-view-li-line-height</label>
-      <input id="lineHeight" class="bg-01 text-0B w-20 pl-1" bind:value={$state.lineHeight} />
+      <input id="lineHeight" class="bg-01 text-0B w-20 pl-1" bind:value={$treeOpts.lineHeight} />
     </div>
     <div class="field">
       <label for="fontFamily">--tree-view-font-family</label>
-      <input id="fontFamily" class="bg-01 text-0B w-48 pl-1" bind:value={$state.fontFamily} />
+      <input id="fontFamily" class="bg-01 text-0B w-48 pl-1" bind:value={$treeOpts.fontFamily} />
     </div>
     <div class="field">
       <label for="fontSize">--tree-view-font-size</label>
-      <input id="fontSize" class="bg-01 text-0B w-20 pl-1" bind:value={$state.fontSize} />
+      <input id="fontSize" class="bg-01 text-0B w-20 pl-1" bind:value={$treeOpts.fontSize} />
     </div>
     <div class="field">
       <label for="keyMarginRight">--tree-view-key-margin-right</label>
       <input
         id="keyMarginRight"
         class="bg-01 text-0B w-20 pl-1"
-        bind:value={$state.keyMarginRight}
+        bind:value={$treeOpts.keyMarginRight}
       />
     </div>
     <div class="field">
       <label for="showLogButton">showLogButton</label>
-      <input id="showLogButton" type="checkbox" bind:checked={$state.showLogButton} />
+      <input id="showLogButton" type="checkbox" bind:checked={$treeOpts.showLogButton} />
     </div>
     <div class="field">
       <label for="showCopyButton">showCopyButton</label>
-      <input id="showCopyButton" type="checkbox" bind:checked={$state.showCopyButton} />
+      <input id="showCopyButton" type="checkbox" bind:checked={$treeOpts.showCopyButton} />
     </div>
     <div class="field">
       <label>treeNode</label>
@@ -52,7 +52,7 @@
       <textarea
         id="recursionOpts"
         class="bg-01 text-0B h-44"
-        value={$state.recursionOpts}
+        value={$treeOpts.recursionOpts}
         oninput={e => update('recursionOpts', e.currentTarget.value)}
       ></textarea>
     </div>
@@ -61,7 +61,7 @@
       <textarea
         id="valueFormatter"
         class="bg-01 text-0B h-44"
-        value={$state.valueFormatter}
+        value={$treeOpts.valueFormatter}
         oninput={e => update('valueFormatter', e.currentTarget.value)}
       ></textarea>
     </div>
@@ -78,7 +78,7 @@
       <textarea
         id="theme"
         class="bg-01 text-0B h-44 w-full"
-        value={$state.theme}
+        value={$treeOpts.theme}
         oninput={e => update('theme', e.currentTarget.value)}
       ></textarea>
     </div>

packages/site/src/components/TailwindNode.svelte

@@ -14,7 +14,7 @@
     propsStore: { props: propsObj }
   } = getTreeContext()
 
-  let hasChildren = $derived(node && node.children.length > 0)
+  let hasChildren = $derived(node.children.length > 0)
   let descend = $derived(!node.collapsed && hasChildren)
 
   // Function to create truncated preview of objects and arrays
@@ -65,12 +65,13 @@
 
   // Get the appropriate value to display
   function getDisplayValue(): string {
+    const val = node.getValue()
     if (hasChildren && node.collapsed) {
       // Show truncated preview when collapsed
-      return createTruncatedPreview(node.value, node.type)
+      return createTruncatedPreview(val, node.type)
     } else {
       // Show full value when expanded or for leaf nodes
-      return $propsObj.valueFormatter?.(node.value, node) ?? String(node.value)
+      return $propsObj.valueFormatter?.(val, node) ?? String(val)
     }
   }
 
@@ -129,23 +130,15 @@
     {/if}
 
     <!-- Node content -->
-    <button
-      class="node-content"
-      class:clickable={hasChildren}
-      onclick={hasChildren ? handleToggleCollapse : undefined}
-    >
+    <button class="node-content" class:cursor-pointer={hasChildren} onclick={handleToggleCollapse}>
       <!-- Key section -->
       <div class="node-key-section">
         <span class="node-key">{node.key}:</span>
       </div>
 
       <!-- Value section -->
       <div class="node-value-section">
-        <div
-          class={`node-value truncate ${getTypeClasses()}`}
-          class:clickable={hasChildren}
-          data-type={node.type}
-        >
+        <div class={`node-value truncate ${getTypeClasses()}`} data-type={node.type}>
           {getDisplayValue()}
         </div>
       </div>
@@ -190,8 +183,8 @@
 
   {#if descend}
     <div class="children-container">
-      {#each node.children as child}
-        <TreeViewNode id={child.id} />
+      {#each node.children as id}
+        <TreeViewNode {id} />
       {/each}
     </div>
   {/if}
@@ -205,7 +198,7 @@
   }
 
   .tree-node-card {
-    @apply flex items-center gap-2 rounded-lg border border-gray-200 bg-white p-2 transition-all duration-200 ease-in-out hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700;
+    @apply flex items-center gap-2 rounded-lg border border-gray-200 bg-white transition-all duration-200 ease-in-out hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700;
   }
 
   .tree-node-card.has-children {
@@ -269,7 +262,7 @@
   }
 
   .children-container {
-    @apply ml-6 mt-2 space-y-1;
+    @apply ml-6 mt-0.5 space-y-0.5;
   }
 
   /* Responsive design */

packages/site/src/lib/parser.ts

@@ -13,13 +13,16 @@ 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) {}
+  } catch (e) {
+    console.log('e', e)
+  }
   return undefined
 }
 
@@ -30,10 +33,12 @@ export const parseValueFormatter = (
   try {
     const parsed = new Function(`return ${str}`)()
     if (typeof parsed === 'function') {
-      parsed(testNode.value, testNode)
+      parsed(testNode.getValue(), testNode)
       return parsed
     }
-  } catch (e) {}
+  } catch (e) {
+    console.log('e', e)
+  }
   return undefined
 }