Merge pull request #71 from abdel-17/add-file-tree-class

Add `FileTree` class

Author: abdel-17

package.json

@@ -13,9 +13,9 @@
 		"format:check": "pnpm --parallel --color format:check"
 	},
 	"devDependencies": {
-		"@changesets/cli": "^2.29.3",
+		"@changesets/cli": "^2.29.4",
 		"playwright": "^1.52.0",
-		"prettier-plugin-svelte": "^3.3.3"
+		"prettier-plugin-svelte": "^3.4.0"
 	},
 	"pnpm": {
 		"onlyBuiltDependencies": [

packages/svelte-file-tree/CHANGELOG.md

@@ -1,5 +1,14 @@
 # svelte-file-tree
 
+## 0.7.0
+
+### Minor Changes
+
+- feat: add `FileTree` class
+- feat: add `TreeItemState.type` property (always equal to "item")
+- breaking: change the type of `TreeProps.root` to `FileTree`.
+- breaking: change the type of any `destination` property from `FolderNode` to `FolderNode | FileTree`.
+
 ## 0.6.0
 
 ### Patch Changes

packages/svelte-file-tree/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-file-tree",
-	"version": "0.6.0",
+	"version": "0.7.0",
 	"type": "module",
 	"scripts": {
 		"dev": "svelte-kit sync && svelte-package --watch",
@@ -31,26 +31,26 @@
 	"types": "./dist/index.d.ts",
 	"svelte": "./dist/index.js",
 	"peerDependencies": {
-		"svelte": "^5.20.0"
+		"svelte": "^5.31.0"
 	},
 	"dependencies": {
-		"@atlaskit/pragmatic-drag-and-drop": "^1.6.1",
+		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"esm-env": "^1.2.2"
 	},
 	"devDependencies": {
-		"@sveltejs/kit": "^2.20.8",
+		"@sveltejs/kit": "^2.21.1",
 		"@sveltejs/package": "^2.3.11",
 		"@sveltejs/vite-plugin-svelte": "5.0.3",
-		"@types/node": "^22.15.17",
-		"@vitest/browser": "^3.1.3",
+		"@types/node": "^22.15.29",
+		"@vitest/browser": "^3.1.4",
 		"jsdom": "^26.1.0",
 		"prettier": "^3.5.3",
-		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-svelte": "^3.4.0",
 		"publint": "^0.3.12",
-		"svelte": "5.28.2",
-		"svelte-check": "^4.1.7",
+		"svelte": "5.33.11",
+		"svelte-check": "^4.2.1",
 		"vite": "^6.3.5",
-		"vitest": "3.1.3",
+		"vitest": "3.1.4",
 		"vitest-browser-svelte": "^0.1.0"
 	},
 	"repository": {

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

@@ -1,13 +1,14 @@
 <script
 	lang="ts"
-	generics="TFile extends FileNode = FileNode, TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>"
+	generics="TFile extends FileNode = FileNode, TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>, TTree extends FileTree<TFile | TFolder> = FileTree<TFile | TFolder>"
 >
 	import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 	import { DEV } from "esm-env";
 	import { SvelteSet } from "svelte/reactivity";
 	import { isControlOrMeta, noop, truePredicate } from "$lib/helpers.js";
 	import {
 		FileNode,
+		FileTree,
 		FolderNode,
 		TreeItemState,
 		type DefaultTFolder,
@@ -61,7 +62,7 @@
 		canRemove = truePredicate,
 		onRemove = noop,
 		...rest
-	}: TreeProps<TFile, TFolder> = $props();
+	}: TreeProps<TFile, TFolder, TTree> = $props();
 
 	const uid = $props.id();
 	let tabbableId: string | undefined = $state.raw();
@@ -274,7 +275,7 @@
 		return item.inClipboard;
 	}
 
-	async function copy(clipboardIds: Set<string>, destination: TFolder) {
+	async function copy(clipboardIds: Set<string>, destination: TFolder | TTree) {
 		const names = new Set<string>();
 		for (const child of destination.children) {
 			names.add(child.name);
@@ -340,7 +341,7 @@
 	async function move(
 		movedIds: Set<string>,
 		isItemMoved: (item: TreeItemState<TFile, TFolder>) => boolean,
-		destination: TFolder,
+		destination: TFolder | TTree,
 	) {
 		const names = new Set<string>();
 		for (const child of destination.children) {
@@ -349,7 +350,7 @@
 
 		const sources: Array<TreeItemState<TFile, TFolder>> = [];
 		const sourceIds = new Set<string>();
-		const sourceOwners = new Set<TFolder>();
+		const sourceOwners = new Set<TFolder | TTree>();
 		for (const id of movedIds) {
 			const current = getItem(id);
 			if (current === undefined) {
@@ -421,7 +422,7 @@
 		return true;
 	}
 
-	export async function paste(destination: TFolder) {
+	export async function paste(destination: TFolder | TTree) {
 		if (clipboard === undefined) {
 			return false;
 		}
@@ -468,7 +469,7 @@
 
 	async function _remove(item: TreeItemState<TFile, TFolder>) {
 		const removed: Array<TreeItemState<TFile, TFolder>> = [];
-		const removedOwners = new Set<TFolder>();
+		const removedOwners = new Set<TFolder | TTree>();
 		for (const id of selectedIds) {
 			const current = getItem(id);
 			if (current === undefined) {
@@ -983,7 +984,7 @@
 					return;
 				}
 
-				let dropDestination: TFolder;
+				let dropDestination: TFolder | TTree;
 				const dropTarget = dropTargets[0];
 				if (dropTarget.element === args.self.element) {
 					dropDestination = root;

packages/svelte-file-tree/src/lib/components/context.ts

@@ -5,7 +5,13 @@ import type {
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { DEV } from "esm-env";
 import { getContext, hasContext, setContext } from "svelte";
-import type { DefaultTFolder, FileNode, FolderNode, TreeItemState } from "$lib/tree.svelte.js";
+import type {
+	DefaultTFolder,
+	FileNode,
+	FileTree,
+	FolderNode,
+	TreeItemState,
+} from "$lib/tree.svelte.js";
 
 export type TreeItemEvent<TEvent extends Event = Event> = TEvent & {
 	currentTarget: HTMLDivElement;
@@ -14,8 +20,9 @@ export type TreeItemEvent<TEvent extends Event = Event> = TEvent & {
 export type TreeContext<
 	TFile extends FileNode = FileNode,
 	TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>,
+	TTree extends FileTree<TFile | TFolder> = FileTree<TFile | TFolder>,
 > = {
-	root: () => TFolder;
+	root: () => TTree;
 	tabbableId: () => string;
 	getItemElementId: (itemId: string) => string;
 	onFocusIn: (item: TreeItemState<TFile, TFolder>, event: TreeItemEvent<FocusEvent>) => void;
@@ -32,7 +39,8 @@ const CONTEXT_KEY = Symbol("TreeContext");
 export function getTreeContext<
 	TFile extends FileNode = FileNode,
 	TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>,
->(): TreeContext<TFile, TFolder> {
+	TTree extends FileTree<TFile | TFolder> = FileTree<TFile | TFolder>,
+>(): TreeContext<TFile, TFolder, TTree> {
 	if (DEV && !hasContext(CONTEXT_KEY)) {
 		throw new Error("No parent <Tree> found");
 	}
@@ -42,6 +50,7 @@ export function getTreeContext<
 export function setTreeContext<
 	TFile extends FileNode = FileNode,
 	TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>,
->(context: TreeContext<TFile, TFolder>) {
+	TTree extends FileTree<TFile | TFolder> = FileTree<TFile | TFolder>,
+>(context: TreeContext<TFile, TFolder, TTree>) {
 	setContext(CONTEXT_KEY, context);
 }

packages/svelte-file-tree/src/lib/components/types.ts

@@ -5,6 +5,7 @@ import type { SvelteSet } from "svelte/reactivity";
 import type {
 	DefaultTFolder,
 	FileNode,
+	FileTree,
 	FolderNode,
 	TreeClipboard,
 	TreeItemState,
@@ -28,25 +29,28 @@ export type OnClipboardChangeArgs = {
 export type OnChildrenChangeArgs<
 	TFile extends FileNode = FileNode,
 	TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>,
+	TTree extends FileTree<TFile | TFolder> = FileTree<TFile | TFolder>,
 > = {
 	operation: "insert" | "remove";
-	target: TFolder;
+	target: TFolder | TTree;
 	children: Array<TFile | TFolder>;
 };
 
 export type OnDropDestinationChangeArgs<
 	TFile extends FileNode = FileNode,
 	TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>,
+	TTree extends FileTree<TFile | TFolder> = FileTree<TFile | TFolder>,
 > = {
-	dropDestination: TFolder | undefined;
+	dropDestination: TFolder | TTree | undefined;
 };
 
 export type OnResolveNameConflictArgs<
 	TFile extends FileNode = FileNode,
 	TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>,
+	TTree extends FileTree<TFile | TFolder> = FileTree<TFile | TFolder>,
 > = {
 	operation: "copy" | "move";
-	destination: TFolder;
+	destination: TFolder | TTree;
 	name: string;
 };
 
@@ -63,17 +67,19 @@ export type OnCircularReferenceArgs<
 export type OnCopyArgs<
 	TFile extends FileNode = FileNode,
 	TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>,
+	TTree extends FileTree<TFile | TFolder> = FileTree<TFile | TFolder>,
 > = {
 	sources: Array<TreeItemState<TFile, TFolder>>;
-	destination: TFolder;
+	destination: TFolder | TTree;
 };
 
 export type OnMoveArgs<
 	TFile extends FileNode = FileNode,
 	TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>,
+	TTree extends FileTree<TFile | TFolder> = FileTree<TFile | TFolder>,
 > = {
 	sources: Array<TreeItemState<TFile, TFolder>>;
-	destination: TFolder;
+	destination: TFolder | TTree;
 };
 
 export type OnRemoveArgs<
@@ -86,9 +92,10 @@ export type OnRemoveArgs<
 export interface TreeProps<
 	TFile extends FileNode = FileNode,
 	TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>,
+	TTree extends FileTree<TFile | TFolder> = FileTree<TFile | TFolder>,
 > extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-multiselectable"> {
 	children: Snippet<[args: TreeChildrenSnippetArgs<TFile, TFolder>]>;
-	root: TFolder;
+	root: TTree;
 	defaultSelectedIds?: Iterable<string>;
 	selectedIds?: SvelteSet<string>;
 	defaultExpandedIds?: Iterable<string>;
@@ -98,16 +105,16 @@ export interface TreeProps<
 	ref?: HTMLElement | null;
 	copyNode?: (node: TFile | TFolder) => TFile | TFolder;
 	onClipboardChange?: (args: OnClipboardChangeArgs) => void;
-	onChildrenChange?: (args: OnChildrenChangeArgs<TFile, TFolder>) => void;
-	onDropDestinationChange?: (args: OnDropDestinationChangeArgs<TFile, TFolder>) => void;
+	onChildrenChange?: (args: OnChildrenChangeArgs<TFile, TFolder, TTree>) => void;
+	onDropDestinationChange?: (args: OnDropDestinationChangeArgs<TFile, TFolder, TTree>) => void;
 	onResolveNameConflict?: (
-		args: OnResolveNameConflictArgs<TFile, TFolder>,
+		args: OnResolveNameConflictArgs<TFile, TFolder, TTree>,
 	) => MaybePromise<NameConflictResolution>;
 	onCircularReference?: (args: OnCircularReferenceArgs<TFile, TFolder>) => void;
-	canCopy?: (args: OnCopyArgs<TFile, TFolder>) => MaybePromise<boolean>;
-	onCopy?: (args: OnCopyArgs<TFile, TFolder>) => void;
-	canMove?: (args: OnMoveArgs<TFile, TFolder>) => MaybePromise<boolean>;
-	onMove?: (args: OnMoveArgs<TFile, TFolder>) => void;
+	canCopy?: (args: OnCopyArgs<TFile, TFolder, TTree>) => MaybePromise<boolean>;
+	onCopy?: (args: OnCopyArgs<TFile, TFolder, TTree>) => void;
+	canMove?: (args: OnMoveArgs<TFile, TFolder, TTree>) => MaybePromise<boolean>;
+	onMove?: (args: OnMoveArgs<TFile, TFolder, TTree>) => void;
 	canRemove?: (args: OnRemoveArgs<TFile, TFolder>) => MaybePromise<boolean>;
 	onRemove?: (args: OnRemoveArgs<TFile, TFolder>) => void;
 }

packages/svelte-file-tree/src/lib/tree.svelte.ts

@@ -1,17 +1,41 @@
 import type { SvelteSet } from "svelte/reactivity";
 
+function getTotalCount(children: Array<FileTreeNode>) {
+	let result = 0;
+	for (const child of children) {
+		result++;
+
+		if (child.type === "folder") {
+			result += child.count;
+		}
+	}
+	return result;
+}
+
+export class FileTree<TNode extends FileNode | FolderNode<TNode> = FileTreeNode> {
+	children: Array<TNode>;
+
+	constructor(children: Array<TNode>) {
+		this.children = $state(children);
+	}
+
+	readonly type = "tree";
+
+	readonly count = $derived.by(() => getTotalCount(this.children));
+}
+
 export type FileNodeProps = {
 	id: string;
 	name: string;
 };
 
 export class FileNode {
 	id: string;
-	name = $state.raw("");
+	name: string;
 
 	constructor(props: FileNodeProps) {
-		this.id = props.id;
-		this.name = props.name;
+		this.id = $state.raw(props.id);
+		this.name = $state.raw(props.name);
 	}
 
 	readonly type = "file";
@@ -25,28 +49,18 @@ export type FolderNodeProps<TNode extends FileNode | FolderNode<TNode> = FileTre
 
 export class FolderNode<TNode extends FileNode | FolderNode<TNode> = FileTreeNode> {
 	id: string;
-	name = $state.raw("");
-	children: Array<TNode> = $state([]);
+	name: string;
+	children: Array<TNode>;
 
 	constructor(props: FolderNodeProps<TNode>) {
-		this.id = props.id;
-		this.name = props.name;
-		this.children = props.children;
+		this.id = $state.raw(props.id);
+		this.name = $state.raw(props.name);
+		this.children = $state(props.children);
 	}
 
 	readonly type = "folder";
 
-	readonly count = $derived.by(() => {
-		let result = 0;
-		for (const child of this.children) {
-			result++;
-
-			if (child.type === "folder") {
-				result += child.count;
-			}
-		}
-		return result;
-	});
+	readonly count = $derived.by(() => getTotalCount(this.children));
 }
 
 export type FileTreeNode = FileNode | FolderNode<FileTreeNode>;
@@ -101,6 +115,8 @@ export class TreeItemState<
 		this.#isItemDisabled = props.isItemDisabled;
 	}
 
+	readonly type = "item";
+
 	readonly selected = $derived.by(() => this.#selectedIds().has(this.node.id));
 
 	readonly expanded = $derived.by(() => this.#expandedIds().has(this.node.id));