- {#if $propsObj.showLogButton}
+ {#if $viewProps.showLogButton}
{/if}
- {#if $propsObj.showCopyButton}
+ {#if $viewProps.showCopyButton}
- {#if $propsObj.showLogButton}
+ {#if $viewProps.showLogButton}
{/if}
- {#if $propsObj.showCopyButton}
+ {#if $viewProps.showCopyButton}
{/if}
diff --git a/packages/svelte-tree-view/src/lib/TreeView.svelte b/packages/svelte-tree-view/src/lib/TreeView.svelte
index 491c588..26d2329 100644
--- a/packages/svelte-tree-view/src/lib/TreeView.svelte
+++ b/packages/svelte-tree-view/src/lib/TreeView.svelte
@@ -3,9 +3,8 @@
import { get } from 'svelte/store'
import TreeViewNode from './TreeViewNode.svelte'
- import { createPropsStore, createRootElementStore, createTreeStore } from './stores'
+ import { createStore, type TreeStore } from './store.svelte'
- import type { Stores } from './stores'
import type { Props, TreeViewProps } from './types'
const DEFAULT_RECURSION_OPTS = {
@@ -38,20 +37,14 @@
onUpdate
}
let rootElement: HTMLElement
- const propsStore = createPropsStore(propsObj)
- const rootElementStore = createRootElementStore()
- const treeStore = createTreeStore(propsStore)
+ const store = createStore(propsObj)
const newRecOpts = $derived({ ...DEFAULT_RECURSION_OPTS, ...recursionOpts })
- const treeChildren = $derived(treeStore.rootNode.children)
+ const treeChildren = $derived(store.rootNode.children)
- setContext
('svelte-tree-view', {
- propsStore,
- rootElementStore,
- treeStore
- })
+ setContext('svelte-tree-view', store)
onMount(() => {
- rootElementStore.set(rootElement)
+ store.setRootElement(rootElement)
})
$effect(() => {
@@ -66,19 +59,19 @@
valueFormatter,
onUpdate
}
- propsStore.setProps(propsObj)
+ store.setProps(propsObj)
})
$effect(() => {
- const oldRecOptions = get(propsStore.recursionOpts)
+ const oldRecOptions = get(store.recursionOpts)
// Destruct recursionOpts to unwrap from proxy
const opts = { ...newRecOpts }
const newData = data
- const shouldRecompute = oldRecOptions?.shouldExpandNode !== opts.shouldExpandNode
+ const recomputeExpandNode = oldRecOptions?.shouldExpandNode !== opts.shouldExpandNode
// Use untrack to prevent triggering this effect again
untrack(() => {
- treeStore.recompute(newData, opts, shouldRecompute)
- propsStore.setProps(propsObj)
+ store.createTree(newData, opts, recomputeExpandNode)
+ store.setProps(propsObj)
propsObj.recursionOpts = opts
})
})
diff --git a/packages/svelte-tree-view/src/lib/TreeViewNode.svelte b/packages/svelte-tree-view/src/lib/TreeViewNode.svelte
index 8b81102..0b411e8 100644
--- a/packages/svelte-tree-view/src/lib/TreeViewNode.svelte
+++ b/packages/svelte-tree-view/src/lib/TreeViewNode.svelte
@@ -3,8 +3,7 @@
import TreeViewNode from './TreeViewNode.svelte'
- import type { Stores } from './stores'
- import type { TreeNode } from './types'
+ import type { TreeStore } from './store.svelte'
interface Props {
id: string
@@ -12,41 +11,38 @@
let { id }: Props = $props()
- const { treeStore, propsStore, rootElementStore } = getContext('svelte-tree-view')
- let { props: propsObj } = propsStore
- let node = $state(treeStore.treeMap[id] as TreeNode)
- let hasChildren = $derived(node && node.children.length > 0)
+ const { rootElement, treeMap, viewProps, ...rest } = getContext('svelte-tree-view')
+ let node = $derived(treeMap[id])
+ let hasChildren = $derived(node.children.length > 0)
let nodeProps = $derived({
node,
- getTreeContext: () => getContext('svelte-tree-view'),
+ getTreeContext: () => getContext('svelte-tree-view'),
TreeViewNode: TreeViewNode,
handleLogNode() {
- console.info('%c [svelte-tree-view]: Property added to window._node', 'color: #b8e248')
console.log(node.getValue())
try {
- if (typeof window !== 'undefined') window._node = node.getValue()
+ window._node = node.getValue()
+ console.info('%c [svelte-tree-view]: Property added to window._node', 'color: #b8e248')
} catch (err) {
- console.error('Failed to set _node, window was undefined')
+ console.error('[svelte-tree-view]: handleLogNode() errored', err)
}
},
handleCopyNodeToClipboard() {
try {
navigator.clipboard.writeText(JSON.stringify(node.getValue()))
} catch (err) {
- console.error('Copying node to clipboard failed: ', err)
+ console.error('[svelte-tree-view]: handleCopyNodeToClipboard() errored', err)
}
},
handleToggleCollapse() {
if (hasChildren) {
- treeStore.toggleCollapse(node.id)
+ rest.toggleCollapse(node.id)
} else if (node.circularOfId) {
- treeStore.expandAllNodesToNode(node.circularOfId)
- $rootElementStore
- ?.querySelector(`li[data-tree-id="${node.circularOfId}"]`)
- ?.scrollIntoView()
+ rest.expandAllNodesToNode(node.circularOfId)
+ $rootElement?.querySelector(`[data-tree-node-id="${node.circularOfId}"]`)?.scrollIntoView()
}
}
})
-{@render $propsObj.treeNode(nodeProps)}
+{@render $viewProps.treeNode(nodeProps)}
diff --git a/packages/svelte-tree-view/src/lib/__tests__/TreeView.spec.ts b/packages/svelte-tree-view/src/lib/__tests__/TreeView.spec.ts
index 481869a..564670e 100644
--- a/packages/svelte-tree-view/src/lib/__tests__/TreeView.spec.ts
+++ b/packages/svelte-tree-view/src/lib/__tests__/TreeView.spec.ts
@@ -54,11 +54,11 @@ describe('TreeView', () => {
const existingNodeWithValue = iteratedValues.get(val)
if (existingNodeWithValue) {
node.circularOfId = existingNodeWithValue.id
- return false
+ return true
}
iteratedValues.set(val, node)
}
- return true
+ return false
},
shouldExpandNode: () => true
},
diff --git a/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap b/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap
index 22b14b5..d3c9d17 100644
--- a/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap
+++ b/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap
@@ -10,7 +10,7 @@ exports[`TreeView > should render 1`] = `