@vitejs/plugin-react 2.0.0-alpha.2 → 2.0.0-alpha.3

package/dist/index.cjs

@@ -173,11 +173,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];
   }
@@ -232,7 +232,7 @@ function viteReact(opts = {}) {
       };
     },
     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)) {
@@ -372,15 +372,44 @@ function viteReact(opts = {}) {
         ];
     }
   };
+  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

@@ -153,11 +153,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];
   }
@@ -212,7 +212,7 @@ function viteReact(opts = {}) {
       };
     },
     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)) {
@@ -352,15 +352,44 @@ function viteReact(opts = {}) {
         ];
     }
   };
+  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-alpha.3",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
@@ -39,14 +39,13 @@
   },
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.18.0",
+    "@babel/core": "^7.18.2",
     "@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"
+    "react-refresh": "^0.13.0"
   },
   "peerDependencies": {
     "vite": "^3.0.0-alpha"

package/src/index.ts

@@ -165,7 +165,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
       }
     },
     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 = ''] =
@@ -361,7 +361,10 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
     }
   }
 
-  // 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 +372,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]
   }