Merge pull request #37 from abdel-17/preserve-state

Preserve State

Author: abdel-17

eslint.config.js

@@ -14,9 +14,11 @@ export default tseslint.config(
 		languageOptions: {
 			globals: {
 				...globals.browser,
+				...globals.node,
 			},
 			parserOptions: {
 				projectService: true,
+				tsconfigRootDir: import.meta.dirname,
 				extraFileExtensions,
 			},
 		},
@@ -33,7 +35,6 @@ export default tseslint.config(
 	},
 	{
 		rules: {
-			"@typescript-eslint/no-non-null-assertion": "off",
 			"@typescript-eslint/no-unnecessary-condition": [
 				"error",
 				{
@@ -54,27 +55,19 @@ export default tseslint.config(
 				},
 			],
 			"@typescript-eslint/consistent-type-definitions": "off",
-			"@typescript-eslint/unbound-method": "off",
-			"@typescript-eslint/no-namespace": [
+			"@typescript-eslint/strict-boolean-expressions": [
 				"error",
 				{
-					allowDeclarations: true,
+					allowNullableObject: false,
+					allowNumber: false,
+					allowString: false,
 				},
 			],
 		},
 	},
 	{
 		files: ["**/*.svelte"],
-		rules: {
-			// Typed linting is not fully supported in Svelte files,
-			// which causes a lot of false positives.
-			"@typescript-eslint/no-confusing-void-expression": "off",
-			"@typescript-eslint/no-unsafe-argument": "off",
-			"@typescript-eslint/no-unsafe-assignment": "off",
-			"@typescript-eslint/no-unsafe-call": "off",
-			"@typescript-eslint/no-unsafe-member-access": "off",
-			"@typescript-eslint/no-unsafe-return": "off",
-		},
+		extends: [tseslint.configs.disableTypeChecked],
 	},
 	{
 		ignores: ["**/.svelte-kit", "**/dist", "**/build"],

packages/svelte-file-tree/package.json

@@ -14,28 +14,27 @@
 		"test": "vitest --run",
 		"test:watch": "vitest --watch"
 	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"sideEffects": [
-		"**/*.css"
-	],
 	"files": [
 		"dist",
 		"!dist/**/*.spec.*",
 		"!dist/**/*.test.*"
 	],
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/abdel-17/svelte-file-tree.git",
-		"directory": "packages/svelte-file-tree"
+	"sideEffects": [
+		"**/*.css"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
 	},
 	"peerDependencies": {
 		"svelte": "^5.20.0"
 	},
+	"dependencies": {
+		"esm-env": "^1.2.2",
+		"svelte-signals": "^0.0.2"
+	},
 	"devDependencies": {
 		"@sveltejs/kit": "^2.18.0",
 		"@sveltejs/package": "^2.3.10",
@@ -52,7 +51,9 @@
 		"vitest": "3.0.7",
 		"vitest-browser-svelte": "^0.1.0"
 	},
-	"dependencies": {
-		"esm-env": "^1.2.2"
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/abdel-17/svelte-file-tree.git",
+		"directory": "packages/svelte-file-tree"
 	}
 }

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

@@ -1,64 +1,74 @@
-<script lang="ts" module>
-	import type { FileTree } from "$lib/tree.svelte.js";
-	import { DEV } from "esm-env";
-	import { getContext, hasContext, setContext } from "svelte";
-	import TreeItemContextProvider from "./TreeItemContextProvider.svelte";
-	import { TreeContext } from "./state.svelte.js";
+<script lang="ts">
+	import { SvelteSet } from "svelte/reactivity";
+	import TreeItemProvider from "./TreeItemProvider.svelte";
+	import { createTreeState } from "./state.svelte.js";
 	import type { TreeProps } from "./types.js";
 
-	const CONTEXT_KEY = Symbol("Tree");
-
-	export function getTreeContext(): TreeContext {
-		if (DEV && !hasContext(CONTEXT_KEY)) {
-			throw new Error("No parent <Tree> found");
-		}
-		return getContext(CONTEXT_KEY);
-	}
-</script>
-
-<script lang="ts">
 	const defaultId = $props.id();
 	let {
 		tree,
 		item,
+		defaultSelectedIds,
+		selectedIds = new SvelteSet(defaultSelectedIds),
+		defaultExpandedIds,
+		expandedIds = new SvelteSet(defaultExpandedIds),
+		defaultClipboardIds,
+		clipboardIds = new SvelteSet(defaultClipboardIds),
 		pasteOperation = $bindable(),
-		editable = false,
-		disabled = false,
+		isItemEditable = false,
+		isItemDisabled = false,
 		id = defaultId,
-		element = $bindable(null),
+		ref = $bindable(null),
 		generateCopyId = () => crypto.randomUUID(),
-		onRenameItem = (args) => {
-			args.target.name = args.name;
+		onRenameItem = ({ target, name }) => {
+			target.name = name;
 			return true;
 		},
 		onRenameError,
-		onMoveItems = (args) => {
-			for (const { target, children } of args.updates) {
+		onMoveItems = ({ updates }) => {
+			for (const { target, children } of updates) {
 				target.children = children;
 			}
 			return true;
 		},
 		onMoveError,
-		onInsertItems = (args) => {
-			args.target.children.splice(args.start, 0, ...args.inserted);
+		onInsertItems = ({ target, start, inserted }) => {
+			target.children.splice(start, 0, ...inserted);
 			return true;
 		},
 		onNameConflict = () => "cancel",
-		onDeleteItems = (args) => {
-			for (const { target, children } of args.updates) {
+		onDeleteItems = ({ updates }) => {
+			for (const { target, children } of updates) {
 				target.children = children;
 			}
 			return true;
 		},
 		...rest
 	}: TreeProps = $props();
 
-	const context = new TreeContext({
+	const treeState = createTreeState({
 		tree: () => tree,
+		selectedIds: () => selectedIds,
+		expandedIds: () => expandedIds,
+		clipboardIds: () => clipboardIds,
 		pasteOperation: () => pasteOperation,
 		setPasteOperation: (value) => {
 			pasteOperation = value;
 		},
+		isItemEditable: (node) => {
+			if (typeof isItemEditable === "function") {
+				return isItemEditable(node);
+			}
+
+			return isItemEditable;
+		},
+		isItemDisabled: (node) => {
+			if (typeof isItemDisabled === "function") {
+				return isItemDisabled(node);
+			}
+
+			return isItemDisabled;
+		},
 		id: () => id,
 		generateCopyId: () => generateCopyId(),
 		onRenameItem: (args) => onRenameItem(args),
@@ -69,28 +79,14 @@
 		onNameConflict: (args) => onNameConflict(args),
 		onDeleteItems: (args) => onDeleteItems(args),
 	});
-	setContext(CONTEXT_KEY, context);
 </script>
 
-{#snippet items(nodes: Array<FileTree.Node>)}
-	{#each nodes as node, index (node.id)}
-		<TreeItemContextProvider
-			{node}
-			{index}
-			editable={typeof editable === "function" ? editable(node) : editable}
-			disabled={typeof disabled === "function" ? disabled(node) : disabled}
-		>
-			{#snippet children(args)}
-				{@render item(args)}
-
-				{#if node.type === "folder" && node.expanded}
-					{@render items(node.children)}
-				{/if}
-			{/snippet}
-		</TreeItemContextProvider>
+<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(i)}
+			{/if}
+		</TreeItemProvider>
 	{/each}
-{/snippet}
-
-<div {...rest} bind:this={element} {id} role="tree" aria-multiselectable="true">
-	{@render items(tree.children)}
 </div>

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

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	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 function getTreeItemProviderContext(): TreeItemProviderContext {
+		if (DEV && !hasContext(CONTEXT_KEY)) {
+			throw new Error("No parent <Tree> found");
+		}
+
+		return getContext(CONTEXT_KEY);
+	}
+
+	function setTreeItemProviderContext(context: TreeItemProviderContext): void {
+		setContext(CONTEXT_KEY, context);
+	}
+</script>
+
+<script lang="ts">
+	const {
+		treeState,
+		item,
+		children,
+	}: {
+		treeState: TreeState;
+		item: TreeItemState;
+		children: Snippet;
+	} = $props();
+
+	setTreeItemProviderContext({
+		treeState,
+		item: () => item,
+	});
+
+	$effect(() => {
+		return () => {
+			treeState.onDeleteItem(item.node.id);
+		};
+	});
+</script>
+
+{@render children()}