@zk-tech/rrt-plugin-rspack

Rspack plugin for ReactRenderTracker.

Install

pnpm add -D @zk-tech/rrt-plugin-rspack @rspack/core

Usage

// rspack.config.js
const { rspack } = require('@rspack/core');
const { PerfMonitorRspackPlugin } = require('@zk-tech/rrt-plugin-rspack');

module.exports = {
  plugins: [
    new rspack.HtmlRspackPlugin({
      template: './index.html',
    }),
    new PerfMonitorRspackPlugin({
      separate: false,
      diffMode: 'lite',
      updateTrace: true,
      commitTrace: true,
      // rendererId: 1,
      // editor: 'cursor',
      // disabled: process.env.NODE_ENV === 'production',
    }),
  ],
};

PerfMonitorRspackPlugin requires rspack.HtmlRspackPlugin and should be placed after it.

Separate Mode

Set separate: true to run DevTools in a separate page.

new PerfMonitorRspackPlugin({
  separate: true,
});

Then open:

http://localhost:<port>/__perf-monitor-devtools__/standalone

The plugin will also print this URL hint automatically when rspack dev starts.

Options

• disabled?: boolean
• rendererId?: number
• separate?: boolean
• editor?: 'code' | 'webstorm' | 'idea' | 'cursor' | 'zed' | 'code-insiders'
• diffMode?: 'off' | 'lite' | 'full'
• updateTrace?: boolean
• commitTrace?: boolean