@unpackjs/plugin-react 1.6.0 → 1.6.1

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

@@ -35,7 +35,7 @@ var import_node_http = __toESM(require("node:http"));
 var import_node_path = __toESM(require("node:path"));
 var import_core = require("@unpackjs/core");
 var import_launch_editor = __toESM(require("launch-editor"));
-function createServer() {
+const createServer = () => {
   return new Promise((resolve) => {
     const server = import_node_http.default.createServer((req, res) => {
       const params = new URLSearchParams(req.url.slice(1));
@@ -59,30 +59,42 @@ function createServer() {
       });
     });
   });
-}
+};
 const addClickToComponentSupport = async ({
   config,
-  bundler
+  unpackConfig
 }) => {
-  if (!(0, import_core.isDev)())
-    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(
-    new bundler.BannerPlugin({
-      banner: `
+  const scriptTpl = `
 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$/
-    })
-  );
+}`;
+  if (unpackConfig.mpa) {
+    Object.values(config.entry).forEach((entryConfig) => {
+      const filePath = entryConfig.import[0];
+      const content = import_node_fs.default.readFileSync(filePath, "utf-8");
+      import_node_fs.default.writeFileSync(filePath, `${scriptTpl}
+${content}`, "utf-8");
+    });
+  } else {
+    const realEntryPath = import_node_path.default.resolve(config.context, import_core.TEMP_DIR, "entry.jsx");
+    const tpl = `
+${scriptTpl}
+import '${(0, import_core.getPathInJs)(import_node_path.default.resolve(Object.values(config.entry)[0]))}'
+`;
+    const dir = import_node_path.default.dirname(realEntryPath);
+    if (!import_node_fs.default.existsSync(dir))
+      import_node_fs.default.mkdirSync(dir, { recursive: true });
+    import_node_fs.default.writeFileSync(realEntryPath, tpl, "utf-8");
+    config.entry = {
+      main: realEntryPath
+    };
+  }
   return config;
 };
 // Annotate the CommonJS export names for ESM import in node:

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/click-to-component/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,oBAAoB,EAAkB,MAAM,gBAAgB,CAAA;AA4B1E,eAAO,MAAM,0BAA0B,yBAGpC;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,OAAO,EAAE,GAAG,CAAA;CACb,KAAG,OAAO,CAAC,oBAAoB,CAoB/B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/click-to-component/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,YAAY,EAGlB,MAAM,gBAAgB,CAAA;AA4BvB,eAAO,MAAM,0BAA0B,8BAGpC;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;CAC3B,KAAG,OAAO,CAAC,oBAAoB,CA+B/B,CAAA"}

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

@@ -10,9 +10,13 @@ var __filename = /* @__PURE__ */ getFilename();
 import fs from "node:fs";
 import http from "node:http";
 import path2 from "node:path";
-import { getPort, isDev } from "@unpackjs/core";
+import {
+  TEMP_DIR,
+  getPathInJs,
+  getPort
+} from "@unpackjs/core";
 import launchEditor from "launch-editor";
-function createServer() {
+const createServer = () => {
   return new Promise((resolve) => {
     const server = http.createServer((req, res) => {
       const params = new URLSearchParams(req.url.slice(1));
@@ -36,30 +40,42 @@ function createServer() {
       });
     });
   });
-}
+};
 const addClickToComponentSupport = async ({
   config,
-  bundler
+  unpackConfig
 }) => {
-  if (!isDev())
-    return config;
   const { port } = await createServer();
   const injectScript = fs.readFileSync(path2.resolve(__dirname, "./injectScript.js"), "utf-8");
-  config.plugins.push(
-    new bundler.BannerPlugin({
-      banner: `
+  const scriptTpl = `
 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$/
-    })
-  );
+}`;
+  if (unpackConfig.mpa) {
+    Object.values(config.entry).forEach((entryConfig) => {
+      const filePath = entryConfig.import[0];
+      const content = fs.readFileSync(filePath, "utf-8");
+      fs.writeFileSync(filePath, `${scriptTpl}
+${content}`, "utf-8");
+    });
+  } else {
+    const realEntryPath = path2.resolve(config.context, TEMP_DIR, "entry.jsx");
+    const tpl = `
+${scriptTpl}
+import '${getPathInJs(path2.resolve(Object.values(config.entry)[0]))}'
+`;
+    const dir = path2.dirname(realEntryPath);
+    if (!fs.existsSync(dir))
+      fs.mkdirSync(dir, { recursive: true });
+    fs.writeFileSync(realEntryPath, tpl, "utf-8");
+    config.entry = {
+      main: realEntryPath
+    };
+  }
   return config;
 };
 export {

package/dist/index.cjs

@@ -41,15 +41,16 @@ const PLUGIN_NAME = "unpack:react";
 const pluginReact = (options = {}) => {
   return {
     name: PLUGIN_NAME,
-    bundlerConfig: async (originalConfig, { unpackConfig, mergeConfig, bundler }) => {
+    bundlerConfig: async (originalConfig, { unpackConfig, mergeConfig }) => {
       let config = originalConfig;
-      if (options.clickToComponent) {
-        config = await (0, import_click_to_component.addClickToComponentSupport)({ config, bundler });
-      }
       config = (0, import_mpa.addMpaSupport)({ config, unpackConfig, mergeConfig });
+      if ((0, import_core.isDev)() && options.clickToComponent) {
+        config = await (0, import_click_to_component.addClickToComponentSupport)({ config, unpackConfig });
+      }
+      const isRspack = unpackConfig.bundler === "rspack";
       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 swcLoader = isRspack ? "builtin:swc-loader" : require.resolve("swc-loader");
+      const ReactRefreshPlugin = isRspack ? import_plugin_react_refresh.default : import_react_refresh_webpack_plugin.default;
       const getSwcOptions = ({ tsx }) => {
         return {
           jsc: {
@@ -93,7 +94,7 @@ const pluginReact = (options = {}) => {
           (0, import_core.isDevServer)() && new ReactRefreshPlugin({
             overlay: false
           })
-        ],
+        ].filter(Boolean),
         resolve: {
           alias: {
             "@swc/helpers": import_node_path.default.dirname(require.resolve("@swc/helpers/package.json"))

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAwB,KAAK,YAAY,EAAe,MAAM,gBAAgB,CAAA;AAIrF,eAAO,MAAM,WAAW,iBAAiB,CAAA;AAEzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AACD,eAAO,MAAM,WAAW,aAAa,kBAAkB,KAAQ,YAmE9D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAwB,KAAK,YAAY,EAAsB,MAAM,gBAAgB,CAAA;AAI5F,eAAO,MAAM,WAAW,iBAAiB,CAAA;AAEzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AACD,eAAO,MAAM,WAAW,aAAa,kBAAkB,KAAQ,YAkE9D,CAAA"}

package/dist/index.js

@@ -10,22 +10,23 @@ 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 { DEFAULT_BROWSERSLIST, isDevServer } from "@unpackjs/core";
+import { DEFAULT_BROWSERSLIST, isDev, isDevServer } from "@unpackjs/core";
 import { addClickToComponentSupport } from "./click-to-component/index.js";
 import { addMpaSupport } from "./mpa.js";
 const PLUGIN_NAME = "unpack:react";
 const pluginReact = (options = {}) => {
   return {
     name: PLUGIN_NAME,
-    bundlerConfig: async (originalConfig, { unpackConfig, mergeConfig, bundler }) => {
+    bundlerConfig: async (originalConfig, { unpackConfig, mergeConfig }) => {
       let config = originalConfig;
-      if (options.clickToComponent) {
-        config = await addClickToComponentSupport({ config, bundler });
-      }
       config = addMpaSupport({ config, unpackConfig, mergeConfig });
+      if (isDev() && options.clickToComponent) {
+        config = await addClickToComponentSupport({ config, unpackConfig });
+      }
+      const isRspack = unpackConfig.bundler === "rspack";
       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 swcLoader = isRspack ? "builtin:swc-loader" : require.resolve("swc-loader");
+      const ReactRefreshPlugin = isRspack ? RspackReactRefreshPlugin : WebpackReactRefreshPlugin;
       const getSwcOptions = ({ tsx }) => {
         return {
           jsc: {
@@ -69,7 +70,7 @@ const pluginReact = (options = {}) => {
           isDevServer() && new ReactRefreshPlugin({
             overlay: false
           })
-        ],
+        ].filter(Boolean),
         resolve: {
           alias: {
             "@swc/helpers": path2.dirname(require.resolve("@swc/helpers/package.json"))

package/dist/mpa.cjs

@@ -51,37 +51,28 @@ const addMpaSupport = ({
     }
     return pageConfig;
   };
-  const getPathInJs = (absPath) => {
-    return JSON.stringify(absPath).slice(1, -1);
-  };
-  const getAbsPathForEntry = (_path) => {
-    const absPath = import_node_path.default.join(unpackConfig.root, _path);
-    const validPath = import_node_fs.default.existsSync(absPath) ? absPath : _path;
-    return getPathInJs(validPath);
-  };
   const createTempFile = (entry2) => {
     import_node_fs.default.rmSync(import_node_path.default.join(unpackConfig.root, tempDirectory), { recursive: true, force: true });
     const globalImport = userOptions.globalImport?.reduce((acc, curr) => {
       return `${acc}
-import '${getAbsPathForEntry(curr)}';`.trimStart();
+import '${(0, import_core.getPathInJs)(import_node_path.default.resolve(unpackConfig.root, curr))}'`;
     }, "") || "";
     const { layout } = userOptions;
-    const layoutImport = layout ? `import Layout from '${getAbsPathForEntry(layout)}';` : "";
+    const layoutImport = layout ? `import Layout from '${(0, import_core.getPathInJs)(import_node_path.default.resolve(unpackConfig.root, layout))}'` : "";
     const layoutJSX = layout ? "<Layout><App /></Layout>" : "<App />";
     const rootElement = `document.getElementById('${unpackConfig.html?.mountId}')`;
     const reactDOMSource = "react-dom/client";
-    const renderer = `ReactDOM.createRoot(${rootElement}).render(${layoutJSX});`;
+    const renderer = `ReactDOM.createRoot(${rootElement}).render(${layoutJSX})`;
     Object.entries(entry2).forEach(([entryName, entryConfig]) => {
       const filePath = import_node_path.default.join(unpackConfig.root, tempDirectory, `${entryName}.jsx`);
       const tpl = `
-// DO NOT CHANGE IT MANUALLY!
-import React from 'react';
-import ReactDOM from '${reactDOMSource}';
-import App from '${getPathInJs(entryConfig.import[0])}';${layoutImport && `
+import React from 'react'
+import ReactDOM from '${reactDOMSource}'
+import App from '${(0, import_core.getPathInJs)(entryConfig.import[0])}'${layoutImport && `
 ${layoutImport}`}
 ${globalImport}
 ${renderer}
-`.trimStart();
+`;
       const dir = import_node_path.default.dirname(filePath);
       if (!import_node_fs.default.existsSync(dir)) {
         import_node_fs.default.mkdirSync(dir, { recursive: true });

package/dist/mpa.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mpa.d.ts","sourceRoot":"","sources":["../src/mpa.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,oBAAoB,EAGzB,KAAK,YAAY,EAMlB,MAAM,gBAAgB,CAAA;AAavB,eAAO,MAAM,aAAa,2CAIvB;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;IAC1B,WAAW,EAAE,CAAC,GAAG,OAAO,EAAE,oBAAoB,EAAE,KAAK,oBAAoB,CAAA;CAC1E,KAAG,oBAoHH,CAAA"}
+{"version":3,"file":"mpa.d.ts","sourceRoot":"","sources":["../src/mpa.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,oBAAoB,EAGzB,KAAK,YAAY,EAOlB,MAAM,gBAAgB,CAAA;AAavB,eAAO,MAAM,aAAa,2CAIvB;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;IAC1B,WAAW,EAAE,CAAC,GAAG,OAAO,EAAE,oBAAoB,EAAE,KAAK,oBAAoB,CAAA;CAC1E,KAAG,oBAyGH,CAAA"}

package/dist/mpa.js

@@ -13,6 +13,7 @@ import {
   TEMPLATE_CONTENT,
   TEMP_DIR,
   colors,
+  getPathInJs,
   isDevServer,
   isFunction,
   isPlainObject,
@@ -36,37 +37,28 @@ const addMpaSupport = ({
     }
     return pageConfig;
   };
-  const getPathInJs = (absPath) => {
-    return JSON.stringify(absPath).slice(1, -1);
-  };
-  const getAbsPathForEntry = (_path) => {
-    const absPath = path2.join(unpackConfig.root, _path);
-    const validPath = fs.existsSync(absPath) ? absPath : _path;
-    return getPathInJs(validPath);
-  };
   const createTempFile = (entry2) => {
     fs.rmSync(path2.join(unpackConfig.root, tempDirectory), { recursive: true, force: true });
     const globalImport = userOptions.globalImport?.reduce((acc, curr) => {
       return `${acc}
-import '${getAbsPathForEntry(curr)}';`.trimStart();
+import '${getPathInJs(path2.resolve(unpackConfig.root, curr))}'`;
     }, "") || "";
     const { layout } = userOptions;
-    const layoutImport = layout ? `import Layout from '${getAbsPathForEntry(layout)}';` : "";
+    const layoutImport = layout ? `import Layout from '${getPathInJs(path2.resolve(unpackConfig.root, layout))}'` : "";
     const layoutJSX = layout ? "<Layout><App /></Layout>" : "<App />";
     const rootElement = `document.getElementById('${unpackConfig.html?.mountId}')`;
     const reactDOMSource = "react-dom/client";
-    const renderer = `ReactDOM.createRoot(${rootElement}).render(${layoutJSX});`;
+    const renderer = `ReactDOM.createRoot(${rootElement}).render(${layoutJSX})`;
     Object.entries(entry2).forEach(([entryName, entryConfig]) => {
       const filePath = path2.join(unpackConfig.root, tempDirectory, `${entryName}.jsx`);
       const tpl = `
-// DO NOT CHANGE IT MANUALLY!
-import React from 'react';
-import ReactDOM from '${reactDOMSource}';
-import App from '${getPathInJs(entryConfig.import[0])}';${layoutImport && `
+import React from 'react'
+import ReactDOM from '${reactDOMSource}'
+import App from '${getPathInJs(entryConfig.import[0])}'${layoutImport && `
 ${layoutImport}`}
 ${globalImport}
 ${renderer}
-`.trimStart();
+`;
       const dir = path2.dirname(filePath);
       if (!fs.existsSync(dir)) {
         fs.mkdirSync(dir, { recursive: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unpackjs/plugin-react",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "",
   "type": "module",
   "exports": {
@@ -30,8 +30,8 @@
     "@swc/core": "1.7.39",
     "@swc/helpers": "0.5.13",
     "launch-editor": "2.9.1",
-    "html-webpack-plugin": "5.6.2",
-    "@unpackjs/core": "^1.6.0"
+    "html-webpack-plugin": "5.6.3",
+    "@unpackjs/core": "^1.6.1"
   },
   "scripts": {
     "dev": "modern build --watch",