@unpackjs/plugin-react 3.3.3 → 3.4.0

package/dist/index.js

@@ -1,61 +1,19 @@
 import __rslib_shim_module__ from 'module';
 let require = __rslib_shim_module__.createRequire(import.meta.url);
 import { fileURLToPath as __rspack_fileURLToPath } from "node:url";
-import plugin_react_refresh from "@rspack/plugin-react-refresh";
-import { TEMPLATE_CONTENT, addRestartCleaner, colors, esVersionToBrowserslist, getPathInJs, getPort, isDev, isDevServer, isFunction, isPlainObject, launchEditor, logger, mergeConfig as core_mergeConfig, removeDir, rspack } from "@unpackjs/core";
+import node_path, { dirname as __rspack_dirname } from "node:path";
 import node_fs from "node:fs";
-import node_http from "node:http";
-var click_to_component_dirname = __rspack_dirname(__rspack_fileURLToPath(import.meta.url));
-let applyClickToComponentConfig = async ({ config, unpackConfig, cachePath })=>{
-    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'), launchEditor(`${file}:${line}:${column}`);
-        });
-        getPort().then((port)=>{
-            server.listen(port, ()=>{
-                resolve({
-                    port
-                });
-            });
-        }), addRestartCleaner(()=>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, cachePath, '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 = {})=>{
+import plugin_react_refresh from "@rspack/plugin-react-refresh";
+import { JSX_REGEX, JS_REGEX, SCRIPT_REGEX, esVersionToBrowserslist, getHtmlTemplateOrContent, getPathInJs, injectToHead, isDevServer, isFunction, isPlainObject, launchEditor, mergeConfig as core_mergeConfig, removeDir, rspack } from "@unpackjs/core";
+var src_dirname = __rspack_dirname(__rspack_fileURLToPath(import.meta.url));
+let pluginReact = (options = {})=>{
     let { clickToComponent } = options;
     return {
-        name: PLUGIN_NAME,
+        name: 'unpack:react',
         bundlerConfig: async (originalConfig, { unpackConfig, mergeConfig, cachePath })=>{
             let config = originalConfig;
             unpackConfig.mpa && (config = (({ config, unpackConfig, cachePath })=>{
-                let start, entry, html, pagesRoot, tempDirectory = node_path.join(cachePath, 'mpa'), userOptions = isPlainObject(unpackConfig.mpa) ? unpackConfig.mpa : {}, { entry: entry1, html: html1 } = (start = performance.now(), entry = {}, html = [], pagesRoot = node_path.join(unpackConfig.root, 'src', 'pages'), node_fs.readdirSync(pagesRoot).forEach((filename)=>{
+                let entry, html, pagesRoot, tempDirectory = node_path.join(cachePath, 'mpa'), userOptions = isPlainObject(unpackConfig.mpa) ? unpackConfig.mpa : {}, { template, templateContent } = getHtmlTemplateOrContent(unpackConfig.html?.template, unpackConfig.root), { entry: entry1, html: html1 } = (entry = {}, html = [], pagesRoot = node_path.join(unpackConfig.root, 'src', 'pages'), node_fs.readdirSync(pagesRoot).forEach((filename)=>{
                     if (filename.startsWith('.')) return;
                     let indexFilePath = ((dir)=>{
                         for (let extension of [
@@ -68,32 +26,27 @@ import '${getPathInJs(node_path.resolve(Object.values(config.entry)[0]))}'
                         return null;
                     })(node_path.join(pagesRoot, filename));
                     if (indexFilePath) {
-                        let filePath, pageConfig, pageConfig1 = (filePath = node_path.join(indexFilePath, '../config.json'), pageConfig = {}, node_fs.existsSync(filePath) && (pageConfig = JSON.parse(node_fs.readFileSync(filePath, 'utf-8'))), pageConfig), entryName = !0 === userOptions.lowerCase ? filename.toLowerCase() : filename;
-                        pageConfig1.filename && (entryName = pageConfig1.filename.slice(0, -5)), entry[entryName] = {
+                        let entryName = !0 === userOptions.lowerCase ? filename.toLowerCase() : filename;
+                        entry[entryName] = {
                             import: [
                                 indexFilePath
                             ]
-                        }, pageConfig1.template && (pageConfig1.template = node_path.join(indexFilePath, '../', pageConfig1.template)), html.push({
-                            template: unpackConfig.html?.template || void 0,
-                            templateContent: unpackConfig.html?.templateContent || (unpackConfig.html?.template ? void 0 : TEMPLATE_CONTENT),
-                            minify: !1,
+                        }, html.push({
                             filename: `${entryName}.html`,
                             chunks: [
                                 entryName
                             ],
-                            ...pageConfig1,
                             templateParameters: {
                                 mountId: unpackConfig.html?.mountId || '',
                                 title: isFunction(unpackConfig.html?.title) ? unpackConfig.html?.title({
                                     entryName
                                 }) : unpackConfig.html?.title || '',
                                 headTag: unpackConfig.html?.headTag || '',
-                                ...unpackConfig.html?.templateParameters,
-                                ...pageConfig1.templateParameters
+                                ...unpackConfig.html?.templateParameters
                             }
                         });
                     }
-                }), isDevServer() || logger.info(`collect entries in ${(performance.now() - start).toFixed(2)}ms ${colors.dim('[MPA]')}`), {
+                }), {
                     entry,
                     html
                 });
@@ -115,16 +68,17 @@ ${renderer}
                             }), node_fs.writeFileSync(filePath, tpl, 'utf-8'), entryConfig.import[0] = filePath;
                         }), entry;
                     })(entry1),
-                    plugins: html1.map((h)=>new rspack.HtmlRspackPlugin(h))
+                    plugins: html1.map((h)=>new rspack.HtmlRspackPlugin({
+                            ...h,
+                            template,
+                            templateContent,
+                            minify: !1
+                        }))
                 });
             })({
                 config,
                 unpackConfig,
                 cachePath
-            })), isDev() && clickToComponent && (config = await applyClickToComponentConfig({
-                config,
-                unpackConfig,
-                cachePath
             }));
             let jsExclude = [
                 /node_modules[\\/](?!\.unpack)/
@@ -152,7 +106,7 @@ ${renderer}
                 module: {
                     rules: [
                         {
-                            test: /\.(j|t)s$/,
+                            test: JS_REGEX,
                             exclude: jsExclude,
                             use: [
                                 {
@@ -164,7 +118,7 @@ ${renderer}
                             ]
                         },
                         {
-                            test: /\.(j|t)sx$/,
+                            test: JSX_REGEX,
                             exclude: jsExclude,
                             use: [
                                 {
@@ -182,7 +136,7 @@ ${renderer}
                         },
                         {
                             test: /\.svg$/i,
-                            issuer: /\.[jt]sx?$/,
+                            issuer: SCRIPT_REGEX,
                             resourceQuery: {
                                 not: [
                                     /url/
@@ -205,8 +159,24 @@ ${renderer}
                     }
                 }
             });
+        },
+        setupMiddlewares: (middlewares)=>isDevServer() && clickToComponent ? [
+                (req, res, next)=>{
+                    if (!req.url) return void next();
+                    let url = new URL(req.url, 'http://localhost');
+                    if ('/__click_to_component__' !== url.pathname) return void next();
+                    let file = url.searchParams.get('file'), line = Number(url.searchParams.get('line')), column = Number(url.searchParams.get('column'));
+                    res.writeHead(200, {
+                        'Content-Type': 'text/plain'
+                    }), res.end('ok'), launchEditor(`${decodeURIComponent(file)}:${line}:${column}`);
+                },
+                ...middlewares
+            ] : middlewares,
+        transformHtml: (html)=>{
+            if (!isDevServer() || !clickToComponent) return html;
+            let injectScriptPath = node_path.resolve(src_dirname, 'injectScript.js'), injectScript = node_fs.readFileSync(injectScriptPath, 'utf-8');
+            return injectToHead(html, `<script>${injectScript}</script>`);
         }
     };
 };
-import node_path, { dirname as __rspack_dirname } from "node:path";
-export { PLUGIN_NAME, pluginReact };
+export { pluginReact };

package/dist/injectScript.js

@@ -1,4 +1,4 @@
-!function() {
+(()=>{
     let cover = null, nameTag = null, currentDebugSource = null, cachedFiberKey = null, isEnabled = !1, debounceTimer = null;
     function applyStyles(target, styles) {
         for(let key in styles)target.style[key] = styles[key];
@@ -9,7 +9,7 @@
     let handleClick = (e)=>{
         0 === e.button && (e.preventDefault(), e.stopPropagation(), function() {
             if (!currentDebugSource) return;
-            let port = window.CLICK_TO_COMPONENT?.port, { fileName, lineNumber, columnNumber } = currentDebugSource, url = new URL('http://localhost:' + port + '/');
+            let { fileName, lineNumber, columnNumber } = currentDebugSource, url = new URL('/__click_to_component__', window.location.origin);
             url.searchParams.set('file', fileName), url.searchParams.set('line', lineNumber), url.searchParams.set('column', columnNumber), fetch(url.toString()).catch(()=>{
                 new Image().src = url.toString();
             });
@@ -24,7 +24,7 @@
                     if (!target || 'object' != typeof target) return null;
                     if (cachedFiberKey && target[cachedFiberKey]) return target[cachedFiberKey];
                     try {
-                        cachedFiberKey = Object.keys(target).find((key)=>key.startsWith('__reactFiber$'));
+                        cachedFiberKey = Object.keys(target).find((key)=>key.startsWith('__reactFiber'));
                     } catch  {
                         return null;
                     }
@@ -114,5 +114,5 @@
         })));
     }), document.addEventListener('keyup', (e)=>{
         ('Alt' === e.key || 'Option' === e.key) && stopInspect();
-    }), window.addEventListener('blur', stopInspect), console.log('%c[Click-To-Component] Ready.', 'color: #888');
-}();
+    }), window.addEventListener('blur', stopInspect);
+})();

package/dist-types/index.d.ts

@@ -1,5 +1,4 @@
 import { type UnpackPlugin } from '@unpackjs/core';
-export declare const PLUGIN_NAME = "unpack:react";
 export type PluginReactOptions = {
     clickToComponent?: boolean;
 };

package/dist-types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAA+C,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAI/F,eAAO,MAAM,WAAW,iBAAiB,CAAA;AAEzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AACD,eAAO,MAAM,WAAW,GAAI,UAAS,kBAAuB,KAAG,YAuF9D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAQL,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAA;AAGvB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AACD,eAAO,MAAM,WAAW,GAAI,UAAS,kBAAuB,KAAG,YAkH9D,CAAA"}

package/dist-types/mpa.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mpa.d.ts","sourceRoot":"","sources":["../src/mpa.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,oBAAoB,EAWzB,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAA;AAYvB,eAAO,MAAM,cAAc,GAAI,sCAI5B;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;CAClB,KAAG,oBA2GH,CAAA"}
+{"version":3,"file":"mpa.d.ts","sourceRoot":"","sources":["../src/mpa.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,oBAAoB,EAQzB,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAA;AASvB,eAAO,MAAM,cAAc,GAAI,sCAI5B;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;CAClB,KAAG,oBA4FH,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unpackjs/plugin-react",
-  "version": "3.3.3",
+  "version": "3.4.0",
   "description": "React plugin for Unpack",
   "type": "module",
   "exports": {
@@ -24,11 +24,11 @@
   "dependencies": {
     "@rspack/plugin-react-refresh": "1.5.3",
     "@svgr/webpack": "8.1.0",
-    "@swc/helpers": "0.5.17",
+    "@swc/helpers": "0.5.18",
     "react-refresh": "0.18.0"
   },
   "devDependencies": {
-    "@unpackjs/core": "3.7.4"
+    "@unpackjs/core": "3.8.0"
   },
   "peerDependencies": {
     "@unpackjs/core": "3.x"

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/click-to-component/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,oBAAoB,EAIzB,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAA;AA4BvB,eAAO,MAAM,2BAA2B,GAAU,sCAI/C;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;CAClB,KAAG,OAAO,CAAC,oBAAoB,CA+B/B,CAAA"}