refactor stores, invert isCircularNode return value, make DefaultNode ESM export (#25)

* refactor stores into one

* rename props to viewProps

* initialize store methods before to remove use of this

* update utility methods, change tree-id to tree-node-id

* update deps, target to es2020

* make DefaultNode esm export only to allow tree-shaking

* switch isCircularNode return value

* refactor store errors

* add changeset

* remove tabs in package.json

Author: TeemuKoivisto

.changeset/stale-regions-go.md

@@ -0,0 +1,5 @@
+---
+'svelte-tree-view': minor
+---
+
+invert isCircularNode return value for node collapsing, make DefaultNode ESM export, refactor stores into one

package.json

@@ -20,24 +20,24 @@
   "devDependencies": {
     "@changesets/cli": "^2.29.5",
     "@eslint/compat": "^1.3.1",
-    "@eslint/js": "^9.30.1",
-    "@typescript-eslint/eslint-plugin": "^8.35.1",
-    "@typescript-eslint/parser": "^8.35.1",
+    "@eslint/js": "^9.31.0",
+    "@typescript-eslint/eslint-plugin": "^8.37.0",
+    "@typescript-eslint/parser": "^8.37.0",
     "concurrently": "^9.2.0",
-    "eslint": "^9.30.1",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-prettier": "^5.5.1",
+    "eslint": "^9.31.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.3",
     "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-svelte": "^3.10.1",
+    "eslint-plugin-svelte": "^3.11.0",
     "globals": "^16.3.0",
     "husky": "^9.1.7",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
-    "prettier-plugin-tailwindcss": "^0.6.13",
+    "prettier-plugin-tailwindcss": "^0.6.14",
     "tslib": "^2.8.1",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.35.1",
-    "vite": "^7.0.2",
+    "typescript-eslint": "^8.37.0",
+    "vite": "^7.0.5",
     "vite-plugin-dts": "^4.5.4"
   }
 }

packages/site/package.json

@@ -19,10 +19,10 @@
 	},
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "2.22.2",
-    "@sveltejs/vite-plugin-svelte": "^5.1.0",
+    "@sveltejs/kit": "2.25.1",
+    "@sveltejs/vite-plugin-svelte": "^6.1.0",
     "@tailwindcss/vite": "^4.1.11",
-    "svelte": "^5.35.4",
+    "svelte": "^5.36.10",
     "svelte-preprocess": "^6.0.3",
     "svelte-tree-view": "workspace:*",
     "tailwindcss": "^4.1.11"

packages/site/src/components/DiffValue.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-  import { DefaultNode } from 'svelte-tree-view'
+  import DefaultNode from 'svelte-tree-view/DefaultNode.svelte'
 
   import type { NodeProps } from 'svelte-tree-view'
 
   let props: NodeProps = $props()
   let value = $derived(props.node.getValue())
-  const {
-    propsStore: { formatValue }
-  } = props.getTreeContext()
+  const { formatValue } = props.getTreeContext()
 
   function replaceSpacesWithNonBreakingSpace(value: string) {
     return value.replace(/\s/gm, ' ')

packages/site/src/components/TailwindNode.svelte

@@ -10,9 +10,7 @@
     handleToggleCollapse
   }: NodeProps = $props()
 
-  const {
-    propsStore: { props: propsObj }
-  } = getTreeContext()
+  const { viewProps } = getTreeContext()
 
   let hasChildren = $derived(node.children.length > 0)
   let descend = $derived(!node.collapsed && hasChildren)
@@ -60,7 +58,7 @@
     }
 
     // For other types, use the default formatter or string representation
-    return $propsObj.valueFormatter?.(value, node) ?? String(value)
+    return $viewProps.valueFormatter?.(value, node) ?? String(value)
   }
 
   // Get the appropriate value to display
@@ -71,7 +69,7 @@
       return createTruncatedPreview(val, node.type)
     } else {
       // Show full value when expanded or for leaf nodes
-      return $propsObj.valueFormatter?.(val, node) ?? String(val)
+      return $viewProps.valueFormatter?.(val, node) ?? String(val)
     }
   }
 
@@ -103,7 +101,7 @@
   }
 </script>
 
-<div class="tree-node-container" data-tree-id={node.id}>
+<div class="tree-node-container" data-tree-node-id={node.id}>
   <div
     class="tree-node-card group"
     class:collapsed={node.collapsed && hasChildren}
@@ -146,7 +144,7 @@
 
     <!-- Action buttons -->
     <div class="action-buttons">
-      {#if $propsObj.showLogButton}
+      {#if $viewProps.showLogButton}
         <button
           class="action-button log-button"
           onclick={handleLogNode}
@@ -162,7 +160,7 @@
           </svg>
         </button>
       {/if}
-      {#if $propsObj.showCopyButton}
+      {#if $viewProps.showCopyButton}
         <button
           class="action-button copy-button"
           onclick={handleCopyNodeToClipboard}

packages/site/src/lib/store.ts

@@ -40,11 +40,11 @@ const DEFAULT_RECUR_OPTS: TreeRecursionOpts = {
       const existingNodeWithValue = iteratedValues.get(node.getValue())
       if (existingNodeWithValue && node.id !== existingNodeWithValue.id) {
         node.circularOfId = existingNodeWithValue.id
-        return false
+        return true 
       }
       iteratedValues.set(node.getValue(), node)
     }
-    return true
+    return false
   },
   shouldExpandNode(node) {
     return true

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import TreeView, { DefaultNode } from 'svelte-tree-view'
+  import TreeView from 'svelte-tree-view'
+  import DefaultNode from 'svelte-tree-view/DefaultNode.svelte'
 
   import { mapDocDeltaChildren } from '$lib/mapDocDeltaChildren'
   import {

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import TreeView, { DefaultNode } from 'svelte-tree-view'
+  import TreeView from 'svelte-tree-view'
+  import DefaultNode from 'svelte-tree-view/DefaultNode.svelte'
 
   import { mapDocDeltaChildren } from '$lib/mapDocDeltaChildren'
   import {

packages/svelte-tree-view/cypress/e2e/examples.spec.cy.ts

@@ -17,7 +17,7 @@ describe('# UI', () => {
     cy.get('a').contains('(3) Circular').click()
     cy.get('.svelte-tree-view').find('li').should('have.length', 126)
     cy.get('a').contains('(4) Tailwind').click()
-    cy.get('.svelte-tree-view').find('div[data-tree-id]').should('have.length', 130)
+    cy.get('.svelte-tree-view').find('div[data-tree-node-id]').should('have.length', 130)
     cy.get('a').contains('(1) Basic').click()
     cy.get('[data-test-id="input-textarea"]').focus().type(TEST_DATA)
     cy.get('.svelte-tree-view').find('li').should('have.length', 19)

packages/svelte-tree-view/package.json

@@ -17,6 +17,14 @@
       "svelte": "./pkg/index.js",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./TreeView.svelte": {
+      "types": "./pkg/TreeView.svelte.d.ts",
+      "svelte": "./pkg/TreeView.svelte"
+    },
+    "./DefaultNode.svelte": {
+      "types": "./pkg/DefaultNode.svelte.d.ts",
+      "svelte": "./pkg/DefaultNode.svelte"
     }
   },
   "scripts": {
@@ -35,20 +43,20 @@
     "cy": "cypress"
   },
   "devDependencies": {
-    "@sveltejs/kit": "^2.22.2",
-    "@sveltejs/package": "^2.3.12",
-    "@sveltejs/vite-plugin-svelte": "^5.1.0",
+    "@sveltejs/kit": "^2.25.1",
+    "@sveltejs/package": "^2.4.0",
+    "@sveltejs/vite-plugin-svelte": "^6.1.0",
     "@testing-library/cypress": "^10.0.3",
     "@testing-library/svelte": "^5.2.8",
     "@types/testing-library__jest-dom": "^5.14.9",
     "cypress": "14.5.1",
     "jsdom": "^26.1.0",
     "postcss": "^8.5.6",
     "sass": "^1.89.2",
-    "svelte": "^5.35.4",
-    "svelte-check": "^4.2.2",
+    "svelte": "^5.36.10",
+    "svelte-check": "^4.3.0",
     "svelte-preprocess": "^6.0.3",
-    "svelte2tsx": "^0.7.40",
+    "svelte2tsx": "^0.7.41",
     "vitest": "^3.2.4"
   },
   "dependencies": {},