@unpackjs/plugin-react 2.1.0 → 2.2.0

package/dist/index.cjs

@@ -1,92 +1,201 @@
 "use strict";
+let __rslib_import_meta_url__ = 'undefined' == typeof document ? new (require('url'.replace('', ''))).URL('file:' + __filename).href : document.currentScript && document.currentScript.src || new URL('main.js', document.baseURI).href;
 var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
+__webpack_require__.n = (module)=>{
+    var getter = module && module.__esModule ? ()=>module.default : ()=>module;
+    return __webpack_require__.d(getter, {
+        a: getter
+    }), getter;
+}, __webpack_require__.d = (exports1, definition)=>{
+    for(var key in definition)__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key) && Object.defineProperty(exports1, key, {
+        enumerable: !0,
+        get: definition[key]
+    });
+}, __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop), __webpack_require__.r = (exports1)=>{
+    'undefined' != typeof Symbol && Symbol.toStringTag && Object.defineProperty(exports1, Symbol.toStringTag, {
+        value: 'Module'
+    }), Object.defineProperty(exports1, '__esModule', {
+        value: !0
+    });
+};
 var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
+__webpack_require__.r(__webpack_exports__), __webpack_require__.d(__webpack_exports__, {
     pluginReact: ()=>pluginReact,
     PLUGIN_NAME: ()=>PLUGIN_NAME
 });
-const external_node_path_namespaceObject = require("node:path");
-var external_node_path_default = /*#__PURE__*/ __webpack_require__.n(external_node_path_namespaceObject);
-const react_refresh_webpack_plugin_namespaceObject = require("@pmmmwh/react-refresh-webpack-plugin");
-var react_refresh_webpack_plugin_default = /*#__PURE__*/ __webpack_require__.n(react_refresh_webpack_plugin_namespaceObject);
-const plugin_react_refresh_namespaceObject = require("@rspack/plugin-react-refresh");
-var plugin_react_refresh_default = /*#__PURE__*/ __webpack_require__.n(plugin_react_refresh_namespaceObject);
-const core_namespaceObject = require("@unpackjs/core");
-const index_cjs_namespaceObject = require("./click-to-component/index.cjs");
-const external_mpa_cjs_namespaceObject = require("./mpa.cjs");
-const external_splitChunks_cjs_namespaceObject = require("./splitChunks.cjs");
-const PLUGIN_NAME = 'unpack:react';
-const pluginReact = (options = {})=>{
-    const { clickToComponent, reactCompiler } = options;
+let external_node_path_namespaceObject = require("node:path");
+var external_node_path_default = __webpack_require__.n(external_node_path_namespaceObject);
+let react_refresh_webpack_plugin_namespaceObject = require("@pmmmwh/react-refresh-webpack-plugin");
+var react_refresh_webpack_plugin_default = __webpack_require__.n(react_refresh_webpack_plugin_namespaceObject);
+let plugin_react_refresh_namespaceObject = require("@rspack/plugin-react-refresh");
+var plugin_react_refresh_default = __webpack_require__.n(plugin_react_refresh_namespaceObject);
+let core_namespaceObject = require("@unpackjs/core"), external_node_fs_namespaceObject = require("node:fs");
+var external_node_fs_default = __webpack_require__.n(external_node_fs_namespaceObject);
+let external_node_http_namespaceObject = require("node:http");
+var external_node_http_default = __webpack_require__.n(external_node_http_namespaceObject);
+let external_launch_editor_namespaceObject = require("launch-editor");
+var external_launch_editor_default = __webpack_require__.n(external_launch_editor_namespaceObject);
+let createServer = ()=>new Promise((resolve)=>{
+        let server = external_node_http_default().createServer((req, res)=>{
+            let params = new URLSearchParams(req.url.slice(1)), file = decodeURIComponent(params.get('file')), line = Number(params.get('line')), 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'), external_launch_editor_default()(`${file}:${line}:${column}`);
+        });
+        (0, core_namespaceObject.getPort)().then((port)=>{
+            server.listen(port, ()=>{
+                resolve({
+                    port
+                });
+            });
+        }), core_namespaceObject.restartCleaners.push(()=>new Promise((resolve)=>server.close(()=>resolve())));
+    }), applyClickToComponentConfig = async ({ config, unpackConfig })=>{
+    let { port } = await createServer(), injectScript = external_node_fs_default().readFileSync(external_node_path_default().resolve(__dirname, './injectScript.js'), 'utf-8'), 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)
+}`;
+    if (unpackConfig.mpa) Object.values(config.entry).forEach((entryConfig)=>{
+        let filePath = entryConfig.import[0], content = external_node_fs_default().readFileSync(filePath, 'utf-8');
+        external_node_fs_default().writeFileSync(filePath, `${scriptTpl}\n${content}`, 'utf-8');
+    });
+    else {
+        let realEntryPath = external_node_path_default().resolve(config.context, core_namespaceObject.TEMP_DIR, 'entries', `index.${port}.jsx`), tpl = `
+${scriptTpl}
+import '${(0, core_namespaceObject.getPathInJs)(external_node_path_default().resolve(Object.values(config.entry)[0]))}'
+`, dir = external_node_path_default().dirname(realEntryPath);
+        external_node_fs_default().existsSync(dir) || external_node_fs_default().mkdirSync(dir, {
+            recursive: !0
+        }), external_node_fs_default().writeFileSync(realEntryPath, tpl, 'utf-8'), config.entry = {
+            main: realEntryPath
+        };
+    }
+    return config;
+}, applyMpaConfig = ({ config, unpackConfig, mergeConfig, HtmlPlugin })=>{
+    if (!unpackConfig.mpa) return config;
+    let isRspack = 'rspack' === unpackConfig.bundler, tempDirectory = external_node_path_default().join(core_namespaceObject.TEMP_DIR, 'mpa'), userOptions = (0, core_namespaceObject.isPlainObject)(unpackConfig.mpa) ? unpackConfig.mpa : {}, { entry, html } = (()=>{
+        let start = performance.now(), entry = {}, html = [], pagesRoot = external_node_path_default().join(unpackConfig.root, 'src', 'pages');
+        return external_node_fs_default().readdirSync(pagesRoot).forEach((filename)=>{
+            if (filename.startsWith('.')) return;
+            let indexFilePath = ((dir)=>{
+                for (let extension of [
+                    '.tsx',
+                    '.jsx'
+                ]){
+                    let indexFilePath = external_node_path_default().join(dir, `index${extension}`);
+                    if (external_node_fs_default().existsSync(indexFilePath)) return indexFilePath;
+                }
+                return null;
+            })(external_node_path_default().join(pagesRoot, filename));
+            if (indexFilePath) {
+                var _unpackConfig_html, _unpackConfig_html1, _unpackConfig_html2, _unpackConfig_html3, _unpackConfig_html4, _unpackConfig_html5, _unpackConfig_html6, _unpackConfig_html7, _unpackConfig_html8;
+                let pageConfig = ((indexPath)=>{
+                    let filePath = external_node_path_default().join(indexPath, '../config.json'), pageConfig = {};
+                    return external_node_fs_default().existsSync(filePath) && (pageConfig = JSON.parse(external_node_fs_default().readFileSync(filePath, 'utf-8'))), pageConfig;
+                })(indexFilePath), entryName = !0 === userOptions.lowerCase ? filename.toLowerCase() : filename;
+                pageConfig.filename && (entryName = pageConfig.filename.slice(0, -5)), entry[entryName] = {
+                    import: [
+                        indexFilePath
+                    ]
+                }, pageConfig.template && (pageConfig.template = external_node_path_default().join(indexFilePath, '../', pageConfig.template)), html.push({
+                    template: (null == (_unpackConfig_html = unpackConfig.html) ? void 0 : _unpackConfig_html.template) || (isRspack ? void 0 : ''),
+                    templateContent: (null == (_unpackConfig_html1 = unpackConfig.html) ? void 0 : _unpackConfig_html1.templateContent) || ((null == (_unpackConfig_html2 = unpackConfig.html) ? void 0 : _unpackConfig_html2.template) ? !!isRspack && void 0 : core_namespaceObject.TEMPLATE_CONTENT),
+                    minify: !1,
+                    filename: `${entryName}.html`,
+                    chunks: [
+                        entryName
+                    ],
+                    ...pageConfig,
+                    templateParameters: {
+                        mountId: null == (_unpackConfig_html3 = unpackConfig.html) ? void 0 : _unpackConfig_html3.mountId,
+                        title: (0, core_namespaceObject.isFunction)(null == (_unpackConfig_html4 = unpackConfig.html) ? void 0 : _unpackConfig_html4.title) ? null == (_unpackConfig_html5 = unpackConfig.html) ? void 0 : _unpackConfig_html5.title({
+                            entryName
+                        }) : (null == (_unpackConfig_html6 = unpackConfig.html) ? void 0 : _unpackConfig_html6.title) || '',
+                        headTag: (null == (_unpackConfig_html7 = unpackConfig.html) ? void 0 : _unpackConfig_html7.headTag) || '',
+                        ...null == (_unpackConfig_html8 = unpackConfig.html) ? void 0 : _unpackConfig_html8.templateParameters,
+                        ...pageConfig.templateParameters
+                    }
+                });
+            }
+        }), (0, core_namespaceObject.isDevServer)() || core_namespaceObject.logger.info(`collect entries in ${(performance.now() - start).toFixed(2)}ms ${core_namespaceObject.colors.dim('[MPA]')}`), {
+            entry,
+            html
+        };
+    })();
+    return config = mergeConfig(config, {
+        entry: ((entry)=>{
+            var _userOptions_globalImport, _unpackConfig_html;
+            let root = unpackConfig.root;
+            (0, core_namespaceObject.removeDir)(external_node_path_default().join(root, tempDirectory));
+            let globalImport = (null == (_userOptions_globalImport = userOptions.globalImport) ? void 0 : _userOptions_globalImport.reduce((acc, curr)=>`${acc}\nimport '${(0, core_namespaceObject.getPathInJs)(external_node_path_default().resolve(root, curr))}'`, '')) || '', { layout } = userOptions, layoutImport = layout ? `import Layout from '${(0, core_namespaceObject.getPathInJs)(external_node_path_default().resolve(root, layout))}'` : '', layoutJSX = layout ? '<Layout><App /></Layout>' : '<App />', rootElement = `document.getElementById('${null == (_unpackConfig_html = unpackConfig.html) ? void 0 : _unpackConfig_html.mountId}')`, renderer = `ReactDOM.createRoot(${rootElement}).render(${layoutJSX})`;
+            return Object.entries(entry).forEach(([entryName, entryConfig])=>{
+                let filePath = external_node_path_default().join(root, tempDirectory, `${entryName}.jsx`), tpl = `
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from '${(0, core_namespaceObject.getPathInJs)(entryConfig.import[0])}'${layoutImport && `\n${layoutImport}`}
+${globalImport}
+${renderer}
+`, dir = external_node_path_default().dirname(filePath);
+                external_node_fs_default().existsSync(dir) || external_node_fs_default().mkdirSync(dir, {
+                    recursive: !0
+                }), external_node_fs_default().writeFileSync(filePath, tpl, 'utf-8'), entryConfig.import[0] = filePath;
+            }), entry;
+        })(entry),
+        plugins: html.map((h)=>new HtmlPlugin(h))
+    });
+}, applySplitChunksConfig = ({ config, unpackConfig })=>{
+    if ('split-by-experience' !== unpackConfig.performance.chunkSplit.strategy) return config;
+    let currentConfig = config.optimization.splitChunks, extraGroups = {};
+    return extraGroups.react = {
+        name: 'lib-react',
+        test: (0, core_namespaceObject.isDevServer)() ? /node_modules[\\/](?:react|react-dom|scheduler|react-refresh|@rspack[\\/]plugin-react-refresh)[\\/]/ : /node_modules[\\/](?:react|react-dom|scheduler)[\\/]/,
+        priority: 0
+    }, extraGroups.router = {
+        name: 'lib-router',
+        test: /node_modules[\\/](?:react-router|react-router-dom|history|@remix-run[\\/]router)[\\/]/,
+        priority: 0
+    }, config.optimization.splitChunks = {
+        ...currentConfig,
+        cacheGroups: {
+            ...extraGroups,
+            ...currentConfig.cacheGroups
+        }
+    }, config;
+}, PLUGIN_NAME = 'unpack:react', pluginReact = (options = {})=>{
+    let { clickToComponent } = options;
     return {
         name: PLUGIN_NAME,
         bundlerConfig: async (originalConfig, { unpackConfig, mergeConfig })=>{
-            let config = originalConfig;
-            const isRspack = 'rspack' === unpackConfig.bundler;
-            const HtmlPlugin = isRspack ? core_namespaceObject.rspack.HtmlRspackPlugin : core_namespaceObject.HtmlWebpackPlugin;
-            config = (0, external_mpa_cjs_namespaceObject.applyMpaConfig)({
+            let config = originalConfig, isRspack = 'rspack' === unpackConfig.bundler;
+            config = applyMpaConfig({
                 config,
                 unpackConfig,
                 mergeConfig,
-                HtmlPlugin
-            });
-            if ((0, core_namespaceObject.isDev)() && clickToComponent) config = await (0, index_cjs_namespaceObject.applyClickToComponentConfig)({
+                HtmlPlugin: isRspack ? core_namespaceObject.rspack.HtmlRspackPlugin : core_namespaceObject.HtmlWebpackPlugin
+            }), (0, core_namespaceObject.isDev)() && clickToComponent && (config = await applyClickToComponentConfig({
                 config,
                 unpackConfig
-            });
-            config = (0, external_splitChunks_cjs_namespaceObject.applySplitChunksConfig)({
+            })), config = applySplitChunksConfig({
                 config,
                 unpackConfig
             });
-            if (reactCompiler && !(0, core_namespaceObject.getUserDepPath)(unpackConfig.root, 'react-compiler-runtime')) {
-                core_namespaceObject.logger.error('dependency "react-compiler-runtime" not found, did you install it?');
-                process.exit(1);
-            }
-            const jsExclude = [
+            let jsExclude = [
                 /node_modules[\\/](?!\.unpack)/
-            ];
-            const swcLoader = isRspack ? 'builtin:swc-loader' : require.resolve('swc-loader');
-            const ReactRefreshPlugin = isRspack ? plugin_react_refresh_default() : react_refresh_webpack_plugin_default();
-            const getSwcOptions = ({ tsx })=>({
+            ], swcLoader = isRspack ? 'builtin:swc-loader' : require.resolve('swc-loader'), ReactRefreshPlugin = isRspack ? plugin_react_refresh_default() : react_refresh_webpack_plugin_default(), getSwcOptions = ({ tsx })=>({
                     jsc: {
                         parser: {
                             tsx,
                             syntax: "typescript",
-                            dynamicImport: true,
-                            decorators: true
+                            dynamicImport: !0,
+                            decorators: !0
                         },
-                        externalHelpers: true,
+                        externalHelpers: !0,
                         transform: {
                             react: {
                                 runtime: 'automatic',
@@ -108,7 +217,7 @@ const pluginReact = (options = {})=>{
                                 {
                                     loader: swcLoader,
                                     options: getSwcOptions({
-                                        tsx: false
+                                        tsx: !1
                                     })
                                 }
                             ]
@@ -120,16 +229,10 @@ const pluginReact = (options = {})=>{
                                 {
                                     loader: swcLoader,
                                     options: getSwcOptions({
-                                        tsx: true
+                                        tsx: !0
                                     })
-                                },
-                                reactCompiler && {
-                                    loader: external_node_path_default().resolve(__dirname, './react-compiler-loader/index.cjs'),
-                                    options: {
-                                        target: (0, core_namespaceObject.getUserDepVersion)(unpackConfig.root, 'react').split('.')[0]
-                                    }
                                 }
-                            ].filter(Boolean)
+                            ]
                         },
                         {
                             test: /\.svg$/i,
@@ -152,7 +255,7 @@ const pluginReact = (options = {})=>{
                 },
                 plugins: [
                     (0, core_namespaceObject.isDevServer)() && new ReactRefreshPlugin({
-                        overlay: false
+                        overlay: !1
                     })
                 ].filter(Boolean),
                 resolve: {
@@ -164,12 +267,10 @@ const pluginReact = (options = {})=>{
         }
     };
 };
-exports.PLUGIN_NAME = __webpack_exports__.PLUGIN_NAME;
-exports.pluginReact = __webpack_exports__.pluginReact;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+for(var __webpack_i__ in exports.PLUGIN_NAME = __webpack_exports__.PLUGIN_NAME, exports.pluginReact = __webpack_exports__.pluginReact, __webpack_exports__)-1 === [
     "PLUGIN_NAME",
     "pluginReact"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+].indexOf(__webpack_i__) && (exports[__webpack_i__] = __webpack_exports__[__webpack_i__]);
 Object.defineProperty(exports, '__esModule', {
-    value: true
+    value: !0
 });

package/dist/index.js

@@ -1,56 +1,176 @@
 import __rslib_shim_module__ from 'module';
-const require = /*#__PURE__*/ __rslib_shim_module__.createRequire(import.meta.url);
+let require = __rslib_shim_module__.createRequire(import.meta.url);
 import { fileURLToPath as __webpack_fileURLToPath__ } from "node:url";
 import { dirname as __webpack_dirname__ } from "node:path";
 import node_path from "node:path";
 import react_refresh_webpack_plugin from "@pmmmwh/react-refresh-webpack-plugin";
 import plugin_react_refresh from "@rspack/plugin-react-refresh";
-import { DEFAULT_BROWSERSLIST, HtmlWebpackPlugin, getUserDepPath, getUserDepVersion, isDev, isDevServer, logger, rspack } from "@unpackjs/core";
-import { applyClickToComponentConfig } from "./click-to-component/index.js";
-import { applyMpaConfig } from "./mpa.js";
-import { applySplitChunksConfig } from "./splitChunks.js";
-var src_dirname = __webpack_dirname__(__webpack_fileURLToPath__(import.meta.url));
-const PLUGIN_NAME = 'unpack:react';
-const pluginReact = (options = {})=>{
-    const { clickToComponent, reactCompiler } = options;
+import { DEFAULT_BROWSERSLIST, HtmlWebpackPlugin, TEMPLATE_CONTENT, TEMP_DIR, colors, getPathInJs, getPort, isDev, isDevServer, isFunction, isPlainObject, logger, removeDir, restartCleaners, rspack } from "@unpackjs/core";
+import node_fs from "node:fs";
+import node_http from "node:http";
+import launch_editor from "launch-editor";
+var click_to_component_dirname = __webpack_dirname__(__webpack_fileURLToPath__(import.meta.url));
+let applyClickToComponentConfig = async ({ config, unpackConfig })=>{
+    let { port } = await new Promise((resolve)=>{
+        let server = node_http.createServer((req, res)=>{
+            let params = new URLSearchParams(req.url.slice(1)), file = decodeURIComponent(params.get('file')), line = Number(params.get('line')), 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'), launch_editor(`${file}:${line}:${column}`);
+        });
+        getPort().then((port)=>{
+            server.listen(port, ()=>{
+                resolve({
+                    port
+                });
+            });
+        }), restartCleaners.push(()=>new Promise((resolve)=>server.close(()=>resolve())));
+    }), injectScript = node_fs.readFileSync(node_path.resolve(click_to_component_dirname, './injectScript.js'), 'utf-8'), 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)
+}`;
+    if (unpackConfig.mpa) Object.values(config.entry).forEach((entryConfig)=>{
+        let filePath = entryConfig.import[0], content = node_fs.readFileSync(filePath, 'utf-8');
+        node_fs.writeFileSync(filePath, `${scriptTpl}\n${content}`, 'utf-8');
+    });
+    else {
+        let realEntryPath = node_path.resolve(config.context, TEMP_DIR, 'entries', `index.${port}.jsx`), tpl = `
+${scriptTpl}
+import '${getPathInJs(node_path.resolve(Object.values(config.entry)[0]))}'
+`, dir = node_path.dirname(realEntryPath);
+        node_fs.existsSync(dir) || node_fs.mkdirSync(dir, {
+            recursive: !0
+        }), node_fs.writeFileSync(realEntryPath, tpl, 'utf-8'), config.entry = {
+            main: realEntryPath
+        };
+    }
+    return config;
+}, PLUGIN_NAME = 'unpack:react', pluginReact = (options = {})=>{
+    let { clickToComponent } = options;
     return {
         name: PLUGIN_NAME,
         bundlerConfig: async (originalConfig, { unpackConfig, mergeConfig })=>{
-            let config = originalConfig;
-            const isRspack = 'rspack' === unpackConfig.bundler;
-            const HtmlPlugin = isRspack ? rspack.HtmlRspackPlugin : HtmlWebpackPlugin;
-            config = applyMpaConfig({
+            let config = originalConfig, isRspack = 'rspack' === unpackConfig.bundler;
+            config = (({ config, unpackConfig, mergeConfig, HtmlPlugin })=>{
+                if (!unpackConfig.mpa) return config;
+                let isRspack = 'rspack' === unpackConfig.bundler, tempDirectory = node_path.join(TEMP_DIR, 'mpa'), userOptions = isPlainObject(unpackConfig.mpa) ? unpackConfig.mpa : {}, { entry, html } = (()=>{
+                    let start = performance.now(), entry = {}, html = [], pagesRoot = node_path.join(unpackConfig.root, 'src', 'pages');
+                    return node_fs.readdirSync(pagesRoot).forEach((filename)=>{
+                        if (filename.startsWith('.')) return;
+                        let indexFilePath = ((dir)=>{
+                            for (let extension of [
+                                '.tsx',
+                                '.jsx'
+                            ]){
+                                let indexFilePath = node_path.join(dir, `index${extension}`);
+                                if (node_fs.existsSync(indexFilePath)) return indexFilePath;
+                            }
+                            return null;
+                        })(node_path.join(pagesRoot, filename));
+                        if (indexFilePath) {
+                            var _unpackConfig_html, _unpackConfig_html1, _unpackConfig_html2, _unpackConfig_html3, _unpackConfig_html4, _unpackConfig_html5, _unpackConfig_html6, _unpackConfig_html7, _unpackConfig_html8;
+                            let pageConfig = ((indexPath)=>{
+                                let filePath = node_path.join(indexPath, '../config.json'), pageConfig = {};
+                                return node_fs.existsSync(filePath) && (pageConfig = JSON.parse(node_fs.readFileSync(filePath, 'utf-8'))), pageConfig;
+                            })(indexFilePath), entryName = !0 === userOptions.lowerCase ? filename.toLowerCase() : filename;
+                            pageConfig.filename && (entryName = pageConfig.filename.slice(0, -5)), entry[entryName] = {
+                                import: [
+                                    indexFilePath
+                                ]
+                            }, pageConfig.template && (pageConfig.template = node_path.join(indexFilePath, '../', pageConfig.template)), html.push({
+                                template: (null == (_unpackConfig_html = unpackConfig.html) ? void 0 : _unpackConfig_html.template) || (isRspack ? void 0 : ''),
+                                templateContent: (null == (_unpackConfig_html1 = unpackConfig.html) ? void 0 : _unpackConfig_html1.templateContent) || ((null == (_unpackConfig_html2 = unpackConfig.html) ? void 0 : _unpackConfig_html2.template) ? !!isRspack && void 0 : TEMPLATE_CONTENT),
+                                minify: !1,
+                                filename: `${entryName}.html`,
+                                chunks: [
+                                    entryName
+                                ],
+                                ...pageConfig,
+                                templateParameters: {
+                                    mountId: null == (_unpackConfig_html3 = unpackConfig.html) ? void 0 : _unpackConfig_html3.mountId,
+                                    title: isFunction(null == (_unpackConfig_html4 = unpackConfig.html) ? void 0 : _unpackConfig_html4.title) ? null == (_unpackConfig_html5 = unpackConfig.html) ? void 0 : _unpackConfig_html5.title({
+                                        entryName
+                                    }) : (null == (_unpackConfig_html6 = unpackConfig.html) ? void 0 : _unpackConfig_html6.title) || '',
+                                    headTag: (null == (_unpackConfig_html7 = unpackConfig.html) ? void 0 : _unpackConfig_html7.headTag) || '',
+                                    ...null == (_unpackConfig_html8 = unpackConfig.html) ? void 0 : _unpackConfig_html8.templateParameters,
+                                    ...pageConfig.templateParameters
+                                }
+                            });
+                        }
+                    }), isDevServer() || logger.info(`collect entries in ${(performance.now() - start).toFixed(2)}ms ${colors.dim('[MPA]')}`), {
+                        entry,
+                        html
+                    };
+                })();
+                return config = mergeConfig(config, {
+                    entry: ((entry)=>{
+                        var _userOptions_globalImport, _unpackConfig_html;
+                        let root = unpackConfig.root;
+                        removeDir(node_path.join(root, tempDirectory));
+                        let globalImport = (null == (_userOptions_globalImport = userOptions.globalImport) ? void 0 : _userOptions_globalImport.reduce((acc, curr)=>`${acc}\nimport '${getPathInJs(node_path.resolve(root, curr))}'`, '')) || '', { layout } = userOptions, layoutImport = layout ? `import Layout from '${getPathInJs(node_path.resolve(root, layout))}'` : '', layoutJSX = layout ? '<Layout><App /></Layout>' : '<App />', rootElement = `document.getElementById('${null == (_unpackConfig_html = unpackConfig.html) ? void 0 : _unpackConfig_html.mountId}')`, renderer = `ReactDOM.createRoot(${rootElement}).render(${layoutJSX})`;
+                        return Object.entries(entry).forEach(([entryName, entryConfig])=>{
+                            let filePath = node_path.join(root, tempDirectory, `${entryName}.jsx`), tpl = `
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from '${getPathInJs(entryConfig.import[0])}'${layoutImport && `\n${layoutImport}`}
+${globalImport}
+${renderer}
+`, dir = node_path.dirname(filePath);
+                            node_fs.existsSync(dir) || node_fs.mkdirSync(dir, {
+                                recursive: !0
+                            }), node_fs.writeFileSync(filePath, tpl, 'utf-8'), entryConfig.import[0] = filePath;
+                        }), entry;
+                    })(entry),
+                    plugins: html.map((h)=>new HtmlPlugin(h))
+                });
+            })({
                 config,
                 unpackConfig,
                 mergeConfig,
-                HtmlPlugin
-            });
-            if (isDev() && clickToComponent) config = await applyClickToComponentConfig({
+                HtmlPlugin: isRspack ? rspack.HtmlRspackPlugin : HtmlWebpackPlugin
+            }), isDev() && clickToComponent && (config = await applyClickToComponentConfig({
                 config,
                 unpackConfig
-            });
-            config = applySplitChunksConfig({
+            })), config = (({ config, unpackConfig })=>{
+                if ('split-by-experience' !== unpackConfig.performance.chunkSplit.strategy) return config;
+                let currentConfig = config.optimization.splitChunks, extraGroups = {};
+                return extraGroups.react = {
+                    name: 'lib-react',
+                    test: isDevServer() ? /node_modules[\\/](?:react|react-dom|scheduler|react-refresh|@rspack[\\/]plugin-react-refresh)[\\/]/ : /node_modules[\\/](?:react|react-dom|scheduler)[\\/]/,
+                    priority: 0
+                }, extraGroups.router = {
+                    name: 'lib-router',
+                    test: /node_modules[\\/](?:react-router|react-router-dom|history|@remix-run[\\/]router)[\\/]/,
+                    priority: 0
+                }, config.optimization.splitChunks = {
+                    ...currentConfig,
+                    cacheGroups: {
+                        ...extraGroups,
+                        ...currentConfig.cacheGroups
+                    }
+                }, config;
+            })({
                 config,
                 unpackConfig
             });
-            if (reactCompiler && !getUserDepPath(unpackConfig.root, 'react-compiler-runtime')) {
-                logger.error('dependency "react-compiler-runtime" not found, did you install it?');
-                process.exit(1);
-            }
-            const jsExclude = [
+            let jsExclude = [
                 /node_modules[\\/](?!\.unpack)/
-            ];
-            const swcLoader = isRspack ? 'builtin:swc-loader' : require.resolve('swc-loader');
-            const ReactRefreshPlugin = isRspack ? plugin_react_refresh : react_refresh_webpack_plugin;
-            const getSwcOptions = ({ tsx })=>({
+            ], swcLoader = isRspack ? 'builtin:swc-loader' : require.resolve('swc-loader'), getSwcOptions = ({ tsx })=>({
                     jsc: {
                         parser: {
                             tsx,
                             syntax: "typescript",
-                            dynamicImport: true,
-                            decorators: true
+                            dynamicImport: !0,
+                            decorators: !0
                         },
-                        externalHelpers: true,
+                        externalHelpers: !0,
                         transform: {
                             react: {
                                 runtime: 'automatic',
@@ -72,7 +192,7 @@ const pluginReact = (options = {})=>{
                                 {
                                     loader: swcLoader,
                                     options: getSwcOptions({
-                                        tsx: false
+                                        tsx: !1
                                     })
                                 }
                             ]
@@ -84,16 +204,10 @@ const pluginReact = (options = {})=>{
                                 {
                                     loader: swcLoader,
                                     options: getSwcOptions({
-                                        tsx: true
+                                        tsx: !0
                                     })
-                                },
-                                reactCompiler && {
-                                    loader: node_path.resolve(src_dirname, './react-compiler-loader/index.cjs'),
-                                    options: {
-                                        target: getUserDepVersion(unpackConfig.root, 'react').split('.')[0]
-                                    }
                                 }
-                            ].filter(Boolean)
+                            ]
                         },
                         {
                             test: /\.svg$/i,
@@ -115,8 +229,8 @@ const pluginReact = (options = {})=>{
                     ]
                 },
                 plugins: [
-                    isDevServer() && new ReactRefreshPlugin({
-                        overlay: false
+                    isDevServer() && new (isRspack ? plugin_react_refresh : react_refresh_webpack_plugin)({
+                        overlay: !1
                     })
                 ].filter(Boolean),
                 resolve: {

package/dist/injectScript.js

@@ -0,0 +1,82 @@
+let COVER_ID = '__click-to-component__', cover = null, currentDebugSource = null, enabled = !1;
+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')).id = '__click-to-component__', applyStyles(cover, {
+        position: 'fixed',
+        zIndex: '999999',
+        background: 'rgba(111, 168, 220, 0.5)',
+        display: 'none',
+        pointerEvents: 'none'
+    }), document.body.appendChild(cover);
+}
+function updateCover(target) {
+    if ('function' != typeof target.getBoundingClientRect) {
+        currentDebugSource = null;
+        return;
+    }
+    let { 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) {
+    let fiberKey = Object.keys(target).find((key)=>key.includes('__reactFiber')), doNext = (fiber, depth = 0)=>{
+        if (fiber && !(depth > 10)) {
+            if (fiber._debugSource) 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) {
+    return fiber.stateNode ? fiber.stateNode : getClosestNodeFromFiber(fiber.return);
+}
+function openEditor() {
+    if (!currentDebugSource) return;
+    let port = window.CLICK_TO_COMPONENT.port, { fileName, lineNumber, columnNumber } = currentDebugSource, url = [
+        'http://localhost:',
+        port,
+        '/?file=',
+        fileName,
+        '&line=',
+        lineNumber,
+        '&column=',
+        columnNumber
+    ].join(''), xhr = new XMLHttpRequest();
+    xhr.open('GET', url, !0), xhr.send(), xhr.addEventListener('error', ()=>{
+        document.createElement('img').src = url;
+    });
+}
+document.addEventListener('mouseover', debounce((e)=>{
+    if (!enabled) return;
+    let fiber = getFiberWithDebugSourceByTarget(e.target);
+    if (!fiber) return;
+    let closestNode = getClosestNodeFromFiber(fiber);
+    closestNode && (currentDebugSource = fiber._debugSource, updateCover(closestNode));
+}, 30)), document.addEventListener('click', (e)=>{
+    enabled && (e.stopPropagation(), e.preventDefault(), openEditor(), hideCover(), enabled = !1);
+}, !0), document.addEventListener('keydown', (e)=>{
+    'Alt' === e.key && (enabled = !0);
+}), document.addEventListener('keyup', (e)=>{
+    'Alt' === e.key && (enabled = !1, hideCover());
+}), createCover();