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

package/dist/index.mjs

@@ -1,81 +1,112 @@
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { readFileSync } from 'node:fs';
 import { createFilter } from 'vite';
-import fs from 'node:fs';
-import path from 'node:path';
-import { createRequire } from 'node:module';
 
 const runtimePublicPath = "/@react-refresh";
-const _require = createRequire(import.meta.url);
-const reactRefreshDir = path.dirname(
-  _require.resolve("react-refresh/package.json")
-);
-const runtimeFilePath = path.join(
-  reactRefreshDir,
-  "cjs/react-refresh-runtime.development.js"
-);
-const runtimeCode = `
-const exports = {}
-${fs.readFileSync(runtimeFilePath, "utf-8")}
-${fs.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 = dirname(fileURLToPath(import.meta.url));
+const refreshRuntimePath = join(_dirname, "refresh-runtime.js") ;
 let babel;
 async function loadBabel() {
   if (!babel) {
@@ -83,12 +114,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 = createFilter(opts.include ?? defaultIncludeRE, opts.exclude);
   const jsxImportSource = opts.jsxImportSource ?? "react";
   const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`;
@@ -120,7 +148,6 @@ function viteReact(opts = {}) {
       }
     },
     configResolved(config) {
-      devBase = config.base;
       projectRoot = config.root;
       isProduction = config.isProduction;
       skipFastRefresh = isProduction || config.command === "build" || config.server.hmr === false;
@@ -139,15 +166,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
         );
@@ -188,7 +212,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: {
@@ -207,15 +231,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
+        );
       }
     }
   };
@@ -250,16 +275,19 @@ function viteReact(opts = {}) {
     },
     load(id) {
       if (id === runtimePublicPath) {
-        return runtimeCode;
+        return 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)
           }
         ];
     }
@@ -267,28 +295,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);
@@ -298,17 +308,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) {