cleanup

Author: abdel-17

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

@@ -759,15 +759,6 @@
 							expandedIds.add(child.id);
 						}
 					}
-
-					// After the items are expanded, the tree's height changes,
-					// causing this item to move down. Scroll down to preserve
-					// the scroll position relative to this item.
-					const rectBefore = event.currentTarget.getBoundingClientRect();
-					tick().then(() => {
-						const rectAfter = event.currentTarget.getBoundingClientRect();
-						window.scrollBy(0, rectAfter.top - rectBefore.top);
-					});
 					break;
 				}
 				case "Delete": {

sites/preview/src/lib/components/Tree.svelte

@@ -1,42 +1,19 @@
 <script lang="ts">
-	import { Tree } from "svelte-file-tree";
+	import { Tree, type FileTree, type FolderNode } from "svelte-file-tree";
 	import { flip } from "svelte/animate";
 	import { SvelteSet } from "svelte/reactivity";
-	import { FileNode, FolderNode, type FileTree, type FileTreeNode } from "$lib/tree.svelte.js";
 	import TreeItem from "./TreeItem.svelte";
 	import type { TreeProps } from "./types.js";
 
 	const { tree }: TreeProps = $props();
 
 	const expandedIds = new SvelteSet<string>();
 	let dropDestination: FolderNode | FileTree | undefined = $state.raw();
-
-	function copyNode(node: FileTreeNode): FileTreeNode {
-		switch (node.type) {
-			case "file": {
-				return new FileNode({
-					id: crypto.randomUUID(),
-					name: node.name,
-					size: node.size,
-				});
-			}
-			case "folder": {
-				return new FolderNode({
-					id: crypto.randomUUID(),
-					name: node.name,
-					children: node.children.map(copyNode),
-				});
-			}
-		}
-	}
-
-	const TypedTree = Tree<FileNode, FolderNode, FileTree>;
 </script>
 
-<TypedTree
+<Tree
 	{tree}
 	{expandedIds}
-	{copyNode}
 	onChildrenChange={(args) => {
 		args.children.sort((a, b) => a.name.localeCompare(b.name));
 	}}
@@ -60,4 +37,4 @@
 			</div>
 		{/each}
 	{/snippet}
-</TypedTree>
+</Tree>

sites/preview/src/lib/components/TreeItem.svelte

@@ -1,35 +1,14 @@
-<script lang="ts" module>
+<script lang="ts">
 	import { ChevronDownIcon, FileIcon, FolderIcon, FolderOpenIcon } from "@lucide/svelte";
 	import { TreeItem } from "svelte-file-tree";
-	import type { FileNode, FolderNode } from "$lib/tree.svelte.js";
 	import type { TreeItemProps } from "./types.js";
 
-	const sizeFormatter = new Intl.NumberFormat(undefined, {
-		style: "decimal",
-		maximumFractionDigits: 2,
-	});
-
-	const sizeUnits = ["B", "KB", "MB", "GB", "TB"];
-
-	function formatSize(size: number) {
-		let unit = 0;
-		while (size >= 1024 && unit < sizeUnits.length - 1) {
-			size /= 1024;
-			unit++;
-		}
-		return `${sizeFormatter.format(size)} ${sizeUnits[unit]}`;
-	}
-</script>
-
-<script lang="ts">
 	const { item, dropDestination, onExpand, onCollapse }: TreeItemProps = $props();
 
 	let dragged = $state.raw(false);
-
-	const TypedTreeItem = TreeItem<FileNode, FolderNode>;
 </script>
 
-<TypedTreeItem
+<TreeItem
 	{item}
 	class={[
 		"relative flex items-center p-3 hover:bg-neutral-200 focus:outline-2 focus:-outline-offset-2 focus:outline-current active:bg-neutral-300 aria-selected:bg-blue-200 aria-selected:text-blue-900 aria-selected:active:bg-blue-300",
@@ -59,7 +38,7 @@
 			},
 		]}
 		onclick={(event) => {
-			event.preventDefault();
+			event.stopPropagation();
 
 			if (item.expanded) {
 				onCollapse();
@@ -72,7 +51,7 @@
 		<ChevronDownIcon role="presentation" size={20} />
 	</button>
 
-	<div class="ps-1 pe-2">
+	<div class="ps-1">
 		{#if item.node.type === "file"}
 			<FileIcon role="presentation" />
 		{:else if item.expanded}
@@ -82,5 +61,5 @@
 		{/if}
 	</div>
 
-	<span>{item.node.name}</span>
-</TypedTreeItem>
+	<div class="grow px-2">{item.node.name}</div>
+</TreeItem>

sites/preview/src/lib/components/types.ts

@@ -1,5 +1,4 @@
-import type { TreeItemState } from "svelte-file-tree";
-import type { FileNode, FileTree, FolderNode } from "$lib/tree.svelte";
+import type { FileNode, FileTree, FolderNode, TreeItemState } from "svelte-file-tree";
 
 export interface TreeProps {
 	tree: FileTree;

sites/preview/src/lib/tree.svelte.ts

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Tree from "$lib/components/Tree.svelte";
-	import { FileNode, FileTree, FolderNode, type FileTreeNode } from "$lib/tree.svelte.js";
+	import { FileNode, FileTree, FolderNode, type FileTreeNode } from "svelte-file-tree";
 	import { files } from "./files.js";
 
 	const tree = new FileTree(
@@ -16,7 +16,6 @@
 				return new FileNode({
 					id,
 					name: file.name,
-					size: file.size,
 				});
 			}
 		}),

sites/preview/src/routes/+page.svelte

@@ -1,6 +1,5 @@
 export type FileData = {
 	name: string;
-	size: number;
 };
 
 export type FolderData = {
@@ -14,27 +13,21 @@ export const files: Array<FileData | FolderData> = [
 		children: [
 			{
 				name: "App Store.app",
-				size: 10000000,
 			},
 			{
 				name: "Facetime.app",
-				size: 15000000,
 			},
 			{
 				name: "Mail.app",
-				size: 25000000,
 			},
 			{
 				name: "Messages.app",
-				size: 5000000,
 			},
 			{
 				name: "Music.app",
-				size: 50000000,
 			},
 			{
 				name: "Safari.app",
-				size: 14000000,
 			},
 		],
 	},
@@ -52,35 +45,28 @@ export const files: Array<FileData | FolderData> = [
 								children: [
 									{
 										name: "Tree.svelte",
-										size: 3000,
 									},
 									{
 										name: "TreeItem.svelte",
-										size: 1100,
 									},
 									{
 										name: "TreeItemInput.svelte",
-										size: 2000,
 									},
 								],
 							},
 							{
 								name: "index.ts",
-								size: 500,
 							},
 							{
 								name: "tree.svelte.ts",
-								size: 1000,
 							},
 						],
 					},
 					{
 						name: "package.json",
-						size: 2000,
 					},
 					{
 						name: "README.md",
-						size: 1000,
 					},
 				],
 			},
@@ -92,21 +78,17 @@ export const files: Array<FileData | FolderData> = [
 						children: [
 							{
 								name: "index.ts",
-								size: 200,
 							},
 							{
 								name: "Ripple.svelte",
-								size: 10000,
 							},
 						],
 					},
 					{
 						name: "package.json",
-						size: 3000,
 					},
 					{
 						name: "README.md",
-						size: 1000,
 					},
 				],
 			},
@@ -120,21 +102,17 @@ export const files: Array<FileData | FolderData> = [
 				children: [
 					{
 						name: "q1-goals.xlsx",
-						size: 22000000,
 					},
 					{
 						name: "timeline.pdf",
-						size: 1500000,
 					},
 				],
 			},
 			{
 				name: "meeting-notes.docx",
-				size: 10000,
 			},
 			{
 				name: "resume.pdf",
-				size: 1200000,
 			},
 		],
 	},
@@ -143,11 +121,9 @@ export const files: Array<FileData | FolderData> = [
 		children: [
 			{
 				name: "conference-slides.pptx",
-				size: 5000000,
 			},
 			{
 				name: "typescript-cheatsheet.pdf",
-				size: 50000,
 			},
 		],
 	},
@@ -156,15 +132,12 @@ export const files: Array<FileData | FolderData> = [
 		children: [
 			{
 				name: "Finding Nemo.mp4",
-				size: 1000000000,
 			},
 			{
 				name: "Inside Out.mp4",
-				size: 1000000000,
 			},
 			{
 				name: "Up.mp4",
-				size: 1000000000,
 			},
 		],
 	},
@@ -176,21 +149,17 @@ export const files: Array<FileData | FolderData> = [
 				children: [
 					{
 						name: "bug-report.png",
-						size: 300000,
 					},
 					{
 						name: "component-diagram.png",
-						size: 400000,
 					},
 					{
 						name: "design-mockup.png",
-						size: 350000,
 					},
 				],
 			},
 			{
 				name: "profile-photo.jpg",
-				size: 200000,
 			},
 		],
 	},