Merge pull request #61 from abdel-17/extendable-node

feat: allow extending `FileNode` and `FolderNode` classes

Author: abdel-17

packages/svelte-file-tree/package.json

@@ -38,19 +38,19 @@
 		"svelte-signals": "^0.0.2"
 	},
 	"devDependencies": {
-		"@sveltejs/kit": "^2.20.2",
+		"@sveltejs/kit": "^2.20.4",
 		"@sveltejs/package": "^2.3.10",
 		"@sveltejs/vite-plugin-svelte": "5.0.3",
-		"@types/node": "^22.13.14",
-		"@vitest/browser": "^3.0.9",
+		"@types/node": "^22.14.0",
+		"@vitest/browser": "^3.1.1",
 		"jsdom": "^26.0.0",
 		"prettier": "^3.5.3",
 		"prettier-plugin-svelte": "^3.3.3",
-		"publint": "^0.3.9",
-		"svelte": "5.25.3",
+		"publint": "^0.3.10",
+		"svelte": "5.25.6",
 		"svelte-check": "^4.1.5",
-		"vite": "^6.2.3",
-		"vitest": "3.0.9",
+		"vite": "^6.2.5",
+		"vitest": "3.1.1",
 		"vitest-browser-svelte": "^0.1.0"
 	},
 	"repository": {

packages/svelte-file-tree/src/lib/components/Tree/Tree.svelte

@@ -1,5 +1,6 @@
-<script lang="ts" generics="TData extends FileTreeNodeData = FileTreeNodeData">
-	import type { FileTreeNodeData } from "$lib/tree.svelte.js";
+<script lang="ts" generics="TNode extends FileNode | FolderNode<TNode> = FileTreeNode">
+	import { FileNode, FolderNode, type FileTreeNode } from "$lib/tree.svelte.js";
+	import { DEV } from "esm-env";
 	import { SvelteSet } from "svelte/reactivity";
 	import TreeItemProvider from "./TreeItemProvider.svelte";
 	import { createTreeState } from "./state.svelte.js";
@@ -16,13 +17,35 @@
 		defaultClipboardIds,
 		clipboardIds = new SvelteSet(defaultClipboardIds),
 		pasteOperation = $bindable(),
-		isItemEditable = false,
+		isItemEditable = true,
 		isItemDisabled = false,
 		id = defaultId,
 		ref = $bindable(null),
-		generateCopyId = () => crypto.randomUUID(),
+		copyNode = function copyNode(node): TNode {
+			if (DEV && node.constructor !== FileNode && node.constructor !== FolderNode) {
+				throw new Error(
+					"Cannot copy an object that extends from `FileNode` or `FolderNode`. Pass a `copyNode` prop to specify how the object should be copied.",
+				);
+			}
+
+			switch (node.type) {
+				case "file": {
+					return new FileNode({
+						id: crypto.randomUUID(),
+						name: node.name,
+					}) as TNode;
+				}
+				case "folder": {
+					return new FolderNode({
+						id: crypto.randomUUID(),
+						name: node.name,
+						children: node.children.map(copyNode),
+					}) as TNode;
+				}
+			}
+		},
 		onRenameItem = ({ target, name }) => {
-			target.data.name = name;
+			target.name = name;
 			return true;
 		},
 		onMoveItems = ({ updates }) => {
@@ -45,7 +68,7 @@
 		onAlreadyExistsError,
 		onCircularReferenceError,
 		...rest
-	}: TreeProps<TData> = $props();
+	}: TreeProps<TNode> = $props();
 
 	const treeState = createTreeState({
 		tree: () => tree,
@@ -71,7 +94,7 @@
 			return isItemDisabled;
 		},
 		id: () => id,
-		generateCopyId: () => generateCopyId(),
+		copyNode: (node) => copyNode(node),
 		onRenameItem: (args) => onRenameItem(args),
 		onMoveItems: (args) => onMoveItems(args),
 		onCopyPasteItems: (args) => onCopyPasteItems(args),
@@ -80,23 +103,15 @@
 		onAlreadyExistsError: (args) => onAlreadyExistsError?.(args),
 		onCircularReferenceError: (args) => onCircularReferenceError?.(args),
 	});
+
+	export const { rename, copy, paste, remove } = treeState;
 </script>
 
 <div {...rest} bind:this={ref} {id} role="tree" aria-multiselectable="true">
 	{#each treeState.items() as i (i.node.id)}
 		<TreeItemProvider {treeState} item={i}>
 			{#if i.visible()}
-				{@render item({
-					item: i,
-					select: () => selectedIds.add(i.node.id),
-					deselect: () => selectedIds.delete(i.node.id),
-					expand: () => expandedIds.add(i.node.id),
-					collapse: () => expandedIds.delete(i.node.id),
-					rename: (name) => treeState.rename(i, name),
-					copy: (operation) => treeState.copy(i, operation),
-					paste: (position) => treeState.paste(i, position),
-					remove: () => treeState.remove(i),
-				})}
+				{@render item({ item: i })}
 			{/if}
 		</TreeItemProvider>
 	{/each}

packages/svelte-file-tree/src/lib/components/Tree/TreeItemProvider.svelte

@@ -1,15 +1,15 @@
 <script lang="ts" module>
-	import type { FileTreeNodeData } from "$lib/tree.svelte.js";
+	import type { FileNode, FileTreeNode, FolderNode } from "$lib/tree.svelte.js";
 	import { DEV } from "esm-env";
 	import { getContext, hasContext, setContext, type Snippet } from "svelte";
 	import type { TreeState } from "./state.svelte.js";
 	import type { TreeItemState } from "./types.js";
 
 	const CONTEXT_KEY = Symbol("TreeItemProvider");
 
-	export type TreeItemProviderContext<TData extends FileTreeNodeData = FileTreeNodeData> = {
-		treeState: TreeState<TData>;
-		item: () => TreeItemState<TData>;
+	export type TreeItemProviderContext<TNode extends FileNode | FolderNode<TNode> = FileTreeNode> = {
+		treeState: TreeState<TNode>;
+		item: () => TreeItemState<TNode>;
 	};
 
 	export function getTreeItemProviderContext(): TreeItemProviderContext {
@@ -21,18 +21,18 @@
 	}
 </script>
 
-<script lang="ts" generics="TData extends FileTreeNodeData = FileTreeNodeData">
+<script lang="ts" generics="TNode extends FileNode | FolderNode<TNode> = FileTreeNode">
 	const {
 		treeState,
 		item,
 		children,
 	}: {
-		treeState: TreeState<TData>;
-		item: TreeItemState<TData>;
+		treeState: TreeState<TNode>;
+		item: TreeItemState<TNode>;
 		children: Snippet;
 	} = $props();
 
-	const context: TreeItemProviderContext<TData> = {
+	const context: TreeItemProviderContext<TNode> = {
 		treeState,
 		item: () => item,
 	};