fix: transform jsx for entire file

closes #301, closes #300
vuejs · Jan 2, 2025 · 48325f9 · 48325f9
1 parent d484513
commit 48325f9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/src/jsx.ts b/src/jsx.ts
@@ -1,7 +1,7 @@
 import { transform } from '@babel/standalone'
 import jsx from '@vue/babel-plugin-jsx'
 
-export async function transformJSX(src: string) {
+export function transformJSX(src: string) {
   return transform(src, {
     plugins: [jsx],
   }).code!

diff --git a/src/transform.ts b/src/transform.ts
@@ -17,7 +17,7 @@ function testJsx(filename: string | undefined | null) {
   return !!(filename && /(\.|\b)[jt]sx$/.test(filename))
 }
 
-async function transformTS(src: string, isJSX?: boolean) {
+function transformTS(src: string, isJSX?: boolean) {
   return transform(src, {
     transforms: ['typescript', ...(isJSX ? (['jsx'] as Transform[]) : [])],
     jsxRuntime: 'preserve',
@@ -40,10 +40,12 @@ export async function compileFile(
   if (REGEX_JS.test(filename)) {
     const isJSX = testJsx(filename)
     if (testTs(filename)) {
-      code = await transformTS(code, isJSX)
+      code = transformTS(code, isJSX)
     }
     if (isJSX) {
-      code = await import('./jsx').then((m) => m.transformJSX(code))
+      code = await import('./jsx').then(({ transformJSX }) =>
+        transformJSX(code),
+      )
     }
     compiled.js = compiled.ssr = code
     return []
@@ -191,6 +193,12 @@ export async function compileFile(
     }
   }
 
+  if (isJSX) {
+    const { transformJSX } = await import('./jsx')
+    clientCode &&= transformJSX(clientCode)
+    ssrCode &&= transformJSX(ssrCode)
+  }
+
   if (hasScoped) {
     appendSharedCode(
       `\n${COMP_IDENTIFIER}.__scopeId = ${JSON.stringify(`data-v-${id}`)}`,
@@ -297,9 +305,6 @@ async function doCompileScript(
     if (isTS) {
       code = await transformTS(code, isJSX)
     }
-    if (isJSX) {
-      code = await import('./jsx').then((m) => m.transformJSX(code))
-    }
     if (compiledScript.bindings) {
       code =
         `/* Analyzed bindings: ${JSON.stringify(
@@ -364,9 +369,5 @@ async function doCompileTemplate(
   if (isTS) {
     code = await transformTS(code, isJSX)
   }
-  if (isJSX) {
-    code = await import('./jsx').then((m) => m.transformJSX(code))
-  }
-
   return code
 }