Merge remote-tracking branch 'origin/main' into biome

aidenybai · Dec 16, 2024 · 4317110 · 4317110
2 parents 8a01413 + d3f1e2a
commit 4317110
Show file tree

Hide file tree

Showing 79 changed files with 4,603 additions and 2,353 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,17 +1,21 @@
 const { resolve } = require('node:path');
 
-const project = resolve(__dirname, 'tsconfig.json');
-
 module.exports = {
   root: true,
   extends: [
     require.resolve('@vercel/style-guide/eslint/node'),
     require.resolve('@vercel/style-guide/eslint/browser'),
     require.resolve('@vercel/style-guide/eslint/typescript'),
+    'plugin:tailwindcss/recommended',
   ],
-  ignorePatterns: ['**/dist/*', '**/test/*'],
+  ignorePatterns: ['**/dist/**', '**/node_modules/**', '**/test/**'],
   parserOptions: {
-    project,
+    project: [
+      resolve(__dirname, 'tsconfig.json'), // Root tsconfig
+      resolve(__dirname, 'packages/scan/tsconfig.json'), // Scan package tsconfig
+    ],
+    ecmaVersion: 2020,
+    sourceType: 'module',
   },
   rules: {
     '@typescript-eslint/explicit-function-return-type': 'off',
@@ -39,7 +43,6 @@ module.exports = {
     '@typescript-eslint/no-unnecessary-condition': 'off',
     '@typescript-eslint/no-confusing-void-expression': 'off',
     '@typescript-eslint/require-await': 'off',
-    // '@typescript-eslint/no-floating-promises': ['error'],
     'import/no-named-as-default': 'off',
     'no-implicit-coercion': 'off',
     '@typescript-eslint/no-redundant-type-constituents': 'off',
@@ -48,15 +51,35 @@ module.exports = {
     'no-useless-return': 'off',
     'func-names': 'off',
     '@typescript-eslint/prefer-for-of': 'off',
-    // 'no-implicit-coercion': 'off',
     '@typescript-eslint/restrict-template-expressions': 'off',
     '@typescript-eslint/array-type': ['error', { default: 'generic' }],
   },
   settings: {
     'import/resolver': {
       typescript: {
-        project,
+        project: [
+          resolve(__dirname, 'tsconfig.json'), // Root tsconfig
+          resolve(__dirname, 'packages/**/tsconfig.json'), // Scan package tsconfig
+        ],
       },
     },
   },
+  overrides: [
+    {
+      files: ['*.json'],
+      parser: 'jsonc-eslint-parser',
+      plugins: ['jsonc'],
+      rules: {
+        'jsonc/no-comments': 'off',
+      },
+    },
+    {
+      files: ['*.tsx', '*.ts', '*.js'],
+      plugins: ['tailwindcss'],
+    },
+    {
+      files: ['*.mts'],
+      parser: '@typescript-eslint/parser',
+    }
+  ],
 };
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,6 @@ packages/extension/build/
 *.log
 build
 playgrounds
+# SSL Certificates
+bin/certs/*.pem
+bin/certs/*.key
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,8 @@
 {
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "biomejs.biome"
+  "editor.defaultFormatter": "biomejs.biome",
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "typescript.preferences.includePackageJsonAutoImports": "on"
 }
diff --git a/README.md b/README.md
@@ -27,28 +27,7 @@ Airbnb&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://polaris.shopify.com/"
 
 ## Install
 
-> Looking for [React Native](https://github.com/aidenybai/react-scan/pull/23)?
-
-The fastest way to get started is via 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
-# you can technically scan ANY website on the web:
-# npx react-scan@latest https://react.dev
-```
-
-You can add it to your existing dev process as well. Here's an example for Next.js:
-
-```json
-{
-  "scripts": {
-    "dev": "next dev",
-    "scan": "next dev & npx react-scan@latest localhost:3000"
-  }
-}
-```
-
-If you don't want to use a separate browser and you have access to your local codebase, then add this script to your app:
+Add this script to your app:
 
 ```html
 <!-- import this BEFORE any scripts -->
@@ -136,7 +115,7 @@ Add the script tag to your `index.html`:
 
 </details>
 
-Finally, if you want to install the Chrome extension, follow the guide [here](https://github.com/aidenybai/react-scan/blob/main/CHROME_EXTENSION_GUIDE.md).
+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).
 
 ## API Reference
 
@@ -160,6 +139,27 @@ 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.
+
+```bash
+npx react-scan@latest http://localhost:3000
+# you can technically scan ANY website on the web:
+# npx react-scan@latest https://react.dev
+```
+
+You can add it to your existing dev process as well. Here's an example for Next.js:
+
+```json
+{
+  "scripts": {
+    "dev": "next dev",
+    "scan": "next dev & npx react-scan@latest localhost:3000"
+  }
+}
+```
+
 ## API Reference
 
 <details>

diff --git a/bin/generate-certs.sh b/bin/generate-certs.sh
@@ -0,0 +1,4 @@
+#!/bin/bash
+
+mkdir -p bin/certs
+openssl req -x509 -newkey rsa:2048 -keyout bin/certs/key.pem -out bin/certs/cert.pem -days 365 -nodes -subj "/CN=127.0.0.1"
diff --git a/bin/serve-scan.sh b/bin/serve-scan.sh
@@ -0,0 +1,34 @@
+#!/bin/bash
+
+# Determine the directory of the script
+SCRIPT_DIR=$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)
+
+# Default values
+DEFAULT_PATH="./packages/scan/dist"
+DEFAULT_PORT="4000"
+DEFAULT_CERT="$SCRIPT_DIR/certs/cert.pem"
+DEFAULT_KEY="$SCRIPT_DIR/certs/key.pem"
+
+# Positional arguments
+SERVE_PATH="$1" # First argument is the path
+
+# Get optional flags
+shift # Remove the first argument from the list
+while [[ "$#" -gt 0 ]]; do
+    case $1 in
+        --port) PORT_ARG="$2"; shift ;;
+        --cert) CERT_ARG="$2"; shift ;;
+        --key) KEY_ARG="$2"; shift ;;
+        *) echo "Unknown parameter: $1" >&2; exit 1 ;;
+    esac
+    shift
+done
+
+# Use provided arguments or defaults
+SERVE_PATH="${SERVE_PATH:-$DEFAULT_PATH}"
+SERVE_PORT="${PORT_ARG:-$DEFAULT_PORT}"
+SERVE_CERT="${CERT_ARG:-$DEFAULT_CERT}"
+SERVE_KEY="${KEY_ARG:-$DEFAULT_KEY}"
+
+# Run the server with CORS enabled
+http-server "$SERVE_PATH" -p "$SERVE_PORT" --ssl --cert "$SERVE_CERT" --key "$SERVE_KEY" --cors
diff --git a/package.json b/package.json
@@ -1,21 +1,31 @@
 {
-	"name": "root",
-	"private": true,
-	"scripts": {
-		"build": "pnpm --parallel --filter=!extension build",
-		"dev": "pnpm --parallel --filter=!extension dev",
-		"pack": "pnpm --parallel --filter=!extension pack",
-		"pack:bump": "pnpm --filter scan pack:bump",
-		"lint": "pnpm --parallel --filter=!extension lint",
-		"eslint:fix": "eslint --fix packages/*"
-	},
-	"devDependencies": {
-		"@vercel/style-guide": "^6.0.0",
-		"eslint": "^8.57.1",
-		"@biomejs/biome": "^1.9.4"
-	},
-	"packageManager": "[email protected]",
-	"dependencies": {
-		"@vercel/speed-insights": "^1.1.0"
-	}
+  "name": "root",
+  "private": true,
+  "scripts": {
+    "build": "WORKSPACE_BUILD=true pnpm --parallel build",
+    "postbuild": "node scripts/version-warning.mjs",
+    "dev": "pnpm --parallel dev",
+    "pack": "pnpm --parallel pack",
+    "pack:bump": "pnpm --filter scan pack:bump",
+    "lint": "pnpm --parallel lint",
+    "eslint:fix": "eslint --fix packages/*"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.2",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vercel/style-guide": "^6.0.0",
+    "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",
+		"@biomejs/biome": "^1.9.4",
+    "typescript": "5.4.5"
+  },
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@vercel/speed-insights": "^1.1.0"
+  }
 }
diff --git a/packages/extension/build/brave-react-scanner-extension-v1.0.0.zip b/packages/extension/build/brave-react-scanner-extension-v1.0.0.zip
diff --git a/packages/extension/build/chrome-react-scanner-extension-v1.0.0.zip b/packages/extension/build/chrome-react-scanner-extension-v1.0.0.zip
diff --git a/packages/extension/build/firefox-react-scanner-extension-v1.0.0.zip b/packages/extension/build/firefox-react-scanner-extension-v1.0.0.zip
diff --git a/packages/extension/package.json b/packages/extension/package.json
@@ -1,11 +1,12 @@
 {
-  "name": "react-scanner-extension",
+  "name": "@react-scan/extension",
   "version": "1.0.0",
   "private": true,
   "type": "module",
   "scripts": {
     "clean": "rm -rf dist",
     "build": "vite build",
+    "postbuild": "node ../../scripts/version-warning.mjs",
     "dev": "pnpm dev:chrome",
     "dev:chrome": "cross-env BROWSER=chrome vite",
     "dev:firefox": "cross-env BROWSER=firefox vite",
@@ -29,7 +30,6 @@
     "@vitejs/plugin-react": "^4.2.1",
     "bestzip": "^2.2.1",
     "cross-env": "^7.0.3",
-    "typescript": "~5.6.3",
     "vite": "^5.4.3",
     "vite-plugin-web-extension": "^4.3.1",
     "webextension-polyfill": "^0.10.0"

diff --git a/packages/kitchen-sink/package.json b/packages/kitchen-sink/package.json
@@ -1,6 +1,9 @@
 {
+  "name": "@react-scan/kitchen-sink",
+  "version": "0.0.0",
   "scripts": {
     "build": "vite build",
+    "postbuild": "node ../../scripts/version-warning.mjs",
     "dev": "vite",
     "preview": "vite preview"
   },

diff --git a/packages/kitchen-sink/src/index.jsx b/packages/kitchen-sink/src/index.jsx
@@ -15,17 +15,6 @@ const TooltipContext = createContext({ tooltip: '' });
 
 export const App = () => {
   const [tasks, setTasks] = useState([]);
-  const [isMobile, setIsMobile] = useState(false);
-
-  React.useEffect(() => {
-    const checkMobile = () => {
-      setIsMobile(window.innerWidth <= 768);
-    };
-
-    checkMobile();
-    window.addEventListener('resize', checkMobile);
-    return () => window.removeEventListener('resize', checkMobile);
-  }, []);
 
   return (
     <TooltipContext.Provider value={{ tooltip: 'Hello' }}>
@@ -45,71 +34,22 @@ export const App = () => {
                 </strong>
               </h3>
             </a>
-            <div className="navbar-links">
-              <a
-                href="https://github.com/aidenybai/react-scan#readme"
-                className="navbar-link"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                install
-              </a>
-              <a
-                href="https://github.com/aidenybai/react-scan"
-                className="navbar-link"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                github
-              </a>
-            </div>
           </nav>
 
-          <p>
-            React Scan "scans" your React app for slow renders. It's just
-            JavaScript, so you drop it in anywhere – script tag, npm, you name
-            it!
-          </p>
-
-          {isMobile ? (
-            <div className="demo-section">
-              <img src="/demo.gif" alt="React Scan Demo" className="demo-gif" />
-            </div>
-          ) : (
-            <div className="task-section">
-              <p>Try interacting with this input to see it in action:</p>
-              <AddTaskBar
-                onCreate={(value) => {
-                  if (!value) return;
-                  setTasks([...tasks, value]);
-                }}
-              />
-              <TaskList
-                tasks={tasks}
-                onDelete={(value) =>
-                  setTasks(tasks.filter((task) => task !== value))
-                }
-              />
-            </div>
-          )}
-        </div>
-
-        <div className="sticky-footer">
-          <br />
-          <a
-            href="https://github.com/aidenybai/react-scan#readme"
-            className="cta-button"
-          >
-            Get started →
-          </a>
-          <p>
-            <small>
-              Psst... need something more advanced? Check out:{' '}
-              <a href="https://million.dev" className="navbar-link">
-                Million Lint
-              </a>
-            </small>
-          </p>
+          <div className="task-section">
+            <AddTaskBar
+              onCreate={(value) => {
+                if (!value) return;
+                setTasks([...tasks, value]);
+              }}
+            />
+            <TaskList
+              tasks={tasks}
+              onDelete={(value) =>
+                setTasks(tasks.filter((task) => task !== value))
+              }
+            />
+          </div>
         </div>
       </div>
     </TooltipContext.Provider>

diff --git a/packages/kitchen-sink/vite.config.mjs b/packages/kitchen-sink/vite.config.mjs
@@ -6,9 +6,9 @@ import Inspect from 'vite-plugin-inspect';
 export default defineConfig({
   plugins: [
     react({
-      babel: {
-        plugins: [['babel-plugin-react-compiler', {}]],
-      },
+      // babel: {
+      //   plugins: [['babel-plugin-react-compiler', {}]],
+      // },
     }),
     Inspect(),
   ],

diff --git a/packages/scan/.gitignore b/packages/scan/.gitignore
@@ -0,0 +1 @@
+src/core/web/assets/css/styles.css