@vitejs/plugin-react 4.3.4 → 4.4.0-beta.2

package/README.md

@@ -94,9 +94,19 @@ This option does not enable _code transformation_. That is handled by esbuild.
 
 Here's the [complete list of Babel parser plugins](https://babeljs.io/docs/en/babel-parser#ecmascript-proposalshttpsgithubcombabelproposals).
 
+### reactRefreshHost
+
+The `reactRefreshHost` option is only necessary in a module federation context. It enables HMR to work between a remote & host application. In your remote Vite config, you would add your host origin:
+
+```js
+react({ reactRefreshHost: 'http://localhost:3000' })
+```
+
+Under the hood, this simply updates the React Fash Refresh runtime URL from `/@react-refresh` to `http://localhost:3000/@react-refresh` to ensure there is only one Refresh runtime across the whole application. Note that if you define `base` option in the host application, you need to include it in the option, like: `http://localhost:3000/{base}`.
+
 ## Middleware mode
 
-In [middleware mode](https://vitejs.dev/config/server-options.html#server-middlewaremode), you should make sure your entry `index.html` file is transformed by Vite. Here's an example for an Express server:
+In [middleware mode](https://vite.dev/config/server-options.html#server-middlewaremode), you should make sure your entry `index.html` file is transformed by Vite. Here's an example for an Express server:
 
 ```js
 app.get('/', async (req, res, next) => {

package/dist/index.cjs

@@ -1,89 +1,115 @@
 'use strict';
 
+const node_path = require('node:path');
+const node_url = require('node:url');
+const node_fs = require('node:fs');
 const vite = require('vite');
-const fs = require('node:fs');
-const path = require('node:path');
-const node_module = require('node:module');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
-
-const fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
-const path__default = /*#__PURE__*/_interopDefaultCompat(path);
-
 const runtimePublicPath = "/@react-refresh";
-const _require = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)));
-const reactRefreshDir = path__default.dirname(
-  _require.resolve("react-refresh/package.json")
-);
-const runtimeFilePath = path__default.join(
-  reactRefreshDir,
-  "cjs/react-refresh-runtime.development.js"
-);
-const runtimeCode = `
-const exports = {}
-${fs__default.readFileSync(runtimeFilePath, "utf-8")}
-${fs__default.readFileSync(_require.resolve("./refreshUtils.js"), "utf-8")}
-export default exports
-`;
-const preambleCode = `
-import RefreshRuntime from "__BASE__${runtimePublicPath.slice(1)}"
-RefreshRuntime.injectIntoGlobalHook(window)
-window.$RefreshReg$ = () => {}
-window.$RefreshSig$ = () => (type) => type
-window.__vite_plugin_react_preamble_installed__ = true
-`;
-const sharedHeader = `
-import RefreshRuntime from "${runtimePublicPath}";
-
-const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
-`.replace(/\n+/g, "");
-const functionHeader = `
-let prevRefreshReg;
+const reactCompRE = /extends\s+(?:React\.)?(?:Pure)?Component/;
+const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
+const preambleCode = `import { injectIntoGlobalHook } from "__BASE__${runtimePublicPath.slice(
+  1
+)}"
+injectIntoGlobalHook(window);
+window.$RefreshReg$ = () => {};
+window.$RefreshSig$ = () => (type) => type;`;
+const getPreambleCode = (base) => preambleCode.replace("__BASE__", base);
+const avoidSourceMapOption = Symbol();
+function addRefreshWrapper(code, map, pluginName, id, reactRefreshHost = "") {
+  const hasRefresh = refreshContentRE.test(code);
+  const onlyReactComp = !hasRefresh && reactCompRE.test(code);
+  const normalizedMap = map === avoidSourceMapOption ? null : map;
+  if (!hasRefresh && !onlyReactComp) return { code, map: normalizedMap };
+  const avoidSourceMap = map === avoidSourceMapOption;
+  const newMap = typeof normalizedMap === "string" ? JSON.parse(normalizedMap) : normalizedMap;
+  let newCode = code;
+  if (hasRefresh) {
+    const refreshHead = removeLineBreaksIfNeeded(
+      `let prevRefreshReg;
 let prevRefreshSig;
 
 if (import.meta.hot && !inWebWorker) {
-  if (!window.__vite_plugin_react_preamble_installed__) {
+  if (!window.$RefreshReg$) {
     throw new Error(
-      "@vitejs/plugin-react can't detect preamble. Something is wrong. " +
-      "See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201"
+      "${pluginName} can't detect preamble. Something is wrong."
     );
   }
 
   prevRefreshReg = window.$RefreshReg$;
   prevRefreshSig = window.$RefreshSig$;
-  window.$RefreshReg$ = (type, id) => {
-    RefreshRuntime.register(type, __SOURCE__ + " " + id)
-  };
+  window.$RefreshReg$ = RefreshRuntime.getRefreshReg(${JSON.stringify(id)});
   window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
-}`.replace(/\n+/g, "");
-const functionFooter = `
+}
+
+`,
+      avoidSourceMap
+    );
+    newCode = `${refreshHead}${newCode}
+
 if (import.meta.hot && !inWebWorker) {
   window.$RefreshReg$ = prevRefreshReg;
   window.$RefreshSig$ = prevRefreshSig;
-}`;
-const sharedFooter = (id) => `
+}
+`;
+    if (newMap) {
+      newMap.mappings = ";".repeat(16) + newMap.mappings;
+    }
+  }
+  const sharedHead = removeLineBreaksIfNeeded(
+    `import * as RefreshRuntime from "${reactRefreshHost}${runtimePublicPath}";
+const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
+
+`,
+    avoidSourceMap
+  );
+  newCode = `${sharedHead}${newCode}
+
 if (import.meta.hot && !inWebWorker) {
   RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
     RefreshRuntime.registerExportsForReactRefresh(${JSON.stringify(
-  id
-)}, currentExports);
+    id
+  )}, currentExports);
     import.meta.hot.accept((nextExports) => {
       if (!nextExports) return;
       const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(${JSON.stringify(
-  id
-)}, currentExports, nextExports);
+    id
+  )}, currentExports, nextExports);
       if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
     });
   });
-}`;
-function addRefreshWrapper(code, id) {
-  return sharedHeader + functionHeader.replace("__SOURCE__", JSON.stringify(id)) + code + functionFooter + sharedFooter(id);
 }
-function addClassComponentRefreshWrapper(code, id) {
-  return sharedHeader + code + sharedFooter(id);
+`;
+  if (newMap) {
+    newMap.mappings = ";;;" + newMap.mappings;
+  }
+  return { code: newCode, map: newMap };
 }
+function removeLineBreaksIfNeeded(code, enabled) {
+  return enabled ? code.replace(/\n/g, "") : code;
+}
+
+const silenceUseClientWarning = (userConfig) => ({
+  rollupOptions: {
+    onwarn(warning, defaultHandler) {
+      if (warning.code === "MODULE_LEVEL_DIRECTIVE" && warning.message.includes("use client")) {
+        return;
+      }
+      if (warning.code === "SOURCEMAP_ERROR" && warning.message.includes("resolve original location") && warning.pos === 0) {
+        return;
+      }
+      if (userConfig.build?.rollupOptions?.onwarn) {
+        userConfig.build.rollupOptions.onwarn(warning, defaultHandler);
+      } else {
+        defaultHandler(warning);
+      }
+    }
+  }
+});
 
+const _dirname = node_path.dirname(node_url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href))));
+const refreshRuntimePath = node_path.join(_dirname, "refresh-runtime.js") ;
 let babel;
 async function loadBabel() {
   if (!babel) {
@@ -91,12 +117,9 @@ async function loadBabel() {
   }
   return babel;
 }
-const reactCompRE = /extends\s+(?:React\.)?(?:Pure)?Component/;
-const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
 const defaultIncludeRE = /\.[tj]sx?$/;
 const tsRE = /\.tsx?$/;
 function viteReact(opts = {}) {
-  let devBase = "/";
   const filter = vite.createFilter(opts.include ?? defaultIncludeRE, opts.exclude);
   const jsxImportSource = opts.jsxImportSource ?? "react";
   const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`;
@@ -128,7 +151,6 @@ function viteReact(opts = {}) {
       }
     },
     configResolved(config) {
-      devBase = config.base;
       projectRoot = config.root;
       isProduction = config.isProduction;
       skipFastRefresh = isProduction || config.command === "build" || config.server.hmr === false;
@@ -147,15 +169,12 @@ function viteReact(opts = {}) {
       }
     },
     async transform(code, id, options) {
-      if (id.includes("/node_modules/"))
-        return;
+      if (id.includes("/node_modules/")) return;
       const [filepath] = id.split("?");
-      if (!filter(filepath))
-        return;
+      if (!filter(filepath)) return;
       const ssr = options?.ssr === true;
       const babelOptions = (() => {
-        if (staticBabelOptions)
-          return staticBabelOptions;
+        if (staticBabelOptions) return staticBabelOptions;
         const newBabelOptions = createBabelOptions(
           typeof opts.babel === "function" ? opts.babel(id, { ssr }) : opts.babel
         );
@@ -196,7 +215,7 @@ function viteReact(opts = {}) {
         filename: id,
         sourceFileName: filepath,
         // Required for esbuild.jsxDev to provide correct line numbers
-        // This crates issues the react compiler because the re-order is too important
+        // This creates issues the react compiler because the re-order is too important
         // People should use @babel/plugin-transform-react-jsx-development to get back good line numbers
         retainLines: getReactCompilerPlugin(plugins) != null ? false : !isProduction && isJSX && opts.jsxRuntime !== "classic",
         parserOpts: {
@@ -215,15 +234,16 @@ function viteReact(opts = {}) {
         sourceMaps: true
       });
       if (result) {
-        let code2 = result.code;
-        if (useFastRefresh) {
-          if (refreshContentRE.test(code2)) {
-            code2 = addRefreshWrapper(code2, id);
-          } else if (reactCompRE.test(code2)) {
-            code2 = addClassComponentRefreshWrapper(code2, id);
-          }
+        if (!useFastRefresh) {
+          return { code: result.code, map: result.map };
         }
-        return { code: code2, map: result.map };
+        return addRefreshWrapper(
+          result.code,
+          result.map,
+          "@vitejs/plugin-react",
+          id,
+          opts.reactRefreshHost
+        );
       }
     }
   };
@@ -258,16 +278,19 @@ function viteReact(opts = {}) {
     },
     load(id) {
       if (id === runtimePublicPath) {
-        return runtimeCode;
+        return node_fs.readFileSync(refreshRuntimePath, "utf-8").replace(
+          /__README_URL__/g,
+          "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react"
+        );
       }
     },
-    transformIndexHtml() {
+    transformIndexHtml(_, config) {
       if (!skipFastRefresh)
         return [
           {
             tag: "script",
             attrs: { type: "module" },
-            children: preambleCode.replace(`__BASE__`, devBase)
+            children: getPreambleCode(config.server.config.base)
           }
         ];
     }
@@ -275,28 +298,10 @@ function viteReact(opts = {}) {
   return [viteBabel, viteReactRefresh];
 }
 viteReact.preambleCode = preambleCode;
-const silenceUseClientWarning = (userConfig) => ({
-  rollupOptions: {
-    onwarn(warning, defaultHandler) {
-      if (warning.code === "MODULE_LEVEL_DIRECTIVE" && warning.message.includes("use client")) {
-        return;
-      }
-      if (warning.code === "SOURCEMAP_ERROR" && warning.message.includes("resolve original location") && warning.pos === 0) {
-        return;
-      }
-      if (userConfig.build?.rollupOptions?.onwarn) {
-        userConfig.build.rollupOptions.onwarn(warning, defaultHandler);
-      } else {
-        defaultHandler(warning);
-      }
-    }
-  }
-});
 const loadedPlugin = /* @__PURE__ */ new Map();
 function loadPlugin(path) {
   const cached = loadedPlugin.get(path);
-  if (cached)
-    return cached;
+  if (cached) return cached;
   const promise = import(path).then((module) => {
     const value = module.default || module;
     loadedPlugin.set(path, value);
@@ -306,17 +311,16 @@ function loadPlugin(path) {
   return promise;
 }
 function createBabelOptions(rawOptions) {
-  var _a;
   const babelOptions = {
     babelrc: false,
     configFile: false,
     ...rawOptions
   };
-  babelOptions.plugins || (babelOptions.plugins = []);
-  babelOptions.presets || (babelOptions.presets = []);
-  babelOptions.overrides || (babelOptions.overrides = []);
-  babelOptions.parserOpts || (babelOptions.parserOpts = {});
-  (_a = babelOptions.parserOpts).plugins || (_a.plugins = []);
+  babelOptions.plugins ||= [];
+  babelOptions.presets ||= [];
+  babelOptions.overrides ||= [];
+  babelOptions.parserOpts ||= {};
+  babelOptions.parserOpts.plugins ||= [];
   return babelOptions;
 }
 function defined(value) {

package/dist/index.d.cts

@@ -21,6 +21,14 @@ interface Options {
     babel?: BabelOptions | ((id: string, options: {
         ssr?: boolean;
     }) => BabelOptions);
+    /**
+     * React Fast Refresh runtime URL prefix.
+     * Useful in a module federation context to enable HMR by specifying
+     * the host application URL in the Vite config of a remote application.
+     * @example
+     * reactRefreshHost: 'http://localhost:3000'
+     */
+    reactRefreshHost?: string;
 }
 type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'sourceFileName' | 'sourceMaps' | 'inputSourceMap'>;
 /**
@@ -51,4 +59,5 @@ declare namespace viteReact {
     var preambleCode: string;
 }
 
-export { type BabelOptions, type Options, type ReactBabelOptions, type ViteReactPluginApi, viteReact as default };
+export = viteReact;
+export type { BabelOptions, Options, ReactBabelOptions, ViteReactPluginApi };

package/dist/index.d.mts

@@ -21,6 +21,14 @@ interface Options {
     babel?: BabelOptions | ((id: string, options: {
         ssr?: boolean;
     }) => BabelOptions);
+    /**
+     * React Fast Refresh runtime URL prefix.
+     * Useful in a module federation context to enable HMR by specifying
+     * the host application URL in the Vite config of a remote application.
+     * @example
+     * reactRefreshHost: 'http://localhost:3000'
+     */
+    reactRefreshHost?: string;
 }
 type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'sourceFileName' | 'sourceMaps' | 'inputSourceMap'>;
 /**
@@ -51,4 +59,5 @@ declare namespace viteReact {
     var preambleCode: string;
 }
 
-export { type BabelOptions, type Options, type ReactBabelOptions, type ViteReactPluginApi, viteReact as default };
+export { viteReact as default };
+export type { BabelOptions, Options, ReactBabelOptions, ViteReactPluginApi };

package/dist/index.d.ts

@@ -21,6 +21,14 @@ interface Options {
     babel?: BabelOptions | ((id: string, options: {
         ssr?: boolean;
     }) => BabelOptions);
+    /**
+     * React Fast Refresh runtime URL prefix.
+     * Useful in a module federation context to enable HMR by specifying
+     * the host application URL in the Vite config of a remote application.
+     * @example
+     * reactRefreshHost: 'http://localhost:3000'
+     */
+    reactRefreshHost?: string;
 }
 type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'sourceFileName' | 'sourceMaps' | 'inputSourceMap'>;
 /**
@@ -51,4 +59,5 @@ declare namespace viteReact {
     var preambleCode: string;
 }
 
-export { type BabelOptions, type Options, type ReactBabelOptions, type ViteReactPluginApi, viteReact as default };
+export = viteReact;
+export type { BabelOptions, Options, ReactBabelOptions, ViteReactPluginApi };