refactor: using transformWithOxc

rolldown · Oct 18, 2024 · 35c9b45 · 35c9b45
1 parent 90b9d6e
commit 35c9b45
Show file tree

Hide file tree

Showing 12 changed files with 46 additions and 26 deletions.
diff --git a/packages/plugin-react/src/index.ts b/packages/plugin-react/src/index.ts
@@ -1,4 +1,4 @@
-import { createFilter } from 'rolldown-vite'
+import { createFilter, transformWithOxc } from 'rolldown-vite'
 import type {
   BuildOptions,
   Plugin,
@@ -32,6 +32,7 @@ export interface Options {
 const reactCompRE = /extends\s+(?:React\.)?(?:Pure)?Component/
 const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/
 const defaultIncludeRE = /\.[tj]sx?$/
+const tsRE = /\.tsx?$/
 
 export default function viteReact(opts: Options = {}): PluginOption[] {
   // Provide default values for Rollup compat.
@@ -41,6 +42,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
   const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`
   const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime`
   let skipFastRefresh = false
+  let isProduction = true
 
   // Support patterns like:
   // - import * as React from 'react';
@@ -50,24 +52,32 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
 
   const viteBabel: Plugin = {
     name: 'vite:react',
-    config(config, env) {
-      const runtime = opts.jsxRuntime ?? 'automatic'
-      return {
-        oxc: {
-          jsx: {
-            runtime,
-            importSource: runtime === 'automatic' ? jsxImportSource : undefined,
-            refresh: env.command === 'serve',
-            development: env.command === 'serve',
+    config() {
+      if (opts.jsxRuntime === 'classic') {
+        return {
+          oxc: {
+            jsx: {
+              runtime: 'classic',
+            },
+          },
+        }
+      } else {
+        return {
+          oxc: {
+            jsx: {
+              runtime: 'automatic',
+              importSource: opts.jsxImportSource,
+            },
           },
-        },
-        // optimizeDeps: { esbuildOptions: { jsx: 'automatic' } },
+          // optimizeDeps: { esbuildOptions: { jsx: 'automatic' } },
+        }
       }
     },
     configResolved(config) {
       devBase = config.base
+      isProduction = config.isProduction
       skipFastRefresh =
-        config.isProduction ||
+        isProduction ||
         config.command === 'build' ||
         config.server.hmr === false
     },
@@ -90,12 +100,24 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
               code.includes(jsxImportRuntime)))
 
       if (useFastRefresh) {
+        const result = await transformWithOxc(this, code, id, {
+          jsx: {
+            runtime: opts.jsxRuntime,
+            importSource:
+              opts.jsxRuntime === 'automatic' ? jsxImportSource : undefined,
+            refresh: useFastRefresh,
+            development:
+              opts.jsxRuntime === 'classic' && isJSX && !isProduction,
+          },
+          lang: !tsRE.test(filepath) ? 'jsx' : undefined,
+        })
+        code = result.code
         if (refreshContentRE.test(code)) {
           code = addRefreshWrapper(code, id)
         } else if (reactCompRE.test(code)) {
           code = addClassComponentRefreshWrapper(code, id)
         }
-        return { code }
+        return { code, map: result.map }
       }
     },
   }

diff --git a/playground/class-components/vite.config.ts b/playground/class-components/vite.config.ts
@@ -1,5 +1,5 @@
 import { defineConfig } from 'rolldown-vite'
-import react from '@vitejs/plugin-react'
+import react from 'rolldown-vite-plugin-react'
 
 export default defineConfig({
   server: { port: 8908 /* Should be unique */ },

diff --git a/playground/compiler-react-18/vite.config.ts b/playground/compiler-react-18/vite.config.ts
@@ -1,5 +1,5 @@
 import { defineConfig } from 'rolldown-vite'
-import react from '@vitejs/plugin-react'
+import react from 'rolldown-vite-plugin-react'
 
 // https://gist.github.com/poteto/37c076bf112a07ba39d0e5f0645fec43
 

diff --git a/playground/compiler/vite.config.ts b/playground/compiler/vite.config.ts
@@ -1,5 +1,5 @@
 import { defineConfig } from 'rolldown-vite'
-import react from '@vitejs/plugin-react'
+import react from 'rolldown-vite-plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => {

diff --git a/playground/mdx/vite.config.ts b/playground/mdx/vite.config.ts
@@ -1,5 +1,5 @@
 import { defineConfig } from 'rolldown-vite'
-import react from '@vitejs/plugin-react'
+import react from 'rolldown-vite-plugin-react'
 import mdx from '@mdx-js/rollup'
 
 // https://vitejs.dev/config/

diff --git a/playground/react-classic/vite.config.ts b/playground/react-classic/vite.config.ts
@@ -1,4 +1,4 @@
-import react from '@vitejs/plugin-react'
+import react from 'rolldown-vite-plugin-react'
 import type { UserConfig } from 'rolldown-vite'
 
 const config: UserConfig = {

diff --git a/playground/react-emotion/vite.config.ts b/playground/react-emotion/vite.config.ts
@@ -1,4 +1,4 @@
-import react from '@vitejs/plugin-react'
+import react from 'rolldown-vite-plugin-react'
 import { defineConfig } from 'rolldown-vite'
 
 export default defineConfig({

diff --git a/playground/react-env/vite.config.ts b/playground/react-env/vite.config.ts
@@ -1,4 +1,4 @@
-import react from '@vitejs/plugin-react'
+import react from 'rolldown-vite-plugin-react'
 import type { UserConfig } from 'rolldown-vite'
 
 // Overriding the NODE_ENV set by vitest

diff --git a/playground/react-sourcemap/vite.config.ts b/playground/react-sourcemap/vite.config.ts
@@ -1,4 +1,4 @@
-import react from '@vitejs/plugin-react'
+import react from 'rolldown-vite-plugin-react'
 import type { UserConfig } from 'rolldown-vite'
 
 const config: UserConfig = {

diff --git a/playground/react/vite.config.ts b/playground/react/vite.config.ts
@@ -1,4 +1,4 @@
-import react from '@vitejs/plugin-react'
+import react from 'rolldown-vite-plugin-react'
 import type { UserConfig } from 'rolldown-vite'
 
 const config: UserConfig = {

diff --git a/playground/ssr-react/vite.config.js b/playground/ssr-react/vite.config.js
@@ -1,5 +1,5 @@
 import { defineConfig } from 'rolldown-vite'
-import react from '@vitejs/plugin-react'
+import react from 'rolldown-vite-plugin-react'
 
 export default defineConfig({
   server: { port: 8907 /* Should be unique */ },

diff --git a/playground/vitest.config.e2e.ts b/playground/vitest.config.e2e.ts
@@ -14,8 +14,6 @@ export default defineConfig({
     include: ['./playground/**/*.spec.[tj]s'],
     exclude: [
       './playground/react-emotion/**/*.spec.[tj]s', // the remotion need to transformer
-      './playground/mdx/**/*.spec.[tj]s', // need to find a way to let rolldown-vite internal oxc transformer tread mdx as jsx
-      './playground/ssr-react/**/*.spec.[tj]s', // need to find a way to disable the refresh transformer at ssr
     ],
     setupFiles: ['./playground/vitestSetup.ts'],
     globalSetup: ['./playground/vitestGlobalSetup.ts'],