diff --git a/.changeset/heavy-breads-brush.md b/.changeset/heavy-breads-brush.md new file mode 100644 index 0000000..5cfdf29 --- /dev/null +++ b/.changeset/heavy-breads-brush.md @@ -0,0 +1,5 @@ +--- +'svelte-tree-view': minor +--- + +move showCopy & showLogButton to DefaultNode, add regexp & error types diff --git a/packages/site/src/components/DiffValue.svelte b/packages/site/src/components/DiffValue.svelte index 940d3ef..d08c269 100644 --- a/packages/site/src/components/DiffValue.svelte +++ b/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 @@ } - + {#snippet valueSnippet(node)} {#if Array.isArray(value)} diff --git a/packages/site/src/components/TailwindNode.svelte b/packages/site/src/components/TailwindNode.svelte index 1e6a802..b92b08d 100644 --- a/packages/site/src/components/TailwindNode.svelte +++ b/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 @@
- {#if $viewProps.showLogButton} + {#if showLogButton} {/if} - {#if $viewProps.showCopyButton} + {#if showCopyButton}
{/snippet} {#snippet treeNode(props)} - + {/snippet} diff --git a/packages/svelte-tree-view/src/lib/DefaultNode.svelte b/packages/svelte-tree-view/src/lib/DefaultNode.svelte index 66e2976..4f867da 100644 --- a/packages/svelte-tree-view/src/lib/DefaultNode.svelte +++ b/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}
- {#if $viewProps.showLogButton} + {#if showLogButton} {/if} - {#if $viewProps.showCopyButton} + {#if showCopyButton} {/if} diff --git a/packages/svelte-tree-view/src/lib/TreeView.svelte b/packages/svelte-tree-view/src/lib/TreeView.svelte index 57cc741..aacabf4 100644 --- a/packages/svelte-tree-view/src/lib/TreeView.svelte +++ b/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 diff --git a/packages/svelte-tree-view/src/lib/__tests__/DefaultTree.svelte b/packages/svelte-tree-view/src/lib/__tests__/DefaultTree.svelte index e8b58a1..1f360b9 100644 --- a/packages/svelte-tree-view/src/lib/__tests__/DefaultTree.svelte +++ b/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 { + showLogButton?: boolean + showCopyButton?: boolean + } + + let { showLogButton, showCopyButton, ...props }: TestProps = $props() - {#snippet treeNode(props)} - + {#snippet treeNode(nodeProps)} + {/snippet} diff --git a/packages/svelte-tree-view/src/lib/store-methods.ts b/packages/svelte-tree-view/src/lib/store-methods.ts index a79d85d..dc115e6 100644 --- a/packages/svelte-tree-view/src/lib/store-methods.ts +++ b/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': diff --git a/packages/svelte-tree-view/src/lib/store.ts b/packages/svelte-tree-view/src/lib/store.ts index dd01a77..0c0824d 100644 --- a/packages/svelte-tree-view/src/lib/store.ts +++ b/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)) } diff --git a/packages/svelte-tree-view/src/lib/tree-node.svelte.ts b/packages/svelte-tree-view/src/lib/tree-node.svelte.ts index 3f985de..5502742 100644 --- a/packages/svelte-tree-view/src/lib/tree-node.svelte.ts +++ b/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) { diff --git a/packages/svelte-tree-view/src/lib/types.ts b/packages/svelte-tree-view/src/lib/types.ts index c8269e4..a8432c4 100644 --- a/packages/svelte-tree-view/src/lib/types.ts +++ b/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 { * The rendered treeNode. To use the default implementation use 'svelte-tree-view/DefaultNode.svelte' export */ treeNode: Snippet<[NodeProps]> - - showLogButton?: boolean - showCopyButton?: boolean recursionOpts?: TreeRecursionOpts - onUpdate?: (newMap: Record) => void + onUpdate?: (newMap: Record>) => 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 { valueFormatter?: (val: any, n: TreeNode) => string | undefined } -export type Props = TreeViewProps & HTMLAttributes +export type TreeViewElementProps = TreeViewProps & HTMLAttributes