prep

Author: ddcech

.github/workflows/ci.yml

@@ -15,5 +15,6 @@ jobs:
           node-version: 22
           cache: npm
       - run: npm install
+      - run: npm run lint
       - run: npm run typecheck
       - run: npm run build

.vscode/settings.json

@@ -6,4 +6,4 @@
     "titleBar.inactiveBackground": "#5B1212",
     "titleBar.inactiveForeground": "#FEFAFA"
   }
-}
+}

README.md

@@ -4,7 +4,7 @@ A modern, low-level React 19 inspector for Vite/Rolldown dev servers.
 
 This repo contains:
 
-- `packages/react19-dev-inspector` — the npm package (`vite-react-inspector`)
+- `packages/vite-react-inspector` — source for the `vite-react-inspector` npm package
 - `examples/basic-react19` — a Vite + React 19 example app
 
 The package is intentionally dev-only. It injects a tiny browser runtime into Vite dev pages, lets you toggle an inspector with a shortcut, highlights React-owned DOM nodes, resolves the selected component/source location through React 19 dev fiber stacks and Vite source maps, and opens your editor from a local dev-server endpoint.
@@ -30,27 +30,44 @@ npm run dev:example
 
 Open the example app, press the shortcut, hover an element, and click a component/source candidate to open it in your editor.
 
-## Install in another project (from GitHub)
+## Install
 
-The published package name is `vite-react-inspector`, but the library lives under `packages/react19-dev-inspector` in this monorepo. Use a **path** on the git URL so the package manager installs that folder.
+From npm:
 
-Repository: [github.com/ddcech/vite-react-inspector](https://github.com/ddcech/vite-react-inspector)
+```bash
+npm install -D vite-react-inspector
+```
+
+From GitHub (monorepo; use **`path:`** so installs resolve `packages/vite-react-inspector`):
 
 **pnpm** ([git install docs](https://pnpm.io/cli/add#install-from-git-repository)):
 
 ```bash
-pnpm add -D vite-react-inspector@github:ddcech/vite-react-inspector#path:packages/react19-dev-inspector
+pnpm add -D vite-react-inspector@github:ddcech/vite-react-inspector#path:packages/vite-react-inspector
 ```
 
 **npm** (7+; subdirectory support varies — if this fails, use pnpm or publish to npm):
 
 ```bash
-npm install -D vite-react-inspector@git+https://github.com/ddcech/vite-react-inspector.git#path:packages/react19-dev-inspector
+npm install -D vite-react-inspector@git+https://github.com/ddcech/vite-react-inspector.git#path:packages/vite-react-inspector
 ```
 
-Pin a branch or tag by putting it before `path:`, e.g. `#main:path:packages/react19-dev-inspector`.
+Pin a branch or tag by putting it before `path:`, e.g. `#main:path:packages/vite-react-inspector`.
+
+Repository: [github.com/ddcech/vite-react-inspector](https://github.com/ddcech/vite-react-inspector).
+
+Registry installs include built `dist/`. Git installs run `prepare` to build because `dist` is not in git.
+
+After install, use the same `vite-react-inspector/vite` import as below.
+
+**pnpm v10+:** If install fails with `ERR_PNPM_GIT_DEP_PREPARE_NOT_ALLOWED`, allow the package to run scripts. In `pnpm-workspace.yaml` at the project (or monorepo) root:
+
+```yaml
+onlyBuiltDependencies:
+  - vite-react-inspector
+```
 
-After install, use the same `vite-react-inspector/vite` import as below. The package `prepare` script builds `dist/` on install because `dist` is not committed.
+([docs](https://pnpm.io/settings#onlybuiltdependencies).)
 
 ## Package usage
 

biome.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.4.13/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "includes": ["**", "!**/dist"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "semicolons": "asNeeded"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}

examples/basic-react19/package.json

@@ -11,9 +11,12 @@
     "@vitejs/plugin-react": "^5.0.0",
     "vite-react-inspector": "workspace:*",
     "vite": "^8.0.0",
-    "typescript": "^5.9.0",
+    "typescript": "^6.0.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0"
+  }
 }

examples/basic-react19/src/App.tsx

@@ -9,17 +9,20 @@ type Card = {
 const cards: Card[] = [
   {
     title: 'React 19 stack path',
-    description: 'The default path resolves component frames from React dev fiber stacks.',
+    description:
+      'The default path resolves component frames from React dev fiber stacks.',
     value: 'no Babel',
   },
   {
     title: 'Strict DOM source',
-    description: 'Optional host element annotation gives exact TSX element locations.',
+    description:
+      'Optional host element annotation gives exact TSX element locations.',
     value: 'fast JSX scan',
   },
   {
     title: 'Vite server open',
-    description: 'A local endpoint resolves source maps and opens your editor safely.',
+    description:
+      'A local endpoint resolves source maps and opens your editor safely.',
     value: 'dev only',
   },
 ]
@@ -30,7 +33,11 @@ export function App() {
 
   return (
     <main className="shell">
-      <Hero count={count} doubled={doubled} onIncrement={() => setCount((value) => value + 1)} />
+      <Hero
+        count={count}
+        doubled={doubled}
+        onIncrement={() => setCount((value) => value + 1)}
+      />
       <section className="grid">
         {cards.map((card) => (
           <InfoCard key={card.title} card={card} />
@@ -40,16 +47,23 @@ export function App() {
   )
 }
 
-function Hero(props: { count: number; doubled: number; onIncrement: () => void }) {
+function Hero(props: {
+  count: number
+  doubled: number
+  onIncrement: () => void
+}) {
   return (
     <section className="hero">
       <p className="eyebrow">React 19 Dev Inspector</p>
       <h1>Press the shortcut, hover anything, and click through to source.</h1>
       <p className="lede">
-        macOS: Ctrl + Shift + Command + C. Windows/Linux: Ctrl + Shift + Alt + C.
+        macOS: Ctrl + Shift + Command + C. Windows/Linux: Ctrl + Shift + Alt +
+        C.
       </p>
       <div className="actions">
-        <button onClick={props.onIncrement}>Increment example state</button>
+        <button type="button" onClick={props.onIncrement}>
+          Increment example state
+        </button>
         <span>
           count={props.count}, doubled={props.doubled}
         </span>

examples/basic-react19/src/main.tsx

@@ -3,7 +3,10 @@ import { createRoot } from 'react-dom/client'
 import { App } from './App'
 import './styles.css'
 
-createRoot(document.getElementById('root')!).render(
+const container = document.getElementById('root')
+if (!container) throw new Error('#root element not found')
+
+createRoot(container).render(
   <StrictMode>
     <App />
   </StrictMode>,

examples/basic-react19/src/styles.css

@@ -1,7 +1,9 @@
 :root {
   color: #111827;
   background: #f8fafc;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", sans-serif;
 }
 
 * {

examples/basic-react19/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package.json

@@ -10,10 +10,14 @@
     "build": "npm -w vite-react-inspector run build",
     "dev:example": "npm -w basic-react19-inspector-example run dev",
     "typecheck": "npm -w vite-react-inspector run typecheck && npm -w basic-react19-inspector-example run typecheck",
-    "verify": "node packages/react19-dev-inspector/scripts/verify-layout.mjs"
+    "verify": "node packages/vite-react-inspector/scripts/verify-layout.mjs",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "format": "biome format --write ."
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.4.13",
     "@types/node": "^22.10.0",
-    "typescript": "^5.9.0"
+    "typescript": "^6.0.3"
   }
 }