React Dev Inspector

https://github.com/zthxxx/react-dev-inspector
Admin
React Dev Inspector is a tool that enables seamless code navigation from the browser to the IDE,...
Tokens:17,947
Snippets:173
Trust Score:9.1
License:MIT
Update:4 weeks ago
Show doc for...
Tokens:
Raw
### Run example dev server by changing directory

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/development.md

Alternative way to start a development server for an example site by changing to the example directory first. Example uses vite4.

```bash
cd examples/vite4
pnpm dev

```

--------------------------------

### Run example dev servers

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/development.md

Starts development servers for example sites using pnpm filters. Requires building plugins packages first. Shows examples for vite4 and nextjs, and a comment for other examples.

```bash
pnpm --filter @example/vite4 dev
pnpm --filter @example/nextjs dev
# pnpm --filter <...> dev

```

--------------------------------

### Install @react-dev-inspector/umi4-plugin

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/packages/umi4-plugin/README.md

Install the plugin package as a dev dependency.

```bash
npm i -D @react-dev-inspector/umi4-plugin
```

--------------------------------

### Install @react-dev-inspector/umi3-plugin

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/packages/umi3-plugin/README.md

Install the Umi3 plugin as a dev dependency.

```bash
npm i -D @react-dev-inspector/umi3-plugin
```

--------------------------------

### Install all dependencies in monorepo with pnpm

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/development.md

Run this command at the project root to install all dependencies in the monorepo. Requires pnpm to be installed globally first (e.g., npm i -g pnpm).

```bash
pnpm i

```

--------------------------------

### Build example sites and docs site

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/development.md

Builds the example sites and the documentation site. Requires building plugins packages first. Command: pnpm build:examples && pnpm build:site.

```bash
pnpm build:examples && pnpm build:site

```

--------------------------------

### Install @react-dev-inspector/launch-editor-endpoint

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/packages/launch-editor-endpoint/README.md

Install the package as a dev dependency using npm.

```bash
npm i -D @react-dev-inspector/launch-editor-endpoint
```

--------------------------------

### Install @react-dev-inspector/babel-plugin

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/packages/babel-plugin/README.md

Install the plugin as a dev dependency using npm.

```bash
npm i -D @react-dev-inspector/babel-plugin
```

--------------------------------

### Install react-dev-inspector

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/inspector-component.mdx

Install the react-dev-inspector package as a dev dependency.

```bash
npm i -D react-dev-inspector
```

--------------------------------

### Install @babel/preset-react

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/compiler-plugin.mdx

Install the @babel/preset-react package as a dev dependency using npm. This preset compiles JSX to React and is often a built-in preset in React frameworks.

```bash
npm i -D @babel/preset-react
```

--------------------------------

### Sync demo code from vite4 to other examples

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/development.md

Executes the sync-page-code.sh script at the project root to copy demo code from vite4 to other examples. Uses copied files rather than symlinks for StackBlitz compatibility.

```bash
./scripts/sync-page-code.sh

```

--------------------------------

### Install and configure @react-dev-inspector/umi3-plugin

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/integration/umijs.mdx

Install the Umi3 plugin package and add it to the plugins array in your UmiJS config file (e.g., .umirc.dev.ts). The plugin includes @react-dev-inspector/babel-plugin, which is automatically disabled in production build mode.

```bash
npm i -D @react-dev-inspector/umi3-plugin
```

```ts
// https://v3.umijs.org/config
import { defineConfig } from 'umi'

export default defineConfig({
  ...

  plugins: [
    ...

    '@react-dev-inspector/umi3-plugin',
  ],
})
```

--------------------------------

### Install @react-dev-inspector/middleware

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/integration/rspack.mdx

Install the middleware package as a dev dependency for the Rspack integration.

```bash
npm i -D @react-dev-inspector/middleware
```

--------------------------------

### Install @react-dev-inspector/vite-plugin

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/integration/vite.mdx

Install the Vite plugin as a dev dependency. The plugin only registers an inspectorServer middleware to launch the local editor with an endpoint using @react-dev-inspector/middleware, compatible with vite@5, vite@4, vite@3, and vite@2.

```bash
npm i -D @react-dev-inspector/vite-plugin
```

--------------------------------

### Bump package versions for publishing

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/development.md

Bumps the version of all packages under 'packages/**' using pnpm. Example sets version to 2.0.0-beta.2.

```bash
pnpm --filter './packages/**' exec pnpm version 2.0.0-beta.2

```

--------------------------------

### config-overrides.js with launchEditorMiddleware

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/integration/create-react-app.mdx

Add the launchEditorMiddleware to the webpack-dev-server setup in config-overrides.js.

```js
const {
  override,
  overrideDevServer,
} = require('customize-cra')
const { launchEditorMiddleware } = require('@react-dev-inspector/middleware')

module.exports = {
  /**
   * react-dev-inspector server config for webpack-dev-server
   */
  devServer: overrideDevServer(
    serverConfig => {
      // https://webpack.js.org/configuration/dev-server/#devserversetupmiddlewares
      serverConfig.setupMiddlewares = (middlewares) => {
        middlewares.unshift(launchEditorMiddleware)
        return middlewares
      }

      return serverConfig
    },
  ),

  webpack: override(
    ...
  ),
}
```

--------------------------------

### Install and configure @react-dev-inspector/umi4-plugin

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/integration/umijs.mdx

Install the Umi4 plugin package and add it to the plugins array in your UmiJS config file (e.g., .umirc.dev.ts). The plugin includes @react-dev-inspector/babel-plugin, which is automatically disabled when using srcTranspiler: 'swc' or in production build mode.

```bash
npm i -D @react-dev-inspector/umi4-plugin
```

```ts
// https://umijs.org/docs/api/config
import { defineConfig } from 'umi'

export default defineConfig({
  ...

  plugins: [
    ...

    '@react-dev-inspector/umi4-plugin',
  ],
})
```

--------------------------------

### Vite setup with @react-dev-inspector/babel-plugin

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/compiler-plugin.mdx

Configuration for Vite using @vitejs/plugin-react to add the @react-dev-inspector/babel-plugin. The inspectorServer() plugin is also added. If using @vitejs/plugin-react-swc, no plugin is needed.

```tsx
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { inspectorServer } from '@react-dev-inspector/vite-plugin'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    /** react-dev-inspector server config for vite */
    inspectorServer(),
    react({
      babel: {
        plugins: [
          '@react-dev-inspector/babel-plugin',
        ],
      },
    }),
  ],
})
```

--------------------------------

### Update dependency version in one package

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/development.md

Updates a dependency version (e.g., typescript) in a specific package by navigating to the package directory. Example uses the vite4 example directory.

```bash
# example for update dependency version in one package
cd examples/vite4
pnpm update -L typescript

```

--------------------------------

### Next.js setup with @react-dev-inspector/babel-plugin

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/compiler-plugin.mdx

Configuration for Next.js by adding the plugin to .babelrc.js. The preset 'next/babel' is used, and the plugin is added to the plugins array. If using SWC in Next.js, no plugin is needed.

```tsx
// https://nextjs.org/docs/pages/building-your-application/configuring/babel
module.exports = {
  presets: [
    'next/babel',
  ],

  plugins: [
    '@react-dev-inspector/babel-plugin',
  ],
}
```

--------------------------------

### Inspector Component Usage

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/inspector-component.mdx

Example of using the Inspector component with all props.

```APIDOC
## Inspector Component Props

### Description

The `<Inspector>` component from `react-dev-inspector` provides a set of props to configure hotkeys, active state, callbacks, and inspection behavior.

### Props

#### `keys`

- **Type:** `keys?: string[] | null`
- **Default:** `['Ctrl', 'Shift', 'Command', 'C']` on macOS, `['Ctrl', 'Shift', 'Alt', 'C']` on other platforms
- **Description:** Activity toggle hotkeys. Setting `keys={null}` disables hotkey triggering.

#### `active`

- **Type:** `active?: boolean`
- **Description:** When set, the Inspector becomes a controlled component; you must manage the active state. When not set, it is uncontrolled and toggles via hotkeys.

#### `onActiveChange`

- **Type:** `onActiveChange?: (active: boolean) => void`
- **Description:** Callback triggered when active state changes, including hotkey toggles and Escape/Click deactivation. Not triggered by changes to the `active` prop.

#### `disable`

- **Type:** `disable?: boolean`
- **Description:** Disables all behavior including hotkey listening and triggering. Automatically disabled in production.

#### `inspectAgents`

- **Type:** `inspectAgents?: InspectAgent<Element>[]`
- **Default:** `[new DomInspectAgent()]`
- **Description:** Agents for getting inspection info in different React renderers with user interaction.

#### `onInspectElement`

- **Type:** `onInspectElement?: (params: OnInspectElementParams<Element>) => void`
- **Default:** Built-in `gotoServerEditor`
- **Description:** Callback when left-clicking an element with source info found. Override to handle source info manually. Built-in utils: `gotoVSCode`, `gotoVSCodeInsiders`, `gotoWebStorm`.

#### `onHoverElement`

- **Type:** `onHoverElement?: (params: InspectParams) => void`
- **Description:** Callback when hovering over an element.

#### `onClickElement`

- **Type:** `onClickElement?: (params: InspectParams) => void`
- **Description:** Callback when left-clicking an element.

#### `children`

- **Type:** `children?: ReactNode`
- **Description:** React nodes to render inside or alongside the Inspector.

### Usage Examples

```tsx
<Inspector
  keys={['Ctrl', 'Shift', 'C']}
  onInspectElement={({ codeInfo }) => {
    // custom handling
  }}
  onHoverElement={(params) => console.log(params)}
  onClickElement={(params) => console.log(params)}
  active={true}
  onActiveChange={(active) => console.log(active)}
  disable={false}
/>
```

```tsx
import { gotoVSCode } from 'react-dev-inspector'

<Inspector onInspectElement={gotoVSCode} />
```
```

--------------------------------

### @babel/plugin-transform-react-jsx-source input/output example

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/compiler-plugin.mdx

Shows the transformation performed by the legacy @babel/plugin-transform-react-jsx-source plugin. It injects a __source prop with fileName, lineNumber, and columnNumber into JSX elements.

```tsx
// Input
<div />

// Output
<div __source={{ fileName: '/absolute/path/Component.tsx', lineNumber: 10, columnNumber: 6 }} />
```

--------------------------------

### @babel/plugin-transform-react-jsx-development input/output example

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/compiler-plugin.mdx

Shows the transformation performed by @babel/plugin-transform-react-jsx-development. The input is a simple <div /> and the output injects source parameters (fileName, lineNumber, columnNumber) into the _jsxDEV call, which React uses to set fiber._debugSource.

```tsx
// Input
<div />

// Output
_jsxDEV("div", {}, void 0, false, {
    fileName: '/absolute/path/Component.tsx',
    lineNumber: 10,
    columnNumber: 6
  },
)
```

--------------------------------

### Babel plugin transformation example

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/packages/babel-plugin/README.md

Shows the plugin injecting data-inspector-* attributes into a JSX element. The input is a simple div, and the output includes relative path, line, and column attributes.

```tsx
// Input
<div />

// Output
<div data-inspector-relative-path="src/path/Component.tsx" data-inspector-line="10" data-inspector-column="6" />
```

--------------------------------

### Configure inspectorServer in vite.config.ts

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/integration/vite.mdx

Add the inspectorServer plugin to the plugins array in vite.config.ts. The highlighted lines (3 and 16) show the import and the plugin invocation. This is the complete setup required to integrate react-dev-inspector into a Vite project.

```ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { inspectorServer } from '@react-dev-inspector/vite-plugin'

// https://vitejs.dev/config/
export default defineConfig({
  ...

  plugins: [
    react(),

    /**
     * react-dev-inspector server config for vite
     */
    inspectorServer(),
  ],
})
```

--------------------------------

### Create custom server with launchEditorMiddleware

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/integration/nextjs.mdx

Create a server.mjs file that uses launchEditorMiddleware from @react-dev-inspector/middleware. This middleware must be used in a custom server because it cannot run in Next.js Edge Runtime.

```js
/**
 * https://nextjs.org/docs/pages/building-your-application/configuring/custom-server
 */
import { createServer } from 'node:http'
import next from 'next'
import { launchEditorMiddleware } from '@react-dev-inspector/middleware'


const dev = process.env.NODE_ENV !== 'production'

const hostname = process.env.HOST || 'localhost'
const port = process.env.PORT ? Number(process.env.PORT) : 3000
const app = next({
  dev,
  hostname,
  port,
})
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    /**
     * middlewares, from top to bottom
     */
    const middlewares = [
      /** `react-dev-inspector` server config for nextjs */
      launchEditorMiddleware,

      /** Next.js default app handler as middleware */
      (req, res) => handle(req, res),
    ]

    const middlewarePipeline = middlewares.reduceRight(
      (next, middleware) => (
        () => { middleware(req, res, next) }
      ),
      () => {},
    )

    try {
      middlewarePipeline()
    }
    catch (err) {
      console.error('Error occurred handling', req.url, err)
      res.statusCode = 500
      res.end('internal server error')
    }
  })
    .once('error', (err) => {
      console.error(err)
      process.exit(1)
    })
    .listen(port, () => {
      console.debug(`\n > Ready on http://${hostname}:${port} \n`)
    })
```

--------------------------------

### Use URL-scheme editor utilities

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/inspector-component.mdx

Uses built-in URL-scheme utilities (gotoVSCode, gotoVSCodeInsiders, gotoWebStorm) to open the IDE/editor directly without any server-side configuration. Only one utility is active at a time; the others are commented out.

```tsx
import { gotoVSCode, gotoVSCodeInsiders, gotoWebStorm } from 'react-dev-inspector'

<Inspector
  onInspectElement={gotoVSCode}
  // onInspectElement={gotoVSCodeInsiders}
  // onInspectElement={gotoWebStorm}
/>
```

--------------------------------

### Webpack 5 setupMiddlewares with launchEditorMiddleware

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/integration/webpack.mdx

Add launchEditorMiddleware to the devServer.setupMiddlewares hook in webpack.config.js. Place it as far forward as possible in the middleware sequence.

```ts
const { launchEditorMiddleware } = require('@react-dev-inspector/middleware')

module.exports = {
  ...

  devServer: {
    setupMiddlewares(middlewares) {
      middlewares.unshift(launchEditorMiddleware)
      return middlewares
    },
  },
}
```

--------------------------------

### Build core and plugins packages

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/development.md

Builds the core and plugins packages in the monorepo. Command: pnpm build:packages.

```bash
pnpm build:packages

```

--------------------------------

### Run unit tests

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/development.md

Runs the unit tests for the project. Shows multiple equivalent commands: pnpm test, pnpm test -r, pnpm run -r test, and pnpm run --recursive test.

```bash
pnpm test
# it's equal to
pnpm test -r
pnpm run -r test
pnpm run --recursive test

```

--------------------------------

### Import launchEditorMiddleware

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/integration.mdx

Import the launchEditorMiddleware from the middleware package.

```ts
import { launchEditorMiddleware } from '@react-dev-inspector/middleware'
```

--------------------------------

### Import launchEditorEndpoint and types

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/packages/launch-editor-endpoint/README.md

Import the launchEditorEndpoint function and the LaunchEditorParams and TrustedEditor types from the package.

```ts
import {
  launchEditorEndpoint,
  type LaunchEditorParams,
  TrustedEditor,
} from '@react-dev-inspector/launch-editor-endpoint'
```

--------------------------------

### Use with webpack-dev-middleware

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/integration.mdx

Set up an Express server with webpack-dev-middleware and webpack-hot-middleware, adding launchEditorMiddleware before them.

```ts
const express = require("express")
const webpack = require("webpack")
const webpackDevMiddleware = require("webpack-dev-middleware")
const webpackHotMiddleware = require("webpack-hot-middleware")
const { launchEditorMiddleware } = require('@react-dev-inspector/middleware')

const app = express()

const compiler = webpack(webpackConfig)
const devMiddleware = webpackDevMiddleware(compiler, {
  // webpack-dev-middleware options
})
const hotMiddleware = webpackHotMiddleware(compiler, {
  // webpack-hot-middleware options
})

app.use(launchEditorMiddleware)

app.use(devMiddleware)
app.use(hotMiddleware)

app.listen(3000, () => console.log("Example app listening on port 3000!"))
```

--------------------------------

### Set REACT_EDITOR to WebStorm absolute path

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/editor-settings.mdx

Sets the REACT_EDITOR environment variable to the absolute path of the WebStorm executable on macOS. This is an alternative to installing WebStorm command-line tools.

```bash
export REACT_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'
```

--------------------------------

### Set REACT_EDITOR to WebStorm CLI

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/editor-settings.mdx

Sets the REACT_EDITOR environment variable to the WebStorm command-line tool 'webstorm' after installing WebStorm command-line tools. This is an alternative to using the absolute path.

```bash
export REACT_EDITOR=webstorm
```

--------------------------------

### Configure launchEditorMiddleware in rspack.config.ts

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/integration/rspack.mdx

Add launchEditorMiddleware to the Rspack devServer setupMiddlewares. Place it as far forward as possible, before other middlewares.

```ts
import type { Configuration } from '@rspack/cli'
import { launchEditorMiddleware } from '@react-dev-inspector/middleware'

const config: Configuration = {
  context: process.cwd(),
  entry: {
    main: './src/main.tsx',
  },

  ...

  devServer: {
    setupMiddlewares(middlewares) {
      /** react-dev-inspector server config for rspack */
      middlewares.unshift(launchEditorMiddleware)
      return middlewares
    },
  },
}

export default config
```

--------------------------------

### Publish packages with beta tag

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/development.md

Publishes all packages to npm with the beta tag. Shows a dry-run check, the actual publish command, and a command to check the publish summary log. Commands: pnpm publish -r --report-summary --tag beta --dry-run, pnpm publish -r --report-summary --tag beta, cat pnpm-publish-summary.json.

```bash
# for check
pnpm publish -r --report-summary --tag beta --dry-run

# to publish
pnpm publish -r --report-summary --tag beta

# to check log
cat pnpm-publish-summary.json

```

--------------------------------

### package.json scripts with react-app-rewired

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/integration/create-react-app.mdx

Replace react-scripts with react-app-rewired in the package.json scripts to enable configuration overrides.

```json
{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build"
  }
}
```

--------------------------------

### Next.js App Component with Global CSS Imports

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/_app.mdx

Imports global CSS files for the landing page, marquee, and general styles, then defines the App component that renders the page component with its props.

```jsx
import '@components/landing-page/home.global.css'
import '@components/marquee/marquee.global.css'
import './global.css'


export default function App({ Component, pageProps }) {
  return (
    <Component {...pageProps} />
  )
}
```

--------------------------------

### Webpack 4 devServer.before with launchEditorMiddleware

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/integration/webpack.mdx

Add launchEditorMiddleware to the devServer.before hook in webpack.config.js for Webpack 4.

```ts
const { launchEditorMiddleware } = require('@react-dev-inspector/middleware')

module.exports = {
  ...

  devServer: {
    before: (app, server, compiler) => {
      app.use(launchEditorMiddleware)
    },
  },
}
```

--------------------------------

### Configure @babel/preset-react with development option

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/compiler-plugin.mdx

Babel configuration enabling the development option for @babel/preset-react to provide precise code location information. The runtime is set to 'automatic' for React >= 16.14.0, and development is enabled when NODE_ENV is 'development'.

```ts
{
  presets: [
    [
      '@babel/preset-react',
      {
        runtime: 'automatic', // for react >= 16.14.0
        development: process.env.NODE_ENV === 'development',
      },
    ],
  ],
}
```

--------------------------------

### Update package.json dev script

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/integration/nextjs.mdx

Change the dev script to run the custom server (server.mjs) instead of the default Next.js dev command.

```json
{
  ...
  "scripts": {
    "dev": "node server.mjs",
    "build": "next build"
  }
}
```

--------------------------------

### Compress SVG files with svgo

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/development.md

Compresses SVG files using svgo. Shows two variants: one with -p 1 (pretty) and one with -p 1 --pretty. Target files are docs/images/browser-inspect.svg and docs/images/working-pipeline.svg.

```bash
# compress svg files
svgo -p 1 -i docs/images/browser-inspect.svg
svgo -p 1 --pretty -i docs/images/working-pipeline.svg

```

--------------------------------

### Custom onInspectElement with gotoServerEditor

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/inspector-component.mdx

Overrides onInspectElement to add custom processing before calling the built-in gotoServerEditor utility, which opens the local IDE/editor from the server-side. Note that overriding onInspectElement removes the default behavior, so you must handle the source info or editor navigation yourself.

```tsx
import { Inspector, gotoServerEditor } from 'react-dev-inspector'

<Inspector
  onInspectElement={({ codeInfo }) => {
    ... // your processing

    gotoServerEditor(codeInfo)
  }}
/>
```

--------------------------------

### Set REACT_EDITOR to Nvim or Vim

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/editor-settings.mdx

Sets the REACT_EDITOR environment variable to either 'nvim' or 'vim' to use Nvim or Vim as the editor. The comment '# or' indicates the two options are alternatives.

```bash
export REACT_EDITOR=nvim
# or
export REACT_EDITOR=vim
```

--------------------------------

### Inspector component props

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/inspector-component.mdx

Shows the full set of props accepted by the <Inspector> component. Use this as a reference for the available configuration options.

```tsx
<Inspector
  keys={...}
  onInspectElement={...}
  onHoverElement={...}
  onClickElement={...}
  active={...}
  onActiveChange={...}
  disable={...}
/>
```

--------------------------------

### Enable SWC react.development transform in .swcrc

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/compiler-plugin.mdx

Set jsc.transform.react.development to true in your SWC configuration (e.g., .swcrc) to enable debug source generation. This is usually set automatically in most frameworks, but must be manually enabled if not.

```json
{
  "jsc": {
    "transform": {
      "react": {
        "development": true
      }
    }
  }
}
```

--------------------------------

### Configure esbuild-loader with jsx and jsxDev options

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/compiler-plugin.mdx

Configure esbuild-loader in webpack's module.rules to use 'automatic' JSX and enable jsxDev in development. This ensures esbuild generates the debugSource needed by react-dev-inspector.

```js
{
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'esbuild-loader',
        options: {
          loader: 'tsx',
          // https://github.com/evanw/esbuild/blob/v0.20.0/lib/shared/types.ts#L58-L67
          jsx: 'automatic',
          jsxDev: process.env.NODE_ENV === 'development',
          ...
        },
      },
    ],
  },
}
```

--------------------------------

### Configure UmiJS with @react-dev-inspector/umi3-plugin

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/packages/umi3-plugin/README.md

Add the plugin to the UmiJS config file (e.g., .umirc.dev.ts). The plugin includes @react-dev-inspector/babel-plugin, which is automatically disabled in production build mode.

```ts
// https://v3.umijs.org/config
import { defineConfig } from 'umi'

export default defineConfig({
  ...

  plugins: [
    ...

    '@react-dev-inspector/umi3-plugin',
  ],
})
```

--------------------------------

### Add Inspector to main.tsx

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/inspector-component.mdx

Add the Inspector component to your main.tsx entry file, wrapping your app inside React.StrictMode.

```tsx
import { createRoot } from 'react-dom/client'
import { Inspector } from 'react-dev-inspector'
import { App } from './App'
import './index.css'

createRoot(document.getElementById('root') as HTMLDivElement)
  .render(
    <React.StrictMode>
      <Inspector />
      <App />
    </React.StrictMode>,
  )
```

--------------------------------

### Replace ReactInspectorPlugin with launchEditorMiddleware

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/migrate-v1-to-v2.mdx

The ReactInspectorPlugin is replaced by launchEditorMiddleware, imported from '@react-dev-inspector/middleware'.

```typescript
import { ReactInspectorPlugin } from 'react-dev-inspector/plugins/webpack'
```

```typescript
import { launchEditorMiddleware } from '@react-dev-inspector/middleware'
```

--------------------------------

### Replace Vite plugin import

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/migrate-v1-to-v2.mdx

In v2, the inspectorServer is imported from '@react-dev-inspector/vite-plugin' instead of 'react-dev-inspector/plugins/vite'.

```typescript
import { inspectorServer } from 'react-dev-inspector/plugins/vite'
```

```typescript
import { inspectorServer } from '@react-dev-inspector/vite-plugin'
```

--------------------------------

### Inspector wrapping children

Source: https://github.com/zthxxx/react-dev-inspector/blob/dev/docs/pages/docs/inspector-component.mdx

Shows the Inspector wrapping the App component as its children. This is the alternative supported usage pattern for the children prop.

```tsx
<Layout>
  <Inspector>
    <App />
  </Inspector>
</Layout>
```
Tokens:
Raw