### Develop example site in subdirectory (pnpm)

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

Starts the development server for an example site located in a subdirectory (e.g., 'examples/vite4') after navigating into it.

```bash
cd examples/vite4
pnpm dev
```

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

### Develop example sites (pnpm)

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

Starts the development server for specific example sites (e.g., '@example/vite4', '@example/nextjs') using pnpm filters. Requires prior building of plugin packages.

```bash
pnpm --filter @example/vite4 dev
pnpm --filter @example/nextjs dev
```

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

### Sync demo code across examples (bash script)

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

Synchronizes demo code from the 'vite4' example to other example projects using a shell script located at the project root.

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

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

### Build example sites and project site (pnpm)

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

Builds all example sites and the main project site. Requires prior building of plugin packages.

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

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

### Install all dependencies (pnpm)

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

Installs all project dependencies using the pnpm package manager within the monorepo structure.

```bash
pnpm i
```

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

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

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

Installs the @react-dev-inspector/launch-editor-endpoint package as a development 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

Installs the `@react-dev-inspector/babel-plugin` as a development dependency using npm.

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

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

### Install Umi v3 Plugin

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

Installs the Umi v3 plugin package for react-dev-inspector using npm or yarn.

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

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

### Build core and plugin packages (pnpm)

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

Executes the build process for both the core packages and any associated plugins within the project.

```bash
pnpm build:packages
```

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

### Install @babel/preset-react

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

Installs the @babel/preset-react package as a development dependency. This preset is commonly used in React frameworks for compiling JSX.

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

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

### Install react-dev-inspector middleware

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

Installs the necessary middleware package for react-dev-inspector using npm or yarn.

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

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

### Install Umi v4 Plugin

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

Installs the Umi v4 plugin package for react-dev-inspector using npm or yarn.

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

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

### Install react-dev-inspector middleware

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

Installs the necessary middleware package for react-dev-inspector using npm or yarn.

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

```

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

### Install React Dev Inspector

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

Installs the react-dev-inspector package as a development dependency using npm.

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

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

### Publish packages manually (pnpm)

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

Publishes packages to a registry with specific configurations. Includes options for dry runs ('--dry-run') and tagging ('--tag beta'). Requires '--report-summary' to generate a summary file.

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

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

### Install Vite Plugin

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

Install the @react-dev-inspector/vite-plugin package as a dev dependency using npm or yarn.

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

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

### Manually bump package versions (pnpm)

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

Manually sets the version for packages within the './packages/**' directory to a specified version (e.g., '2.0.0-beta.2').

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

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

### Import necessary modules in React Dev Inspector

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

Imports Image and other components from next/components, and a video preview from local assets. This setup is typical for Next.js projects utilizing custom components and media.

```javascript
import Image from 'next/image'
import { Steps, Callout } from 'nextra/components'
import inspectorPreview from '@images/inspector.mp4'
import workingPipeline from '@images/working-pipeline.svg'
import { StackBlitz } from '@components/stack-blitz'
```

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

### Configure @babel/preset-react for Development

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

Configures the @babel/preset-react with 'runtime: automatic' and 'development: process.env.NODE_ENV === "development"'. This setup enables the inclusion of development-specific optimizations and source code location information.

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

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

### Compress SVG files (svgo)

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

Compresses SVG files using the 'svgo' tool. Options include specifying the path ('-i'), pretty printing ('--pretty'), and setting plugin configurations ('-p').

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

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

### Update dependency in a single package (pnpm)

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

Updates a specific dependency (e.g., 'typescript') within a single package directory (e.g., 'examples/vite4'). Uses the '-L' or '--latest' flag.

```bash
cd examples/vite4
pnpm update -L typescript
```

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

### Run unit tests recursively (pnpm)

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

Executes unit tests across all packages in the monorepo. Equivalent to 'pnpm test -r', 'pnpm run -r test', or 'pnpm run --recursive test'.

```bash
pnpm test
pnpm test -r
pnpm run -r test
pnpm run --recursive test
```

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

### Configure Next.js for React Dev Inspector Babel Plugin

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

This example demonstrates adding the '@react-dev-inspector/babel-plugin' to the Babel configuration for a Next.js project, typically in a .babelrc.js or babel.config.js file.

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

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

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

### Configure esbuild-loader for JSX Development in Webpack

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

This JavaScript configuration example shows how to set up 'esbuild-loader' within Webpack's module rules to enable JSX development features ('jsx: "automatic"' and 'jsxDev: true') for .tsx files.

```javascript
{
  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 Nvim or Vim Editor (Shell)

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

Sets the REACT_EDITOR environment variable to 'nvim' or 'vim', allowing react-dev-inspector to launch files in Neovim or Vim respectively. This requires the respective command-line tools to be installed.

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

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

### Configure WebStorm Editor (Command-Line Tool)

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

Sets the REACT_EDITOR environment variable to 'webstorm', assuming the WebStorm command-line tool is installed and in the system's PATH. This directs react-dev-inspector to use WebStorm.

```zsh
export REACT_EDITOR=webstorm
```

```bash
export REACT_EDITOR=webstorm
```

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

### Handling Element Inspection with `onInspectElement`

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

Focuses on the `onInspectElement` callback, which is invoked when an element is left-clicked. It highlights the default `gotoServerEditor` behavior for opening source code in an IDE and explains that overriding this prop replaces the default functionality. Examples demonstrate using `gotoServerEditor` and alternative built-in utilities like `gotoVSCode`.

```typescript
onInspectElement?: (params: OnInspectElementParams<Element>) => void;

// Default: built-in `gotoServerEditor` util function
// 
// Callback when left-clicking on an element, with ensuring the source code info is found,
// the default `gotoServerEditor` callback will request the dev-server to open local IDE/editor from server-side.
// 
// Note: By override the **`onInspectElement`** prop, the default `gotoServerEditor` will be **removed**,
// that means you want to manually handle the source info, or handle how to goto editor by yourself.
// 
// You can also use the built-in `gotoServerEditor` util funtion in `onInspectElement` to get origin behavior (open local IDE on server-side),
//   it looks like:
// 
// ```tsx showLineNumbers {7}
// import { Inspector, gotoServerEditor } from 'react-dev-inspector'
// 
// <Inspector
//   onInspectElement={({ codeInfo }) => {
//     ... // your processing
// 
//     gotoServerEditor(codeInfo)
//   }}
// />
// ```
// 
// Or simply use other built-in utils likes `gotoVSCode`, `gotoVSCodeInsiders`, `gotoWebStorm` to open IDE/editor by **URL-scheme**,
// which not need any server side configuration:
// 
// ```tsx showLineNumbers
// import { gotoVSCode, gotoVSCodeInsiders, gotoWebStorm } from 'react-dev-inspector'
// 
// <Inspector
//   onInspectElement={gotoVSCode}
//   // onInspectElement={gotoVSCodeInsiders}
//   // onInspectElement={gotoWebStorm}
// />
// ```
```

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

### Update dependency version recursively (pnpm)

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

Updates a specific dependency (e.g., 'typescript') to the latest version across all packages in the monorepo. Uses '--recursive', '--dev', and '--latest' flags for comprehensive updates.

```bash
pnpm update -rDL typescript
pnpm update --recursive --dev --latest typescript
```

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

### Webpack 5 Integration with launchEditorMiddleware

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

Demonstrates how to add the `launchEditorMiddleware` to Webpack 5's dev server configuration using `setupMiddlewares`.

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

module.exports = {
  ...

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

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

### Create Next.js custom server with launchEditorMiddleware

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

Sets up a custom server for Next.js using Node.js. It integrates the `launchEditorMiddleware` from `@react-dev-inspector/middleware` to enable the code inspector functionality. The server handles requests by running the middleware pipeline, including the inspector and the default Next.js request handler.

```javascript
/**
 * 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 launchEditorMiddleware with webpack-dev-server

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

Demonstrates how to integrate the `launchEditorMiddleware` into a Webpack project using `webpack-dev-server`. The middleware should be placed early in the sequence.

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

module.exports = {
  ... 

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

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

### StackBlitz Integration for React Dev Inspector

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

Embeds an interactive StackBlitz project for users to try out the React Dev Inspector online. This includes specifying the project to load and the initial file to open, facilitating immediate experimentation.

```javascript
<div
  className='
    relative -mx-6 md:-ml-12 md:-mr-8 xl:-mr-12
    my-3 h-[600px] bg-[#0e0c0e] rounded-xl
  '
>
  <StackBlitz
    project='edit/github-x3rkzl'
    openFile='package.json,vite.config.ts%3AL17'
    view='default'
  />
</div>
```

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

### Webpack 4 Integration with launchEditorMiddleware

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

Shows how to incorporate the `launchEditorMiddleware` into Webpack 4's dev server using the `before` option.

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

module.exports = {
  ...

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

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

### React Stepper Component Usage

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

Demonstrates the usage of the Stepper and Step components to create a navigational progress indicator. Each step can have an index, a link, and an active state.

```javascript
import Image from 'next/image'
import { Stepper, Step } from '@components/stepper'
import middlewarePart from '@images/middleware-part.svg'

<Stepper>
  <Step index={0} link='/docs/compiler-plugin'>
    Optional <br className='block sm:hidden'/> Compiler
  </Step>
  <Step index={1} link='/docs/inspector-component'>
    Inspector <br className='block sm:hidden'/> Component
  </Step>
  <Step index={2} link='/docs/integration' active>
    Dev Server <br className='block sm:hidden'/> Middleware
  </Step>
</Stepper>
```

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

### Use launchEditorMiddleware with webpack-dev-middleware and Express

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

Shows how to use `launchEditorMiddleware` with `webpack-dev-middleware` and an Express.js server. The middleware is added before other server-related middlewares.

```typescript
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!"))
```

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

### Configure Rspack with launchEditorMiddleware

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

Adds the launchEditorMiddleware to the Rspack dev server configuration in rspack.config.ts. This middleware should be placed early in the sequence.

```typescript
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
```

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

### Add react-dev-inspector Middleware to config-overrides.js

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

This JavaScript code snippet demonstrates how to integrate the 'react-dev-inspector/middleware' into your webpack-dev-server configuration using customize-cra. It adds the launchEditorMiddleware to the setupMiddlewares array.

```javascript
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(
    ...
  ),
}
```

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

### Utility Function Exports for VSCode/WebStorm (JavaScript)

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

Illustrates the export of utility functions `gotoVSCode` and `gotoWebStorm` from the react-dev-inspector library. These functions are intended to help developers directly open code in their preferred IDEs.

```javascript
import { gotoVSCode, gotoWebStorm } from 'react-dev-inspector/utils';

// Example usage:
gotoVSCode({ filePath: 'src/MyComponent.js',lineNumber: 10 });
gotoWebStorm({ filePath: 'src/MyComponent.js', lineNumber: 10 });
```

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

### Update UMI Plugin Reference Paths

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

Updates the reference paths for UMI integration, distinguishing between UMI3 and UMI4. The path for UMI3 is now '@react-dev-inspector/umi3-plugin', and for UMI4, it is '@react-dev-inspector/umi4-plugin'.

```typescript
'@react-dev-inspector/umi3-plugin'
```

```typescript
'@react-dev-inspector/umi4-plugin'
```

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

### Launch Editor Endpoint Configuration (JavaScript)

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

Details the change in the launch editor endpoint from `/__open-stack-frame-in-editor` to `/__inspect-open-in-editor`. This snippet highlights the configuration for the middleware and the replacement of `react-dev-utils` with `launch-editor`.

```javascript
// Middleware configuration example (conceptual)
// ... other configurations ...
const config = {
  ...,
  openInEditorEndpoint: '/__inspect-open-in-editor',
  // Replacing 'react-dev-utils' with 'launch-editor'
};

```

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

### Integrate Inspector Component in React Entry Files

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

Demonstrates how to import and render the Inspector component in common React project entry files like main.tsx, App.tsx, and index.tsx.

```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>,
  )
```

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

export const App = () => {
  ...

  return (
    <>
      <Inspector />

      <h1>Vite App Title</h1>
      <div className="card">
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}
```

```tsx
import type { ReactNode } from 'react'
import { Inspector } from 'react-dev-inspector'
import Head from 'next/head'

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <>
      <Head>
        <meta charSet='utf-8' />
        <meta name='viewport' content='width=device-width, initial-scale=1' />
        <meta name='theme-color' content='#000000' />
        <meta name='description' content='website description' />

        <title>Nextjs App Title</title>
      </Head>

      <Inspector />

      {children}
    </>
  )
}
```

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

### Enable SWC React Development Transform

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

This JSON configuration snippet shows how to enable the development mode transform for React within SWC. This is usually handled automatically by frameworks but can be manually set in a .swcrc file.

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

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

### Configure VSCode as Default Editor (Shell)

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

Sets the REACT_EDITOR environment variable to 'code', which is the command-line tool for VSCode. This ensures react-dev-inspector opens files in VSCode.

```zsh
export REACT_EDITOR=code
```

```bash
export REACT_EDITOR=code
```

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

### Inspector Component Props

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

Illustrates the available props for the Inspector component, including keys, event handlers, and activation control.

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

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

### Import launchEditorEndpoint and types from @react-dev-inspector/launch-editor-endpoint

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

Imports the launchEditorEndpoint function and related types (LaunchEditorParams, TrustedEditor) from the @react-dev-inspector/launch-editor-endpoint package for use in TypeScript projects.

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

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

### Update package.json for Next.js custom server

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

Modifies the `dev` script in `package.json` to use a custom server file (`server.mjs`) for running the Next.js development server. This is a prerequisite for integrating the `react-dev-inspector` middleware.

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

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

### Modify package.json Scripts for React App Rewired

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

This snippet shows how to replace 'react-scripts' with 'react-app-rewired' in the 'scripts' section of your package.json file to enable custom configurations for create-react-app.

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

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

### Babel Plugin: Transform React JSX Source (Legacy)

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

Demonstrates the legacy @babel/plugin-transform-react-jsx-source, which injects a '__source' prop into JSX elements. This prop contains source file details and is also used by React for debugging.

```javascript
// Input
<div />

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

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

### React Dev Inspector Component Props

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

This section details the props available for the React Dev Inspector component, explaining their purpose and usage.

```APIDOC
## `active`

### Description
Controls the Inspector component. When `active` is set, the Inspector becomes a Controlled React Component, requiring manual state management for activation/deactivation. If not provided, it acts as an Uncontrolled component, toggling via hotkeys.

### Type
`active?: boolean{:ts}`

### Default
`false` (Uncontrolled behavior)

## `onActiveChange`

### Description
A callback function that is triggered when the `active` state of the Inspector changes. This occurs due to hotkey toggles or when the Inspector is deactivated via the Escape key or clicking.

### Type
`onActiveChange?: (active: boolean) => void{:ts}`

### Notes
This callback will not be triggered by changes to the `active` prop itself.

## `disable`

### Description
Disables all Inspector functionalities, including hotkey listening and element inspection triggers.

### Type
`disable?: boolean{:ts}`

### Default
`false` (Inspector is enabled by default)

### Behavior
By default, `react-dev-inspector` automatically disables itself in production environments.

## `inspectAgents`

### Description
An array of agents used to gather inspection information from different React renderers through user interaction. Provides a default `DomInspectAgent`.

### Type
`inspectAgents?: InspectAgent<Element>[]{:ts}`

### Default
`[new DomInspectAgent()]{:ts}`

## `onInspectElement`

### Description
A callback function executed when an element is left-clicked. It receives parameters including `codeInfo` which can be used to locate the source code. The default behavior uses `gotoServerEditor` to open the local IDE on the server.

### Type
`onInspectElement?: (params: OnInspectElementParams<Element>) => void{:ts}`

### Default
`gotoServerEditor{:ts}` utility function

### Usage Example
```tsx showLineNumbers
import { Inspector, gotoServerEditor } from 'react-dev-inspector'

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

### Alternative Defaults
Use built-in utilities like `gotoVSCode`, `gotoVSCodeInsiders`, or `gotoWebStorm` for direct IDE opening via URL-schemes without server configuration.

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

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

## `onHoverElement`

### Description
A callback function triggered when an element is hovered over.

### Type
`onHoverElement?: (params: InspectParams) => void{:ts}`

## `onClickElement`

### Description
A callback function executed when an element is left-clicked.

### Type
`onClickElement?: (params: InspectParams) => void{:ts}`

## `children`

### Description
Allows nesting of React nodes, supporting the Inspector as a standalone element or as a wrapper for other components.

### Type
`children?: ReactNode{:ts}`

### Usage Example
```tsx
// As a standalone element
<Layout>
  <Inspector />
  <App />
</Layout>

// As a wrapper
<Layout>
  <Inspector>
    <App />
  </Inspector>
</Layout>
```

## `disableLaunchEditor`

### Description
**Deprecated:** This prop is deprecated since v2.0.0. It previously controlled the default behavior of opening the local IDE upon component click. Use the `onInspectElement` prop for custom control over this functionality.

### Type
`disableLaunchEditor?: boolean{:ts}`

### Default
`true{:ts}` if `onInspectElement` is provided, otherwise `false{:ts}`.

### Deprecation Notice
`disableLaunchEditor` is deprecated. Please use the `onInspectElement` callback for all custom handling of editor launching.
```

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

### Deprecated `disableLaunchEditor` Prop

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

Addresses the deprecated `disableLaunchEditor` prop, which was used to control the default behavior of opening the IDE on component click. It advises users to use the `onInspectElement` callback instead for more comprehensive control, as this prop is no longer recommended.

```typescript
disableLaunchEditor?: boolean;

// Deprecated after: `v2.0.0`
// 
// - Default: `true` if setting [`onInspectElement`](#onInspectElement) callback, otherwise is `false`.
// 
// Whether to disable default behavior: "open local IDE when click on component".
// 
// **Deprecated** <br/>
// `disableLaunchEditor` is deprecated after v2, please use [`onInspectElement`](#onInspectElement) callback instead for fully custom controlling.
```

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

### Update Vite Plugin Import

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

Updates the import path for the Vite inspector server from 'react-dev-inspector/plugins/vite' to '@react-dev-inspector/vite-plugin'. This is required for projects using Vite.

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

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

### Babel Plugin: Transform React JSX Development

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

Illustrates how @babel/plugin-transform-react-jsx-development injects 'fileName', 'lineNumber', and 'columnNumber' into the _jsxDEV function. This information is crucial for React's fiber._debugSource.

```javascript
// Input
<div />

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

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

### Configure WebStorm Editor (Absolute Path - macOS)

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 forces react-dev-inspector to open files in WebStorm.

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

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

### Update Babel Plugin Reference Path

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

Changes the reference path for the Babel plugin from 'react-dev-inspector/plugins/babel' to '@react-dev-inspector/babel-plugin'. This ensures the correct Babel plugin is used.

```typescript
'@react-dev-inspector/babel-plugin'
```

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

### Configure UmiJS for React Dev Inspector

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

Adds the `@react-dev-inspector/umi4-plugin` to the plugins array in the UmiJS configuration file (e.g., `.umirc.dev.ts`). This enables the inspector functionality within the UmiJS project.

```typescript
import {
  defineConfig
} from 'umi'

export default defineConfig({
  ...

  plugins: [
    ...

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

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

### Configure Umi v3 Plugin

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

Adds the react-dev-inspector Umi v3 plugin to the UmiJS configuration file (`.umirc.dev.ts`). This plugin also includes a Babel plugin that auto-disables in production builds.

```typescript
import { defineConfig } from 'umi'

export default defineConfig({
  ...

  plugins: [
    ...

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

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

### Exporting Inspector Utilities (JavaScript)

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

Demonstrates the export of utility functions like fiberUtils and inspectUtils from the @react-dev-inspector/web-components package. These utilities are used for accessing React fiber and aiding in custom InspectAgent implementations.

```javascript
import { fiberUtils, inspectUtils } from '@react-dev-inspector/web-components';

// Usage examples for fiberUtils and inspectUtils...
```

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

### Configure Umi v4 Plugin

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

Adds the react-dev-inspector Umi v4 plugin to the UmiJS configuration file (`.umirc.dev.ts`). The plugin includes a Babel plugin that auto-disables with SWC or in production.

```typescript
import { defineConfig } from 'umi'

export default defineConfig({
  ...

  plugins: [
    ...

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

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

### Configuring Inspector Hotkeys

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

Shows how to set custom hotkeys for the Inspector component or disable them entirely by passing null to the 'keys' prop.

```tsx
keys={null} {:tsx}
```

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

### Update Umi Plugin Import Paths (JavaScript)

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

This snippet shows the updated import paths for Umi plugins when migrating from react-dev-inspector v1.x to v2.x. Specific paths for Umi 3 and Umi 4 have been introduced.

```javascript
import '@react-dev-inspector/umi3-plugin'
```

```javascript
import '@react-dev-inspector/umi4-plugin'
```

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

### Customizing Inspection Agents with `inspectAgents`

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

Explains the `inspectAgents` prop, which allows users to provide custom agents for gathering inspection information across different React renderers. It mentions the default `DomInspectAgent` and provides a link to the `InspectAgent` interface definition.

```typescript
inspectAgents?: InspectAgent<Element>[];

// Default: built-in [new DomInspectAgent()]
// 
// Agent for get inspection info in different React renderer with user interaction.
```

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

### Configure Vite Plugin in vite.config.ts

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

Add the inspectorServer middleware from the @react-dev-inspector/vite-plugin to your vite.config.ts file. This enables the local editor functionality compatible with various Vite versions.

```typescript
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(),
  ],
})
```

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

### Update Webpack Middleware Import

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

Replaces the import path for the Webpack middleware from 'react-dev-inspector/plugins/webpack' to '@react-dev-inspector/middleware'. This change is necessary for Webpack configurations using the inspector.

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

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

### Inspector Component Props (React)

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

Shows how to use the Inspector component with new controlled mode props such as `active` and `onActiveChange`. It also covers disabling hotkeys by setting the `keys` prop to `null` and managing the inspector's activation status.

```javascript
import { Inspector } from 'react-dev-inspector';

function App() {
  return (
    <Inspector
      active={true} // or false
      onActiveChange={(isActive) => console.log('Inspector active state changed:', isActive)}
      keys={null} // Disables hotkeys
    />
  );
}
```

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

### Update Babel Plugin Reference Path (JavaScript)

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

This snippet demonstrates the updated reference path for the babel plugin when migrating from react-dev-inspector v1.x to v2.x. The path has changed from 'react-dev-inspector/plugins/babel' to '@react-dev-inspector/babel-plugin'.

```javascript
import '@react-dev-inspector/babel-plugin'
```

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

### Configure Vite for React Dev Inspector Babel Plugin

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

This snippet shows how to add the '@react-dev-inspector/babel-plugin' to the Babel configuration within a Vite project's vite.config.ts file. It's intended for use with '@vitejs/plugin-react'.

```typescript
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 Inspector Config Type Import

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

Changes the import path for the inspector configuration type from 'react-dev-inspector/plugins/webpack' to '@react-dev-inspector/babel-plugin'. This updates how the Babel plugin's configuration type is imported.

```typescript
import type { InspectorBabelPlugin } from '@react-dev-inspector/babel-plugin'
```

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

### Inspector Children Prop for Layout Integration

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

Illustrates the `children` prop, which allows the Inspector component to be rendered either alongside other components or wrapping them. This flexibility supports various layout structures in React applications.

```typescript
children?: ReactNode;

// Any children of react nodes, to support usages like both of:
// 
// ```tsx
// <Layout>
//   <Inspector />
//   <App />
// </Layout>
// ```
// 
// and
// 
// ```tsx
// <Layout>
//   <Inspector>
//     <App />
//   </Inspector>
// </Layout>
// ```
```

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

### Hover and Click Element Callbacks

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

Defines the `onHoverElement` and `onClickElement` callbacks. `onHoverElement` is triggered when hovering over an element, and `onClickElement` is triggered specifically on a left-click, both receiving inspection parameters.

```typescript
onHoverElement?: (params: InspectParams) => void;
// Callback when hovering on an element

onClickElement?: (params: InspectParams) => void;
// Callback when left-clicking on an element.
```

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

### Babel Plugin: Injecting Inspector Data Attributes

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

Demonstrates how the `@react-dev-inspector/babel-plugin` transforms a simple div element by injecting custom data attributes. These attributes include the relative file path, line number, and column number, useful for development inspection tools.

```tsx
// Input
<div />

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

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

### Configure UmiJS v3 with React Dev Inspector Plugin

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

Add the `@react-dev-inspector/umi3-plugin` to the plugins array in your UmiJS v3 configuration file (e.g., `.umirc.dev.ts`). The plugin includes a Babel plugin that disables automatically in production mode.

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

export default defineConfig({
  ...

  plugins: [
    ...

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

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

### Controlled vs. Uncontrolled Inspector Active State

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

Explains how the `active` prop makes the Inspector a controlled component, requiring manual state management for activation/deactivation. If `active` is not provided, the Inspector operates in an uncontrolled mode, toggled by hotkeys.

```typescript
active?: boolean;

// If setting `active` prop, the Inspector will be a Controlled React Component,
you need to control the `true` / `false` state to active the Inspector.

// If not setting `active` prop, this only a Uncontrolled component that
// will activate/deactivate by hotkeys.
```

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

### Handling Active State Changes with onActiveChange

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

Describes the `onActiveChange` callback, which is triggered whenever the Inspector's active state changes. This includes toggles via hotkeys and deactivations via Escape or clicks. It explicitly states that changes to the `active` prop itself do not trigger this callback.

```typescript
onActiveChange?: (active: boolean) => void;

// Callback trigger by `active` state change, includes:
// - hotkeys toggle, before activate/deactivate Inspector
// - Escape / Click, before deactivate Inspector
// 
// Note: `onActiveChange` will NOT trigger by change of `active` prop key.
```

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

### Disabling Inspector Behavior with `disable`

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

Details the `disable` prop, a boolean that, when set to true, disables all Inspector functionalities, including listening for and triggering hotkeys. It also notes that the Inspector automatically disables itself in production environments by default.

```typescript
disable?: boolean;

// Whether to disable all behavior include hotkeys listening or trigger.
// 
// Note: `react-dev-inspector` will automatically **disable** in **production** environment by default.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.