Merge pull request #13 from abdel-17/setup-biome

Add Biome

Author: Abdelrahman

.github/workflows/ci.yml

@@ -3,7 +3,7 @@ name: CI
 on:
   push:
     branches:
-      - main
+      - master
   pull_request:
 
 concurrency:
@@ -12,8 +12,8 @@ concurrency:
 
 jobs:
   check:
-    name: Svelte Check
-    runs-on: macos-latest
+    name: Check
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
@@ -28,12 +28,11 @@ jobs:
       - name: Build
         run: pnpm build
 
-      - name: Run svelte-check
-        run: pnpm check
+      - run: pnpm check
 
   test:
-    runs-on: macos-latest
     name: Test
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
@@ -50,9 +49,9 @@ jobs:
 
       - run: pnpm test
 
-  format:
-    runs-on: macos-latest
-    name: Format
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
@@ -64,4 +63,4 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - run: pnpm format:check
+      - run: pnpm lint:ci

biome.json

@@ -0,0 +1,37 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab",
+		"lineWidth": 100
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"style": {
+				"noNonNullAssertion": "off"
+			}
+		}
+	},
+	"organizeImports": {
+		"enabled": true
+	},
+	"overrides": [
+		{
+			"include": ["*.svelte"],
+			"linter": {
+				"rules": {
+					"style": {
+						"useConst": "off"
+					}
+				}
+			}
+		}
+	],
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true
+	}
+}

package.json

@@ -6,11 +6,13 @@
 	"scripts": {
 		"build": "pnpm -r build",
 		"check": "pnpm -r check",
-		"format": "pnpm -r format",
-		"format:check": "pnpm -r format:check",
+		"lint": "pnpm -r lint",
+		"lint:fix": "pnpm -r lint:fix",
+		"lint:ci": "pnpm -r lint:ci",
 		"test": "pnpm -r test"
 	},
 	"devDependencies": {
+		"@biomejs/biome": "1.9.4",
 		"@changesets/cli": "^2.27.11",
 		"playwright": "^1.49.0"
 	},

packages/svelte-file-tree/.prettierrc.json

@@ -0,0 +1,4 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"extends": ["../../biome.json"]
+}

packages/svelte-file-tree/biome.json

@@ -11,6 +11,9 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
 		"format:check": "prettier --check .",
+		"lint": "biome check",
+		"lint:fix": "biome check --fix",
+		"lint:ci": "biome ci",
 		"test": "vitest --run",
 		"test:watch": "vitest --watch"
 	},
@@ -20,14 +23,8 @@
 			"svelte": "./dist/index.js"
 		}
 	},
-	"sideEffects": [
-		"**/*.css"
-	],
-	"files": [
-		"dist",
-		"!dist/**/*.spec.*",
-		"!dist/**/*.test.*"
-	],
+	"sideEffects": ["**/*.css"],
+	"files": ["dist", "!dist/**/*.spec.*", "!dist/**/*.test.*"],
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/abdel-17/svelte-file-tree",
@@ -40,12 +37,8 @@
 		"@sveltejs/kit": "^2.9.0",
 		"@sveltejs/package": "^2.3.7",
 		"@sveltejs/vite-plugin-svelte": "4.0.2",
-		"@types/node": "^22.10.1",
 		"@vitest/browser": "^2.1.8",
 		"jsdom": "^25.0.1",
-		"playwright": "^1.49.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.2",
 		"publint": "^0.2.12",
 		"svelte": "5.7.0",
 		"svelte-check": "^4.1.1",

packages/svelte-file-tree/package.json

@@ -1,42 +1,42 @@
 <script lang="ts">
-	import type { FileTreeNode } from "$lib/tree.svelte.js";
-	import { TreeState } from "./context.svelte.js";
-	import TreeItemProvider from "./TreeItemProvider.svelte";
-	import type { TreeProps } from "./types.js";
+import type { FileTreeNode } from "$lib/tree.svelte.js";
+import TreeItemProvider from "./TreeItemProvider.svelte";
+import { TreeState } from "./context.svelte.js";
+import type { TreeProps } from "./types.js";
 
-	let {
-		tree,
-		item,
-		id = crypto.randomUUID(),
-		element = $bindable(null),
-		onMoveItems,
-		onInsertItems,
-		onDeleteItems,
-		onRenameItem,
-		onRenameError,
-		...attributes
-	}: TreeProps = $props();
+let {
+	tree,
+	item,
+	id = crypto.randomUUID(),
+	element = $bindable(null),
+	onMoveItems,
+	onInsertItems,
+	onDeleteItems,
+	onRenameItem,
+	onRenameError,
+	...attributes
+}: TreeProps = $props();
 
-	const treeState = new TreeState({
-		getElementId: () => id,
-		callbacks: {
-			onMoveItems(nodes, start, count) {
-				onMoveItems?.(nodes, start, count);
-			},
-			onInsertItems(nodes, start, count) {
-				onInsertItems?.(nodes, start, count);
-			},
-			onDeleteItems(nodes) {
-				onDeleteItems?.(nodes);
-			},
-			onRenameItem(node) {
-				onRenameItem?.(node);
-			},
-			onRenameError(node, error) {
-				onRenameError?.(node, error);
-			},
+const treeState = new TreeState({
+	getElementId: () => id,
+	callbacks: {
+		onMoveItems(nodes, start, count) {
+			onMoveItems?.(nodes, start, count);
 		},
-	});
+		onInsertItems(nodes, start, count) {
+			onInsertItems?.(nodes, start, count);
+		},
+		onDeleteItems(nodes) {
+			onDeleteItems?.(nodes);
+		},
+		onRenameItem(node) {
+			onRenameItem?.(node);
+		},
+		onRenameError(node, error) {
+			onRenameError?.(node, error);
+		},
+	},
+});
 </script>
 
 {#snippet items(nodes: FileTreeNode[])}

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

@@ -1,24 +1,24 @@
 <script lang="ts">
-	import type { FileTreeNode } from "$lib/tree.svelte.js";
-	import type { Snippet } from "svelte";
-	import { TreeItemContext, type TreeState } from "./context.svelte.js";
+import type { FileTreeNode } from "$lib/tree.svelte.js";
+import type { Snippet } from "svelte";
+import { TreeItemContext, type TreeState } from "./context.svelte.js";
 
-	const {
-		treeState,
-		node,
-		index,
-		children,
-	}: {
-		treeState: TreeState;
-		node: FileTreeNode;
-		index: number;
-		children: Snippet<[context: TreeItemContext]>;
-	} = $props();
+const {
+	treeState,
+	node,
+	index,
+	children,
+}: {
+	treeState: TreeState;
+	node: FileTreeNode;
+	index: number;
+	children: Snippet<[context: TreeItemContext]>;
+} = $props();
 
-	const context = TreeItemContext.set(treeState, {
-		getNode: () => node,
-		getIndex: () => index,
-	});
+const context = TreeItemContext.set(treeState, {
+	getNode: () => node,
+	getIndex: () => index,
+});
 </script>
 
 {@render children(context)}

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

@@ -92,7 +92,7 @@ export class TreeItemContext {
 	static readonly #key = Symbol("TreeItemContext");
 
 	static get(): TreeItemContext {
-		const context: TreeItemContext | undefined = getContext(this.#key);
+		const context: TreeItemContext | undefined = getContext(TreeItemContext.#key);
 		if (context === undefined) {
 			throw new Error("No parent <Tree> found");
 		}
@@ -101,7 +101,7 @@ export class TreeItemContext {
 
 	static set(treeState: TreeState, props: TreeItemContextProps): TreeItemContext {
 		const context = new TreeItemContext(treeState, props);
-		setContext(this.#key, context);
+		setContext(TreeItemContext.#key, context);
 
 		$effect(() => {
 			const node = context.getNode();
@@ -493,15 +493,15 @@ export class TreeItemContext {
 		let focusTarget: EnumeratedTreeItem | undefined = { node, index };
 		while (true) {
 			let nearestUnselected: EnumeratedTreeItem | undefined = focusTarget;
-			while (nearestUnselected !== undefined && nearestUnselected.node.selected) {
+			while (nearestUnselected?.node.selected) {
 				// The current item will be deleted, so we shouldn't traverse its children.
 				tree.expanded.delete(nearestUnselected.node.id);
 				nearestUnselected = treeState.getNextItem(nearestUnselected);
 			}
 
 			if (nearestUnselected === undefined) {
 				nearestUnselected = focusTarget;
-				while (nearestUnselected !== undefined && nearestUnselected.node.selected) {
+				while (nearestUnselected?.node.selected) {
 					nearestUnselected = treeState.getPreviousItem(nearestUnselected);
 				}
 			}
@@ -897,11 +897,11 @@ function getDropPosition(node: FileTreeNode, rect: DOMRect, clientY: number): Tr
 		case "folder": {
 			if (clientY < rect.top + rect.height / 3) {
 				return "before";
-			} else if (clientY > rect.bottom - rect.height / 3) {
+			}
+			if (clientY > rect.bottom - rect.height / 3) {
 				return "after";
-			} else {
-				return "inside";
 			}
+			return "inside";
 		}
 	}
 }