React scan v1 (#192)

* refactor: migrate from eslint to biome and improve architecture

- Replace ESLint with Biome for linting and formatting
- Configure Biome with strict rules for:
  - Type checking and type safety
  - Code correctness (unused imports, variables, parameters)
  - Security (noExplicitAny, noConsole, dangerouslySetInnerHTML)
- Improve VSCode integration:
  - Set up Biome formatters for TypeScript, JavaScript, and JSON
  - Configure Prettier for Markdown and HTML
  - Add automatic code actions and formatting
- Improve React internals:
  - Remove react-reconciler dependency
  - Use bippy for Fiber/FiberRoot types
  - Use installRDTHook for React DevTools hook to avoid side effects
- Update package dependencies and development tooling
- General improvements and code cleanup

BREAKING CHANGE: ESLint configuration removed in favor of Biome

* bump extension with [email protected]

* improve build-extension workflow

* improve extension

* fix getChangedState issue and create getCompositeFiberFromElement for overlay

* resolve comments + fix flushes

* resolve comments

* resolve comments

* improvements and small bug fixes

* fix: overlay cursor + fadeout canvas instead of flick

* fix: prevent inspecting the toolbar widget

* fix: handle missing fiber when inspecting elements

* ui/ux/dx, fixed animations, fixed what changed calculations

* fix: circular refsm, perf improvements

* feat(scan): implement new whats-changed, offscreen outline impl, bug fixes, ux improvements"

* fix: react component names + turbopack loader (#189)

* fix: react component names + turbopack loader

* fix: tests for ReactComponentNames

* fix: typesVersions for ReactComponentNames loader

* fix: map return for filtered

* docs: No changes in the text

* chore: cleanup

* chore: add back scan in kitchen sink example

* chore: remove unsupported apis

---------

Co-authored-by: Pavel Ivanov <[email protected]>
Co-authored-by: Nisarg Patel <[email protected]>
Co-authored-by: Aiden Bai <[email protected]>

Author: 4 people

.eslintrc.js

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

.github/workflows/build-extension.yml

@@ -1,20 +1,28 @@
 {
-  "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"
+  },
+  "css.lint.unknownAtRules": "ignore",
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
   },
-  "editor.quickSuggestions": {
-    "strings": true
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
   },
-  "css.validate": false,
-  "tailwindCSS.validate": true,
-  "editor.colorDecorators": true,
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "typescript.tsdk": "node_modules/typescript/lib",
   "[css]": {
-    "editor.formatOnSave": false
+    "editor.defaultFormatter": "biomejs.biome"
   }
 }

.vscode/settings.json

@@ -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]`

CHROME_EXTENSION_GUIDE.md

@@ -7,7 +7,57 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": []
+    "ignore": [
+      "examples/**",
+      "**/dist/**",
+      "**/build/**",
+      "node_modules",
+      "**/node_modules/**",
+      "**/*.css",
+      "**/*.astro",
+      "packages/website",
+      "kitchen-sink"
+    ]
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": false,
+    "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"
+      },
+      "security": {
+        "noDangerouslySetInnerHtml": "error"
+      },
+      "style": {
+        "noNonNullAssertion": "error"
+      }
+    }
   },
   "formatter": {
     "enabled": true,
@@ -16,19 +66,10 @@
     "lineWidth": 80,
     "lineEnding": "lf"
   },
-  "organizeImports": {
-    "enabled": true
-  },
-  "linter": {
-    "enabled": false
-  },
   "javascript": {
     "formatter": {
       "quoteStyle": "single",
-      "indentStyle": "space",
-      "indentWidth": 2,
-      "lineWidth": 80,
-      "lineEnding": "lf"
+      "trailingCommas": "all"
     }
   }
 }

biome.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"
   }
 }

examples/sierpinski/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]",

package.json

@@ -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/.env.example

@@ -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/README.md

@@ -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/package.json

@@ -49,7 +49,7 @@ html.freeze #react-scan-toast {
 }
 
 #react-scan-toast .icon {
-  font-size: 16px;
+  font-size: .75rem;
 }
 
 @media (max-width: 320px) {

packages/extension/public/rules.json

@@ -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);
   }