@ui-inspect/rspack-plugin 0.1.17

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Rspack plugin for ui-inspect
+ */
+export * from './plugin.js';
+export * from './types.js';
+export { default } from './plugin.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+/**
+ * Rspack plugin for ui-inspect
+ */
+export * from './plugin.js';
+export * from './types.js';
+export { default } from './plugin.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}

package/dist/plugin.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @ui-inspect/rspack-plugin
+ *
+ * Rspack plugin for ui-inspect.
+ * Injects browser UI into development builds served by rspack-dev-server.
+ */
+import type { UiInspectPluginOptions } from './types.js';
+interface RspackCompiler {
+    options: {
+        mode?: string;
+        devServer?: Record<string, unknown> & {
+            setupMiddlewares?: (middlewares: RspackMiddleware[], devServer: RspackDevServer) => RspackMiddleware[];
+        };
+        [key: string]: unknown;
+    };
+    hooks: {
+        compilation: {
+            tap: (name: string, fn: (c: RspackCompilation) => void) => void;
+        };
+        [key: string]: unknown;
+    };
+}
+interface RspackCompilation {
+    hooks: {
+        processAssets: {
+            tap: (opts: {
+                name: string;
+                stage: number;
+            }, fn: (assets: Record<string, RspackAsset>) => void) => void;
+        };
+    };
+    PROCESS_ASSETS_STAGE_ADDITIONS?: number;
+}
+interface RspackAsset {
+    source: () => string;
+    size: () => number;
+}
+interface RspackMiddleware {
+    [key: string]: unknown;
+}
+interface RspackResponse {
+    setHeader(k: string, v: string): void;
+    end(d?: string | Buffer): void;
+}
+interface RspackDevServer {
+    app?: {
+        get?(path: string, handler: (req: unknown, res: RspackResponse) => void): void;
+        [key: string]: unknown;
+    };
+    [key: string]: unknown;
+}
+export interface RspackUiInspectPluginOptions extends UiInspectPluginOptions {
+}
+export declare class RspackUiInspectPlugin {
+    private readonly options;
+    constructor(options?: RspackUiInspectPluginOptions);
+    apply(compiler: RspackCompiler): void;
+    private setupDevServerMiddleware;
+    private injectScriptIntoHtml;
+}
+export declare function uiInspect(options?: RspackUiInspectPluginOptions): RspackUiInspectPlugin;
+export default RspackUiInspectPlugin;
+//# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAUzD,UAAU,cAAc;IACtB,OAAO,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;YACpC,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,gBAAgB,EAAE,EAAE,SAAS,EAAE,eAAe,KAAK,gBAAgB,EAAE,CAAC;SACxG,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,KAAK,EAAE;QACL,WAAW,EAAE;YAAE,GAAG,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,KAAK,IAAI,CAAA;SAAE,CAAC;QACjF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;CACH;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE;QACL,aAAa,EAAE;YACb,GAAG,EAAE,CAAC,IAAI,EAAE;gBAAE,IAAI,EAAE,MAAM,CAAC;gBAAC,KAAK,EAAE,MAAM,CAAA;aAAE,EAAE,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,KAAK,IAAI,KAAK,IAAI,CAAC;SACzG,CAAC;KACH,CAAC;IACF,8BAA8B,CAAC,EAAE,MAAM,CAAC;CACzC;AAED,UAAU,WAAW;IAAG,MAAM,EAAE,MAAM,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,MAAM,CAAA;CAAE;AAElE,UAAU,gBAAgB;IAAG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE;AACrD,UAAU,cAAc;IAAG,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;CAAE;AAClG,UAAU,eAAe;IACvB,GAAG,CAAC,EAAE;QACJ,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,cAAc,KAAK,IAAI,GAAG,IAAI,CAAC;QAC/E,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,4BAA6B,SAAQ,sBAAsB;CAAG;AAE/E,qBAAa,qBAAqB;IAChC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAyC;gBAErD,OAAO,GAAE,4BAAiC;IAQtD,KAAK,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI;IASrC,OAAO,CAAC,wBAAwB;IAgChC,OAAO,CAAC,oBAAoB;CA4B7B;AAED,wBAAgB,SAAS,CAAC,OAAO,CAAC,EAAE,4BAA4B,GAAG,qBAAqB,CAEvF;AAED,eAAe,qBAAqB,CAAC"}

package/dist/plugin.js

@@ -0,0 +1,87 @@
+/**
+ * @ui-inspect/rspack-plugin
+ *
+ * Rspack plugin for ui-inspect.
+ * Injects browser UI into development builds served by rspack-dev-server.
+ */
+import { readFileSync } from 'node:fs';
+import { clientSource, getDianaAssetPath } from '@ui-inspect/browser-ui/plugin-runtime';
+const PLUGIN_NAME = '@ui-inspect/rspack-plugin';
+const CLIENT_PATH = '/@ui-inspect/client.js';
+const DIANA_PATH = '/@ui-inspect/diana.webp';
+const DEFAULT_DAEMON_URL = 'http://127.0.0.1:17321';
+export class RspackUiInspectPlugin {
+    constructor(options = {}) {
+        this.options = {
+            daemonUrl: options.daemonUrl || DEFAULT_DAEMON_URL,
+            root: options.root || process.cwd(),
+            enabled: options.enabled !== false,
+        };
+    }
+    apply(compiler) {
+        if (!this.options.enabled)
+            return;
+        this.setupDevServerMiddleware(compiler);
+        if (compiler.options.mode !== 'production') {
+            this.injectScriptIntoHtml(compiler);
+        }
+    }
+    setupDevServerMiddleware(compiler) {
+        const devServer = compiler.options.devServer;
+        if (!devServer)
+            return;
+        const originalSetup = devServer.setupMiddlewares;
+        const plugin = this;
+        devServer.setupMiddlewares = function (middlewares, devServer) {
+            const clientScript = clientSource({
+                daemonUrl: plugin.options.daemonUrl,
+                root: plugin.options.root,
+            });
+            let dianaBuffer = null;
+            try {
+                dianaBuffer = readFileSync(getDianaAssetPath());
+            }
+            catch { /* sprite optional */ }
+            if (devServer.app) {
+                devServer.app.get?.(CLIENT_PATH, (_req, res) => {
+                    res.setHeader('content-type', 'application/javascript; charset=utf-8');
+                    res.end(clientScript);
+                });
+                devServer.app.get?.(DIANA_PATH, (_req, res) => {
+                    res.setHeader('content-type', 'image/webp');
+                    res.end(dianaBuffer ?? Buffer.alloc(0));
+                });
+            }
+            return originalSetup ? originalSetup(middlewares, devServer) : middlewares;
+        };
+    }
+    injectScriptIntoHtml(compiler) {
+        const pluginName = this.constructor.name || PLUGIN_NAME;
+        compiler.hooks.compilation.tap(pluginName, (compilation) => {
+            const stage = compilation.PROCESS_ASSETS_STAGE_ADDITIONS ?? 1000;
+            compilation.hooks.processAssets.tap({ name: pluginName, stage }, (assets) => {
+                for (const assetName of Object.keys(assets)) {
+                    if (!assetName.endsWith('.html'))
+                        continue;
+                    const asset = assets[assetName];
+                    if (!asset || typeof asset.source !== 'function')
+                        continue;
+                    const html = asset.source();
+                    if (html.includes(`src="${CLIENT_PATH}"`))
+                        continue;
+                    const script = `<script type="module" src="${CLIENT_PATH}"></script>`;
+                    const bodyClose = html.match(/<\/body>/i);
+                    const injected = bodyClose
+                        ? html.slice(0, bodyClose.index) + script + html.slice(bodyClose.index)
+                        : html + script;
+                    assets[assetName] = { source: () => injected, size: () => injected.length };
+                }
+            });
+        });
+    }
+}
+export function uiInspect(options) {
+    return new RspackUiInspectPlugin(options);
+}
+export default RspackUiInspectPlugin;
+//# sourceMappingURL=plugin.js.map

package/dist/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Type definitions for ui-inspect Rspack plugin
+ */
+export interface UiInspectPluginOptions {
+    /**
+     * Daemon URL for SSE connection
+     * @default "http://127.0.0.1:17321"
+     */
+    daemonUrl?: string;
+    /**
+     * Project root path
+     * @default process.cwd()
+     */
+    root?: string;
+    /**
+     * Whether to enable the plugin
+     * @default true
+     */
+    enabled?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/types.js

@@ -0,0 +1,5 @@
+/**
+ * Type definitions for ui-inspect Rspack plugin
+ */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG"}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@ui-inspect/rspack-plugin",
+  "version": "0.1.17",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "!dist/**/*.test.*",
+    "!src/**/*.test.*"
+  ],
+  "peerDependencies": {
+    "@rspack/core": "^1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@rspack/core": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@ui-inspect/protocol": "0.1.17",
+    "@ui-inspect/browser-ui": "0.1.17"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.3"
+  },
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "watch": "tsc --watch"
+  }
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Rspack plugin for ui-inspect
+ */
+
+export * from './plugin.js';
+export * from './types.js';
+export { default } from './plugin.js';

package/src/plugin.ts

@@ -0,0 +1,143 @@
+/**
+ * @ui-inspect/rspack-plugin
+ *
+ * Rspack plugin for ui-inspect.
+ * Injects browser UI into development builds served by rspack-dev-server.
+ */
+
+import { readFileSync } from 'node:fs';
+import { clientSource, getDianaAssetPath } from '@ui-inspect/browser-ui/plugin-runtime';
+import type { UiInspectPluginOptions } from './types.js';
+
+const PLUGIN_NAME = '@ui-inspect/rspack-plugin';
+
+const CLIENT_PATH = '/@ui-inspect/client.js';
+const DIANA_PATH = '/@ui-inspect/diana.webp';
+const DEFAULT_DAEMON_URL = 'http://127.0.0.1:17321';
+
+// Minimal Rspack type surface. Rspack intentionally mirrors Webpack's plugin
+// shape, but this package does not import or depend on webpack.
+interface RspackCompiler {
+  options: {
+    mode?: string;
+    devServer?: Record<string, unknown> & {
+      setupMiddlewares?: (middlewares: RspackMiddleware[], devServer: RspackDevServer) => RspackMiddleware[];
+    };
+    [key: string]: unknown;
+  };
+  hooks: {
+    compilation: { tap: (name: string, fn: (c: RspackCompilation) => void) => void };
+    [key: string]: unknown;
+  };
+}
+
+interface RspackCompilation {
+  hooks: {
+    processAssets: {
+      tap: (opts: { name: string; stage: number }, fn: (assets: Record<string, RspackAsset>) => void) => void;
+    };
+  };
+  PROCESS_ASSETS_STAGE_ADDITIONS?: number;
+}
+
+interface RspackAsset { source: () => string; size: () => number }
+
+interface RspackMiddleware { [key: string]: unknown }
+interface RspackResponse { setHeader(k: string, v: string): void; end(d?: string | Buffer): void }
+interface RspackDevServer {
+  app?: {
+    get?(path: string, handler: (req: unknown, res: RspackResponse) => void): void;
+    [key: string]: unknown;
+  };
+  [key: string]: unknown;
+}
+
+export interface RspackUiInspectPluginOptions extends UiInspectPluginOptions {}
+
+export class RspackUiInspectPlugin {
+  private readonly options: Required<RspackUiInspectPluginOptions>;
+
+  constructor(options: RspackUiInspectPluginOptions = {}) {
+    this.options = {
+      daemonUrl: options.daemonUrl || DEFAULT_DAEMON_URL,
+      root: options.root || process.cwd(),
+      enabled: options.enabled !== false,
+    };
+  }
+
+  apply(compiler: RspackCompiler): void {
+    if (!this.options.enabled) return;
+
+    this.setupDevServerMiddleware(compiler);
+    if (compiler.options.mode !== 'production') {
+      this.injectScriptIntoHtml(compiler);
+    }
+  }
+
+  private setupDevServerMiddleware(compiler: RspackCompiler): void {
+    const devServer = compiler.options.devServer;
+    if (!devServer) return;
+
+    const originalSetup = devServer.setupMiddlewares;
+    const plugin = this;
+
+    devServer.setupMiddlewares = function (middlewares: RspackMiddleware[], devServer: RspackDevServer): RspackMiddleware[] {
+      const clientScript = clientSource({
+        daemonUrl: plugin.options.daemonUrl,
+        root: plugin.options.root,
+      });
+
+      let dianaBuffer: Buffer | null = null;
+      try { dianaBuffer = readFileSync(getDianaAssetPath()); } catch { /* sprite optional */ }
+
+      if (devServer.app) {
+        devServer.app.get?.(CLIENT_PATH, (_req: unknown, res: RspackResponse) => {
+          res.setHeader('content-type', 'application/javascript; charset=utf-8');
+          res.end(clientScript);
+        });
+
+        devServer.app.get?.(DIANA_PATH, (_req: unknown, res: RspackResponse) => {
+          res.setHeader('content-type', 'image/webp');
+          res.end(dianaBuffer ?? Buffer.alloc(0));
+        });
+      }
+
+      return originalSetup ? originalSetup(middlewares, devServer) : middlewares;
+    };
+  }
+
+  private injectScriptIntoHtml(compiler: RspackCompiler): void {
+    const pluginName = this.constructor.name || PLUGIN_NAME;
+
+    compiler.hooks.compilation.tap(pluginName, (compilation: RspackCompilation) => {
+      const stage = compilation.PROCESS_ASSETS_STAGE_ADDITIONS ?? 1000;
+
+      compilation.hooks.processAssets.tap({ name: pluginName, stage }, (assets: Record<string, RspackAsset>) => {
+        for (const assetName of Object.keys(assets)) {
+          if (!assetName.endsWith('.html')) continue;
+
+          const asset = assets[assetName];
+          if (!asset || typeof asset.source !== 'function') continue;
+
+          const html = asset.source();
+
+          if (html.includes(`src="${CLIENT_PATH}"`)) continue;
+
+          const script = `<script type="module" src="${CLIENT_PATH}"></script>`;
+          const bodyClose = html.match(/<\/body>/i);
+          const injected = bodyClose
+            ? html.slice(0, bodyClose.index) + script + html.slice(bodyClose.index)
+            : html + script;
+
+          assets[assetName] = { source: () => injected, size: () => injected.length } as typeof asset;
+        }
+      });
+    });
+  }
+}
+
+export function uiInspect(options?: RspackUiInspectPluginOptions): RspackUiInspectPlugin {
+  return new RspackUiInspectPlugin(options);
+}
+
+export default RspackUiInspectPlugin;

package/src/types.ts

@@ -0,0 +1,23 @@
+/**
+ * Type definitions for ui-inspect Rspack plugin
+ */
+
+export interface UiInspectPluginOptions {
+  /**
+   * Daemon URL for SSE connection
+   * @default "http://127.0.0.1:17321"
+   */
+  daemonUrl?: string;
+
+  /**
+   * Project root path
+   * @default process.cwd()
+   */
+  root?: string;
+
+  /**
+   * Whether to enable the plugin
+   * @default true
+   */
+  enabled?: boolean;
+}