@keenmate/svelte-treeview 4.0.0 → 4.1.0

package/README.md

@@ -2,6 +2,9 @@
 
 A high-performance, feature-rich hierarchical tree view component for Svelte 5 with drag & drop support, search functionality, and flexible data structures using LTree.
 
+> [!IMPORTANT]
+> **Looking for a framework-agnostic solution?** There's also a web component version that can be used standalone or in other frameworks at https://github.com/KeenMate/web-treeview/
+
 ## 🚀 Features
 
 - **Svelte 5 Native**: Built specifically for Svelte 5 with full support for runes and modern Svelte patterns
@@ -622,6 +625,28 @@ interface NodeData {
 - Second level: `"1.1"`, `"1.2"`, `"2.1"`
 - Third level: `"1.1.1"`, `"1.2.1"`, `"2.1.1"`
 
+### Sorting Requirements
+
+**Important:** For proper tree construction, your `sortCallback` must sort by **level first** to ensure parent nodes are inserted before their children:
+
+```typescript
+const sortCallback = (items: LTreeNode<T>[]) => {
+  return items.sort((a, b) => {
+    // First, sort by level (shallower levels first)
+    const aLevel = a.path.split('.').length;
+    const bLevel = b.path.split('.').length;
+    if (aLevel !== bLevel) {
+      return aLevel - bLevel;
+    }
+
+    // Then sort by your custom criteria
+    return a.data.name.localeCompare(b.data.name);
+  });
+};
+```
+
+**Why this matters:** If deeper level nodes are processed before their parents, you'll get "Could not find parent node" errors during tree construction. Level-first sorting ensures hierarchical integrity and enables progressive rendering for large datasets.
+
 ### Insert Result Information
 
 The tree provides detailed information about data insertion through the `insertResult` bindable property:
@@ -709,4 +734,4 @@ MIT License - see LICENSE file for details.
 
 ---
 
-Built with ❤️ by [KeenMate](https://github.com/keenmate)
+Built with ❤️ by [KeenMate](https://github.com/keenmate)

package/dist/components/Tree.svelte

@@ -222,8 +222,9 @@
 
 	treeId = treeId || generateTreeId();
 
-	// svelte-ignore non_reactive_update
-	// let trie: Ltree<T> | null = null
+	if (shouldDisplayDebugInformation)
+		console.log("Tree treePathSeparator:", treePathSeparator)
+
 	// svelte-ignore non_reactive_update
 	const tree: Ltree<T> = createLTree<T>(
 		idMember,
@@ -257,6 +258,11 @@
 		}
 	);
 
+	// Update tree separator when prop changes
+	$effect(() => {
+		tree.treePathSeparator = treePathSeparator;
+	});
+
 	setContext('Ltree', tree);
 
 	$effect(() => {
@@ -284,7 +290,6 @@
 		if (selectedNode) {
 			const previousNode = tree.getNodeByPath(selectedNode.path);
 			if (previousNode) {
-				console.log('🚀 ~ _onNodeClicked ~ previousNode:', previousNode);
 				previousNode.isSelected = false;
 			} else selectedNode = null;
 		}
@@ -325,8 +330,6 @@
 		// 	event.dataTransfer.effectAllowed = "move";
 		// 	event.dataTransfer.setData("text/plain", node.path);
 		// }
-
-		console.log('🚀 ~ _onNodeDragStart ~ draggedNode:', draggedNode, event);
 	}
 
 	function _onNodeDragOver(node: LTreeNode<T>, event: DragEvent) {
@@ -464,8 +467,8 @@
 			</div>
 		{/if}
 	</div>
-	
-		{@render treeFooter?.()}
+
+	{@render treeFooter?.()}
 
 	<!-- Context Menu -->
 	{#if contextMenuVisible && contextMenu && contextMenuNode}

package/dist/helpers/ltree-helpers.d.ts

@@ -1,4 +1,4 @@
-export declare function getParentPath(path: string): string | null;
-export declare function getRelativePath(path: string, parentPath: string): string;
-export declare function getPathSegments(path: string, start?: number, count?: number): string;
+export declare function getParentPath(path: string, pathSeparator?: string): string | null;
+export declare function getRelativePath(path: string, parentPath: string, pathSeparator?: string): string;
+export declare function getPathSegments(path: string, start?: number, count?: number, pathSeparator?: string): string;
 export declare function getLevel(path: string, pathSeparator: string): number;

package/dist/helpers/ltree-helpers.js

@@ -1,25 +1,20 @@
 import { isEmptyString } from './string-helpers.js';
-export function getParentPath(path) {
+export function getParentPath(path, pathSeparator = '.') {
     if (!path || typeof path !== 'string')
         return null;
-    const lastDotIndex = path.lastIndexOf('.');
+    const lastDotIndex = path.lastIndexOf(pathSeparator);
     return lastDotIndex === -1 ? '' : path.substring(0, lastDotIndex);
 }
-export function getRelativePath(path, parentPath) {
+export function getRelativePath(path, parentPath, pathSeparator = '.') {
     if (isEmptyString(parentPath))
         return path;
-    return path.startsWith(parentPath + '.') ? path.substring(parentPath.length + 1) : path;
+    return path.startsWith(parentPath + pathSeparator) ? path.substring(parentPath.length + pathSeparator.length) : path;
 }
-export function getPathSegments(path, start = 0, count = 1) {
-    const segments = path.split('.');
+export function getPathSegments(path, start = 0, count = 1, pathSeparator = '.') {
+    const segments = path.split(pathSeparator);
     const taken = segments.slice(start, start + count);
-    return taken.join('.');
+    return taken.join(pathSeparator);
 }
 export function getLevel(path, pathSeparator) {
-    let count = 1;
-    for (let i = 0; i < path.length; i++) {
-        if (path[i] === pathSeparator)
-            count++;
-    }
-    return count;
+    return path.split(pathSeparator).length;
 }

package/dist/ltree/ltree.svelte.js

@@ -95,11 +95,11 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                 node.id = _idMember ? row[_idMember] : undefined;
                 node.path = _pathMember ? row[_pathMember] : undefined;
                 if (shouldCalculateParentPath) {
-                    node.parentPath = getParentPath(node.path);
+                    node.parentPath = getParentPath(node.path, this.treePathSeparator);
                 }
                 else
                     node.parentPath = row[_parentPathMember];
-                node.pathSegment = getPathSegments(getRelativePath(node.path, node.parentPath));
+                node.pathSegment = getPathSegments(getRelativePath(node.path, node.parentPath, this.treePathSeparator), 0, 1, this.treePathSeparator);
                 if (!shouldCalculateLevel)
                     node.level = row[_levelMember];
                 else
@@ -137,6 +137,7 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             const itemsToIndex = [];
             let realIndex = 0; // this is used to avoid scenario, when node cannot found a parent
             let successfulCount = 0;
+            let hasRenderedExpandLevel = false;
             mappedData.forEach((node, index) => {
                 const result = this.insertTreeNode(node.parentPath, node, true);
                 if (result) {
@@ -154,6 +155,23 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                         itemsToIndex.push({ node, index: realIndex });
                         realIndex++;
                     }
+                    // Progressive rendering: emit changes when we complete expandLevel
+                    if (!noEmitChanges && !hasRenderedExpandLevel && _expandLevel && node.level && node.level <= _expandLevel) {
+                        // Check if this might be the last node at expandLevel by looking ahead
+                        const remainingNodes = mappedData.slice(index + 1);
+                        const hasMoreAtExpandLevel = remainingNodes.some(futureNode => {
+                            const futureLevel = futureNode.level || getLevel(futureNode.path, this.treePathSeparator);
+                            return futureLevel <= _expandLevel;
+                        });
+                        if (!hasMoreAtExpandLevel) {
+                            // We've processed all nodes up to expandLevel - render now!
+                            hasRenderedExpandLevel = true;
+                            this._emitTreeChanged();
+                            if (this.shouldDisplayDebugInformation) {
+                                console.log(`[Tree ${_treeId}] Progressive render: Displayed levels 1-${_expandLevel} (${successfulCount} nodes processed so far)`);
+                            }
+                        }
+                    }
                 }
             });
             // Log errors for backward compatibility and debugging
@@ -172,8 +190,22 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                 });
                 indexer.addToQueue(itemsToIndex);
             }
+            // Final render (only if we haven't already rendered progressively)
             if (!noEmitChanges) {
-                this._emitTreeChanged();
+                if (hasRenderedExpandLevel) {
+                    // We already rendered expandLevel, now render the complete tree
+                    this._emitTreeChanged();
+                    if (this.shouldDisplayDebugInformation) {
+                        console.log(`[Tree ${_treeId}] Final render: Complete tree with all ${successfulCount} nodes`);
+                    }
+                }
+                else {
+                    // No progressive rendering occurred, render everything at once
+                    this._emitTreeChanged();
+                    if (this.shouldDisplayDebugInformation) {
+                        console.log(`[Tree ${_treeId}] Single render: All ${successfulCount} nodes (no expandLevel or progressive render conditions met)`);
+                    }
+                }
             }
             performance.mark('insert-end');
             performance.measure('sort-duration', 'sort-start', 'sort-end');
@@ -199,7 +231,7 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             if (shouldCalculateLevel) {
                 newNode.level = (parentNode.level || 0) + 1;
             }
-            const newSegment = segmentPrefix + getPathSegments(getRelativePath(newNode?.path, parentPath));
+            const newSegment = segmentPrefix + getPathSegments(getRelativePath(newNode?.path, parentPath, this.treePathSeparator), 0, 1, this.treePathSeparator);
             if (!parentNode.children.hasOwnProperty(newSegment)) {
                 parentNode.children[newSegment] = newNode;
                 if (shouldCalculateHasChildren && !parentNode.hasChildren) {
@@ -425,6 +457,13 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
         },
         _defaultSort: function (self, items) {
             return items.sort((a, b) => {
+                // First, sort by level (shallower levels first)
+                const aLevel = a.level || 0;
+                const bLevel = b.level || 0;
+                if (aLevel !== bLevel) {
+                    return aLevel - bLevel;
+                }
+                // Then sort by parent path
                 if (a.parentPath !== b.parentPath) {
                     if (a.parentPath === '')
                         return -1;
@@ -432,13 +471,8 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                         return 1;
                     return a.parentPath.localeCompare(b.parentPath);
                 }
-                // console.log(
-                // 	'a.name, b.name, comparison',
-                // 	self.getNodeDisplayValue(a),
-                // 	self.getNodeDisplayValue(b),
-                // 	self.getNodeDisplayValue(a).localeCompare(this.getNodeDisplayValue(b))
-                // );
-                return self.getNodeDisplayValue(a).localeCompare(this.getNodeDisplayValue(b));
+                // Finally sort by display value
+                return self.getNodeDisplayValue(a).localeCompare(self.getNodeDisplayValue(b));
             });
         },
         _emitTreeChanged: function () {

package/dist/styles.scss

@@ -1,2 +1,2 @@
 // CSS entry point for the library
-@import './styles/main.scss';
+@use './styles/main.scss';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/svelte-treeview",
-	"version": "4.0.0",
+	"version": "4.1.0",
 	"scripts": {
 		"dev": "vite dev --port 17777",
 		"build": "vite build && npm run prepack",
@@ -10,6 +10,8 @@
 		"prepack": "svelte-kit sync && svelte-package && sass src/lib/styles.scss dist/styles.css && publint",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test": "vitest",
+		"test:run": "vitest run",
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint ."
 	},
@@ -59,7 +61,8 @@
 		"svelte-preprocess": "^6.0.3",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.20.0",
-		"vite": "^7.0.4"
+		"vite": "^7.0.4",
+		"vitest": "^3.2.4"
 	},
 	"optionalDependencies": {
 		"flexsearch": "^0.8.212"