Switch to Biome (#65)

* Switch to Biome

* Update Bun lockfile

* Fix TS

* Fix Biome errors

* Update ci.yml

.github/workflows/ci.yml

@@ -24,7 +24,7 @@ jobs:
       - run: bun run typecheck
 
   test:
-    name: Unit and Integration Tests
+    name: Tests
     runs-on: ubuntu-latest
     timeout-minutes: 1
     steps:
@@ -33,13 +33,12 @@ jobs:
       - run: bun install
       - run: bun run test:coverage
 
-  lint:
-    name: Linter
+  quality:
+    name: Code Quality
     runs-on: ubuntu-latest
     timeout-minutes: 1
     steps:
       - uses: actions/checkout@v3
       - uses: oven-sh/setup-bun@v1
       - run: bun install
-      - run: bun run build
-      - run: bun run lint
+      - run: bun run check

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+	"recommendations": ["biomejs.biome"]
+}

.vscode/settings.json

@@ -0,0 +1,24 @@
+{
+	"[javascript]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[javascriptreact]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[json]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[jsonc]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[typescript]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"editor.codeActionsOnSave": {
+		"source.organizeImports.biome": "explicit",
+		"quickfix.biome": "explicit"
+	}
+}

app/components/icon.tsx

@@ -8,6 +8,7 @@ export default function Icon({
 	...props
 }: SVGProps<SVGSVGElement> & { icon: IconName }) {
 	return (
+		// biome-ignore lint/a11y/noSvgWithoutTitle: It can be a prop
 		<svg {...props}>
 			<use href={`${href}#${icon}`} />
 		</svg>

app/components/md/fence.tsx

@@ -37,7 +37,7 @@ export function Fence({ children, language, path }: FenceProps) {
 		return <FileTree content={children} />;
 	}
 
-	let content: string = "";
+	let content = "";
 	try {
 		content = Prism.highlight(children, Prism.languages[language], language);
 	} catch (error) {
@@ -60,6 +60,7 @@ export function Fence({ children, language, path }: FenceProps) {
 					<span className="text-xs leading-none">{path}</span>
 				</header>
 			)}
+			{/* biome-ignore lint/security/noDangerouslySetInnerHtml: Required to pass highlighted code here */}
 			<code dangerouslySetInnerHTML={{ __html: content }} />
 		</pre>
 	);
@@ -81,8 +82,8 @@ function FileTree({ content }: { content: string }) {
 
 	return (
 		<ul className="file-tree">
-			{tree.map((node, index) => (
-				<FileNode key={index} node={node} />
+			{tree.map((node) => (
+				<FileNode key={node.name} node={node} />
 			))}
 		</ul>
 	);
@@ -95,8 +96,8 @@ function FileNode({ node }: { node: FileNode }) {
 		<li className="directory">
 			<span className="directory-name">{node.name}</span>
 			<ul className="directory-contents">
-				{node.children?.map((child, index) => (
-					<FileNode key={index} node={child} />
+				{node.children?.map((child) => (
+					<FileNode key={child.name} node={child} />
 				))}
 			</ul>
 		</li>

app/entry.client.tsx

@@ -3,7 +3,7 @@ import type { i18n } from "i18next";
 import { RemixBrowser } from "@remix-run/react";
 import { createInstance } from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
-import { startTransition, StrictMode } from "react";
+import { StrictMode, startTransition } from "react";
 import { hydrateRoot } from "react-dom/client";
 import { I18nextProvider, initReactI18next } from "react-i18next";
 import { getInitialNamespaces } from "remix-i18next/client";

app/entry.server.tsx

@@ -51,6 +51,7 @@ export default async function handleRequest(
 				onError(error) {
 					console.error("renderToReadableStream error");
 					console.error(error);
+					// biome-ignore lint/style/noParameterAssign: It's ok
 					status = 500;
 				},
 			},

app/models/article.server.ts

@@ -29,13 +29,6 @@ interface Services {
 export class Article extends Post<ArticleMeta> {
 	override readonly type = "article" as const;
 
-	constructor(
-		services: Services,
-		input: PostAttributes<ArticleMeta> | PostAttributes<ArticleMeta>,
-	) {
-		super(services, input);
-	}
-
 	get title() {
 		return this.meta.title;
 	}
@@ -96,13 +89,13 @@ export class Article extends Post<ArticleMeta> {
 
 	static override async list(services: Services) {
 		let posts = await Post.list<ArticleMeta>(services, "article");
-		return posts.map((post) => new this(services, post));
+		return posts.map((post) => new Article(services, post));
 	}
 
-	static async search(services: Services, query: string) {
+	static async search(services: Services, initialQuery: string) {
 		let articles = await Article.list(services);
 
-		query = query.trim().toLowerCase();
+		let query = initialQuery.trim().toLowerCase();
 
 		let fuse = new Fuse(articles, {
 			keys: ["title", "content"],
@@ -115,7 +108,7 @@ export class Article extends Post<ArticleMeta> {
 
 	static async findById(services: Services, id: UUID) {
 		let post = await Post.show<ArticleMeta>(services, "article", id);
-		return new this(services, post);
+		return new Article(services, post);
 	}
 
 	static override async show(
@@ -133,7 +126,7 @@ export class Article extends Post<ArticleMeta> {
 		assertUUID(result?.postId);
 
 		let post = await Post.show<ArticleMeta>(services, "article", result.postId);
-		return new this(services, post);
+		return new Article(services, post);
 	}
 
 	static override async create(services: Services, input: InsertArticle) {
@@ -142,6 +135,6 @@ export class Article extends Post<ArticleMeta> {
 			type: "article",
 		});
 
-		return new this(services, post);
+		return new Article(services, post);
 	}
 }

app/models/glossary.server.ts

@@ -23,13 +23,6 @@ interface Services {
 export class Glossary extends Post<GlossaryMeta> {
 	override readonly type = "glossary" as const;
 
-	constructor(
-		services: Services,
-		input: PostAttributes<GlossaryMeta> | PostAttributes<GlossaryMeta>,
-	) {
-		super(services, input);
-	}
-
 	get slug() {
 		return this.meta.slug;
 	}
@@ -63,16 +56,16 @@ export class Glossary extends Post<GlossaryMeta> {
 
 	static override async list(services: Services) {
 		let posts = await Post.list<GlossaryMeta>(services, "glossary");
-		return posts.map((post) => new this(services, post));
+		return posts.map((post) => new Glossary(services, post));
 	}
 
 	static override async show(services: Services, id: UUID) {
 		let post = await Post.show<GlossaryMeta>(services, "glossary", id);
-		return new this(services, post);
+		return new Glossary(services, post);
 	}
 
 	static override async create(services: Services, input: InsertGlossary) {
-		return new this(
+		return new Glossary(
 			services,
 			await Post.create<GlossaryMeta>(services, { ...input, type: "glossary" }),
 		);
@@ -88,14 +81,14 @@ export class Glossary extends Post<GlossaryMeta> {
 	static async search(services: Services, query: string) {
 		let glossary = await Glossary.list(services);
 
-		query = query.trim().toLowerCase();
+		let trimmedQuery = query.trim().toLowerCase();
 
 		let fuse = new Fuse(glossary, {
 			keys: ["term", "title", "definition"],
 			includeScore: true,
 			findAllMatches: false,
 		});
 
-		return fuse.search(query);
+		return fuse.search(trimmedQuery);
 	}
 }

app/models/like.server.ts

@@ -20,13 +20,6 @@ type InsertLike = Omit<Tables.InsertPost, "id" | "type"> & LikeMeta;
 export class Like extends Post<LikeMeta> {
 	override readonly type = "like" as const;
 
-	constructor(
-		services: Services,
-		input: Post<LikeMeta> | PostAttributes<LikeMeta>,
-	) {
-		super(services, input);
-	}
-
 	get title() {
 		return this.meta.title;
 	}
@@ -52,15 +45,15 @@ export class Like extends Post<LikeMeta> {
 	static async search({ db }: Services, query: string) {
 		let likes = await Like.list({ db });
 
-		query = query.trim().toLowerCase();
+		let trimmedQuery = query.trim().toLowerCase();
 
 		let fuse = new Fuse(likes, {
 			keys: ["title"],
 			includeScore: true,
 			findAllMatches: false,
 		});
 
-		return fuse.search(query);
+		return fuse.search(trimmedQuery);
 	}
 
 	static override async show({ db }: Services, id: Tables.SelectPost["id"]) {

app/models/post.server.ts

@@ -100,7 +100,7 @@ export class Post<Meta extends BaseMeta> {
 
 		return posts.map((post) => {
 			assertUUID(post.authorId);
-			return new this(
+			return new Post(
 				{ db },
 				{
 					id: post.id,
@@ -134,7 +134,7 @@ export class Post<Meta extends BaseMeta> {
 
 		assertUUID(post.authorId);
 
-		return new this(
+		return new Post(
 			{ db },
 			{
 				id: post.id,
@@ -261,10 +261,13 @@ function reduceMeta<Meta extends BaseMeta>(
 		if (meta.key in acc) {
 			let value = acc[meta.key];
 			if (Array.isArray(value)) {
+				// biome-ignore lint/performance/noAccumulatingSpread: It's fine here
 				return { ...acc, [meta.key]: [...value, meta.value] };
-			} else return { ...acc, [meta.key]: [value, meta.value] };
+			}
+			// biome-ignore lint/performance/noAccumulatingSpread: It's fine here
+			return { ...acc, [meta.key]: [value, meta.value] };
 		}
-
+		// biome-ignore lint/performance/noAccumulatingSpread: It's fine here
 		return { ...acc, [meta.key]: meta.value };
 	}, {} as Meta);
 }