Support Custom Metadata

packages/svelte-file-tree-styled/src/lib/components/StyledTree.svelte

@@ -96,7 +96,7 @@
 				}
 
 				for (const child of item.node.children) {
-					if (child.name === name) {
+					if (child.data.name === name) {
 						onAlreadyExistsError?.({ name });
 						return false;
 					}
@@ -107,14 +107,14 @@
 					case "file": {
 						node = new FileNode({
 							id: crypto.randomUUID(),
-							name,
+							data: { name },
 						});
 						break;
 					}
 					case "folder": {
 						node = new FolderNode({
 							id: crypto.randomUUID(),
-							name,
+							data: { name },
 							children: [],
 						});
 						break;

packages/svelte-file-tree-styled/src/lib/components/StyledTreeItem.svelte

@@ -85,7 +85,7 @@
 		{#if editing}
 			<TreeItemInput class="border bg-white focus:outline-none" />
 		{:else}
-			<span class="select-none">{item.node.name}</span>
+			<span class="select-none">{item.node.data.name}</span>
 		{/if}
 	</TreeItem>
 </TreeContextMenu>

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

@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts" generics="TData extends FileTreeNodeData">
+	import type { FileTreeNodeData } from "$lib/tree.svelte.js";
 	import { SvelteSet } from "svelte/reactivity";
 	import TreeItemProvider from "./TreeItemProvider.svelte";
 	import { createTreeState } from "./state.svelte.js";
@@ -21,7 +22,7 @@
 		ref = $bindable(null),
 		generateCopyId = () => crypto.randomUUID(),
 		onRenameItem = ({ target, name }) => {
-			target.name = name;
+			target.data.name = name;
 			return true;
 		},
 		onMoveItems = ({ updates }) => {
@@ -44,7 +45,7 @@
 		onAlreadyExistsError,
 		onCircularReferenceError,
 		...rest
-	}: TreeProps = $props();
+	}: TreeProps<TData> = $props();
 
 	const treeState = createTreeState({
 		tree: () => tree,

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

@@ -1,14 +1,15 @@
 <script lang="ts" module>
+	import type { FileTreeNodeData } 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 = {
-		treeState: TreeState;
-		item: () => TreeItemState;
+	export type TreeItemProviderContext<TData extends FileTreeNodeData = FileTreeNodeData> = {
+		treeState: TreeState<TData>;
+		item: () => TreeItemState<TData>;
 	};
 
 	export function getTreeItemProviderContext(): TreeItemProviderContext {
@@ -18,27 +19,24 @@
 
 		return getContext(CONTEXT_KEY);
 	}
-
-	function setTreeItemProviderContext(context: TreeItemProviderContext): void {
-		setContext(CONTEXT_KEY, context);
-	}
 </script>
 
-<script lang="ts">
+<script lang="ts" generics="TData extends FileTreeNodeData">
 	const {
 		treeState,
 		item,
 		children,
 	}: {
-		treeState: TreeState;
-		item: TreeItemState;
+		treeState: TreeState<TData>;
+		item: TreeItemState<TData>;
 		children: Snippet;
 	} = $props();
 
-	setTreeItemProviderContext({
+	const context: TreeItemProviderContext<TData> = {
 		treeState,
 		item: () => item,
-	});
+	};
+	setContext(CONTEXT_KEY, context);
 
 	$effect(() => {
 		return () => {