@vitejs/plugin-react 1.1.0-beta.0 → 1.1.2

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## [1.1.2](https://github.com/vitejs/vite/compare/plugin-react@1.1.1...plugin-react@1.1.2) (2021-12-13)
+
+
+### Bug Fixes
+
+* ignore babel config when running restore-jsx ([#6047](https://github.com/vitejs/vite/issues/6047)) ([9c2843c](https://github.com/vitejs/vite/commit/9c2843cf0506844ee32f042a04c22c440434df2a))
+
+
+
+## [1.1.1](https://github.com/vitejs/vite/compare/plugin-react@1.1.0...plugin-react@1.1.1) (2021-12-07)
+
+
+
+# [1.1.0](https://github.com/vitejs/vite/compare/plugin-react@1.1.0-beta.1...plugin-react@1.1.0) (2021-11-22)
+
+
+
+# [1.1.0-beta.1](https://github.com/vitejs/vite/compare/plugin-react@1.1.0-beta.0...plugin-react@1.1.0-beta.1) (2021-11-19)
+
+
+### Bug Fixes
+
+* **plugin-react:** apply `babel.plugins` to project files only ([#5255](https://github.com/vitejs/vite/issues/5255)) ([377d0be](https://github.com/vitejs/vite/commit/377d0be5cf85a50240e160beaaafda77b7199452))
+* **plugin-react:** remove querystring from sourcemap filename ([#5760](https://github.com/vitejs/vite/issues/5760)) ([d93a9fa](https://github.com/vitejs/vite/commit/d93a9fab8986f3659e79d7b0b065e99ef625a5dd))
+* **plugin-react:** restore usage of extension instead of id ([#5761](https://github.com/vitejs/vite/issues/5761)) ([59471b1](https://github.com/vitejs/vite/commit/59471b186612d3da0083543e23d660747d3287f3))
+* **plugin-react:** uncompiled JSX in linked pkgs ([#5669](https://github.com/vitejs/vite/issues/5669)) ([41a7c9c](https://github.com/vitejs/vite/commit/41a7c9ccfbc1a7bc60aec672056eac3966ddd036))
+
+
+
 # [1.1.0-beta.0](https://github.com/vitejs/vite/compare/plugin-react@1.0.6...plugin-react@1.1.0-beta.0) (2021-10-28)
 
 

package/dist/index.js

@@ -283,8 +283,15 @@ function babelImportToRequire({
 
 // src/jsx-runtime/restore-jsx.ts
 var babelRestoreJSX;
+var jsxNotFound = [null, false];
 async function restoreJSX(babel2, code, filename) {
+  if (filename.includes("/.vite/react-dom.js")) {
+    return jsxNotFound;
+  }
   const [reactAlias, isCommonJS] = parseReactAlias(code);
+  if (!reactAlias) {
+    return jsxNotFound;
+  }
   const reactJsxRE = new RegExp("\\b" + reactAlias + "\\.(createElement|Fragment)\\b", "g");
   let hasCompiledJsx = false;
   code = code.replace(reactJsxRE, (_, prop) => {
@@ -292,11 +299,13 @@ async function restoreJSX(babel2, code, filename) {
     return "React." + prop;
   });
   if (!hasCompiledJsx) {
-    return [null, false];
+    return jsxNotFound;
   }
   code = code.replace(/createElement\(Fragment,/g, "createElement(React.Fragment,");
   babelRestoreJSX || (babelRestoreJSX = Promise.resolve().then(() => (init_babel_restore_jsx(), babel_restore_jsx_exports)));
   const result = await babel2.transformAsync(code, {
+    babelrc: false,
+    configFile: false,
     ast: true,
     code: false,
     filename,
@@ -352,31 +361,18 @@ function viteReact(opts = {}) {
       config.plugins.forEach((plugin) => (plugin.name === "react-refresh" || plugin !== viteReactJsx && plugin.name === "vite:react-jsx") && config.logger.warn(`[@vitejs/plugin-react] You should stop using "${plugin.name}" since this plugin conflicts with it.`));
     },
     async transform(code, id, options) {
-      var _a2, _b2;
+      var _a2, _b2, _c2, _d;
       const ssr = typeof options === "boolean" ? options : (options == null ? void 0 : options.ssr) === true;
       const [filepath, querystring = ""] = id.split("?");
       const [extension = ""] = querystring.match(fileExtensionRE) || filepath.match(fileExtensionRE) || [];
       if (/\.(mjs|[tj]sx?)$/.test(extension)) {
-        const plugins = [...userPlugins];
-        const parserPlugins = [
-          ...userParserPlugins,
-          "importMeta",
-          "topLevelAwait",
-          "classProperties",
-          "classPrivateProperties",
-          "classPrivateMethods"
-        ];
-        if (!extension.endsWith(".ts")) {
-          parserPlugins.push("jsx");
-        }
-        const isTypeScript = /\.tsx?$/.test(extension);
-        if (isTypeScript) {
-          parserPlugins.push("typescript");
-        }
-        const isNodeModules = id.includes("node_modules");
+        const isJSX = extension.endsWith("x");
+        const isNodeModules = id.includes("/node_modules/");
+        const isProjectFile = !isNodeModules && (id[0] === "\0" || id.startsWith(projectRoot + "/"));
+        const plugins = isProjectFile ? [...userPlugins] : [];
         let useFastRefresh = false;
         if (!skipFastRefresh && !ssr && !isNodeModules) {
-          const isReactModule = extension.endsWith("x") || code.includes("react");
+          const isReactModule = isJSX || code.includes("react");
           if (isReactModule && filter(id)) {
             useFastRefresh = true;
             plugins.push([
@@ -386,10 +382,10 @@ function viteReact(opts = {}) {
           }
         }
         let ast;
-        if (isNodeModules || extension.endsWith("x")) {
+        if (!isProjectFile || isJSX) {
           if (useAutomaticRuntime) {
-            const [restoredAst, isCommonJS] = isNodeModules ? await restoreJSX(babel, code, id) : [null, false];
-            if (!isNodeModules || (ast = restoredAst)) {
+            const [restoredAst, isCommonJS] = !isProjectFile && !isJSX ? await restoreJSX(babel, code, id) : [null, false];
+            if (isJSX || (ast = restoredAst)) {
               plugins.push([
                 await loadPlugin("@babel/plugin-transform-react-jsx" + (isProduction ? "" : "-development")),
                 {
@@ -401,7 +397,7 @@ function viteReact(opts = {}) {
                 plugins.push(babelImportToRequire);
               }
             }
-          } else if (!isNodeModules) {
+          } else if (isProjectFile) {
             if (!isProduction) {
               plugins.push(await loadPlugin("@babel/plugin-transform-react-jsx-self"), await loadPlugin("@babel/plugin-transform-react-jsx-source"));
             }
@@ -410,6 +406,24 @@ function viteReact(opts = {}) {
             }
           }
         }
+        const shouldSkip = !plugins.length && !((_a2 = opts.babel) == null ? void 0 : _a2.configFile) && !(isProjectFile && ((_b2 = opts.babel) == null ? void 0 : _b2.babelrc));
+        if (shouldSkip) {
+          return;
+        }
+        const parserPlugins = [
+          ...userParserPlugins,
+          "importMeta",
+          "topLevelAwait",
+          "classProperties",
+          "classPrivateProperties",
+          "classPrivateMethods"
+        ];
+        if (!extension.endsWith(".ts")) {
+          parserPlugins.push("jsx");
+        }
+        if (/\.tsx?$/.test(extension)) {
+          parserPlugins.push("typescript");
+        }
         const isReasonReact = extension.endsWith(".bs.js");
         const babelOpts = __spreadProps(__spreadValues({
           babelrc: false,
@@ -418,13 +432,13 @@ function viteReact(opts = {}) {
           ast: !isReasonReact,
           root: projectRoot,
           filename: id,
-          sourceFileName: id,
-          parserOpts: __spreadProps(__spreadValues({}, (_a2 = opts.babel) == null ? void 0 : _a2.parserOpts), {
+          sourceFileName: filepath,
+          parserOpts: __spreadProps(__spreadValues({}, (_c2 = opts.babel) == null ? void 0 : _c2.parserOpts), {
             sourceType: "module",
             allowAwaitOutsideFunction: true,
             plugins: parserPlugins
           }),
-          generatorOpts: __spreadProps(__spreadValues({}, (_b2 = opts.babel) == null ? void 0 : _b2.generatorOpts), {
+          generatorOpts: __spreadProps(__spreadValues({}, (_d = opts.babel) == null ? void 0 : _d.generatorOpts), {
             decoratorsBeforeExport: true
           }),
           plugins,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "1.1.0-beta.0",
+  "version": "1.1.2",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
@@ -18,7 +18,7 @@
     "build-bundle": "esbuild src/index.ts --bundle --platform=node --target=node12 --external:@babel/* --external:@rollup/* --external:resolve --external:react-refresh/* --outfile=dist/index.js",
     "build-types": "tsc -p . --emitDeclarationOnly --outDir temp && api-extractor run && rimraf temp",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path . --lerna-package plugin-react",
-    "release": "node ../../scripts/release.js"
+    "release": "node ../../scripts/release.cjs"
   },
   "engines": {
     "node": ">=12.0.0"
@@ -33,13 +33,13 @@
   },
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/plugin-transform-react-jsx": "^7.14.9",
-    "@babel/plugin-transform-react-jsx-development": "^7.14.5",
-    "@babel/plugin-transform-react-jsx-self": "^7.14.9",
-    "@babel/plugin-transform-react-jsx-source": "^7.14.5",
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-transform-react-jsx": "^7.16.0",
+    "@babel/plugin-transform-react-jsx-development": "^7.16.0",
+    "@babel/plugin-transform-react-jsx-self": "^7.16.0",
+    "@babel/plugin-transform-react-jsx-source": "^7.16.0",
     "@rollup/pluginutils": "^4.1.1",
-    "react-refresh": "^0.10.0",
+    "react-refresh": "^0.11.0",
     "resolve": "^1.20.0"
   }
 }

package/src/index.ts

@@ -108,36 +108,17 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         []
 
       if (/\.(mjs|[tj]sx?)$/.test(extension)) {
-        const plugins = [...userPlugins]
+        const isJSX = extension.endsWith('x')
+        const isNodeModules = id.includes('/node_modules/')
+        const isProjectFile =
+          !isNodeModules && (id[0] === '\0' || id.startsWith(projectRoot + '/'))
 
-        const parserPlugins: typeof userParserPlugins = [
-          ...userParserPlugins,
-          'importMeta',
-          // This plugin is applied before esbuild transforms the code,
-          // so we need to enable some stage 3 syntax that is supported in
-          // TypeScript and some environments already.
-          'topLevelAwait',
-          'classProperties',
-          'classPrivateProperties',
-          'classPrivateMethods'
-        ]
-
-        if (!extension.endsWith('.ts')) {
-          parserPlugins.push('jsx')
-        }
-
-        const isTypeScript = /\.tsx?$/.test(extension)
-        if (isTypeScript) {
-          parserPlugins.push('typescript')
-        }
-
-        const isNodeModules = id.includes('node_modules')
+        const plugins = isProjectFile ? [...userPlugins] : []
 
         let useFastRefresh = false
         if (!skipFastRefresh && !ssr && !isNodeModules) {
           // Modules with .js or .ts extension must import React.
-          const isReactModule =
-            extension.endsWith('x') || code.includes('react')
+          const isReactModule = isJSX || code.includes('react')
           if (isReactModule && filter(id)) {
             useFastRefresh = true
             plugins.push([
@@ -148,16 +129,17 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         }
 
         let ast: t.File | null | undefined
-        if (isNodeModules || extension.endsWith('x')) {
+        if (!isProjectFile || isJSX) {
           if (useAutomaticRuntime) {
             // By reverse-compiling "React.createElement" calls into JSX,
             // React elements provided by dependencies will also use the
             // automatic runtime!
-            const [restoredAst, isCommonJS] = isNodeModules
-              ? await restoreJSX(babel, code, id)
-              : [null, false]
+            const [restoredAst, isCommonJS] =
+              !isProjectFile && !isJSX
+                ? await restoreJSX(babel, code, id)
+                : [null, false]
 
-            if (!isNodeModules || (ast = restoredAst)) {
+            if (isJSX || (ast = restoredAst)) {
               plugins.push([
                 await loadPlugin(
                   '@babel/plugin-transform-react-jsx' +
@@ -174,7 +156,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
                 plugins.push(babelImportToRequire)
               }
             }
-          } else if (!isNodeModules) {
+          } else if (isProjectFile) {
             // These plugins are only needed for the classic runtime.
             if (!isProduction) {
               plugins.push(
@@ -191,6 +173,39 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           }
         }
 
+        // Plugins defined through this Vite plugin are only applied
+        // to modules within the project root, but "babel.config.js"
+        // files can define plugins that need to be applied to every
+        // module, including node_modules and linked packages.
+        const shouldSkip =
+          !plugins.length &&
+          !opts.babel?.configFile &&
+          !(isProjectFile && opts.babel?.babelrc)
+
+        if (shouldSkip) {
+          return // Avoid parsing if no plugins exist.
+        }
+
+        const parserPlugins: typeof userParserPlugins = [
+          ...userParserPlugins,
+          'importMeta',
+          // This plugin is applied before esbuild transforms the code,
+          // so we need to enable some stage 3 syntax that is supported in
+          // TypeScript and some environments already.
+          'topLevelAwait',
+          'classProperties',
+          'classPrivateProperties',
+          'classPrivateMethods'
+        ]
+
+        if (!extension.endsWith('.ts')) {
+          parserPlugins.push('jsx')
+        }
+
+        if (/\.tsx?$/.test(extension)) {
+          parserPlugins.push('typescript')
+        }
+
         const isReasonReact = extension.endsWith('.bs.js')
 
         const babelOpts: TransformOptions = {
@@ -200,7 +215,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           ast: !isReasonReact,
           root: projectRoot,
           filename: id,
-          sourceFileName: id,
+          sourceFileName: filepath,
           parserOpts: {
             ...opts.babel?.parserOpts,
             sourceType: 'module',

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

@@ -4,13 +4,25 @@ type RestoredJSX = [result: t.File | null | undefined, isCommonJS: boolean]
 
 let babelRestoreJSX: Promise<PluginItem> | undefined
 
+const jsxNotFound: RestoredJSX = [null, false]
+
 /** Restore JSX from `React.createElement` calls */
 export async function restoreJSX(
   babel: typeof import('@babel/core'),
   code: string,
   filename: string
 ): Promise<RestoredJSX> {
+  // Avoid parsing the optimized react-dom since it will never
+  // contain compiled JSX and it's a pretty big file (800kb).
+  if (filename.includes('/.vite/react-dom.js')) {
+    return jsxNotFound
+  }
+
   const [reactAlias, isCommonJS] = parseReactAlias(code)
+  if (!reactAlias) {
+    return jsxNotFound
+  }
+
   const reactJsxRE = new RegExp(
     '\\b' + reactAlias + '\\.(createElement|Fragment)\\b',
     'g'
@@ -24,7 +36,7 @@ export async function restoreJSX(
   })
 
   if (!hasCompiledJsx) {
-    return [null, false]
+    return jsxNotFound
   }
 
   // Support modules that use `import {Fragment} from 'react'`
@@ -36,6 +48,8 @@ export async function restoreJSX(
   babelRestoreJSX ||= import('./babel-restore-jsx')
 
   const result = await babel.transformAsync(code, {
+    babelrc: false,
+    configFile: false,
     ast: true,
     code: false,
     filename,