chore: add comments

Author: sapphi-red

packages/common/refresh-runtime.js

@@ -632,7 +632,11 @@ function predicateOnExport(ignoredExports, moduleExports, predicate) {
   for (const key in moduleExports) {
     if (key === '__esModule') continue
     if (ignoredExports.includes(key)) continue
-    // TODO: Not sure why need this. The esm module live binding always is getter, look like the browser is not.
+    // NOTE: this condition was added in https://github.com/vitejs/vite/pull/10239
+    //       this is needed to avoid triggering side effects in getters
+    //       but this is not needed when `moduleExports` is an ESM module namespace
+    //       also this is problematic for full-bundle mode because rolldown converts
+    //       exports to getters for live bindings
     // const desc = Object.getOwnPropertyDescriptor(moduleExports, key)
     // if (desc && desc.get) return key
     if (!predicate(key, moduleExports[key])) return key

packages/common/refresh-utils.ts

@@ -81,7 +81,8 @@ const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof
   newCode = `${sharedHead}${newCode}
 
 if (import.meta.hot && !inWebWorker) {
-  import.meta.hot.getExports(import.meta.url).then((currentExports) => {
+  // NOTE: import(import.meta.url) does not work in full-bundle mode
+  import.meta.hot.getExports().then((currentExports) => {
     RefreshRuntime.registerExportsForReactRefresh(${JSON.stringify(
       id,
     )}, currentExports);

packages/plugin-react-oxc/src/index.ts

@@ -103,13 +103,15 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
   }
 
   let skipFastRefresh = false
-  let base: string | undefined
+  let base: string
+
   const viteRefreshWrapper: Plugin = {
     name: 'vite:react-oxc:refresh-wrapper',
     apply: 'serve',
     configResolved(config) {
       base = config.base
       skipFastRefresh = config.isProduction || config.server.hmr === false
+      base = config.base
     },
     transform: {
       filter: {
@@ -138,20 +140,19 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
       },
     },
     transformIndexHtml: {
+      // TODO: maybe we can inject this to entrypoints instead of index.html?
       handler() {
         if (!skipFastRefresh)
           return [
             {
               tag: 'script',
               attrs: { type: 'module' },
-              // !!! Rolldown vite full bunlde module break changes, config.server is invalid
-              // children: getPreambleCode(config.server!.config.base),
-              children: getPreambleCode(base!),
+              children: getPreambleCode(base),
             },
           ]
       },
-      // Rolldown vite full bunlde module break changes.
-      // Changed it to make sure the inject module could be bundled
+      // In unbundled mode, Vite transforms any requests.
+      // But in full bundled mode, Vite only transforms / bundles the scripts injected in `order: 'pre'`.
       order: 'pre',
     },
   }

packages/plugin-react-swc/src/index.ts

@@ -85,6 +85,7 @@ type Options = {
 
 const react = (_options?: Options): PluginOption[] => {
   let hmrDisabled = false
+  let base: string
   const options = {
     jsxImportSource: _options?.jsxImportSource ?? 'react',
     tsDecorators: _options?.tsDecorators,
@@ -99,7 +100,6 @@ const react = (_options?: Options): PluginOption[] => {
     disableOxcRecommendation: _options?.disableOxcRecommendation,
   }
 
-  let base: string | undefined
   return [
     {
       name: 'vite:react-swc:resolve-runtime',
@@ -140,6 +140,8 @@ const react = (_options?: Options): PluginOption[] => {
       configResolved(config) {
         base = config.base
         if (config.server.hmr === false) hmrDisabled = true
+        base = config.base
+
         const mdxIndex = config.plugins.findIndex(
           (p) => p.name === '@mdx-js/rollup',
         )
@@ -165,21 +167,19 @@ const react = (_options?: Options): PluginOption[] => {
         }
       },
       transformIndexHtml: {
+        // TODO: maybe we can inject this to entrypoints instead of index.html?
         handler() {
-          if (!hmrDisabled) {
+          if (!hmrDisabled)
             return [
               {
                 tag: 'script',
                 attrs: { type: 'module' },
-                // !!! Rolldown vite full bunlde module break changes, config.server is invalid
-                // children: getPreambleCode(config.server!.config.base),
-                children: getPreambleCode(base!),
+                children: getPreambleCode(base),
               },
             ]
-          }
         },
-        // Rolldown vite full bunlde module break changes.
-        // Changed it to make sure the inject module could be bundled
+        // In unbundled mode, Vite transforms any requests.
+        // But in full bundled mode, Vite only transforms / bundles the scripts injected in `order: 'pre'`.
         order: 'pre',
       },
       async transform(code, _id, transformOptions) {

packages/plugin-react/src/index.ts

@@ -121,6 +121,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
   let isProduction = true
   let projectRoot = process.cwd()
   let skipFastRefresh = false
+  let base: string
   let runPluginOverrides:
     | ((options: ReactBabelOptions, context: ReactBabelHookContext) => void)
     | undefined
@@ -382,20 +383,19 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
       },
     },
     transformIndexHtml: {
+      // TODO: maybe we can inject this to entrypoints instead of index.html?
       handler() {
         if (!skipFastRefresh)
           return [
             {
               tag: 'script',
               attrs: { type: 'module' },
-              // !!! Rolldown vite full bunlde module break changes, config.server is invalid
-              // children: getPreambleCode(config.server!.config.base),
-              children: getPreambleCode(base!),
+              children: getPreambleCode(base),
             },
           ]
       },
-      // Rolldown vite full bunlde module break changes.
-      // Changed it to make sure the inject module could be bundled
+      // In unbundled mode, Vite transforms any requests.
+      // But in full bundled mode, Vite only transforms / bundles the scripts injected in `order: 'pre'`.
       order: 'pre',
     },
   }