Merge pull request #76 from abdel-17/add-batch-option

feat: add option to control batching

Author: abdel-17

.changeset/twelve-trams-arrive.md

@@ -0,0 +1,5 @@
+---
+"svelte-file-tree": minor
+---
+
+expose option to disable batching in tree methods

package.json

@@ -13,8 +13,8 @@
 		"format:check": "pnpm --parallel --color format:check"
 	},
 	"devDependencies": {
-		"@changesets/cli": "^2.29.4",
-		"playwright": "^1.52.0",
+		"@changesets/cli": "^2.29.5",
+		"playwright": "^1.54.1",
 		"prettier-plugin-svelte": "^3.4.0"
 	},
 	"pnpm": {

packages/svelte-file-tree/package.json

@@ -34,24 +34,24 @@
 		"svelte": "^5.31.0"
 	},
 	"dependencies": {
-		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
+		"@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
 		"esm-env": "^1.2.2"
 	},
 	"devDependencies": {
-		"@sveltejs/kit": "^2.21.1",
-		"@sveltejs/package": "^2.3.11",
-		"@sveltejs/vite-plugin-svelte": "5.0.3",
-		"@types/node": "^22.15.29",
-		"@vitest/browser": "^3.1.4",
+		"@sveltejs/kit": "^2.22.5",
+		"@sveltejs/package": "^2.3.12",
+		"@sveltejs/vite-plugin-svelte": "6.0.0",
+		"@types/node": "^24.0.13",
+		"@vitest/browser": "^3.2.4",
 		"jsdom": "^26.1.0",
-		"prettier": "^3.5.3",
+		"prettier": "^3.6.2",
 		"prettier-plugin-svelte": "^3.4.0",
 		"publint": "^0.3.12",
-		"svelte": "5.33.11",
-		"svelte-check": "^4.2.1",
-		"vite": "^6.3.5",
-		"vitest": "3.1.4",
-		"vitest-browser-svelte": "^0.1.0"
+		"svelte": "5.35.6",
+		"svelte-check": "^4.2.2",
+		"vite": "^7.0.4",
+		"vitest": "3.2.4",
+		"vitest-browser-svelte": "^1.0.0"
 	},
 	"repository": {
 		"type": "git",

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

@@ -19,7 +19,11 @@
 		type DefaultTFolder,
 	} from "$lib/tree.svelte.js";
 	import { setTreeContext } from "./context.js";
-	import type { PasteOperation, TreeProps } from "./types.js";
+	import type {
+		TreeCopyToClipboardMethodOptions,
+		TreeProps,
+		TreeRemoveMethodOptions,
+	} from "./types.js";
 
 	let {
 		children,
@@ -248,13 +252,17 @@
 		}
 	}
 
-	export function copyToClipboard(itemId: string, operation: PasteOperation) {
+	export function copyToClipboard(itemId: string, options: TreeCopyToClipboardMethodOptions = {}) {
+		const { pasteOperation: newPasteOperation = "copy", batched = true } = options;
+
 		clipboardIds.clear();
-		for (const id of selectedIds) {
-			clipboardIds.add(id);
+		if (batched) {
+			for (const id of selectedIds) {
+				clipboardIds.add(id);
+			}
 		}
 		clipboardIds.add(itemId);
-		pasteOperation = operation;
+		pasteOperation = newPasteOperation;
 		onClipboardChange({ clipboardIds, pasteOperation });
 	}
 
@@ -457,24 +465,31 @@
 		}
 	}
 
-	export async function remove(item: TreeItemState<TFile, TFolder>) {
+	export async function remove(
+		item: TreeItemState<TFile, TFolder>,
+		options: TreeRemoveMethodOptions = {},
+	) {
+		const { batched = true } = options;
+
 		const removed: Array<TreeItemState<TFile, TFolder>> = [];
 		const removedOwners = new Set<TFolder | TTree>();
-		outer: for (const id of selectedIds) {
-			const current = getItem(id);
-			if (current === undefined) {
-				continue;
-			}
+		if (batched) {
+			outer: for (const id of selectedIds) {
+				const current = getItem(id);
+				if (current === undefined) {
+					continue;
+				}
 
-			for (let ancestor = current.parent; ancestor !== undefined; ancestor = ancestor.parent) {
-				if (ancestor.selected) {
-					// If an ancestor is removed, its children are removed along with it.
-					continue outer;
+				for (let ancestor = current.parent; ancestor !== undefined; ancestor = ancestor.parent) {
+					if (ancestor.selected) {
+						// If an ancestor is removed, its children are removed along with it.
+						continue outer;
+					}
 				}
-			}
 
-			removed.push(current);
-			removedOwners.add(current.parent?.node ?? root);
+				removed.push(current);
+				removedOwners.add(current.parent?.node ?? root);
+			}
 		}
 
 		if (!removed.includes(item)) {
@@ -521,10 +536,20 @@
 		}
 
 		const node = item.node;
-		for (const owner of removedOwners) {
-			owner.children = owner.children.filter(
-				(child) => !selectedIds.has(child.id) && child !== node,
-			);
+		if (batched) {
+			for (const owner of removedOwners) {
+				owner.children = owner.children.filter(
+					(child) => !selectedIds.has(child.id) && child !== node,
+				);
+				onChildrenChange({
+					operation: "remove",
+					target: owner,
+					children: owner.children,
+				});
+			}
+		} else {
+			const owner = item.parent?.node ?? root;
+			owner.children = owner.children.filter((child) => child !== node);
 			onChildrenChange({
 				operation: "remove",
 				target: owner,
@@ -845,15 +870,15 @@
 						break;
 					}
 
-					copyToClipboard(item.node.id, "copy");
+					copyToClipboard(item.node.id, { pasteOperation: "copy" });
 					break;
 				}
 				case "x": {
 					if (!isControlOrMeta(event)) {
 						break;
 					}
 
-					copyToClipboard(item.node.id, "cut");
+					copyToClipboard(item.node.id, { pasteOperation: "cut" });
 					break;
 				}
 				case "v": {

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

@@ -149,6 +149,15 @@ export interface TreeProps<
 	onDrop?: (args: DragEventArgs<TFile, TFolder, TTree>) => void;
 }
 
+export type TreeCopyToClipboardMethodOptions = {
+	pasteOperation?: PasteOperation;
+	batched?: boolean;
+};
+
+export type TreeRemoveMethodOptions = {
+	batched?: boolean;
+};
+
 export interface TreeItemProps<
 	TFile extends FileNode = FileNode,
 	TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>,