Merge pull request #14 from abdel-17/simplify

Simplify

Author: Abdelrahman

packages/svelte-file-tree/package.json

@@ -9,8 +9,6 @@
 		"prepublishOnly": "pnpm run build",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"format:check": "prettier --check .",
 		"lint": "biome check",
 		"lint:fix": "biome check --fix",
 		"lint:ci": "biome ci",

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

@@ -1,8 +1,9 @@
 <script lang="ts">
-import type { FileTreeNode } from "$lib/tree.svelte.js";
+import type { FileTreeNode, FolderNode } from "$lib/tree.svelte.js";
 import TreeItemProvider from "./TreeItemProvider.svelte";
-import { TreeState } from "./context.svelte.js";
-import type { TreeProps } from "./types.js";
+import type { TreeContext } from "./context.js";
+import { TreeState } from "./state.svelte.js";
+import type { TreeItemData, TreeProps } from "./types.js";
 
 let {
 	tree,
@@ -17,8 +18,11 @@ let {
 	...attributes
 }: TreeProps = $props();
 
-const treeState = new TreeState({
-	getElementId: () => id,
+const treeState = new TreeState();
+const treeContext: TreeContext = {
+	treeState,
+	getTree: () => tree,
+	getTreeId: () => id,
 	callbacks: {
 		onMoveItems(nodes, start, count) {
 			onMoveItems?.(nodes, start, count);
@@ -36,25 +40,27 @@ const treeState = new TreeState({
 			onRenameError?.(node, error);
 		},
 	},
-});
+};
 </script>
 
-{#snippet items(nodes: FileTreeNode[])}
+{#snippet items(nodes: FileTreeNode[], parent?: TreeItemData<FolderNode>, depth: number = 0)}
 	{#each nodes as node, index (node.id)}
-		<TreeItemProvider {treeState} {node} {index}>
-			{#snippet children(context)}
+		<TreeItemProvider {treeContext} {node} {index} {parent} {depth}>
+			{#snippet children(itemState)}
 				{@render item({
 					node,
 					index,
-					editing: context.editing,
-					dragged: treeState.draggedId === node.id,
-					dropPosition: context.dropPosition,
+					parent,
+					depth,
+					editing: itemState.editing,
+					dragged: treeState.isDragged(node),
+					dropPosition: itemState.dropPosition,
 				})}
 			{/snippet}
 		</TreeItemProvider>
 
 		{#if node.type === "folder" && node.expanded}
-			{@render items(node.children)}
+			{@render items(node.children, { node, index, parent }, depth + 1)}
 		{/if}
 	{/each}
 {/snippet}

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

@@ -1,24 +1,35 @@
 <script lang="ts">
-import type { FileTreeNode } from "$lib/tree.svelte.js";
+import type { FileTreeNode, FolderNode } from "$lib/tree.svelte.js";
 import type { Snippet } from "svelte";
-import { TreeItemContext, type TreeState } from "./context.svelte.js";
+import { type TreeContext, setTreeItemProviderContext } from "./context.js";
+import { TreeItemState } from "./state.svelte.js";
+import type { TreeItemData } from "./types.js";
 
 const {
-	treeState,
+	treeContext,
 	node,
 	index,
+	parent,
+	depth,
 	children,
 }: {
-	treeState: TreeState;
+	treeContext: TreeContext;
 	node: FileTreeNode;
 	index: number;
-	children: Snippet<[context: TreeItemContext]>;
+	parent: TreeItemData<FolderNode> | undefined;
+	depth: number;
+	children: Snippet<[itemState: TreeItemState]>;
 } = $props();
 
-const context = TreeItemContext.set(treeState, {
+const itemState = new TreeItemState();
+setTreeItemProviderContext({
+	treeContext,
+	itemState,
 	getNode: () => node,
 	getIndex: () => index,
+	getParent: () => parent,
+	getDepth: () => depth,
 });
 </script>
 
-{@render children(context)}
+{@render children(itemState)}