@react-perfscope/webpack 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ray
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,55 @@
+# @react-perfscope/webpack
+
+Webpack plugin that adds `react-perfscope/auto` as an additional entry in development mode.
+
+## Install
+
+```sh
+npm install -D @react-perfscope/webpack react-perfscope
+```
+
+## Usage
+
+```js
+// webpack.config.js
+const { ReactPerfscopePlugin } = require('@react-perfscope/webpack')
+
+module.exports = {
+  mode: 'development',
+  plugins: [
+    new ReactPerfscopePlugin(),
+  ],
+}
+```
+
+The plugin checks `compiler.options.mode` and is a no-op when mode is anything other than `'development'`.
+
+---
+
+<a id="한국어"></a>
+
+# 한국어
+
+development 모드에서 `react-perfscope/auto`를 추가 엔트리로 넣어주는 Webpack 플러그인.
+
+## 설치
+
+```sh
+npm install -D @react-perfscope/webpack react-perfscope
+```
+
+## 사용법
+
+```js
+// webpack.config.js
+const { ReactPerfscopePlugin } = require('@react-perfscope/webpack')
+
+module.exports = {
+  mode: 'development',
+  plugins: [
+    new ReactPerfscopePlugin(),
+  ],
+}
+```
+
+플러그인은 `compiler.options.mode`를 확인해서 `'development'` 외에는 no-op으로 동작한다.

package/dist/index.cjs

@@ -0,0 +1,66 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ReactPerfscopePlugin: () => ReactPerfscopePlugin,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+var ReactPerfscopePlugin = class {
+  constructor(_opts) {
+    void _opts;
+  }
+  apply(compiler) {
+    if (compiler.options.mode !== "development") return;
+    const EntryPlugin = compiler.webpack.EntryPlugin;
+    new EntryPlugin(
+      compiler.context,
+      "react-perfscope/auto",
+      {}
+    ).apply(compiler);
+    ensureJsProfilingHeader(compiler);
+  }
+};
+function ensureJsProfilingHeader(compiler) {
+  const KEY = "Document-Policy";
+  const VALUE = "js-profiling";
+  const options = compiler.options;
+  const devServer = options.devServer ?? (options.devServer = {});
+  if (devServer.headers === void 0) {
+    devServer.headers = { [KEY]: VALUE };
+    return;
+  }
+  if (Array.isArray(devServer.headers)) {
+    if (!devServer.headers.some((h) => h.key === KEY)) {
+      devServer.headers.push({ key: KEY, value: VALUE });
+    }
+    return;
+  }
+  if (!(KEY in devServer.headers)) {
+    devServer.headers[KEY] = VALUE;
+  }
+}
+var index_default = ReactPerfscopePlugin;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ReactPerfscopePlugin
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { Compiler } from 'webpack'\n\nexport interface ReactPerfscopePluginOptions {\n  // Reserved for Phase 6.\n}\n\n/**\n * Webpack plugin that adds `react-perfscope/auto` as an additional entry in\n * development mode. The auto module bootstraps recorder + render collector\n * + UI mount at runtime.\n */\nexport class ReactPerfscopePlugin {\n  constructor(_opts?: ReactPerfscopePluginOptions) {\n    void _opts\n  }\n\n  apply(compiler: Compiler): void {\n    if (compiler.options.mode !== 'development') return\n    const EntryPlugin = compiler.webpack.EntryPlugin\n    // EntryPlugin's options arg can be `string | EntryOptions`. Passing an\n    // empty EntryOptions makes this an additional \"global\" entry (loaded\n    // alongside the named entries). Webpack 5's typing accepts {} here.\n    new EntryPlugin(\n      compiler.context,\n      'react-perfscope/auto',\n      {} as ConstructorParameters<typeof EntryPlugin>[2]\n    ).apply(compiler)\n    ensureJsProfilingHeader(compiler)\n  }\n}\n\n/**\n * The JS Self-Profiling API (used to attribute long tasks to the developer's\n * own functions) only initializes when the document is served with a\n * `Document-Policy: js-profiling` response header. webpack-dev-server reads\n * `compiler.options.devServer` when no options are passed to it explicitly\n * (the `webpack serve` CLI path), so we merge the header in here. It's a no-op\n * where the browser lacks the API, and we never overwrite a user-set value.\n *\n * webpack-dev-server's `headers` can be an object map or an array of\n * `{ key, value }` entries — handle both shapes.\n */\nfunction ensureJsProfilingHeader(compiler: Compiler): void {\n  const KEY = 'Document-Policy'\n  const VALUE = 'js-profiling'\n  // `devServer` is contributed by webpack-dev-server's type augmentation and\n  // isn't part of webpack's core Configuration; treat it loosely.\n  const options = compiler.options as unknown as {\n    devServer?: {\n      headers?: Record<string, string> | Array<{ key: string; value: string }>\n    }\n  }\n  const devServer = (options.devServer ??= {})\n  if (devServer.headers === undefined) {\n    devServer.headers = { [KEY]: VALUE }\n    return\n  }\n  if (Array.isArray(devServer.headers)) {\n    if (!devServer.headers.some((h) => h.key === KEY)) {\n      devServer.headers.push({ key: KEY, value: VALUE })\n    }\n    return\n  }\n  if (!(KEY in devServer.headers)) {\n    devServer.headers[KEY] = VALUE\n  }\n}\n\nexport default ReactPerfscopePlugin\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWO,IAAM,uBAAN,MAA2B;AAAA,EAChC,YAAY,OAAqC;AAC/C,SAAK;AAAA,EACP;AAAA,EAEA,MAAM,UAA0B;AAC9B,QAAI,SAAS,QAAQ,SAAS,cAAe;AAC7C,UAAM,cAAc,SAAS,QAAQ;AAIrC,QAAI;AAAA,MACF,SAAS;AAAA,MACT;AAAA,MACA,CAAC;AAAA,IACH,EAAE,MAAM,QAAQ;AAChB,4BAAwB,QAAQ;AAAA,EAClC;AACF;AAaA,SAAS,wBAAwB,UAA0B;AACzD,QAAM,MAAM;AACZ,QAAM,QAAQ;AAGd,QAAM,UAAU,SAAS;AAKzB,QAAM,YAAa,QAAQ,cAAR,QAAQ,YAAc,CAAC;AAC1C,MAAI,UAAU,YAAY,QAAW;AACnC,cAAU,UAAU,EAAE,CAAC,GAAG,GAAG,MAAM;AACnC;AAAA,EACF;AACA,MAAI,MAAM,QAAQ,UAAU,OAAO,GAAG;AACpC,QAAI,CAAC,UAAU,QAAQ,KAAK,CAAC,MAAM,EAAE,QAAQ,GAAG,GAAG;AACjD,gBAAU,QAAQ,KAAK,EAAE,KAAK,KAAK,OAAO,MAAM,CAAC;AAAA,IACnD;AACA;AAAA,EACF;AACA,MAAI,EAAE,OAAO,UAAU,UAAU;AAC/B,cAAU,QAAQ,GAAG,IAAI;AAAA,EAC3B;AACF;AAEA,IAAO,gBAAQ;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,18 @@
+/// <reference lib="es2015" />
+/// <reference lib="dom" />
+
+import { Compiler } from 'webpack';
+
+interface ReactPerfscopePluginOptions {
+}
+/**
+ * Webpack plugin that adds `react-perfscope/auto` as an additional entry in
+ * development mode. The auto module bootstraps recorder + render collector
+ * + UI mount at runtime.
+ */
+declare class ReactPerfscopePlugin {
+    constructor(_opts?: ReactPerfscopePluginOptions);
+    apply(compiler: Compiler): void;
+}
+
+export { ReactPerfscopePlugin, type ReactPerfscopePluginOptions, ReactPerfscopePlugin as default };

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+/// <reference lib="es2015" />
+/// <reference lib="dom" />
+
+import { Compiler } from 'webpack';
+
+interface ReactPerfscopePluginOptions {
+}
+/**
+ * Webpack plugin that adds `react-perfscope/auto` as an additional entry in
+ * development mode. The auto module bootstraps recorder + render collector
+ * + UI mount at runtime.
+ */
+declare class ReactPerfscopePlugin {
+    constructor(_opts?: ReactPerfscopePluginOptions);
+    apply(compiler: Compiler): void;
+}
+
+export { ReactPerfscopePlugin, type ReactPerfscopePluginOptions, ReactPerfscopePlugin as default };

package/dist/index.js

@@ -0,0 +1,41 @@
+// src/index.ts
+var ReactPerfscopePlugin = class {
+  constructor(_opts) {
+    void _opts;
+  }
+  apply(compiler) {
+    if (compiler.options.mode !== "development") return;
+    const EntryPlugin = compiler.webpack.EntryPlugin;
+    new EntryPlugin(
+      compiler.context,
+      "react-perfscope/auto",
+      {}
+    ).apply(compiler);
+    ensureJsProfilingHeader(compiler);
+  }
+};
+function ensureJsProfilingHeader(compiler) {
+  const KEY = "Document-Policy";
+  const VALUE = "js-profiling";
+  const options = compiler.options;
+  const devServer = options.devServer ?? (options.devServer = {});
+  if (devServer.headers === void 0) {
+    devServer.headers = { [KEY]: VALUE };
+    return;
+  }
+  if (Array.isArray(devServer.headers)) {
+    if (!devServer.headers.some((h) => h.key === KEY)) {
+      devServer.headers.push({ key: KEY, value: VALUE });
+    }
+    return;
+  }
+  if (!(KEY in devServer.headers)) {
+    devServer.headers[KEY] = VALUE;
+  }
+}
+var index_default = ReactPerfscopePlugin;
+export {
+  ReactPerfscopePlugin,
+  index_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { Compiler } from 'webpack'\n\nexport interface ReactPerfscopePluginOptions {\n  // Reserved for Phase 6.\n}\n\n/**\n * Webpack plugin that adds `react-perfscope/auto` as an additional entry in\n * development mode. The auto module bootstraps recorder + render collector\n * + UI mount at runtime.\n */\nexport class ReactPerfscopePlugin {\n  constructor(_opts?: ReactPerfscopePluginOptions) {\n    void _opts\n  }\n\n  apply(compiler: Compiler): void {\n    if (compiler.options.mode !== 'development') return\n    const EntryPlugin = compiler.webpack.EntryPlugin\n    // EntryPlugin's options arg can be `string | EntryOptions`. Passing an\n    // empty EntryOptions makes this an additional \"global\" entry (loaded\n    // alongside the named entries). Webpack 5's typing accepts {} here.\n    new EntryPlugin(\n      compiler.context,\n      'react-perfscope/auto',\n      {} as ConstructorParameters<typeof EntryPlugin>[2]\n    ).apply(compiler)\n    ensureJsProfilingHeader(compiler)\n  }\n}\n\n/**\n * The JS Self-Profiling API (used to attribute long tasks to the developer's\n * own functions) only initializes when the document is served with a\n * `Document-Policy: js-profiling` response header. webpack-dev-server reads\n * `compiler.options.devServer` when no options are passed to it explicitly\n * (the `webpack serve` CLI path), so we merge the header in here. It's a no-op\n * where the browser lacks the API, and we never overwrite a user-set value.\n *\n * webpack-dev-server's `headers` can be an object map or an array of\n * `{ key, value }` entries — handle both shapes.\n */\nfunction ensureJsProfilingHeader(compiler: Compiler): void {\n  const KEY = 'Document-Policy'\n  const VALUE = 'js-profiling'\n  // `devServer` is contributed by webpack-dev-server's type augmentation and\n  // isn't part of webpack's core Configuration; treat it loosely.\n  const options = compiler.options as unknown as {\n    devServer?: {\n      headers?: Record<string, string> | Array<{ key: string; value: string }>\n    }\n  }\n  const devServer = (options.devServer ??= {})\n  if (devServer.headers === undefined) {\n    devServer.headers = { [KEY]: VALUE }\n    return\n  }\n  if (Array.isArray(devServer.headers)) {\n    if (!devServer.headers.some((h) => h.key === KEY)) {\n      devServer.headers.push({ key: KEY, value: VALUE })\n    }\n    return\n  }\n  if (!(KEY in devServer.headers)) {\n    devServer.headers[KEY] = VALUE\n  }\n}\n\nexport default ReactPerfscopePlugin\n"],"mappings":";AAWO,IAAM,uBAAN,MAA2B;AAAA,EAChC,YAAY,OAAqC;AAC/C,SAAK;AAAA,EACP;AAAA,EAEA,MAAM,UAA0B;AAC9B,QAAI,SAAS,QAAQ,SAAS,cAAe;AAC7C,UAAM,cAAc,SAAS,QAAQ;AAIrC,QAAI;AAAA,MACF,SAAS;AAAA,MACT;AAAA,MACA,CAAC;AAAA,IACH,EAAE,MAAM,QAAQ;AAChB,4BAAwB,QAAQ;AAAA,EAClC;AACF;AAaA,SAAS,wBAAwB,UAA0B;AACzD,QAAM,MAAM;AACZ,QAAM,QAAQ;AAGd,QAAM,UAAU,SAAS;AAKzB,QAAM,YAAa,QAAQ,cAAR,QAAQ,YAAc,CAAC;AAC1C,MAAI,UAAU,YAAY,QAAW;AACnC,cAAU,UAAU,EAAE,CAAC,GAAG,GAAG,MAAM;AACnC;AAAA,EACF;AACA,MAAI,MAAM,QAAQ,UAAU,OAAO,GAAG;AACpC,QAAI,CAAC,UAAU,QAAQ,KAAK,CAAC,MAAM,EAAE,QAAQ,GAAG,GAAG;AACjD,gBAAU,QAAQ,KAAK,EAAE,KAAK,KAAK,OAAO,MAAM,CAAC;AAAA,IACnD;AACA;AAAA,EACF;AACA,MAAI,EAAE,OAAO,UAAU,UAAU;AAC/B,cAAU,QAAQ,GAAG,IAAI;AAAA,EAC3B;AACF;AAEA,IAAO,gBAAQ;","names":[]}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@react-perfscope/webpack",
+  "version": "0.1.0",
+  "description": "webpack plugin for react-perfscope — auto-mounts the profiler in dev and injects the js-profiling Document-Policy header.",
+  "keywords": [
+    "webpack",
+    "webpack-plugin",
+    "react",
+    "performance",
+    "profiler"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "webpack": "^5.90.0"
+  },
+  "devDependencies": {
+    "webpack": "^5.95.0"
+  },
+  "license": "MIT",
+  "author": "rayforvideos",
+  "homepage": "https://github.com/rayforvideos/react-perfscope#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rayforvideos/react-perfscope.git",
+    "directory": "packages/webpack-plugin"
+  },
+  "bugs": "https://github.com/rayforvideos/react-perfscope/issues",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup && node scripts/prepend-dts-refs.mjs",
+    "typecheck": "tsc --noEmit"
+  }
+}