Merge remote-tracking branch 'origin/main' into perf-outlines

CHROME_EXTENSION_GUIDE.md → BROWSER_EXTENSION_GUIDE.md

@@ -1,27 +1,27 @@
-# BrowserExtension Installation Guide
+# Browser Extension Installation Guide
 
 > [!WARNING]
 > React Scan's Browser extension is still pending approvals from the Chrome Web Store, Firefox Add-ons, and Brave Browser. Below is a guide to installing the extension manually.
 
 ## Chrome
 
-1. Download the [`chrome-react-scanner-extension-v1.0.2.zip`](https://github.com/aidenybai/react-scan/tree/main/packages/extension/build) file.
+1. Download the [`chrome-extension-v1.0.4.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.2.zip`](https://github.com/aidenybai/react-scan/tree/main/packages/extension/build) file.
+1. Download the [`firefox-extension-v1.0.4.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.2.zip`](https://github.com/aidenybai/react-scan/tree/main/packages/extension/build) file.
+1. Download the [`brave-extension-v1.0.4.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).

CONTRIBUTING.md

@@ -0,0 +1,92 @@
+# Contributing to React Scan
+
+First off, thanks for taking the time to contribute! ❤️
+
+## Table of Contents
+
+- [Contributing to React Scan](#contributing-to-react-scan)
+  - [Table of Contents](#table-of-contents)
+  - [Project Structure](#project-structure)
+  - [Development Setup](#development-setup)
+  - [Contributing Guidelines](#contributing-guidelines)
+    - [Commits](#commits)
+    - [Pull Request Process](#pull-request-process)
+    - [Development Workflow](#development-workflow)
+  - [Getting Help](#getting-help)
+
+## Project Structure
+
+This is a monorepo containing several packages:
+
+- `packages/scan` - Core React Scan package
+- `packages/vite-plugin-react-scan` - Vite plugin for React Scan
+- `packages/extension` - VS Code extension
+
+## Development Setup
+
+1. **Clone and Install**
+   ```bash
+   git clone https://github.com/aidenybai/react-scan.git
+   cd react-scan
+   pnpm install
+   ```
+
+2. **Build all packages**
+   ```bash
+   pnpm build
+   ```
+
+3. **Development Mode**
+   ```bash
+   # Run all packages in dev mode
+   pnpm dev
+   ```
+
+## Contributing Guidelines
+
+### Commits
+
+We use conventional commits to ensure consistent commit messages:
+
+- `feat:` New features
+- `fix:` Bug fixes
+- `docs:` Documentation changes
+- `chore:` Maintenance tasks
+- `test:` Adding or updating tests
+- `refactor:` Code changes that neither fix bugs nor add features
+
+Example: `fix(scan): fix a typo`
+
+### Pull Request Process
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feat/amazing-feature`)
+3. Commit your changes using conventional commits
+4. Push to your branch
+5. Open a Pull Request
+6. Ask for reviews (@pivanov, @RobPruzan are your friends in this journey)
+
+### Development Workflow
+
+1. **TypeScript**
+   - All code must be written in TypeScript
+   - Ensure strict type checking passes
+   - No `any` types unless absolutely necessary
+
+2. **Code Style**
+   - We use Biome for formatting and linting
+   - Run `pnpm format` to format code
+   - Run `pnpm lint` to check for issues
+
+3. **Documentation**
+   - Update relevant documentation
+   - Add JSDoc comments for public APIs
+   - Update README if needed
+
+## Getting Help
+- Check existing issues
+- Create a new issue
+
+<br />
+
+⚛️ Happy coding! 🚀

README.md

@@ -115,7 +115,7 @@ Add the script tag to your `index.html`:
 
 </details>
 
-If you want to install the Chrome extension, follow the guide [here](https://github.com/aidenybai/react-scan/blob/main/CHROME_EXTENSION_GUIDE.md), or React Native support, see [here](https://github.com/aidenybai/react-scan/pull/23).
+If you want to install the Chrome extension, follow the guide [here](https://github.com/aidenybai/react-scan/blob/main/BROWSER_EXTENSION_GUIDE.md), or React Native support, see [here](https://github.com/aidenybai/react-scan/pull/23).
 
 ## API Reference
 
@@ -141,7 +141,7 @@ if (typeof window !== 'undefined') {
 
 > Looking for [React Native](https://github.com/aidenybai/react-scan/pull/23)?
 
-If you don't have a localv version of the site, you can use the CLI. This will spin up an isolated browser instance which you can interact or use React Scan with.
+If you don't have a local version of the site, you can use the CLI. This will spin up an isolated browser instance which you can interact or use React Scan with.
 
 ```bash
 npx react-scan@latest http://localhost:3000
@@ -326,9 +326,11 @@ Also, some personal complaints about React Devtools' highlight feature:
 
 Soon :)
 
-**Q: Chrome Extension wen?**
+**Q: Browser Extension wen?**
 
-Soon :)
+The browser extension is available for Chrome, Firefox, and Brave, but it's awaiting approval from browser extension stores.
+
+In the meanwhile, you can install it manually by following the instructions in [BROWSER_EXTENSION_GUIDE.md](BROWSER_EXTENSION_GUIDE.md).
 
 ## Resources & Contributing Back
 

biome.json

@@ -23,7 +23,7 @@
     "enabled": true
   },
   "linter": {
-    "enabled": false,
+    "enabled": true,
     "rules": {
       "recommended": true,
       "correctness": {
@@ -49,7 +49,8 @@
         }
       },
       "suspicious": {
-        "noExplicitAny": "error"
+        "noExplicitAny": "error",
+        "noConsole": "error"
       },
       "security": {
         "noDangerouslySetInnerHtml": "error"

packages/extension/README.md

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

packages/extension/build-worker.mjs

@@ -0,0 +1,44 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { build } from 'vite';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+async function buildWorker() {
+  try {
+    const entryPath = path.resolve(
+      __dirname,
+      '../../packages/scan/src/new-outlines/offscreen-canvas.worker.ts',
+    );
+    const outputPath = path.resolve(__dirname, 'dist/assets');
+
+    // biome-ignore lint/suspicious/noConsole: Intended debug output
+    console.log('Building worker with entry:', entryPath);
+    // biome-ignore lint/suspicious/noConsole: Intended debug output
+    console.log('Output directory:', outputPath);
+
+    await build({
+      build: {
+        lib: {
+          entry: entryPath,
+          formats: ['iife'],
+          fileName: () => 'offscreen-canvas.worker.js',
+          name: 'OffscreenCanvasWorker',
+        },
+        outDir: outputPath,
+        emptyOutDir: false,
+        copyPublicDir: false,
+        assetsDir: 'assets',
+      },
+    });
+
+    // biome-ignore lint/suspicious/noConsole: Intended debug output
+    console.log('Worker build completed successfully!');
+  } catch (error) {
+    // biome-ignore lint/suspicious/noConsole: Intended debug output
+    console.error('Worker build failed:', error);
+    process.exit(1);
+  }
+}
+
+buildWorker();

packages/extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-scan/extension",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "private": true,
   "type": "module",
   "scripts": {
@@ -31,6 +31,7 @@
     "@types/webextension-polyfill": "^0.10.0",
     "@vitejs/plugin-react": "^4.2.1",
     "bestzip": "^2.2.1",
+    "bippy": "0.2.7",
     "cross-env": "^7.0.3",
     "vite": "^6.0.7",
     "vite-plugin-web-extension": "^4.4.3",

packages/extension/src/content/index.ts

@@ -1,48 +1,71 @@
+import { storageGetItem, storageSetItem } from '@pivanov/utils';
+import type { Options } from 'react-scan';
 import browser from 'webextension-polyfill';
 import { BroadcastSchema } from '../types/messages';
-import { broadcast, readLocalStorage } from '../utils/helpers';
+import {
+  broadcast,
+  readLocalStorage,
+  saveLocalStorage,
+} from '../utils/helpers';
 
-chrome.runtime.onMessage.addListener(async (message: unknown, _sender, sendResponse) => {
-  const result = BroadcastSchema.safeParse(message);
-  if (!result.success) {
-    return false;
-  }
-
-  const data = result.data;
-
-  if (data.type === 'react-scan:ping') {
-    sendResponse({ pong: true });
-    return false;
-  }
+chrome.runtime.onMessage.addListener(
+  async (message: unknown, _sender, sendResponse) => {
+    const result = BroadcastSchema.safeParse(message);
+    if (!result.success) {
+      return false;
+    }
 
-  if (data.type === 'react-scan:is-running') {
-    const options = readLocalStorage<{ enabled: boolean; showToolbar: boolean }>('react-scan-options');
-    const response = { isRunning: options?.enabled && options?.showToolbar };
-    sendResponse(response);
-    return false;
-  }
+    const data = result.data;
 
-  if (data.type === 'react-scan:toggle-state') {
-    let toggledState = false;
+    if (data.type === 'react-scan:ping') {
+      sendResponse({ pong: true });
+      return false;
+    }
 
-    const options = readLocalStorage<{ showToolbar: boolean }>('react-scan-options');
-    if (options !== null) {
-      toggledState = !options?.showToolbar;
+    if (data.type === 'react-scan:is-running') {
+      const options = readLocalStorage<{
+        enabled: boolean;
+        showToolbar: boolean;
+      }>('react-scan-options');
+      const response = { isRunning: options?.enabled && options?.showToolbar };
+      sendResponse(response);
+      return false;
     }
 
+    if (data.type === 'react-scan:toggle-state') {
+      const isEnabled = await storageGetItem<boolean>(
+        'react-scan-extension',
+        'isEnabled',
+      );
+
+      let toggledState = true;
 
-    broadcast.onmessage = (type, data) => {
-      if (type === 'react-scan:react-version' && data.version) {
-        sendResponse({ hasReact: toggledState });
+      if (isEnabled !== null) {
+        toggledState = !isEnabled;
       }
-    };
 
-    broadcast.postMessage('react-scan:toggle-state', { state: toggledState });
-    return true;
-  }
+      void storageSetItem('react-scan-extension', 'isEnabled', toggledState);
 
-  return false;
-});
+      const options = readLocalStorage<Options>('react-scan-options');
+      saveLocalStorage('react-scan-options', {
+        ...options,
+        enabled: isEnabled,
+        showToolbar: isEnabled,
+      });
+
+      broadcast.onmessage = (type, data) => {
+        if (type === 'react-scan:react-version' && data.version) {
+          sendResponse({ hasReact: toggledState });
+        }
+      };
+
+      broadcast.postMessage('react-scan:toggle-state', { state: toggledState });
+      return true;
+    }
+
+    return false;
+  },
+);
 
 window.addEventListener('DOMContentLoaded', () => {
   broadcast.onmessage = (type, data) => {