refactor: migrate from eslint to biome and improve architecture

.github/workflows/build-extension.yml

@@ -42,6 +42,7 @@ jobs:
         run: |
           pnpm build
           cd packages/extension
+          rm -rf build
           pnpm pack:all
 
       - name: Commit changes

.vscode/settings.json

@@ -1,20 +1,24 @@
 {
-  "editor.formatOnSave": true,
   "editor.defaultFormatter": "biomejs.biome",
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true,
-  "typescript.preferences.importModuleSpecifier": "non-relative",
-  "typescript.preferences.includePackageJsonAutoImports": "on",
-  "files.associations": {
-    "*.css": "css"
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.organizeImports.biome": "always",
+    "quickfix.biome": "always"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "editor.quickSuggestions": {
-    "strings": true
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "css.validate": false,
-  "tailwindCSS.validate": true,
-  "editor.colorDecorators": true,
-  "[css]": {
-    "editor.formatOnSave": false
-  }
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

CHROME_EXTENSION_GUIDE.md

@@ -5,23 +5,26 @@
 
 ## Chrome
 
-1. Download the [`chrome-react-scanner-extension-v1.0.1.zip`](https://github.com/aidenybai/react-scan/tree/main/packages/extension/build) file.
+1. Download the [`chrome-react-scanner-extension-v1.0.2.zip`](https://github.com/aidenybai/react-scan/tree/main/packages/extension/build) file.
 2. Unzip the file.
 3. Open Chrome and navigate to `chrome://extensions/`.
 4. Enable "Developer mode" if it is not already enabled.
 5. Click "Load unpacked" and select the unzipped folder (or drag the folder into the page).
 
 ## Firefox
 
-1. Download the [`firefox-react-scanner-extension-v1.0.1.zip`](https://github.com/aidenybai/react-scan/tree/main/packages/extension/build) file.
+1. Download the [`firefox-react-scanner-extension-v1.0.2.zip`](https://github.com/aidenybai/react-scan/tree/main/packages/extension/build) file.
 2. Unzip the file.
 3. Open Firefox and navigate to `about:debugging#/runtime/this-firefox`.
 4. Click "Load Temporary Add-on..."
 5. Select `manifest.json` from the unzipped folder
 
 ## Brave
 
-1. Download the [`brave-react-scanner-extension-v1.0.1.zip`](https://github.com/aidenybai/react-scan/tree/main/packages/extension/build) file.
+1. Download the [`brave-react-scanner-extension-v1.0.2.zip`](https://github.com/aidenybai/react-scan/tree/main/packages/extension/build) file.
 2. Unzip the file.
 3. Open Brave and navigate to `brave://extensions`.
 4. Click "Load unpacked" and select the unzipped folder (or drag the folder into the page).
+
+> [!NOTE]
+> The React Scan browser extension currently uses `[email protected]`

biome.json

@@ -7,28 +7,69 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": []
-  },
-  "formatter": {
-    "enabled": true,
-    "indentStyle": "space",
-    "indentWidth": 2,
-    "lineWidth": 80,
-    "lineEnding": "lf"
+    "ignore": [
+      "examples/**",
+      "**/dist/**",
+      "**/build/**",
+      "node_modules",
+      "**/node_modules/**",
+      "**/*.css",
+      "**/*.astro",
+      "packages/website",
+      "kitchen-sink"
+    ]
   },
   "organizeImports": {
     "enabled": true
   },
   "linter": {
-    "enabled": false
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "noUnusedFunctionParameters": {
+          "level": "warn",
+          "fix": "unsafe"
+        },
+        "noUnusedImports": {
+          "level": "warn",
+          "fix": "unsafe"
+        },
+        "noUnusedLabels": {
+          "level": "warn",
+          "fix": "unsafe"
+        },
+        "noUnusedPrivateClassMembers": {
+          "level": "warn",
+          "fix": "unsafe"
+        },
+        "noUnusedVariables": {
+          "level": "warn",
+          "fix": "unsafe"
+        }
+      },
+      "suspicious": {
+        "noExplicitAny": "error",
+        "noConsole": "error"
+      },
+      "security": {
+        "noDangerouslySetInnerHtml": "error"
+      },
+      "style": {
+        "noNonNullAssertion": "error"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 80
   },
   "javascript": {
     "formatter": {
       "quoteStyle": "single",
-      "indentStyle": "space",
-      "indentWidth": 2,
-      "lineWidth": 80,
-      "lineEnding": "lf"
+      "trailingCommas": "all"
     }
   }
 }

examples/sierpinski/package.json

@@ -15,7 +15,7 @@
     "vite-plugin-inspect": "^0.8.7"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "vite": "^5.4.3"
   }
 }

package.json

@@ -4,28 +4,24 @@
   "scripts": {
     "build": "WORKSPACE_BUILD=true node scripts/workspace.mjs build",
     "postbuild": "node scripts/version-warning.mjs",
+    "postinstall": "pnpm build",
     "dev": "node scripts/workspace.mjs dev",
     "pack": "node scripts/workspace.mjs pack",
     "pack:bump": "pnpm --filter scan pack:bump",
-    "lint": "pnpm --parallel lint",
-    "eslint:fix": "eslint --fix packages/*"
+    "lint": "biome lint .",
+    "format": "biome format . --write",
+    "check": "biome check . --write"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
     "@types/node": "^22.10.2",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
     "@vercel/style-guide": "^6.0.0",
     "autoprefixer": "^10.4.20",
     "boxen": "^8.0.1",
     "chalk": "^5.3.0",
-    "eslint": "^8.57.1",
-    "eslint-import-resolver-typescript": "^3.7.0",
-    "eslint-plugin-jsonc": "^2.18.2",
-    "eslint-plugin-tailwindcss": "^3.17.5",
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.17",
-    "typescript": "5.4.5",
+    "typescript": "latest",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "packageManager": "[email protected]",

packages/extension/.env.example

@@ -2,7 +2,7 @@
 # You only need to set these if the browsers are not in standard locations
 
 # For macOS, use paths like:
-BRAVE_BINARY="/Applications/Brave\ Browser.app/Contents/MacOS/Brave\ Browser"
+BRAVE_BINARY="/Applications/Brave Browser.app/Contents/MacOS/Brave Browser"
 CHROME_BINARY="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
 FIREFOX_BINARY="/Applications/Firefox.app/Contents/MacOS/firefox-bin"
 

packages/extension/README.md

@@ -64,8 +64,8 @@ pnpm pack:all
 ```
 
 This will create:
-- `chrome-react-scanner-extension-v1.0.1.zip`
-- `firefox-react-scanner-extension-v1.0.1.zip`
-- `brave-react-scanner-extension-v1.0.1.zip`
+- `chrome-react-scanner-extension-v1.0.2.zip`
+- `firefox-react-scanner-extension-v1.0.2.zip`
+- `brave-react-scanner-extension-v1.0.2.zip`
 
 in the `build` directory.

packages/extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-scan/extension",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "type": "module",
   "scripts": {
@@ -18,19 +18,23 @@
     "pack:all": "rm -rf build && pnpm pack:chrome && pnpm pack:firefox && pnpm pack:brave"
   },
   "dependencies": {
+    "@pivanov/utils": "^0.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-scan": "workspace:*",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@pivanov/utils": "^0.0.1",
     "@types/chrome": "^0.0.281",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/webextension-polyfill": "^0.10.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "bestzip": "^2.2.1",
     "cross-env": "^7.0.3",
-    "vite": "^5.4.3",
-    "vite-plugin-web-extension": "^4.3.1",
+    "vite": "^6.0.7",
+    "vite-plugin-web-extension": "^4.4.3",
+    "vite-tsconfig-paths": "^5.1.4",
     "webextension-polyfill": "^0.10.0"
   }
 }

packages/extension/src/background/icon.ts

@@ -17,7 +17,7 @@ const ANIMATION_CONFIG = {
   stopFrame: 6,
 } as const;
 
-let animationInterval: number | null = null;
+let animationInterval: TTimer | null = null;
 const preRenderedFrames: Array<Record<string, {
   width: number;
   height: number;
@@ -208,7 +208,7 @@ browser.tabs.onUpdated.addListener((_, changeInfo) => {
   }
 });
 
-browser.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+browser.runtime.onMessage.addListener((message, _sender, _sendResponse) => {
   if (message.type === 'react-scan:is-focused') {
     debouncedUpdateIcon(message.data.state);
   }

packages/extension/src/background/index.ts

@@ -26,7 +26,7 @@ const init = async (tab: browser.Tabs.Tab) => {
 };
 
 // Listen for tab updates - only handle complete state
-browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+browser.tabs.onUpdated.addListener((_tabId, changeInfo, tab) => {
   if (changeInfo.status === 'complete') {
     void init(tab);
   }