chore: simplify

Author: abdel-17

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

@@ -9,11 +9,11 @@ export function isControlOrMeta(event: KeyboardEvent | MouseEvent): boolean {
 	return event.ctrlKey;
 }
 
-export function composeEventHandlers<TEvent extends Event, TTarget extends EventTarget>(
-	a: EventHandler<TEvent, TTarget> | null | undefined,
-	b: EventHandler<TEvent, TTarget>,
-): EventHandler<TEvent, TTarget> {
-	return (event) => {
+export function composeEventHandlers<TEvent extends Event>(
+	a: ((event: TEvent) => void) | null | undefined,
+	b: (event: TEvent) => void,
+) {
+	return (event: TEvent) => {
 		if (a != null) {
 			a(event);
 

sites/preview/src/lib/components/tree/NameConflictDialog.svelte

@@ -15,7 +15,7 @@
 		onClose: (result: NameConflictResolution) => void;
 	} = $props();
 
-	function handleOpenChange(open: boolean): void {
+	function handleOpenChange(open: boolean) {
 		if (!open) {
 			onClose("cancel");
 		}

sites/preview/src/lib/components/tree/NameFormDialog.svelte

@@ -18,7 +18,7 @@
 		onClose: () => void;
 	} = $props();
 
-	function handleOpenChange(open: boolean): void {
+	function handleOpenChange(open: boolean) {
 		if (!open) {
 			onClose();
 		}

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

@@ -75,7 +75,7 @@
 		ref: () => fileInput,
 	});
 
-	const pasteDirection: string | undefined = $derived.by(() => {
+	const pasteDirection = $derived.by(() => {
 		if (pasteOperation === undefined || focusedItemId === undefined) {
 			return;
 		}
@@ -87,11 +87,11 @@
 		return "After";
 	});
 
-	function showAlreadyExistsToast(name: string): void {
+	function showAlreadyExistsToast(name: string) {
 		toast.error(`An item with the name "${name}" already exists`);
 	}
 
-	function handleRename(target: TreeItemState): void {
+	function handleRename(target: TreeItemState) {
 		nameFormDialogState.show({
 			title: "Rename",
 			name: target.node.name,
@@ -117,7 +117,7 @@
 		});
 	}
 
-	async function handleUploadFiles({ target, files }: UploadFilesArgs): Promise<void> {
+	async function handleUploadFiles({ target, files }: UploadFilesArgs) {
 		for (const child of target.children) {
 			for (const file of files) {
 				if (child.name === file.name) {
@@ -178,11 +178,8 @@
 		}
 	};
 
-	function handleResolveNameConflict({
-		operation,
-		name,
-	}: ResolveNameConflictArgs): Promise<NameConflictResolution> {
-		return new Promise((resolve) => {
+	function handleResolveNameConflict({ operation, name }: ResolveNameConflictArgs) {
+		return new Promise<NameConflictResolution>((resolve) => {
 			let title: string;
 			switch (operation) {
 				case "move": {
@@ -206,19 +203,19 @@
 	function handleCircularReferenceError({
 		target,
 		position,
-	}: CircularReferenceErrorArgs<FileTreeNode>): void {
+	}: CircularReferenceErrorArgs<FileTreeNode>) {
 		toast.error(`Cannot move "${target.name}" ${position} itself`);
 	}
 
-	function handleExpand(target: TreeItemState): void {
+	function handleExpand(target: TreeItemState) {
 		expandedIds.add(target.node.id);
 	}
 
-	function handleCollapse(target: TreeItemState): void {
+	function handleCollapse(target: TreeItemState) {
 		expandedIds.delete(target.node.id);
 	}
 
-	function handleItemFocusIn(target: TreeItemState): void {
+	function handleItemFocusIn(target: TreeItemState) {
 		focusedItemId = target.node.id;
 	}
 
@@ -269,7 +266,7 @@
 		event.preventDefault();
 	};
 
-	function handleCleanup(target: TreeItemState): void {
+	function handleCleanup(target: TreeItemState) {
 		if (focusedItemId === target.node.id) {
 			focusedItemId = undefined;
 		}
@@ -411,8 +408,8 @@
 	type="file"
 	multiple
 	class="hidden"
-	onchange={fileInputState.onChange}
-	oncancel={fileInputState.onCancel}
+	onchange={fileInputState.onchange}
+	oncancel={fileInputState.oncancel}
 />
 
 <style>

sites/preview/src/lib/components/tree/TreeContextMenu.svelte

@@ -28,11 +28,11 @@
 		onClose: () => void;
 	} = $props();
 
-	function open(): boolean {
+	function open() {
 		return target !== undefined;
 	}
 
-	function handleOpenChange(open: boolean): void {
+	function handleOpenChange(open: boolean) {
 		if (!open) {
 			onClose();
 		}

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

@@ -9,31 +9,29 @@ export function createNameConflictDialogState() {
 	let description = $state.raw("");
 	let onClose: ((result: NameConflictResolution) => void) | undefined;
 
-	function show(args: {
+	type ShowArgs = {
 		title: string;
 		description: string;
 		onClose: (result: NameConflictResolution) => void;
-	}): void {
-		open = true;
-		title = args.title;
-		description = args.description;
-		onClose = args.onClose;
-	}
-
-	function close(result: NameConflictResolution): void {
-		open = false;
-		title = "";
-		description = "";
-		onClose!(result);
-		onClose = undefined;
-	}
+	};
 
 	return {
 		open: () => open,
 		title: () => title,
 		description: () => description,
-		show,
-		close,
+		show: (args: ShowArgs) => {
+			open = true;
+			title = args.title;
+			description = args.description;
+			onClose = args.onClose;
+		},
+		close: (result: NameConflictResolution) => {
+			open = false;
+			title = "";
+			description = "";
+			onClose!(result);
+			onClose = undefined;
+		},
 	};
 }
 
@@ -43,36 +41,32 @@ export function createNameFormDialogState() {
 	let title = $state.raw("");
 	let onSubmit: ((name: string) => void) | undefined;
 
-	function setName(value: string): void {
-		name = value;
-	}
-
-	function show(args: { title: string; onSubmit: (name: string) => void; name?: string }): void {
-		name = args.name ?? "";
-		open = true;
-		title = args.title;
-		onSubmit = args.onSubmit;
-	}
-
-	function submit(): void {
-		onSubmit!(name);
-	}
-
-	function close(): void {
-		name = "";
-		open = false;
-		title = "";
-		onSubmit = undefined;
-	}
+	type ShowArgs = {
+		title: string;
+		onSubmit: (name: string) => void;
+		name?: string;
+	};
 
 	return {
 		name: () => name,
-		setName,
+		setName: (value: string) => {
+			name = value;
+		},
 		open: () => open,
 		title: () => title,
-		show,
-		submit,
-		close,
+		show: (args: ShowArgs) => {
+			name = args.name ?? "";
+			open = true;
+			title = args.title;
+			onSubmit = args.onSubmit;
+		},
+		submit: () => onSubmit!(name),
+		close: () => {
+			name = "";
+			open = false;
+			title = "";
+			onSubmit = undefined;
+		},
 	};
 }
 
@@ -105,11 +99,7 @@ export function createContextMenuState({
 }) {
 	let target: TreeContextMenuTarget | undefined = $state.raw();
 
-	function setTarget(value: TreeContextMenuTarget): void {
-		target = value;
-	}
-
-	function item(): TreeItemState {
+	function item() {
 		switch (target!.type) {
 			case "tree": {
 				throw new Error("Expected an item");
@@ -120,7 +110,7 @@ export function createContextMenuState({
 		}
 	}
 
-	function folderOrTree(): FolderNode | FileTree {
+	function folderOrTree() {
 		switch (target!.type) {
 			case "tree": {
 				return target!.tree();
@@ -135,61 +125,32 @@ export function createContextMenuState({
 		}
 	}
 
-	function rename(): void {
-		onRename(item());
-	}
-
-	function copy(): void {
-		onCopy(item());
-	}
-
-	function cut(): void {
-		onCut(item());
-	}
-
-	function paste(): void {
-		onPaste(item());
-	}
-
-	function remove(): void {
-		onRemove(item());
-	}
-
-	function createFolder(): void {
-		onCreateFolder(folderOrTree());
-	}
-
-	function uploadFiles(): void {
-		onUploadFiles(folderOrTree());
-	}
-
-	function close(): void {
-		target = undefined;
-	}
-
 	return {
 		target: () => target,
-		setTarget,
-		rename,
-		copy,
-		cut,
-		paste,
-		remove,
-		createFolder,
-		uploadFiles,
-		close,
+		setTarget: (value: TreeContextMenuTarget) => {
+			target = value;
+		},
+		rename: () => onRename(item()),
+		copy: () => onCopy(item()),
+		cut: () => onCut(item()),
+		paste: () => onPaste(item()),
+		remove: () => onRemove(item()),
+		createFolder: () => onCreateFolder(folderOrTree()),
+		uploadFiles: () => onUploadFiles(folderOrTree()),
+		close: () => {
+			target = undefined;
+		},
 	};
 }
 
 export function createFileInputState({ ref }: { ref: () => HTMLInputElement | null }) {
 	let onPick: ((files: FileList) => void) | undefined;
 
-	function showPicker(args: { onPick: (files: FileList) => void }): void {
-		onPick = args.onPick;
-		ref()!.click();
-	}
+	type ShowPickerArgs = {
+		onPick: (files: FileList) => void;
+	};
 
-	const onChange: EventHandler<Event, HTMLInputElement> = (event) => {
+	const onchange: EventHandler<Event, HTMLInputElement> = (event) => {
 		const { files } = event.currentTarget;
 		if (files !== null && files.length !== 0) {
 			onPick!(files);
@@ -199,13 +160,16 @@ export function createFileInputState({ ref }: { ref: () => HTMLInputElement | nu
 		event.currentTarget.value = "";
 	};
 
-	const onCancel: EventHandler<Event, HTMLInputElement> = () => {
+	const oncancel: EventHandler<Event, HTMLInputElement> = () => {
 		onPick = undefined;
 	};
 
 	return {
-		showPicker,
-		onChange,
-		onCancel,
+		showPicker: (args: ShowPickerArgs) => {
+			onPick = args.onPick;
+			ref()!.click();
+		},
+		onchange,
+		oncancel,
 	};
 }

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

@@ -1,6 +1,6 @@
 import * as tree from "svelte-file-tree";
 
-function getTotalSize(nodes: Array<FileTreeNode>): number {
+function getTotalSize(nodes: Array<FileTreeNode>) {
 	let size = 0;
 	for (const node of nodes) {
 		size += node.size;
@@ -24,7 +24,7 @@ export class FileNode extends tree.FileNode {
 		this.size = props.size;
 	}
 
-	readonly kind: string = $derived.by(() => {
+	readonly kind = $derived.by(() => {
 		const { name } = this;
 		const dotIndex = name.lastIndexOf(".");
 		if (dotIndex === -1) {
@@ -225,7 +225,7 @@ export class FileNode extends tree.FileNode {
 		}
 	});
 
-	copy(): FileNode {
+	copy() {
 		return new FileNode({
 			id: crypto.randomUUID(),
 			name: this.name,