@open-editor/react

Add a _debugSource prop to all Elements.

• 🌈 Supports React15+, Nextjs.
• 🪐 Support add to <Component/>.
• ✨ JSX support in .jsx, .tsx.
• 😃 Supports Vite, Webpack, create-react-app, Rollup.

For development only

before

// src/App.tsx
export default function App() {
  return <div>hello word</div>;
}

after

// src/App.tsx
export default function App() {
  return <div _debugSource={{ file: 'src/App.tsx', line: 3, column: 9 }}>hello word</div>;
}

Install

npm i @open-editor/react -D

Plugins

You need to make sure that openEditorReact is executed before jsx compiles the plugin for execution.

// vite.config.ts
import openEditorReact from '@open-editor/react/vite';

export default defineConfig({
  plugins: [
    openEditorReact({
      /* options */
    }),
    // other plugins
  ],
});

// rollup.config.js
import openEditorReact from '@open-editor/react/rollup';

export default {
  plugins: [
    openEditorReact({
      /* options */
    }),
    // other plugins
  ],
};

// webpack.config.js
module.exports = {
  plugins: [
    require('@open-editor/react/webpack')({
      /* options */
    }),
    // other plugins
  ],
};

// next.config.js
module.exports = {
  webpack(config, { isServer }) {
    if (!isServer) {
      config.plugins.push(
        require('@open-editor/react/webpack')({
          /* options */
        }),
      );
    }
    return config;
  },
};

Configuration

The following show the default values of the configuration

export interface Options {
  /**
   * 源码根路径 | Source root path
   * @default process.cwd()
   */
  rootDir?: string;
  /**
   * 是否生成 sourceMap | Generate sourceMap
   * @default false
   */
  sourceMap?: boolean;
  /**
   * 包含的文件 | Files to include
   * @default /\.(jsx|tsx)$/
   */
  include?: string | RegExp | (string | RegExp)[];
  /**
   * 排除的文件 | Files to exclude
   * @default /\/node_modules\//
   */
  exclude?: string | RegExp | (string | RegExp)[];
}