@vitejs/plugin-react 2.0.0-alpha.2 → 2.0.0-beta.1

package/dist/index.cjs

@@ -1,11 +1,10 @@
 'use strict';
 
-const path = require('path');
+const path = require('node:path');
 const babel = require('@babel/core');
-const pluginutils = require('@rollup/pluginutils');
 const vite = require('vite');
-const fs = require('fs');
-const module$1 = require('module');
+const fs = require('node:fs');
+const node_module = require('node:module');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
@@ -26,7 +25,7 @@ const babel__namespace = /*#__PURE__*/_interopNamespace(babel);
 const fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
 
 const runtimePublicPath = "/@react-refresh";
-const _require = module$1.createRequire((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href)));
+const _require = node_module.createRequire((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.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 = `
@@ -173,11 +172,11 @@ async function restoreJSX(babel, code, filename) {
   return [result?.ast, isCommonJS];
 }
 function parseReactAlias(code) {
-  let match = code.match(/\b(var|let|const) +(\w+) *= *require\(["']react["']\)/);
+  let match = code.match(/\b(var|let|const)\s+([^=\{\s]+)\s*=\s*require\(["']react["']\)/);
   if (match) {
     return [match[2], true];
   }
-  match = code.match(/^import (\w+).+? from ["']react["']/m);
+  match = code.match(/^import\s+(?:\*\s+as\s+)?(\w+).+?\bfrom\s*["']react["']/m);
   if (match) {
     return [match[1], false];
   }
@@ -185,9 +184,9 @@ function parseReactAlias(code) {
 }
 
 function viteReact(opts = {}) {
-  let base = "/";
+  let devBase = "/";
   let resolvedCacheDir;
-  let filter = pluginutils.createFilter(opts.include, opts.exclude);
+  let filter = vite.createFilter(opts.include, opts.exclude);
   let isProduction = true;
   let projectRoot = process.cwd();
   let skipFastRefresh = opts.fastRefresh === false;
@@ -200,11 +199,22 @@ function viteReact(opts = {}) {
   const viteBabel = {
     name: "vite:react-babel",
     enforce: "pre",
+    config() {
+      if (opts.jsxRuntime === "classic") {
+        return {
+          esbuild: {
+            logOverride: {
+              "this-is-undefined-in-esm": "silent"
+            }
+          }
+        };
+      }
+    },
     configResolved(config) {
-      base = config.base;
+      devBase = config.base;
       projectRoot = config.root;
       resolvedCacheDir = vite.normalizePath(path__default.resolve(config.cacheDir));
-      filter = pluginutils.createFilter(opts.include, opts.exclude, {
+      filter = vite.createFilter(opts.include, opts.exclude, {
         resolve: projectRoot
       });
       isProduction = config.isProduction;
@@ -222,17 +232,17 @@ function viteReact(opts = {}) {
       runPluginOverrides = (babelOptions, context) => {
         const hooks = config.plugins.map((plugin) => plugin.api?.reactBabel).filter(Boolean);
         if (hooks.length > 0) {
-          return (runPluginOverrides = (babelOptions2) => {
-            hooks.forEach((hook) => hook(babelOptions2, context, config));
+          return (runPluginOverrides = (babelOptions2, context2) => {
+            hooks.forEach((hook) => hook(babelOptions2, context2, config));
             return true;
-          })(babelOptions);
+          })(babelOptions, context);
         }
         runPluginOverrides = () => false;
         return false;
       };
     },
     async transform(code, id, options) {
-      const ssr = typeof options === "boolean" ? options : options?.ssr === true;
+      const ssr = options?.ssr === true;
       const [filepath, querystring = ""] = id.split("?");
       const [extension = ""] = querystring.match(fileExtensionRE) || filepath.match(fileExtensionRE) || [];
       if (/\.(mjs|[tj]sx?)$/.test(extension)) {
@@ -291,7 +301,9 @@ function viteReact(opts = {}) {
         }
         const shouldSkip = !plugins.length && !babelOptions.configFile && !(isProjectFile && babelOptions.babelrc);
         if (shouldSkip) {
-          return;
+          return {
+            code
+          };
         }
         const parserPlugins = [
           ...babelOptions.parserOpts.plugins,
@@ -367,20 +379,49 @@ function viteReact(opts = {}) {
           {
             tag: "script",
             attrs: { type: "module" },
-            children: preambleCode.replace(`__BASE__`, base)
+            children: preambleCode.replace(`__BASE__`, devBase)
           }
         ];
     }
   };
+  const reactJsxRuntimeId = "react/jsx-runtime";
+  const reactJsxDevRuntimeId = "react/jsx-dev-runtime";
+  const virtualReactJsxRuntimeId = "\0" + reactJsxRuntimeId;
+  const virtualReactJsxDevRuntimeId = "\0" + reactJsxDevRuntimeId;
   const viteReactJsx = {
     name: "vite:react-jsx",
     enforce: "pre",
     config() {
       return {
         optimizeDeps: {
-          include: ["react/jsx-dev-runtime"]
+          include: [reactJsxRuntimeId, reactJsxDevRuntimeId]
         }
       };
+    },
+    resolveId(id, importer) {
+      if (id === reactJsxRuntimeId && importer !== virtualReactJsxRuntimeId) {
+        return virtualReactJsxRuntimeId;
+      }
+      if (id === reactJsxDevRuntimeId && importer !== virtualReactJsxDevRuntimeId) {
+        return virtualReactJsxDevRuntimeId;
+      }
+    },
+    load(id) {
+      if (id === virtualReactJsxRuntimeId) {
+        return [
+          `import * as jsxRuntime from ${JSON.stringify(reactJsxRuntimeId)}`,
+          `export const Fragment = jsxRuntime.Fragment`,
+          `export const jsx = jsxRuntime.jsx`,
+          `export const jsxs = jsxRuntime.jsxs`
+        ].join("\n");
+      }
+      if (id === virtualReactJsxDevRuntimeId) {
+        return [
+          `import * as jsxRuntime from ${JSON.stringify(reactJsxDevRuntimeId)}`,
+          `export const Fragment = jsxRuntime.Fragment`,
+          `export const jsxDEV = jsxRuntime.jsxDEV`
+        ].join("\n");
+      }
     }
   };
   return [viteBabel, viteReactRefresh, useAutomaticRuntime && viteReactJsx];

package/dist/index.mjs

@@ -1,9 +1,8 @@
-import path from 'path';
+import path from 'node:path';
 import * as babel from '@babel/core';
-import { createFilter } from '@rollup/pluginutils';
-import { normalizePath } from 'vite';
-import fs from 'fs';
-import { createRequire } from 'module';
+import { createFilter, normalizePath } from 'vite';
+import fs from 'node:fs';
+import { createRequire } from 'node:module';
 
 const runtimePublicPath = "/@react-refresh";
 const _require = createRequire(import.meta.url);
@@ -153,11 +152,11 @@ async function restoreJSX(babel, code, filename) {
   return [result?.ast, isCommonJS];
 }
 function parseReactAlias(code) {
-  let match = code.match(/\b(var|let|const) +(\w+) *= *require\(["']react["']\)/);
+  let match = code.match(/\b(var|let|const)\s+([^=\{\s]+)\s*=\s*require\(["']react["']\)/);
   if (match) {
     return [match[2], true];
   }
-  match = code.match(/^import (\w+).+? from ["']react["']/m);
+  match = code.match(/^import\s+(?:\*\s+as\s+)?(\w+).+?\bfrom\s*["']react["']/m);
   if (match) {
     return [match[1], false];
   }
@@ -165,7 +164,7 @@ function parseReactAlias(code) {
 }
 
 function viteReact(opts = {}) {
-  let base = "/";
+  let devBase = "/";
   let resolvedCacheDir;
   let filter = createFilter(opts.include, opts.exclude);
   let isProduction = true;
@@ -180,8 +179,19 @@ function viteReact(opts = {}) {
   const viteBabel = {
     name: "vite:react-babel",
     enforce: "pre",
+    config() {
+      if (opts.jsxRuntime === "classic") {
+        return {
+          esbuild: {
+            logOverride: {
+              "this-is-undefined-in-esm": "silent"
+            }
+          }
+        };
+      }
+    },
     configResolved(config) {
-      base = config.base;
+      devBase = config.base;
       projectRoot = config.root;
       resolvedCacheDir = normalizePath(path.resolve(config.cacheDir));
       filter = createFilter(opts.include, opts.exclude, {
@@ -202,17 +212,17 @@ function viteReact(opts = {}) {
       runPluginOverrides = (babelOptions, context) => {
         const hooks = config.plugins.map((plugin) => plugin.api?.reactBabel).filter(Boolean);
         if (hooks.length > 0) {
-          return (runPluginOverrides = (babelOptions2) => {
-            hooks.forEach((hook) => hook(babelOptions2, context, config));
+          return (runPluginOverrides = (babelOptions2, context2) => {
+            hooks.forEach((hook) => hook(babelOptions2, context2, config));
             return true;
-          })(babelOptions);
+          })(babelOptions, context);
         }
         runPluginOverrides = () => false;
         return false;
       };
     },
     async transform(code, id, options) {
-      const ssr = typeof options === "boolean" ? options : options?.ssr === true;
+      const ssr = options?.ssr === true;
       const [filepath, querystring = ""] = id.split("?");
       const [extension = ""] = querystring.match(fileExtensionRE) || filepath.match(fileExtensionRE) || [];
       if (/\.(mjs|[tj]sx?)$/.test(extension)) {
@@ -271,7 +281,9 @@ function viteReact(opts = {}) {
         }
         const shouldSkip = !plugins.length && !babelOptions.configFile && !(isProjectFile && babelOptions.babelrc);
         if (shouldSkip) {
-          return;
+          return {
+            code
+          };
         }
         const parserPlugins = [
           ...babelOptions.parserOpts.plugins,
@@ -347,20 +359,49 @@ function viteReact(opts = {}) {
           {
             tag: "script",
             attrs: { type: "module" },
-            children: preambleCode.replace(`__BASE__`, base)
+            children: preambleCode.replace(`__BASE__`, devBase)
           }
         ];
     }
   };
+  const reactJsxRuntimeId = "react/jsx-runtime";
+  const reactJsxDevRuntimeId = "react/jsx-dev-runtime";
+  const virtualReactJsxRuntimeId = "\0" + reactJsxRuntimeId;
+  const virtualReactJsxDevRuntimeId = "\0" + reactJsxDevRuntimeId;
   const viteReactJsx = {
     name: "vite:react-jsx",
     enforce: "pre",
     config() {
       return {
         optimizeDeps: {
-          include: ["react/jsx-dev-runtime"]
+          include: [reactJsxRuntimeId, reactJsxDevRuntimeId]
         }
       };
+    },
+    resolveId(id, importer) {
+      if (id === reactJsxRuntimeId && importer !== virtualReactJsxRuntimeId) {
+        return virtualReactJsxRuntimeId;
+      }
+      if (id === reactJsxDevRuntimeId && importer !== virtualReactJsxDevRuntimeId) {
+        return virtualReactJsxDevRuntimeId;
+      }
+    },
+    load(id) {
+      if (id === virtualReactJsxRuntimeId) {
+        return [
+          `import * as jsxRuntime from ${JSON.stringify(reactJsxRuntimeId)}`,
+          `export const Fragment = jsxRuntime.Fragment`,
+          `export const jsx = jsxRuntime.jsx`,
+          `export const jsxs = jsxRuntime.jsxs`
+        ].join("\n");
+      }
+      if (id === virtualReactJsxDevRuntimeId) {
+        return [
+          `import * as jsxRuntime from ${JSON.stringify(reactJsxDevRuntimeId)}`,
+          `export const Fragment = jsxRuntime.Fragment`,
+          `export const jsxDEV = jsxRuntime.jsxDEV`
+        ].join("\n");
+      }
     }
   };
   return [viteBabel, viteReactRefresh, useAutomaticRuntime && viteReactJsx];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-beta.1",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
@@ -23,11 +23,11 @@
   "scripts": {
     "dev": "unbuild --stub",
     "build": "unbuild && pnpm run patch-cjs",
-    "patch-cjs": "esno ../../scripts/patchCJS.ts",
+    "patch-cjs": "tsx ../../scripts/patchCJS.ts",
     "prepublishOnly": "npm run build"
   },
   "engines": {
-    "node": ">=14.6.0"
+    "node": ">=14.18.0"
   },
   "repository": {
     "type": "git",
@@ -39,17 +39,15 @@
   },
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.18.0",
-    "@babel/plugin-transform-react-jsx": "^7.17.12",
-    "@babel/plugin-transform-react-jsx-development": "^7.16.7",
-    "@babel/plugin-transform-react-jsx-self": "^7.17.12",
-    "@babel/plugin-transform-react-jsx-source": "^7.16.7",
-    "@rollup/pluginutils": "^4.2.1",
-    "react-refresh": "^0.13.0",
-    "resolve": "^1.22.0"
+    "@babel/core": "^7.18.6",
+    "@babel/plugin-transform-react-jsx": "^7.18.6",
+    "@babel/plugin-transform-react-jsx-development": "^7.18.6",
+    "@babel/plugin-transform-react-jsx-self": "^7.18.6",
+    "@babel/plugin-transform-react-jsx-source": "^7.18.6",
+    "react-refresh": "^0.14.0"
   },
   "peerDependencies": {
-    "vite": "^3.0.0-alpha"
+    "vite": "^3.0.0-alpha.11"
   },
   "devDependencies": {
     "vite": "workspace:*"

package/src/fast-refresh.ts

@@ -1,6 +1,6 @@
-import fs from 'fs'
-import path from 'path'
-import { createRequire } from 'module'
+import fs from 'node:fs'
+import path from 'node:path'
+import { createRequire } from 'node:module'
 import type { types as t } from '@babel/core'
 
 export const runtimePublicPath = '/@react-refresh'

package/src/index.ts

@@ -1,8 +1,7 @@
-import path from 'path'
+import path from 'node:path'
 import type { ParserOptions, TransformOptions, types as t } from '@babel/core'
 import * as babel from '@babel/core'
-import { createFilter } from '@rollup/pluginutils'
-import { normalizePath } from 'vite'
+import { createFilter, normalizePath } from 'vite'
 import type { Plugin, PluginOption, ResolvedConfig } from 'vite'
 import {
   addRefreshWrapper,
@@ -91,7 +90,7 @@ declare module 'vite' {
 
 export default function viteReact(opts: Options = {}): PluginOption[] {
   // Provide default values for Rollup compat.
-  let base = '/'
+  let devBase = '/'
   let resolvedCacheDir: string
   let filter = createFilter(opts.include, opts.exclude)
   let isProduction = true
@@ -118,8 +117,19 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
   const viteBabel: Plugin = {
     name: 'vite:react-babel',
     enforce: 'pre',
+    config() {
+      if (opts.jsxRuntime === 'classic') {
+        return {
+          esbuild: {
+            logOverride: {
+              'this-is-undefined-in-esm': 'silent'
+            }
+          }
+        }
+      }
+    },
     configResolved(config) {
-      base = config.base
+      devBase = config.base
       projectRoot = config.root
       resolvedCacheDir = normalizePath(path.resolve(config.cacheDir))
       filter = createFilter(opts.include, opts.exclude, {
@@ -155,17 +165,17 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           .filter(Boolean) as ReactBabelHook[]
 
         if (hooks.length > 0) {
-          return (runPluginOverrides = (babelOptions) => {
+          return (runPluginOverrides = (babelOptions, context) => {
             hooks.forEach((hook) => hook(babelOptions, context, config))
             return true
-          })(babelOptions)
+          })(babelOptions, context)
         }
         runPluginOverrides = () => false
         return false
       }
     },
     async transform(code, id, options) {
-      const ssr = typeof options === 'boolean' ? options : options?.ssr === true
+      const ssr = options?.ssr === true
       // File extension could be mocked/overridden in querystring.
       const [filepath, querystring = ''] = id.split('?')
       const [extension = ''] =
@@ -266,7 +276,10 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           !(isProjectFile && babelOptions.babelrc)
 
         if (shouldSkip) {
-          return // Avoid parsing if no plugins exist.
+          // Avoid parsing if no plugins exist.
+          return {
+            code
+          }
         }
 
         const parserPlugins: typeof babelOptions.parserOpts.plugins = [
@@ -355,13 +368,16 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           {
             tag: 'script',
             attrs: { type: 'module' },
-            children: preambleCode.replace(`__BASE__`, base)
+            children: preambleCode.replace(`__BASE__`, devBase)
           }
         ]
     }
   }
 
-  // const runtimeId = 'react/jsx-runtime'
+  const reactJsxRuntimeId = 'react/jsx-runtime'
+  const reactJsxDevRuntimeId = 'react/jsx-dev-runtime'
+  const virtualReactJsxRuntimeId = '\0' + reactJsxRuntimeId
+  const virtualReactJsxDevRuntimeId = '\0' + reactJsxDevRuntimeId
   // Adapted from https://github.com/alloc/vite-react-jsx
   const viteReactJsx: Plugin = {
     name: 'vite:react-jsx',
@@ -369,32 +385,42 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
     config() {
       return {
         optimizeDeps: {
-          include: ['react/jsx-dev-runtime']
+          include: [reactJsxRuntimeId, reactJsxDevRuntimeId]
         }
       }
-    }
-    // TODO: this optimization may not be necesary and it is breacking esbuild+rollup compat,
-    // see https://github.com/vitejs/vite/pull/7246#discussion_r861552185
-    // We could still do the same trick and resolve to the optimized dependency here
-    /*
-    resolveId(id: string) {
-      return id === runtimeId ? id : null
-    }, 
-    load(id: string) {
-      if (id === runtimeId) {
-        const runtimePath = resolve.sync(runtimeId, {
-          basedir: projectRoot
-        })
-        const exports = ['jsx', 'jsxs', 'Fragment']
+    },
+    resolveId(id, importer) {
+      // Resolve runtime to a virtual path to be interoped.
+      // Since the interop code re-imports `id`, we need to prevent re-resolving
+      // to the virtual id if the importer is already the virtual id.
+      if (id === reactJsxRuntimeId && importer !== virtualReactJsxRuntimeId) {
+        return virtualReactJsxRuntimeId
+      }
+      if (
+        id === reactJsxDevRuntimeId &&
+        importer !== virtualReactJsxDevRuntimeId
+      ) {
+        return virtualReactJsxDevRuntimeId
+      }
+    },
+    load(id) {
+      // Apply manual interop
+      if (id === virtualReactJsxRuntimeId) {
         return [
-          `import * as jsxRuntime from ${JSON.stringify(runtimePath)}`,
-          // We can't use `export * from` or else any callsite that uses
-          // this module will be compiled to `jsxRuntime.exports.jsx`
-          // instead of the more concise `jsx` alias.
-          ...exports.map((name) => `export const ${name} = jsxRuntime.${name}`)
+          `import * as jsxRuntime from ${JSON.stringify(reactJsxRuntimeId)}`,
+          `export const Fragment = jsxRuntime.Fragment`,
+          `export const jsx = jsxRuntime.jsx`,
+          `export const jsxs = jsxRuntime.jsxs`
         ].join('\n')
       }
-    } */
+      if (id === virtualReactJsxDevRuntimeId) {
+        return [
+          `import * as jsxRuntime from ${JSON.stringify(reactJsxDevRuntimeId)}`,
+          `export const Fragment = jsxRuntime.Fragment`,
+          `export const jsxDEV = jsxRuntime.jsxDEV`
+        ].join('\n')
+      }
+    }
   }
 
   return [viteBabel, viteReactRefresh, useAutomaticRuntime && viteReactJsx]

package/src/jsx-runtime/restore-jsx.spec.ts

@@ -1,6 +1,67 @@
 import * as babel from '@babel/core'
 import { describe, expect, it } from 'vitest'
-import { restoreJSX } from './restore-jsx'
+import { parseReactAlias, restoreJSX } from './restore-jsx'
+
+describe('parseReactAlias', () => {
+  it('handles cjs require', () => {
+    expect(parseReactAlias(`const React = require("react")`))
+      .toMatchInlineSnapshot(`
+        [
+          "React",
+          true,
+        ]
+      `)
+  })
+
+  it('handles cjs require (minified)', () => {
+    expect(parseReactAlias(`var F=require('foo');var R=require('react')`))
+      .toMatchInlineSnapshot(`
+        [
+          "R",
+          true,
+        ]
+      `)
+  })
+
+  it('does not handle destructured cjs require', () => {
+    expect(parseReactAlias(`var {createElement} = require("react")`))
+      .toMatchInlineSnapshot(`
+        [
+          undefined,
+          false,
+        ]
+      `)
+  })
+
+  it('handles esm import', () => {
+    expect(parseReactAlias(`import React from 'react'`)).toMatchInlineSnapshot(`
+      [
+        "React",
+        false,
+      ]
+    `)
+  })
+
+  it('handles esm import namespace', () => {
+    expect(parseReactAlias(`import * as React from "react"`))
+      .toMatchInlineSnapshot(`
+        [
+          "React",
+          false,
+        ]
+      `)
+  })
+
+  it('does not handle destructured esm import', () => {
+    expect(parseReactAlias(`import {createElement} from "react"`))
+      .toMatchInlineSnapshot(`
+        [
+          undefined,
+          false,
+        ]
+      `)
+  })
+})
 
 async function jsx(sourceCode: string) {
   const [ast] = await restoreJSX(babel, sourceCode, 'test.js')

package/src/jsx-runtime/restore-jsx.ts

@@ -79,16 +79,16 @@ export async function restoreJSX(
   return [result?.ast, isCommonJS]
 }
 
-function parseReactAlias(
+export function parseReactAlias(
   code: string
 ): [alias: string | undefined, isCommonJS: boolean] {
   let match = code.match(
-    /\b(var|let|const) +(\w+) *= *require\(["']react["']\)/
+    /\b(var|let|const)\s+([^=\{\s]+)\s*=\s*require\(["']react["']\)/
   )
   if (match) {
     return [match[2], true]
   }
-  match = code.match(/^import (\w+).+? from ["']react["']/m)
+  match = code.match(/^import\s+(?:\*\s+as\s+)?(\w+).+?\bfrom\s*["']react["']/m)
   if (match) {
     return [match[1], false]
   }