@unpackjs/plugin-react 1.4.4 → 1.5.0

package/dist/index.cjs

@@ -36,6 +36,7 @@ var import_react_refresh_webpack_plugin = __toESM(require("@pmmmwh/react-refresh
 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");
+var import_mpa = require("./mpa.cjs");
 const PLUGIN_NAME = "unpack:react";
 const pluginReact = (options = {}) => {
   return {
@@ -45,6 +46,7 @@ const pluginReact = (options = {}) => {
       if (options.clickToComponent) {
         next = await (0, import_click_to_component.addClickToComponentSupport)({ config, bundler });
       }
+      next = (0, import_mpa.addMpaSupport)({ config, unpackConfig });
       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;

package/dist/index.d.ts.map

@@ -1 +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;AAEzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,WAAW,aAAa,kBAAkB,KAAQ,YAkE9D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAe,MAAM,kBAAkB,CAAA;AAIjE,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"}

package/dist/index.js

@@ -12,6 +12,7 @@ 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";
+import { addMpaSupport } from "./mpa.js";
 const PLUGIN_NAME = "unpack:react";
 const pluginReact = (options = {}) => {
   return {
@@ -21,6 +22,7 @@ const pluginReact = (options = {}) => {
       if (options.clickToComponent) {
         next = await addClickToComponentSupport({ config, bundler });
       }
+      next = addMpaSupport({ config, unpackConfig });
       const jsExclude = [/node_modules[\\/](?!\.unpack)/];
       const swcLoader = unpackConfig.bundler === "rspack" ? "builtin:swc-loader" : require.resolve("swc-loader");
       const ReactRefreshPlugin = unpackConfig.bundler === "rspack" ? RspackReactRefreshPlugin : WebpackReactRefreshPlugin;

package/dist/mpa.cjs

@@ -0,0 +1,154 @@
+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 mpa_exports = {};
+__export(mpa_exports, {
+  addMpaSupport: () => addMpaSupport
+});
+module.exports = __toCommonJS(mpa_exports);
+var import_node_fs = __toESM(require("node:fs"));
+var import_node_path = __toESM(require("node:path"));
+var import_shared = require("@unpackjs/shared");
+var import_html_webpack_plugin = __toESM(require("html-webpack-plugin"));
+const addMpaSupport = ({
+  config,
+  unpackConfig
+}) => {
+  if (!unpackConfig.mpa)
+    return config;
+  const tempDirectory = import_node_path.default.join(import_shared.TEMP_DIR, "mpa");
+  const userOptions = (0, import_shared.isPlainObject)(unpackConfig.mpa) ? unpackConfig.mpa : {};
+  const getPageConfig = (indexPath) => {
+    const filePath = import_node_path.default.join(indexPath, "../config.json");
+    let config2 = {};
+    if (import_node_fs.default.existsSync(filePath)) {
+      config2 = JSON.parse(import_node_fs.default.readFileSync(filePath, "utf-8"));
+    }
+    return config2;
+  };
+  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();
+    }, "") || "";
+    const { layout } = userOptions;
+    const layoutImport = layout ? `import Layout from '${getAbsPathForEntry(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});`;
+    Object.entries(entry2).forEach(([entryName, config2]) => {
+      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(config2.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 });
+      }
+      import_node_fs.default.writeFileSync(filePath, tpl, "utf-8");
+      config2.import[0] = filePath;
+    });
+    return entry2;
+  };
+  const collectEntry = () => {
+    const start = performance.now();
+    const entry2 = {};
+    const html2 = [];
+    const getIndexFilePath = (dir) => {
+      const extensions = [".tsx", ".jsx"];
+      for (const extension of extensions) {
+        const indexFilePath = import_node_path.default.join(dir, `index${extension}`);
+        if (import_node_fs.default.existsSync(indexFilePath)) {
+          return indexFilePath;
+        }
+      }
+      return null;
+    };
+    const pagesRoot = import_node_path.default.join(unpackConfig.root, "src", "pages");
+    import_node_fs.default.readdirSync(pagesRoot).forEach((filename) => {
+      if (filename.startsWith("."))
+        return;
+      const indexFilePath = getIndexFilePath(import_node_path.default.join(pagesRoot, filename));
+      if (indexFilePath) {
+        const pageConfig = getPageConfig(indexFilePath);
+        let entryName = userOptions.lowerCase === true ? filename.toLowerCase() : filename;
+        if (pageConfig.filename) {
+          entryName = pageConfig.filename.slice(0, -5);
+        }
+        entry2[entryName] = {
+          import: [indexFilePath]
+        };
+        if (pageConfig.template) {
+          pageConfig.template = import_node_path.default.join(indexFilePath, "../", pageConfig.template);
+        }
+        html2.push({
+          template: unpackConfig.html?.template || "",
+          templateContent: unpackConfig.html?.templateContent || import_shared.TEMPLATE_CONTENT,
+          minify: false,
+          filename: `${entryName}.html`,
+          chunks: [entryName],
+          ...pageConfig,
+          templateParameters: {
+            mountId: unpackConfig.html?.mountId,
+            title: (0, import_shared.isFunction)(unpackConfig.html?.title) ? unpackConfig.html?.title({ entryName }) : unpackConfig.html?.title,
+            headTag: unpackConfig.html?.headTag,
+            ...unpackConfig.html?.templateParameters,
+            ...pageConfig.templateParameters
+          }
+        });
+      }
+    });
+    !(0, import_shared.isDevServer)() && import_shared.logger.info(
+      `Collect entries in ${(performance.now() - start).toFixed(2)}ms ${import_shared.colors.dim("[MPA]")}`
+    );
+    return { entry: entry2, html: html2 };
+  };
+  const { entry, html } = collectEntry();
+  config.entry = createTempFile(entry);
+  config.plugins.push(...html.map((h) => new import_html_webpack_plugin.default(h)));
+  return config;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  addMpaSupport
+});

package/dist/mpa.d.ts

@@ -0,0 +1,6 @@
+import { type BundlerConfiguration, type UnpackConfig } from '@unpackjs/shared';
+export declare const addMpaSupport: ({ config, unpackConfig, }: {
+    config: BundlerConfiguration;
+    unpackConfig: UnpackConfig;
+}) => BundlerConfiguration;
+//# sourceMappingURL=mpa.d.ts.map

package/dist/mpa.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mpa.d.ts","sourceRoot":"","sources":["../src/mpa.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,oBAAoB,EAGzB,KAAK,YAAY,EAMlB,MAAM,kBAAkB,CAAA;AAazB,eAAO,MAAM,aAAa,8BAGvB;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;CAC3B,KAAG,oBAkHH,CAAA"}

package/dist/mpa.js

@@ -0,0 +1,138 @@
+import { createRequire } from 'node:module';
+var require = createRequire(import.meta['url']);
+
+import path from "path";
+import { fileURLToPath } from "url";
+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 path2 from "node:path";
+import {
+  TEMPLATE_CONTENT,
+  TEMP_DIR,
+  colors,
+  isDevServer,
+  isFunction,
+  isPlainObject,
+  logger
+} from "@unpackjs/shared";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+const addMpaSupport = ({
+  config,
+  unpackConfig
+}) => {
+  if (!unpackConfig.mpa)
+    return config;
+  const tempDirectory = path2.join(TEMP_DIR, "mpa");
+  const userOptions = isPlainObject(unpackConfig.mpa) ? unpackConfig.mpa : {};
+  const getPageConfig = (indexPath) => {
+    const filePath = path2.join(indexPath, "../config.json");
+    let config2 = {};
+    if (fs.existsSync(filePath)) {
+      config2 = JSON.parse(fs.readFileSync(filePath, "utf-8"));
+    }
+    return config2;
+  };
+  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();
+    }, "") || "";
+    const { layout } = userOptions;
+    const layoutImport = layout ? `import Layout from '${getAbsPathForEntry(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});`;
+    Object.entries(entry2).forEach(([entryName, config2]) => {
+      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(config2.import[0])}';${layoutImport && `
+${layoutImport}`}
+${globalImport}
+${renderer}
+`.trimStart();
+      const dir = path2.dirname(filePath);
+      if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+      }
+      fs.writeFileSync(filePath, tpl, "utf-8");
+      config2.import[0] = filePath;
+    });
+    return entry2;
+  };
+  const collectEntry = () => {
+    const start = performance.now();
+    const entry2 = {};
+    const html2 = [];
+    const getIndexFilePath = (dir) => {
+      const extensions = [".tsx", ".jsx"];
+      for (const extension of extensions) {
+        const indexFilePath = path2.join(dir, `index${extension}`);
+        if (fs.existsSync(indexFilePath)) {
+          return indexFilePath;
+        }
+      }
+      return null;
+    };
+    const pagesRoot = path2.join(unpackConfig.root, "src", "pages");
+    fs.readdirSync(pagesRoot).forEach((filename) => {
+      if (filename.startsWith("."))
+        return;
+      const indexFilePath = getIndexFilePath(path2.join(pagesRoot, filename));
+      if (indexFilePath) {
+        const pageConfig = getPageConfig(indexFilePath);
+        let entryName = userOptions.lowerCase === true ? filename.toLowerCase() : filename;
+        if (pageConfig.filename) {
+          entryName = pageConfig.filename.slice(0, -5);
+        }
+        entry2[entryName] = {
+          import: [indexFilePath]
+        };
+        if (pageConfig.template) {
+          pageConfig.template = path2.join(indexFilePath, "../", pageConfig.template);
+        }
+        html2.push({
+          template: unpackConfig.html?.template || "",
+          templateContent: unpackConfig.html?.templateContent || TEMPLATE_CONTENT,
+          minify: false,
+          filename: `${entryName}.html`,
+          chunks: [entryName],
+          ...pageConfig,
+          templateParameters: {
+            mountId: unpackConfig.html?.mountId,
+            title: isFunction(unpackConfig.html?.title) ? unpackConfig.html?.title({ entryName }) : unpackConfig.html?.title,
+            headTag: unpackConfig.html?.headTag,
+            ...unpackConfig.html?.templateParameters,
+            ...pageConfig.templateParameters
+          }
+        });
+      }
+    });
+    !isDevServer() && logger.info(
+      `Collect entries in ${(performance.now() - start).toFixed(2)}ms ${colors.dim("[MPA]")}`
+    );
+    return { entry: entry2, html: html2 };
+  };
+  const { entry, html } = collectEntry();
+  config.entry = createTempFile(entry);
+  config.plugins.push(...html.map((h) => new HtmlWebpackPlugin(h)));
+  return config;
+};
+export {
+  addMpaSupport
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unpackjs/plugin-react",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "description": "",
   "type": "module",
   "exports": {
@@ -30,7 +30,8 @@
     "@swc/core": "1.7.28",
     "@swc/helpers": "0.5.13",
     "launch-editor": "2.9.1",
-    "@unpackjs/shared": "^1.4.4"
+    "html-webpack-plugin": "5.6.0",
+    "@unpackjs/shared": "^1.5.0"
   },
   "scripts": {
     "dev": "modern build --watch",