@unpackjs/plugin-react 1.6.0 → 1.6.2

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

@@ -39,17 +39,23 @@ 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 = {}) => {
+  const { clickToComponent, reactCompiler } = 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)() && clickToComponent) {
+        config = await (0, import_click_to_component.addClickToComponentSupport)({ config, unpackConfig });
+      }
+      if (reactCompiler && !(0, import_core.getUserDepPath)(unpackConfig.root, "react-compiler-runtime")) {
+        import_core.logger.error('Dependency "react-compiler-runtime" not found. Did you install it?');
+        process.exit(1);
+      }
+      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: {
@@ -84,8 +90,22 @@ const pluginReact = (options = {}) => {
             {
               test: /\.(j|t)sx$/,
               exclude: jsExclude,
-              loader: swcLoader,
-              options: getSwcOptions({ tsx: true })
+              use: [
+                {
+                  loader: swcLoader,
+                  options: getSwcOptions({ tsx: true })
+                },
+                reactCompiler && unpackConfig.build?.parallel && {
+                  loader: import_node_path.default.resolve(__dirname, "../../core/dist/thread-loader/index.cjs"),
+                  options: import_core.THREAD_OPTIONS
+                },
+                reactCompiler && {
+                  loader: import_node_path.default.resolve(__dirname, "./react-compiler-loader/index.cjs"),
+                  options: {
+                    target: (0, import_core.getUserDepVersion)(unpackConfig.root, "react").split(".")[0]
+                  }
+                }
+              ].filter(Boolean)
             }
           ]
         },
@@ -93,7 +113,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

@@ -2,6 +2,7 @@ import { type UnpackPlugin } from '@unpackjs/core';
 export declare const PLUGIN_NAME = "unpack:react";
 export type PluginReactOptions = {
     clickToComponent?: boolean;
+    reactCompiler?: boolean;
 };
 export declare const pluginReact: (options?: PluginReactOptions) => UnpackPlugin;
 //# sourceMappingURL=index.d.ts.map

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,EAGL,KAAK,YAAY,EAMlB,MAAM,gBAAgB,CAAA;AAIvB,eAAO,MAAM,WAAW,iBAAiB,CAAA;AAEzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AACD,eAAO,MAAM,WAAW,aAAa,kBAAkB,KAAQ,YAsF9D,CAAA"}

package/dist/index.js

@@ -10,22 +10,36 @@ 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,
+  THREAD_OPTIONS,
+  getUserDepPath,
+  getUserDepVersion,
+  isDev,
+  isDevServer,
+  logger
+} from "@unpackjs/core";
 import { addClickToComponentSupport } from "./click-to-component/index.js";
 import { addMpaSupport } from "./mpa.js";
 const PLUGIN_NAME = "unpack:react";
 const pluginReact = (options = {}) => {
+  const { clickToComponent, reactCompiler } = 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() && clickToComponent) {
+        config = await addClickToComponentSupport({ 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 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: {
@@ -60,8 +74,22 @@ const pluginReact = (options = {}) => {
             {
               test: /\.(j|t)sx$/,
               exclude: jsExclude,
-              loader: swcLoader,
-              options: getSwcOptions({ tsx: true })
+              use: [
+                {
+                  loader: swcLoader,
+                  options: getSwcOptions({ tsx: true })
+                },
+                reactCompiler && unpackConfig.build?.parallel && {
+                  loader: path2.resolve(__dirname, "../../core/dist/thread-loader/index.cjs"),
+                  options: THREAD_OPTIONS
+                },
+                reactCompiler && {
+                  loader: path2.resolve(__dirname, "./react-compiler-loader/index.cjs"),
+                  options: {
+                    target: getUserDepVersion(unpackConfig.root, "react").split(".")[0]
+                  }
+                }
+              ].filter(Boolean)
             }
           ]
         },
@@ -69,7 +97,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/dist/react-compiler-loader/index.cjs

@@ -0,0 +1,67 @@
+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 react_compiler_loader_exports = {};
+__export(react_compiler_loader_exports, {
+  default: () => reactCompilerLoader
+});
+module.exports = __toCommonJS(react_compiler_loader_exports);
+var babel = __toESM(require("@babel/core"));
+var import_plugin_proposal_decorators = __toESM(require("@babel/plugin-proposal-decorators"));
+var import_plugin_transform_class_properties = __toESM(require("@babel/plugin-transform-class-properties"));
+var import_babel_plugin_react_compiler = __toESM(require("babel-plugin-react-compiler"));
+const defaultBabelParsePlugins = ["jsx", "typescript"];
+async function reactCompilerLoader(input, _inputSourceMap) {
+  const callback = this.async();
+  try {
+    const options = this.getOptions();
+    const result = await babel.transformAsync(input, {
+      sourceFileName: this.resourcePath,
+      filename: this.resourcePath,
+      cloneInputAst: false,
+      plugins: [
+        [import_babel_plugin_react_compiler.default, options],
+        [import_plugin_proposal_decorators.default, { legacy: true }],
+        [import_plugin_transform_class_properties.default]
+      ],
+      parserOpts: {
+        plugins: [...defaultBabelParsePlugins]
+      },
+      ast: false,
+      sourceMaps: true,
+      configFile: false,
+      babelrc: false
+    });
+    if (!result) {
+      throw new TypeError("babel.transformAsync with react compiler plugin returns null");
+    }
+    const { code, map } = result;
+    callback(null, code ?? void 0, map ?? void 0);
+  } catch (e) {
+    callback(e);
+  }
+}

package/dist/react-compiler-loader/index.d.ts

@@ -0,0 +1,5 @@
+export type ReactCompilerLoaderOption = {
+    target: '17' | '18' | '19';
+};
+export default function reactCompilerLoader(this: any, input: string, _inputSourceMap: any): Promise<void>;
+//# sourceMappingURL=index.d.ts.map

package/dist/react-compiler-loader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react-compiler-loader/index.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,yBAAyB,GAAG;IACtC,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC3B,CAAA;AAMD,wBAA8B,mBAAmB,CAAC,IAAI,KAAA,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,iBAiC1F"}

package/dist/react-compiler-loader/index.js

@@ -0,0 +1,47 @@
+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 * as babel from "@babel/core";
+import PluginProposalDecorators from "@babel/plugin-proposal-decorators";
+import PluginTransformClassProperties from "@babel/plugin-transform-class-properties";
+import BabelPluginReactCompiler from "babel-plugin-react-compiler";
+const defaultBabelParsePlugins = ["jsx", "typescript"];
+async function reactCompilerLoader(input, _inputSourceMap) {
+  const callback = this.async();
+  try {
+    const options = this.getOptions();
+    const result = await babel.transformAsync(input, {
+      sourceFileName: this.resourcePath,
+      filename: this.resourcePath,
+      cloneInputAst: false,
+      plugins: [
+        [BabelPluginReactCompiler, options],
+        [PluginProposalDecorators, { legacy: true }],
+        [PluginTransformClassProperties]
+      ],
+      parserOpts: {
+        plugins: [...defaultBabelParsePlugins]
+      },
+      ast: false,
+      sourceMaps: true,
+      configFile: false,
+      babelrc: false
+    });
+    if (!result) {
+      throw new TypeError("babel.transformAsync with react compiler plugin returns null");
+    }
+    const { code, map } = result;
+    callback(null, code ?? void 0, map ?? void 0);
+  } catch (e) {
+    callback(e);
+  }
+}
+export {
+  reactCompilerLoader as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unpackjs/plugin-react",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "",
   "type": "module",
   "exports": {
@@ -23,15 +23,19 @@
     "access": "public"
   },
   "dependencies": {
+    "@babel/core": "7.26.0",
+    "@babel/plugin-proposal-decorators": "7.25.9",
+    "@babel/plugin-transform-class-properties": "7.25.9",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
     "@rspack/plugin-react-refresh": "1.0.0",
-    "react-refresh": "0.14.2",
-    "swc-loader": "0.2.6",
-    "@swc/core": "1.7.39",
+    "@swc/core": "1.7.40",
     "@swc/helpers": "0.5.13",
+    "babel-plugin-react-compiler": "19.0.0-beta-8a03594-20241020",
+    "html-webpack-plugin": "5.6.3",
     "launch-editor": "2.9.1",
-    "html-webpack-plugin": "5.6.2",
-    "@unpackjs/core": "^1.6.0"
+    "react-refresh": "0.14.2",
+    "swc-loader": "0.2.6",
+    "@unpackjs/core": "^1.6.2"
   },
   "scripts": {
     "dev": "modern build --watch",