fix(transformJsx): parse error

Simon-He95 · Mar 28, 2024 · 3e2f1a8 · 3e2f1a8
1 parent 39ee74e
commit 3e2f1a8
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 52 deletions.
diff --git a/src/transformJsx.ts b/src/transformJsx.ts
@@ -10,57 +10,62 @@ export async function transformJsx(
   isRem?: boolean,
   globalCss?: any,
 ) {
-  const ast = babelParse(code, {
-    babelrc: false,
-    comments: true,
-    plugins: [[vueJsxPlugin, {}]],
-  })
+  try {
+    const ast = babelParse(code, {
+      babelrc: false,
+      comments: true,
+      plugins: [[vueJsxPlugin, {}]],
+    })
 
-  let container: any = null
-  let css = ''
-  let cssPath = ''
-  babelTraverse(ast, {
-    enter({ node }: any) {
-      if (node.type === 'JSXElement') {
-        if (container)
-          return
-        container = node
-      }
-      if (node.type === 'ImportDeclaration') {
-        const value = node.source.value
-        if (value.endsWith('.css')) {
-          css += fs.readFileSync(
-            (cssPath = path.resolve(filepath!, '../', value)),
-            'utf-8',
-          )
+    let container: any = null
+    let css = ''
+    let cssPath = ''
+    babelTraverse(ast, {
+      enter({ node }: any) {
+        if (node.type === 'JSXElement') {
+          if (container)
+            return
+          container = node
         }
-      }
-    },
-  })
-  const jsxCode = code.slice(container.start, container.end)
+        if (node.type === 'ImportDeclaration') {
+          const value = node.source.value
+          if (value.endsWith('.css')) {
+            css += fs.readFileSync(
+              (cssPath = path.resolve(filepath!, '../', value)),
+              'utf-8',
+            )
+          }
+        }
+      },
+    })
+    const jsxCode = code.slice(container.start, container.end)
 
-  const wrapperVue = `<template>${jsxCode.replace(
-    /className/g,
-    'class',
-  )}</template>
-    <style scoped>
-    ${css}
-    </style>`
+    const wrapperVue = `<template>${jsxCode.replace(
+      /className/g,
+      'class',
+    )}</template>
+      <style scoped>
+      ${css}
+      </style>`
 
-  let vueTransfer = await transformVue(wrapperVue, {
-    isJsx: true,
-    isRem,
-    globalCss,
-  })
-  vueTransfer = vueTransfer.replace(/class/g, 'className')
-  if (cssPath) {
-    const cssTransfer = vueTransfer.match(/<style scoped>(.*)<\/style>/s)![1]
-    fs.promises.writeFile(
-      cssPath.replace('.css', '.__unocss_transfer__.css'),
-      cssTransfer,
-      'utf-8',
-    )
+    let vueTransfer = await transformVue(wrapperVue, {
+      isJsx: true,
+      isRem,
+      globalCss,
+    })
+    vueTransfer = vueTransfer.replace(/class/g, 'className')
+    if (cssPath) {
+      const cssTransfer = vueTransfer.match(/<style scoped>(.*)<\/style>/s)![1]
+      fs.promises.writeFile(
+        cssPath.replace('.css', '.__unocss_transfer__.css'),
+        cssTransfer,
+        'utf-8',
+      )
+    }
+    const jsxTransfer = vueTransfer.match(/<template>(.*)<\/template>/s)![1]
+    return code.replace(jsxCode, jsxTransfer)
+  }
+  catch (error) {
+    return code
   }
-  const jsxTransfer = vueTransfer.match(/<template>(.*)<\/template>/s)![1]
-  return code.replace(jsxCode, jsxTransfer)
 }
diff --git a/src/transformVue.ts b/src/transformVue.ts
@@ -19,13 +19,10 @@ export async function transformVue(code: string, options?: Options) {
     descriptor: { template, styles },
     errors,
   } = parse(code)
-
-  if (errors.length)
+  if (errors.length || !template || !styles.length)
     return code
   // transform inline-style
   code = transformInlineStyle(code, isJsx, isRem)
-  if (!template || !styles.length)
-    return code
   // transform @media 注：transformBack是将@media中内容用一个占位符替换等到transformCss处理完将结果还原回去
   const [transferMediaCode, transformBack] = await transformMedia(
     code,