fix(babel-preset-taro): fix #9659

packages/babel-preset-taro/README.md

@@ -10,10 +10,15 @@ module.exports = {
   presets: [
     // 已经填上的参数是默认值
     ['taro', {
-      // 框架：`nerv`, `react`, `vue` 三选一
+      // 框架：`nerv`, `react`, `vue`, `vue3` 四选一
       framework: 'react',
       // 是否使用 TypeScript，当值为 true 时，使用 `@babel/preset-typescript` 编译
       ts: true,
+      // 是否使用 `@vue/babel-preset-jsx` (当`framework`为`vue`时) 
+      // 或 `@vue/babel-plugin-jsx` （当`framework`为`vue3`时）来支持`jsx`编译
+      // 该参数配置方式同 `@vue/babel-preset-app`的`jsx`参数
+      // https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/babel-preset-app/README.md#jsx
+      vueJsx: true,
       // 以下参数为 @babel/preset-env 的参数：
       // https://babeljs.io/docs/en/babel-preset-env
       loose: false,

packages/babel-preset-taro/__tests__/index.spec.js

@@ -33,8 +33,51 @@ describe('babel-preset-taro', () => {
 
     const [override] = config.overrides
 
-    const [, preset] = override.presets
-    expect(preset).toBeUndefined()
+    const [, [jsxPreset, jsxOptions]] = override.presets
+    expect(jsxPreset === require('@vue/babel-preset-jsx')).toBeTruthy()
+    expect(jsxOptions).toEqual({})
+  })
+
+  it('vue3', () => {
+    const config = babelPresetTaro({}, {
+      framework: 'vue3'
+    })
+
+    expect(config.sourceType).toBe('unambiguous')
+
+    const [override] = config.overrides
+
+    const [[jsxPlugin, jsxOptions]] = override.plugins
+    expect(jsxPlugin === require('@vue/babel-plugin-jsx')).toBeTruthy()
+    expect(jsxOptions).toEqual({})
+  })
+
+  it('vue without jsx', () => {
+    const config = babelPresetTaro({}, {
+      framework: 'vue',
+      vueJsx: false
+    })
+
+    expect(config.sourceType).toBe('unambiguous')
+
+    const [override] = config.overrides
+
+    const [, jsxPreset] = override.presets
+    expect(jsxPreset).toBeUndefined()
+  })
+
+  it('vue3 without jsx', () => {
+    const config = babelPresetTaro({}, {
+      framework: 'vue3',
+      vueJsx: false
+    })
+
+    expect(config.sourceType).toBe('unambiguous')
+
+    const [override] = config.overrides
+
+    const [[jsxPlugin, jsxOptions]] = override.plugins
+    expect(jsxPlugin === require('@vue/babel-plugin-jsx')).toBeFalsy()
   })
 
   it('typescript react', () => {
@@ -71,10 +114,13 @@ describe('babel-preset-taro', () => {
       ts: true
     })
 
-    const [override] = config.overrides
-    const [, [ts, tsConfig]] = override.presets
+    const [override, vueOverride] = config.overrides
+    const [, , [ts, tsConfig]] = override.presets
+
     expect(typeof ts.default === 'function').toBeTruthy()
     expect(tsConfig.hasOwnProperty('jsxPragma') === false).toBeTruthy()
+
+    expect(vueOverride.include.test('a.vue')).toBeTruthy()
   })
 
   it('can change env options', () => {

packages/babel-preset-taro/index.js

@@ -8,6 +8,7 @@ module.exports = (_, options = {}) => {
   }
   const presets = []
   const plugins = []
+  const overrides = []
   const isReact = options.framework === 'react'
   const isNerv = options.framework === 'nerv'
   const isVue = options.framework === 'vue'
@@ -30,13 +31,27 @@ module.exports = (_, options = {}) => {
     }
   }
 
+  if (isVue || isVue3) {
+    if (options.vueJsx !== false) {
+      const jsxOptions = typeof options.vueJsx === 'object' ? options.vueJsx : {}
+      if (isVue) {
+        presets.push([require('@vue/babel-preset-jsx'), jsxOptions])
+      } else {
+        plugins.push([require('@vue/babel-plugin-jsx'), jsxOptions])
+      }
+    }
+  }
+
   if (options.ts) {
     const config = {}
     if (isNerv || isReact) {
       config.jsxPragma = moduleName
     }
     if (isVue || isVue3) {
-      config.allExtensions = true
+      overrides.push({
+        include: /\.vue$/,
+        presets: [[require('@babel/preset-typescript'), { allExtensions: true, isTSX: true }]]
+      })
     }
     presets.push([require('@babel/preset-typescript'), config])
   }
@@ -144,6 +159,6 @@ module.exports = (_, options = {}) => {
       exclude: [/@babel[/|\\\\]runtime/, /core-js/],
       presets,
       plugins
-    }]
+    }, ...overrides]
   }
 }

packages/babel-preset-taro/package.json

@@ -35,6 +35,8 @@
     "@babel/runtime": "^7.11.2",
     "@tarojs/helper": "3.3.0",
     "@tarojs/taro-h5": "3.3.0",
+    "@vue/babel-plugin-jsx": "^1.0.6",
+    "@vue/babel-preset-jsx": "^1.2.4",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-global-define": "^1.0.3",
     "babel-plugin-transform-imports-api": "^1.0.0",