@keenmate/svelte-treeview 4.3.1 → 4.4.0

package/README.md

@@ -554,6 +554,7 @@ Without both requirements, no search indexing will occur.
 | `filterNodes` | `searchText: string, searchOptions?: SearchOptions` | Filter the tree display using internal search index with optional FlexSearch options |
 | `searchNodes` | `searchText: string \| null \| undefined, searchOptions?: SearchOptions` | Search nodes using internal search index and return matching nodes with optional FlexSearch options |
 | `scrollToPath` | `path: string, options?: ScrollToPathOptions` | Scroll to and highlight a specific node |
+| `update` | `updates: Partial<Props>` | Programmatically update component props from external JavaScript |
 
 #### ScrollToPath Options
 
@@ -631,6 +632,43 @@ if (isIndexing) {
 }
 ```
 
+#### External Updates (Vanilla JavaScript)
+
+The `update()` method allows you to programmatically update component props from external JavaScript code (outside of Svelte's reactivity system). This is particularly useful for HTML/JavaScript integration or dynamic configuration from non-Svelte code.
+
+```javascript
+// Get reference to the tree component
+const treeElement = document.querySelector('#my-tree');
+
+// Update multiple props at once
+treeElement.update({
+  searchText: 'Production',
+  expandLevel: 3,
+  shouldDisplayDebugInformation: true,
+  data: newDataArray,
+  contextMenuXOffset: 10
+});
+
+// Update single prop
+treeElement.update({ searchText: 'new search' });
+
+// Update data and configuration
+treeElement.update({
+  data: fetchedData,
+  expandLevel: 5,
+  selectedNodeClass: 'custom-selected'
+});
+```
+
+**Updatable Properties:**
+All Tree props can be updated except snippets/templates, including:
+- Data and state: `data`, `searchText`, `selectedNode`, `expandLevel`
+- Members: `idMember`, `pathMember`, `displayValueMember`, `searchValueMember`
+- Callbacks: `sortCallback`, `getDisplayValueCallback`, `onNodeClicked`, etc.
+- Visual: `bodyClass`, `selectedNodeClass`, `expandIconClass`, etc.
+- Context menu: `contextMenuCallback`, `contextMenuXOffset`, `contextMenuYOffset`
+- Behavior: `shouldToggleOnNodeClick`, `shouldUseInternalSearchIndex`, etc.
+
 ### Debug Information
 
 Enable debug information to see real-time tree statistics and console logging:

package/dist/components/Node.svelte

@@ -48,7 +48,7 @@
 		isDraggedNode = false,
 	}: Props = $props()
 
-	const trie = getContext<Ltree<T>>("Ltree")
+	const tree = getContext<Ltree<T>>("Ltree")
 
 	// Drag over state
 	let isDraggedOver = $state(false);
@@ -63,7 +63,7 @@
 	function toggleExpanded() {
 		if (node.hasChildren) {
 			node.isExpanded = !node.isExpanded
-			trie.refresh()
+			tree.refresh()
 		}
 	}
 
@@ -155,7 +155,7 @@
 			{#if children}
 				{@render children(node)}
 			{:else}
-				{trie.getNodeDisplayValue(node)}
+				{tree.getNodeDisplayValue(node)}
 			{/if}
 		</div>
 	</div>

package/dist/components/Tree.svelte

@@ -16,8 +16,6 @@
 	let draggedNode: LTreeNode<any> | null = $state.raw(null);
 
 	interface Props {
-		trieId?: string | null | undefined;
-
 		// MAPPINGS
 		idMember: string;
 		pathMember: string;
@@ -235,6 +233,102 @@
 		return true;
 	}
 
+	// External update method for HTML/JavaScript usage
+	export function update(
+		updates: Partial<
+			Pick<
+				Props,
+				| "treeId"
+				| "treePathSeparator"
+				| "idMember"
+				| "pathMember"
+				| "parentPathMember"
+				| "levelMember"
+				| "hasChildrenMember"
+				| "isExpandedMember"
+				| "isSelectedMember"
+				| "isDraggableMember"
+				| "isDropAllowedMember"
+				| "displayValueMember"
+				| "getDisplayValueCallback"
+				| "searchValueMember"
+				| "getSearchValueCallback"
+				| "isSorted"
+				| "sortCallback"
+				| "data"
+				| "selectedNode"
+				| "expandLevel"
+				| "shouldToggleOnNodeClick"
+				| "shouldUseInternalSearchIndex"
+				| "initializeIndexCallback"
+				| "searchText"
+				| "indexerBatchSize"
+				| "indexerTimeout"
+				| "shouldDisplayDebugInformation"
+				| "shouldDisplayContextMenuInDebugMode"
+				| "onNodeClicked"
+				| "onNodeDragStart"
+				| "onNodeDragOver"
+				| "onNodeDrop"
+				| "contextMenuCallback"
+				| "bodyClass"
+				| "expandIconClass"
+				| "collapseIconClass"
+				| "leafIconClass"
+				| "selectedNodeClass"
+				| "dragOverNodeClass"
+				| "scrollHighlightTimeout"
+				| "scrollHighlightClass"
+				| "contextMenuXOffset"
+				| "contextMenuYOffset"
+			>
+		>
+	) {
+		if (updates.treeId !== undefined) treeId = updates.treeId;
+		if (updates.treePathSeparator !== undefined) treePathSeparator = updates.treePathSeparator;
+		if (updates.idMember !== undefined) idMember = updates.idMember;
+		if (updates.pathMember !== undefined) pathMember = updates.pathMember;
+		if (updates.parentPathMember !== undefined) parentPathMember = updates.parentPathMember;
+		if (updates.levelMember !== undefined) levelMember = updates.levelMember;
+		if (updates.hasChildrenMember !== undefined) hasChildrenMember = updates.hasChildrenMember;
+		if (updates.isExpandedMember !== undefined) isExpandedMember = updates.isExpandedMember;
+		if (updates.isSelectedMember !== undefined) isSelectedMember = updates.isSelectedMember;
+		if (updates.isDraggableMember !== undefined) isDraggableMember = updates.isDraggableMember;
+		if (updates.isDropAllowedMember !== undefined) isDropAllowedMember = updates.isDropAllowedMember;
+		if (updates.displayValueMember !== undefined) displayValueMember = updates.displayValueMember;
+		if (updates.getDisplayValueCallback !== undefined) getDisplayValueCallback = updates.getDisplayValueCallback;
+		if (updates.searchValueMember !== undefined) searchValueMember = updates.searchValueMember;
+		if (updates.getSearchValueCallback !== undefined) getSearchValueCallback = updates.getSearchValueCallback;
+		if (updates.isSorted !== undefined) isSorted = updates.isSorted;
+		if (updates.sortCallback !== undefined) sortCallback = updates.sortCallback;
+		if (updates.data !== undefined) data = updates.data;
+		if (updates.selectedNode !== undefined) selectedNode = updates.selectedNode;
+		if (updates.expandLevel !== undefined) expandLevel = updates.expandLevel;
+		if (updates.shouldToggleOnNodeClick !== undefined) shouldToggleOnNodeClick = updates.shouldToggleOnNodeClick;
+		if (updates.shouldUseInternalSearchIndex !== undefined) shouldUseInternalSearchIndex = updates.shouldUseInternalSearchIndex;
+		if (updates.initializeIndexCallback !== undefined) initializeIndexCallback = updates.initializeIndexCallback;
+		if (updates.searchText !== undefined) searchText = updates.searchText;
+		if (updates.indexerBatchSize !== undefined) indexerBatchSize = updates.indexerBatchSize;
+		if (updates.indexerTimeout !== undefined) indexerTimeout = updates.indexerTimeout;
+		if (updates.shouldDisplayDebugInformation !== undefined) shouldDisplayDebugInformation = updates.shouldDisplayDebugInformation;
+		if (updates.shouldDisplayContextMenuInDebugMode !== undefined) shouldDisplayContextMenuInDebugMode = updates.shouldDisplayContextMenuInDebugMode;
+		if (updates.onNodeClicked !== undefined) onNodeClicked = updates.onNodeClicked;
+		if (updates.onNodeDragStart !== undefined) onNodeDragStart = updates.onNodeDragStart;
+		if (updates.onNodeDragOver !== undefined) onNodeDragOver = updates.onNodeDragOver;
+		if (updates.onNodeDrop !== undefined) onNodeDrop = updates.onNodeDrop;
+		if (updates.contextMenuCallback !== undefined) contextMenuCallback = updates.contextMenuCallback;
+		if (updates.bodyClass !== undefined) bodyClass = updates.bodyClass;
+		if (updates.expandIconClass !== undefined) expandIconClass = updates.expandIconClass;
+		if (updates.collapseIconClass !== undefined) collapseIconClass = updates.collapseIconClass;
+		if (updates.leafIconClass !== undefined) leafIconClass = updates.leafIconClass;
+		if (updates.selectedNodeClass !== undefined) selectedNodeClass = updates.selectedNodeClass;
+		if (updates.dragOverNodeClass !== undefined) dragOverNodeClass = updates.dragOverNodeClass;
+		if (updates.scrollHighlightTimeout !== undefined) scrollHighlightTimeout = updates.scrollHighlightTimeout;
+		if (updates.scrollHighlightClass !== undefined) scrollHighlightClass = updates.scrollHighlightClass;
+		if (updates.contextMenuXOffset !== undefined) contextMenuXOffset = updates.contextMenuXOffset;
+		if (updates.contextMenuYOffset !== undefined) contextMenuYOffset = updates.contextMenuYOffset;
+	}
+
 	treeId = treeId || generateTreeId();
 
 	if (shouldDisplayDebugInformation)
@@ -290,7 +384,7 @@
 		}
 	});
 
-	// $inspect("trie change tracker", trie?.changeTracker?.toString());
+	// $inspect("tree change tracker", tree?.changeTracker?.toString());
 
 	function generateTreeId(): string {
 		return `${Date.now()}${Math.floor(Math.random() * 10000)}`;

package/dist/components/Tree.svelte.d.ts

@@ -3,7 +3,6 @@ import { type LTreeNode } from '../ltree/ltree-node.svelte.js';
 import { type InsertArrayResult, type ContextMenuItem } from '../ltree/types.js';
 declare function $$render<T>(): {
     props: {
-        trieId?: string | null | undefined;
         idMember: string;
         pathMember: string;
         parentPathMember?: string | null | undefined;
@@ -68,6 +67,58 @@ declare function $$render<T>(): {
             highlight?: boolean;
             scrollOptions?: ScrollIntoViewOptions;
         }) => Promise<boolean>;
+        update: (updates: Partial<Pick<{
+            idMember: string;
+            pathMember: string;
+            parentPathMember?: string | null | undefined;
+            levelMember?: string | null | undefined;
+            isExpandedMember?: string | null | undefined;
+            isSelectedMember?: string | null | undefined;
+            isDraggableMember?: string | null | undefined;
+            isDropAllowedMember?: string | null | undefined;
+            hasChildrenMember?: string | null | undefined;
+            isSorted?: boolean | null | undefined;
+            displayValueMember?: string | null | undefined;
+            getDisplayValueCallback?: (node: LTreeNode<T>) => string;
+            searchValueMember?: string | null | undefined;
+            getSearchValueCallback?: (node: LTreeNode<T>) => string;
+            treeId?: string | null | undefined;
+            treePathSeparator?: string | null | undefined;
+            sortCallback?: (items: LTreeNode<T>[]) => LTreeNode<T>[];
+            data: T[];
+            selectedNode?: LTreeNode<T> | null | undefined;
+            insertResult?: InsertArrayResult<T> | null | undefined;
+            nodeTemplate?: any;
+            treeHeader?: any;
+            treeBody?: any;
+            treeFooter?: any;
+            noDataFound?: any;
+            contextMenu?: any;
+            expandLevel?: number | null | undefined;
+            shouldToggleOnNodeClick?: boolean | null | undefined;
+            initializeIndexCallback?: () => Index;
+            searchText?: string | null | undefined;
+            shouldUseInternalSearchIndex?: boolean | null | undefined;
+            indexerBatchSize?: number | null | undefined;
+            indexerTimeout?: number | null | undefined;
+            shouldDisplayDebugInformation?: boolean;
+            shouldDisplayContextMenuInDebugMode?: boolean;
+            onNodeClicked?: (node: LTreeNode<T>) => void;
+            onNodeDragStart?: (node: LTreeNode<T>, event: DragEvent) => void;
+            onNodeDragOver?: (node: LTreeNode<T>, event: DragEvent) => void;
+            onNodeDrop?: (node: LTreeNode<T>, draggedNode: LTreeNode<T>, event: DragEvent) => void;
+            contextMenuCallback?: (node: LTreeNode<T>, closeMenuCallback: () => void) => ContextMenuItem[];
+            bodyClass?: string | null | undefined;
+            selectedNodeClass?: string | null | undefined;
+            dragOverNodeClass?: string | null | undefined;
+            expandIconClass?: string | null | undefined;
+            collapseIconClass?: string | null | undefined;
+            leafIconClass?: string | null | undefined;
+            scrollHighlightTimeout?: number | null | undefined;
+            scrollHighlightClass?: string | null | undefined;
+            contextMenuXOffset?: number | null | undefined;
+            contextMenuYOffset?: number | null | undefined;
+        }, "treeId" | "treePathSeparator" | "idMember" | "pathMember" | "parentPathMember" | "levelMember" | "hasChildrenMember" | "isExpandedMember" | "isSelectedMember" | "isDraggableMember" | "isDropAllowedMember" | "displayValueMember" | "getDisplayValueCallback" | "searchValueMember" | "getSearchValueCallback" | "isSorted" | "sortCallback" | "data" | "selectedNode" | "expandLevel" | "shouldToggleOnNodeClick" | "shouldUseInternalSearchIndex" | "initializeIndexCallback" | "searchText" | "indexerBatchSize" | "indexerTimeout" | "shouldDisplayDebugInformation" | "shouldDisplayContextMenuInDebugMode" | "onNodeClicked" | "onNodeDragStart" | "onNodeDragOver" | "onNodeDrop" | "contextMenuCallback" | "bodyClass" | "expandIconClass" | "collapseIconClass" | "leafIconClass" | "selectedNodeClass" | "dragOverNodeClass" | "scrollHighlightTimeout" | "scrollHighlightClass" | "contextMenuXOffset" | "contextMenuYOffset">>) => void;
     };
     bindings: "data" | "selectedNode" | "insertResult" | "searchText";
     slots: {};
@@ -91,6 +142,58 @@ declare class __sveltets_Render<T> {
             highlight?: boolean;
             scrollOptions?: ScrollIntoViewOptions;
         } | undefined) => Promise<boolean>;
+        update: (updates: Partial<Pick<{
+            idMember: string;
+            pathMember: string;
+            parentPathMember?: string | null | undefined;
+            levelMember?: string | null | undefined;
+            isExpandedMember?: string | null | undefined;
+            isSelectedMember?: string | null | undefined;
+            isDraggableMember?: string | null | undefined;
+            isDropAllowedMember?: string | null | undefined;
+            hasChildrenMember?: string | null | undefined;
+            isSorted?: boolean | null | undefined;
+            displayValueMember?: string | null | undefined;
+            getDisplayValueCallback?: ((node: LTreeNode<T>) => string) | undefined;
+            searchValueMember?: string | null | undefined;
+            getSearchValueCallback?: ((node: LTreeNode<T>) => string) | undefined;
+            treeId?: string | null | undefined;
+            treePathSeparator?: string | null | undefined;
+            sortCallback?: ((items: LTreeNode<T>[]) => LTreeNode<T>[]) | undefined;
+            data: T[];
+            selectedNode?: LTreeNode<T> | null | undefined;
+            insertResult?: InsertArrayResult<T> | null | undefined;
+            nodeTemplate?: any;
+            treeHeader?: any;
+            treeBody?: any;
+            treeFooter?: any;
+            noDataFound?: any;
+            contextMenu?: any;
+            expandLevel?: number | null | undefined;
+            shouldToggleOnNodeClick?: boolean | null | undefined;
+            initializeIndexCallback?: (() => Index) | undefined;
+            searchText?: string | null | undefined;
+            shouldUseInternalSearchIndex?: boolean | null | undefined;
+            indexerBatchSize?: number | null | undefined;
+            indexerTimeout?: number | null | undefined;
+            shouldDisplayDebugInformation?: boolean;
+            shouldDisplayContextMenuInDebugMode?: boolean;
+            onNodeClicked?: ((node: LTreeNode<T>) => void) | undefined;
+            onNodeDragStart?: ((node: LTreeNode<T>, event: DragEvent) => void) | undefined;
+            onNodeDragOver?: ((node: LTreeNode<T>, event: DragEvent) => void) | undefined;
+            onNodeDrop?: ((node: LTreeNode<T>, draggedNode: LTreeNode<T>, event: DragEvent) => void) | undefined;
+            contextMenuCallback?: ((node: LTreeNode<T>, closeMenuCallback: () => void) => ContextMenuItem[]) | undefined;
+            bodyClass?: string | null | undefined;
+            selectedNodeClass?: string | null | undefined;
+            dragOverNodeClass?: string | null | undefined;
+            expandIconClass?: string | null | undefined;
+            collapseIconClass?: string | null | undefined;
+            leafIconClass?: string | null | undefined;
+            scrollHighlightTimeout?: number | null | undefined;
+            scrollHighlightClass?: string | null | undefined;
+            contextMenuXOffset?: number | null | undefined;
+            contextMenuYOffset?: number | null | undefined;
+        }, "treeId" | "data" | "onNodeClicked" | "onNodeDragStart" | "onNodeDragOver" | "onNodeDrop" | "shouldToggleOnNodeClick" | "expandIconClass" | "collapseIconClass" | "leafIconClass" | "selectedNodeClass" | "dragOverNodeClass" | "treePathSeparator" | "idMember" | "pathMember" | "parentPathMember" | "levelMember" | "hasChildrenMember" | "isExpandedMember" | "displayValueMember" | "getDisplayValueCallback" | "searchValueMember" | "getSearchValueCallback" | "isSorted" | "sortCallback" | "isDraggableMember" | "isDropAllowedMember" | "shouldDisplayDebugInformation" | "isSelectedMember" | "selectedNode" | "expandLevel" | "shouldUseInternalSearchIndex" | "initializeIndexCallback" | "searchText" | "indexerBatchSize" | "indexerTimeout" | "shouldDisplayContextMenuInDebugMode" | "contextMenuCallback" | "bodyClass" | "scrollHighlightTimeout" | "scrollHighlightClass" | "contextMenuXOffset" | "contextMenuYOffset">>) => void;
     };
 }
 interface $$IsomorphicComponent {

package/dist/ltree/ltree-demo.js

@@ -1,7 +1,7 @@
 import { createLTree } from './ltree.svelte';
 // Usage Examples and Performance Test
 export function demonstrateLTree() {
-    const trie = createLTree('id', 'path', null, null, null, null, null, null, null, null, null, null, null, { isSorted: false, sortCallback: null });
+    const tree = createLTree('id', 'path', null, null, null, null, null, null, null, null, null, null, null, { isSorted: false, sortCallback: null });
     // Sample ltree paths
     const paths = [
         '1',
@@ -16,37 +16,37 @@ export function demonstrateLTree() {
         '2.1',
         '2.1.1'
     ];
-    console.log('=== LTree Trie Demo ===');
+    console.log('=== LTree Demo ===');
     // Insert paths with some sample data
     console.log('\n1. Inserting paths...');
     paths.forEach((path, index) => {
-        trie.insert(path, { id: index, name: `Node ${path}` });
+        tree.insert(path, { id: index, name: `Node ${path}` });
         console.log(`Inserted: ${path}`);
     });
     // Search for specific paths
     console.log('\n2. Searching for paths...');
-    console.log('Search "1.1.2":', trie.search('1.1.2'));
-    console.log('Search "1.3" (non-existent):', trie.search('1.3'));
+    console.log('Search "1.1.2":', tree.search('1.1.2'));
+    console.log('Search "1.3" (non-existent):', tree.search('1.3'));
     // Find by prefix
     console.log('\n3. Finding paths by prefix...');
-    console.log('Prefix "1.1":', trie.findByPrefix('1.1'));
-    console.log('Prefix "1.2":', trie.findByPrefix('1.2'));
+    console.log('Prefix "1.1":', tree.findByPrefix('1.1'));
+    console.log('Prefix "1.2":', tree.findByPrefix('1.2'));
     // Get direct children
     console.log('\n4. Getting direct children...');
-    console.log('Children of "1":', trie.getDirectChildren('1'));
-    console.log('Children of "1.1":', trie.getDirectChildren('1.1'));
+    console.log('Children of "1":', tree.getDirectChildren('1'));
+    console.log('Children of "1.1":', tree.getDirectChildren('1.1'));
     // Get ancestors
     console.log('\n5. Getting ancestors...');
-    console.log('Ancestors of "1.1.2.1":', trie.getAncestors('1.1.2.1'));
+    console.log('Ancestors of "1.1.2.1":', tree.getAncestors('1.1.2.1'));
     // Statistics
-    console.log('\n6. Trie statistics:');
-    console.log(trie.getStats());
-    return trie;
+    console.log('\n6. Tree statistics:');
+    console.log(tree.getStats());
+    return tree;
 }
 // Performance test with larger dataset
 export function performanceTest() {
     console.log('\n=== Performance Test ===');
-    const trie = createLtree('path', 'path', null, null, null, null, null, null, null, null, null, null, null, { isSorted: false, sortCallback: null });
+    const tree = createLtree('path', 'path', null, null, null, null, null, null, null, null, null, null, null, { isSorted: false, sortCallback: null });
     const paths = [];
     // Generate test data: hierarchical paths up to 4 levels deep
     console.log('Generating test data...');
@@ -65,22 +65,22 @@ export function performanceTest() {
     console.log(`Generated ${paths.length} paths`);
     // Test insertion
     console.time('Insertion');
-    paths.forEach(path => trie.insert(path, { path }));
+    paths.forEach(path => tree.insert(path, { path }));
     console.timeEnd('Insertion');
     // Test search performance
     console.time('Search 1000 random paths');
     for (let i = 0; i < 1000; i++) {
         const randomPath = paths[Math.floor(Math.random() * paths.length)];
-        trie.search(randomPath);
+        tree.search(randomPath);
     }
     console.timeEnd('Search 1000 random paths');
     // Test prefix search
     console.time('Prefix search for "1."');
-    const results = trie.findByPrefix('1.');
+    const results = tree.findByPrefix('1.');
     console.timeEnd('Prefix search for "1."');
     console.log(`Found ${results?.length} paths with prefix "1."`);
     // Memory usage
-    const stats = trie.getStats();
+    const stats = tree.getStats();
     console.log('Final statistics:', stats);
 }
 // Run demonstrations if this file is executed directly

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/svelte-treeview",
-	"version": "4.3.1",
+	"version": "4.4.0",
 	"scripts": {
 		"dev": "vite dev --port 17777",
 		"build": "vite build && npm run prepack",
@@ -74,7 +74,6 @@
 		"treeview",
 		"hierarchical",
 		"ltree",
-		"trie",
 		"drag-drop",
 		"search",
 		"flexsearch",