feat: add biomejs (#1951)

* feat: add biomejs

* fix: null guard

* fix: skip deno format

* fix: rename label

* fix: remove unused

* feat: add biome ci

* refactor: rename element

* refactor: rename a element

.github/workflows/bump.yml

@@ -84,6 +84,6 @@ jobs:
           body: ${{ steps.get_release_note.outputs.result  }}
           title: "chore: bump v${{ steps.get_version.outputs.NEW_VERSION }}"
           labels: |
-            documentation
+            "Type: Documentation"
           draft: true
           milestone: "v${{ steps.get_version.outputs.NEW_VERSION }}"

.github/workflows/node.js.yml

@@ -29,7 +29,6 @@ jobs:
       - run: npm ci
 
       - run: npm run build
-      - run: npm run lint
 
       - run: npx playwright install --with-deps
       - name: Build Storybook
@@ -48,6 +47,18 @@ jobs:
 
       - uses: codecov/codecov-action@v3
 
+  quality:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v1
+        with:
+          version: latest
+      - name: Run Biome
+        run: biome ci .
+
   chromatic-deployment:
     runs-on: ubuntu-latest
     steps:

apps/desktop/src/App.tsx

@@ -1,7 +1,7 @@
-import { useState } from "preact/hooks";
-import preactLogo from "./assets/preact.svg";
 import { invoke } from "@tauri-apps/api/tauri";
+import { useState } from "preact/hooks";
 import "./App.css";
+import preactLogo from "./assets/preact.svg";
 
 function App() {
   const [greetMsg, setGreetMsg] = useState("");
@@ -17,13 +17,13 @@ function App() {
       <h1>Welcome to Tauri!</h1>
 
       <div class="row">
-        <a href="https://vitejs.dev" target="_blank">
+        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
           <img src="/vite.svg" class="logo vite" alt="Vite logo" />
         </a>
-        <a href="https://tauri.app" target="_blank">
+        <a href="https://tauri.app" target="_blank" rel="noreferrer">
           <img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
         </a>
-        <a href="https://preactjs.com" target="_blank">
+        <a href="https://preactjs.com" target="_blank" rel="noreferrer">
           <img src={preactLogo} class="logo preact" alt="Preact logo" />
         </a>
       </div>

apps/desktop/src/main.tsx

@@ -2,4 +2,7 @@ import { render } from "preact";
 import App from "./App";
 import "./styles.css";
 
-render(<App />, document.getElementById("root")!);
+const root = document.getElementById("root");
+if (root) {
+  render(<App />, root);
+}

apps/desktop/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from "vite";
 import preact from "@preact/preset-vite";
+import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
@@ -18,7 +18,7 @@ export default defineConfig(async () => ({
   envPrefix: ["VITE_", "TAURI_"],
   build: {
     // Tauri supports es2021
-    target: process.env.TAURI_PLATFORM == "windows" ? "chrome105" : "safari13",
+    target: process.env.TAURI_PLATFORM === "windows" ? "chrome105" : "safari13",
     // don't minify for debug builds
     minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
     // produce sourcemaps for debug builds

apps/web/next.config.js

@@ -1,28 +1,14 @@
 // @ts-check
 
 const withPreact = require("next-plugin-preact");
-const {
-  NODE_ENV,
-  VERCEL_GITHUB_COMMIT_SHA,
-  VERCEL_GITLAB_COMMIT_SHA,
-  VERCEL_BITBUCKET_COMMIT_SHA,
-  GA_TRACKING_ID,
-} = process.env;
-
-const COMMIT_SHA = VERCEL_GITHUB_COMMIT_SHA ||
-  VERCEL_GITLAB_COMMIT_SHA ||
-  VERCEL_BITBUCKET_COMMIT_SHA;
+const { GA_TRACKING_ID } = process.env;
 
 /**
  * @type {import('next').NextConfig}
  */
 const config = {
   productionBrowserSourceMaps: true,
   env: {
-    // Make the COMMIT_SHA available to the client so that Sentry events can be
-    // marked for the release they belong to. It may be undefined if running
-    // outside of Vercel
-    NEXT_PUBLIC_COMMIT_SHA: COMMIT_SHA,
     GA_TRACKING_ID,
   },
 };

apps/web/pages/404.tsx

@@ -1,6 +1,5 @@
-import Error from "next/error";
+import ErrorPage from "next/error";
 
 export default function NotFound() {
-  // Opinionated: do not record an exception in Sentry for 404
-  return <Error statusCode={404} />;
+  return <ErrorPage statusCode={404} />;
 }

apps/web/pages/_document.tsx

@@ -29,14 +29,15 @@ export default class MyDocument extends Document {
             type="image/png"
             sizes="32x32"
           />
-          <link rel="apple-touch-icon" href="/apple-icon.png"></link>
+          <link rel="apple-touch-icon" href="/apple-icon.png" />
           <meta name="theme-color" content="#317EFB" />
           {/* Global Site Tag (gtag.js) - Google Analytics */}
           <script
             async
             src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
           />
           <script
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
             dangerouslySetInnerHTML={{
               __html: `
             window.dataLayer = window.dataLayer || [];

apps/web/pages/index.tsx

@@ -6,19 +6,13 @@ export default function Home() {
       Hello World.{" "}
       <ul>
         <li>
-          <Link href="/about">
-            <a>About</a>
-          </Link>
+          <Link href="/about">About</Link>
         </li>
         <li>
-          <Link href="/ssr">
-            <a>SSR</a>
-          </Link>
+          <Link href="/ssr">SSR</Link>
         </li>
         <li>
-          <Link href="/ssg">
-            <a>SSG</a>
-          </Link>
+          <Link href="/ssg">SSG</Link>
         </li>
       </ul>
     </div>

apps/web/playwright.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig, devices } from "@playwright/test";
 import path from "path";
+import { defineConfig, devices } from "@playwright/test";
 
 // Use process.env.PORT by default and fallback to port 3000
 const PORT = process.env.PORT || 3000;

apps/web/utils/gtag.ts

@@ -3,8 +3,10 @@
 export const { GA_TRACKING_ID } = process.env;
 
 export const pageView = (page_path: string) => {
-  window.gtag("config", GA_TRACKING_ID!, {
-    page_path,
-    hour: new Date().getHours(),
-  });
+  if (GA_TRACKING_ID) {
+    window.gtag("config", GA_TRACKING_ID, {
+      page_path,
+      hour: new Date().getHours(),
+    });
+  }
 };

biome.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.4.1/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "files": {
+    "ignore": [
+      "./packages/ui/storybook-static/**",
+      "./apps/web/.next/**",
+      "./target/**",
+      "lib/**",
+      "dist/**",
+      "coverage/**"
+    ]
+  },
+  "formatter": {
+    "indentStyle": "space"
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  }
+}

cspell.json

@@ -3,20 +3,14 @@
   "version": "0.2",
   "useGitignore": true,
   "dictionaries": [
-    "html",
-    "typescript",
     "css",
+    "filetypes",
+    "fonts",
+    "html",
     "node",
-    "rust"
+    "npm",
+    "rust",
+    "typescript"
   ],
-  "words": [
-    "Autoprefix",
-    "gtag",
-    "lucide",
-    "preact",
-    "serde",
-    "stylelint",
-    "tauri",
-    "twind"
-  ]
+  "words": ["Autoprefix", "gtag", "lucide", "serde"]
 }