@unpackjs/plugin-react 0.27.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 dingff
+
+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/dist/click-to-component/index.cjs

@@ -0,0 +1,93 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var click_to_component_exports = {};
+__export(click_to_component_exports, {
+  addClickToComponentSupport: () => addClickToComponentSupport
+});
+module.exports = __toCommonJS(click_to_component_exports);
+var import_node_fs = __toESM(require("node:fs"));
+var import_node_http = __toESM(require("node:http"));
+var import_node_path = __toESM(require("node:path"));
+var import_shared = require("@unpackjs/shared");
+var import_launch_editor = __toESM(require("launch-editor"));
+function createServer() {
+  return new Promise((resolve) => {
+    const server = import_node_http.default.createServer((req, res) => {
+      const params = new URLSearchParams(req.url.slice(1));
+      const file = decodeURIComponent(params.get("file"));
+      const line = Number(params.get("line"));
+      const column = Number(params.get("column"));
+      res.writeHead(200, {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "*",
+        "Access-Control-Allow-Headers": "*",
+        "Access-Control-Allow-Private-Network": "true"
+      });
+      res.end("ok");
+      (0, import_launch_editor.default)(`${file}:${line}:${column}`);
+    });
+    (0, import_shared.getPort)(3100).then((port) => {
+      server.listen(port, () => {
+        resolve({
+          port
+        });
+      });
+    });
+  });
+}
+const addClickToComponentSupport = async ({
+  config,
+  unpackConfig,
+  webpack
+}) => {
+  if (!(0, import_shared.isDev)() || unpackConfig.clickToComponent === false)
+    return config;
+  const { port } = await createServer();
+  const injectScript = import_node_fs.default.readFileSync(import_node_path.default.resolve(__dirname, "./injectScript.js"), "utf-8");
+  config.plugins.push(
+    // @ts-ignore
+    new webpack.BannerPlugin({
+      banner: `
+if (!document.querySelector('#__click-to-component__')) {
+  const script = document.createElement('script')
+  window['CLICK_TO_COMPONENT'] = { port: ${port} }
+  script.setAttribute('type', 'text/javascript')
+  script.textContent = \`${injectScript}\`
+  document.body.appendChild(script)
+}`,
+      entryOnly: true,
+      raw: true,
+      exclude: /\.css$/
+    })
+  );
+  return config;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  addClickToComponentSupport
+});

package/dist/click-to-component/index.d.ts

@@ -0,0 +1,7 @@
+import { type BundlerConfiguration, type UnpackConfig } from '@unpackjs/shared';
+export declare const addClickToComponentSupport: ({ config, unpackConfig, webpack, }: {
+    config: BundlerConfiguration;
+    unpackConfig: UnpackConfig;
+    webpack;
+}) => Promise<BundlerConfiguration>;
+//# sourceMappingURL=index.d.ts.map

package/dist/click-to-component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/click-to-component/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,YAAY,EAAkB,MAAM,kBAAkB,CAAA;AA4B/F,eAAO,MAAM,0BAA0B,uCAIpC;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;IAC1B,OAAO,CAAA;CACR,KAAG,QAAQ,oBAAoB,CAqB/B,CAAA"}

package/dist/click-to-component/index.js

@@ -0,0 +1,69 @@
+import { createRequire } from 'node:module';
+var require = createRequire(import.meta['url']);
+
+import { fileURLToPath } from "url";
+import path from "path";
+var getFilename = () => fileURLToPath(import.meta.url);
+var getDirname = () => path.dirname(getFilename());
+var __dirname = /* @__PURE__ */ getDirname();
+var __filename = /* @__PURE__ */ getFilename();
+import fs from "node:fs";
+import http from "node:http";
+import path2 from "node:path";
+import { getPort, isDev } from "@unpackjs/shared";
+import launchEditor from "launch-editor";
+function createServer() {
+  return new Promise((resolve) => {
+    const server = http.createServer((req, res) => {
+      const params = new URLSearchParams(req.url.slice(1));
+      const file = decodeURIComponent(params.get("file"));
+      const line = Number(params.get("line"));
+      const column = Number(params.get("column"));
+      res.writeHead(200, {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "*",
+        "Access-Control-Allow-Headers": "*",
+        "Access-Control-Allow-Private-Network": "true"
+      });
+      res.end("ok");
+      launchEditor(`${file}:${line}:${column}`);
+    });
+    getPort(3100).then((port) => {
+      server.listen(port, () => {
+        resolve({
+          port
+        });
+      });
+    });
+  });
+}
+const addClickToComponentSupport = async ({
+  config,
+  unpackConfig,
+  webpack
+}) => {
+  if (!isDev() || unpackConfig.clickToComponent === false)
+    return config;
+  const { port } = await createServer();
+  const injectScript = fs.readFileSync(path2.resolve(__dirname, "./injectScript.js"), "utf-8");
+  config.plugins.push(
+    // @ts-ignore
+    new webpack.BannerPlugin({
+      banner: `
+if (!document.querySelector('#__click-to-component__')) {
+  const script = document.createElement('script')
+  window['CLICK_TO_COMPONENT'] = { port: ${port} }
+  script.setAttribute('type', 'text/javascript')
+  script.textContent = \`${injectScript}\`
+  document.body.appendChild(script)
+}`,
+      entryOnly: true,
+      raw: true,
+      exclude: /\.css$/
+    })
+  );
+  return config;
+};
+export {
+  addClickToComponentSupport
+};

package/dist/click-to-component/injectScript.js

@@ -0,0 +1,137 @@
+const COVER_ID = '__click-to-component__'
+let cover = null
+let currentDebugSource = null
+let enabled = false
+function debounce(fn, delay = 200) {
+  let timer = null
+  return (...args) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      fn(...args)
+    }, delay)
+  }
+}
+function applyStyles(target, styles) {
+  Object.entries(styles).forEach(([key, value]) => {
+    target.style[key] = value
+  })
+}
+function createCover() {
+  cover = document.createElement('div')
+  cover.id = COVER_ID
+  applyStyles(cover, {
+    position: 'fixed',
+    zIndex: '999999',
+    background: 'rgba(120, 170, 210, 0.6)',
+    display: 'none',
+    pointerEvents: 'none',
+  })
+  document.body.appendChild(cover)
+}
+function updateCover(target) {
+  if (typeof target.getBoundingClientRect !== 'function') {
+    currentDebugSource = null
+    return
+  }
+  const { top, left, width, height } = target.getBoundingClientRect()
+  applyStyles(cover, {
+    top: top + 'px',
+    left: left + 'px',
+    width: width + 'px',
+    height: height + 'px',
+    display: 'block',
+  })
+}
+function hideCover() {
+  cover.style.display = 'none'
+}
+function getFiberWithDebugSourceByTarget(target) {
+  const fiberKey = Object.keys(target).find((key) => key.includes('__reactFiber'))
+  const maxDepth = 10
+  const doNext = (fiber, depth = 0) => {
+    if (!fiber) return
+    if (depth > maxDepth) {
+      console.warn('Recursion depth exceeded. Aborting to prevent stack overflow.')
+      return
+    }
+    if (fiber._debugSource) {
+      // console.log('_debugSource-depth', depth, fiber)
+      return fiber
+    }
+    if (fiber._debugOwner) {
+      return doNext(fiber._debugOwner, depth + 1)
+    }
+    console.warn('[WARN] click-to-component cannot work with the minified version of React.')
+  }
+  return doNext(target[fiberKey])
+}
+function getClosestNodeFromFiber(fiber) {
+  if (fiber.stateNode) {
+    return fiber.stateNode
+  }
+  return getClosestNodeFromFiber(fiber.return)
+}
+function openEditor() {
+  if (!currentDebugSource) return
+  const port = window.CLICK_TO_COMPONENT.port
+  const { fileName, lineNumber, columnNumber } = currentDebugSource
+  const url = [
+    'http://localhost:',
+    port,
+    '/?file=',
+    fileName,
+    '&line=',
+    lineNumber,
+    '&column=',
+    columnNumber,
+  ].join('')
+  const sendXHR = () => {
+    const xhr = new XMLHttpRequest()
+    xhr.open('GET', url, true)
+    xhr.send()
+    xhr.addEventListener('error', () => {
+      // 通过img方式发送请求
+      const img = document.createElement('img')
+      img.src = url
+    })
+  }
+  sendXHR()
+}
+document.addEventListener(
+  'mouseover',
+  debounce((e) => {
+    if (!enabled) return
+    const target = e.target
+    const fiber = getFiberWithDebugSourceByTarget(target)
+    if (!fiber) return
+    const closestNode = getClosestNodeFromFiber(fiber)
+    if (!closestNode) return
+    currentDebugSource = fiber._debugSource
+    updateCover(closestNode)
+  }, 30),
+)
+document.addEventListener(
+  'click',
+  (e) => {
+    if (!enabled) return
+    e.stopPropagation()
+    e.preventDefault()
+    openEditor()
+    hideCover()
+    enabled = false
+  },
+  true,
+)
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Alt') {
+    enabled = true
+  }
+})
+document.addEventListener('keyup', (e) => {
+  if (e.key === 'Alt') {
+    enabled = false
+    hideCover()
+  }
+})
+
+createCover()

package/dist/index.cjs

@@ -0,0 +1,105 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+__export(src_exports, {
+  PLUGIN_NAME: () => PLUGIN_NAME,
+  pluginReact: () => pluginReact
+});
+module.exports = __toCommonJS(src_exports);
+var import_node_path = __toESM(require("node:path"));
+var import_react_refresh_webpack_plugin = __toESM(require("@pmmmwh/react-refresh-webpack-plugin"));
+var import_plugin_react_refresh = __toESM(require("@rspack/plugin-react-refresh"));
+var import_shared = require("@unpackjs/shared");
+var import_click_to_component = require("./click-to-component/index.cjs");
+const PLUGIN_NAME = "unpack:react";
+const pluginReact = () => {
+  return {
+    name: PLUGIN_NAME,
+    bundlerConfig: async (config, { unpackConfig, mergeConfig, webpack }) => {
+      const next = await (0, import_click_to_component.addClickToComponentSupport)({ config, unpackConfig, webpack });
+      const jsExclude = [/node_modules[\\/](?!\.unpack)/];
+      const swcLoader = unpackConfig.bundler === "rspack" ? "builtin:swc-loader" : require.resolve("swc-loader");
+      const ReactRefreshPlugin = unpackConfig.bundler === "rspack" ? import_plugin_react_refresh.default : import_react_refresh_webpack_plugin.default;
+      const getSwcOptions = ({ tsx }) => {
+        return {
+          jsc: {
+            parser: {
+              tsx,
+              syntax: "typescript",
+              dynamicImport: true,
+              decorators: true
+            },
+            externalHelpers: true,
+            transform: {
+              react: {
+                runtime: "automatic",
+                refresh: (0, import_shared.isDevServer)()
+              }
+            }
+          },
+          env: {
+            targets: "Chrome >= 48"
+          }
+        };
+      };
+      return mergeConfig(next, {
+        module: {
+          rules: [
+            {
+              test: /\.(j|t)s$/,
+              exclude: jsExclude,
+              loader: swcLoader,
+              options: getSwcOptions({ tsx: false })
+            },
+            {
+              test: /\.(j|t)sx$/,
+              exclude: jsExclude,
+              loader: swcLoader,
+              options: getSwcOptions({ tsx: true })
+            }
+          ]
+        },
+        plugins: [
+          (0, import_shared.isDevServer)() && new ReactRefreshPlugin({
+            overlay: false
+          })
+        ],
+        resolve: {
+          alias: {
+            "@swc/helpers": import_node_path.default.dirname(require.resolve("@swc/helpers/package.json"))
+          }
+        }
+      });
+    }
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PLUGIN_NAME,
+  pluginReact
+});

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { type UnpackPlugin } from '@unpackjs/shared';
+export declare const PLUGIN_NAME = "unpack:react";
+export declare const pluginReact: () => UnpackPlugin;
+//# 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":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAe,MAAM,kBAAkB,CAAA;AAGjE,eAAO,MAAM,WAAW,iBAAiB,CAAA;AACzC,eAAO,MAAM,WAAW,QAAO,YA+D9B,CAAA"}

package/dist/index.js

@@ -0,0 +1,80 @@
+import { createRequire } from 'node:module';
+var require = createRequire(import.meta['url']);
+
+import { fileURLToPath } from "url";
+import path from "path";
+var getFilename = () => fileURLToPath(import.meta.url);
+var getDirname = () => path.dirname(getFilename());
+var __dirname = /* @__PURE__ */ getDirname();
+var __filename = /* @__PURE__ */ getFilename();
+import path2 from "node:path";
+import WebpackReactRefreshPlugin from "@pmmmwh/react-refresh-webpack-plugin";
+import RspackReactRefreshPlugin from "@rspack/plugin-react-refresh";
+import { isDevServer } from "@unpackjs/shared";
+import { addClickToComponentSupport } from "./click-to-component/index.js";
+const PLUGIN_NAME = "unpack:react";
+const pluginReact = () => {
+  return {
+    name: PLUGIN_NAME,
+    bundlerConfig: async (config, { unpackConfig, mergeConfig, webpack }) => {
+      const next = await addClickToComponentSupport({ config, unpackConfig, webpack });
+      const jsExclude = [/node_modules[\\/](?!\.unpack)/];
+      const swcLoader = unpackConfig.bundler === "rspack" ? "builtin:swc-loader" : require.resolve("swc-loader");
+      const ReactRefreshPlugin = unpackConfig.bundler === "rspack" ? RspackReactRefreshPlugin : WebpackReactRefreshPlugin;
+      const getSwcOptions = ({ tsx }) => {
+        return {
+          jsc: {
+            parser: {
+              tsx,
+              syntax: "typescript",
+              dynamicImport: true,
+              decorators: true
+            },
+            externalHelpers: true,
+            transform: {
+              react: {
+                runtime: "automatic",
+                refresh: isDevServer()
+              }
+            }
+          },
+          env: {
+            targets: "Chrome >= 48"
+          }
+        };
+      };
+      return mergeConfig(next, {
+        module: {
+          rules: [
+            {
+              test: /\.(j|t)s$/,
+              exclude: jsExclude,
+              loader: swcLoader,
+              options: getSwcOptions({ tsx: false })
+            },
+            {
+              test: /\.(j|t)sx$/,
+              exclude: jsExclude,
+              loader: swcLoader,
+              options: getSwcOptions({ tsx: true })
+            }
+          ]
+        },
+        plugins: [
+          isDevServer() && new ReactRefreshPlugin({
+            overlay: false
+          })
+        ],
+        resolve: {
+          alias: {
+            "@swc/helpers": path2.dirname(require.resolve("@swc/helpers/package.json"))
+          }
+        }
+      });
+    }
+  };
+};
+export {
+  PLUGIN_NAME,
+  pluginReact
+};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@unpackjs/plugin-react",
+  "version": "0.27.0",
+  "description": "",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
+  "keywords": [],
+  "authors": [],
+  "license": "MIT",
+  "files": [
+    "dist",
+    "compiled"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
+    "@rspack/plugin-react-refresh": "0.7.5",
+    "react-refresh": "0.14.2",
+    "swc-loader": "0.2.6",
+    "@swc/core": "1.7.0",
+    "@swc/helpers": "0.5.12",
+    "launch-editor": "2.8.0",
+    "@unpackjs/shared": "^0.27.0"
+  },
+  "scripts": {
+    "dev": "modern build --watch",
+    "build": "modern build"
+  }
+}