Merge pull request #333 from MAXLZ1/fix/vue3-lang-tsx-error

fix: 修复vue3中使用lang=tsx时的报错问题

packages/plugin-vue-3/src/index.ts

@@ -13,7 +13,17 @@ const PluginBabelVue3 = ({wpChain}: ConfigPluginOptions): void => {
     .rule('scripts')
     .use('babel')
     .tap(o => {
-      // console.log(o)
+      const typescriptIndex = o.presets.findIndex((plugin: string) => {
+        return plugin === require.resolve('@babel/preset-typescript')
+      })
+      o.presets[typescriptIndex] = [
+        require.resolve('@babel/preset-typescript'),
+        {
+          isTSX: true, // allExtensions依赖isTSX  https://babeljs.io/docs/en/babel-preset-typescript#allextensions
+          allExtensions: true, // 支持所有文件扩展名
+        },
+      ]
+
       o.plugins.push([require.resolve('@vue/babel-plugin-jsx'), {optimize: true}])
       return o
     })

projects/vue-3-base/components.d.ts

@@ -4,6 +4,7 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AButton: typeof import('ant-design-vue/es')['Button']
     ATable: typeof import('ant-design-vue/es')['Table']
     ButtonComponent: typeof import('./src/components/ButtonComponent.vue')['default']
     Count: typeof import('./src/components/Count.vue')['default']

projects/vue-3-base/src/App.vue

@@ -16,6 +16,7 @@
     <ButtonComponent />
     <JSXComponent />
     <Count />
+    <TsxScript />
   </div>
 </template>
 
@@ -32,6 +33,7 @@ import TableComponent from './components/TableComponent.vue'
 import ButtonComponent from './components/ButtonComponent.vue'
 import JSXComponent from './components/JSXComponent'
 import Count from './components/Count.vue'
+import TsxScript from './components/TsxScript.vue'
 </script>
 
 <style lang="less">

projects/vue-3-base/src/components/TsxScript.vue

@@ -0,0 +1,28 @@
+<script lang="tsx">
+import {defineComponent, ref} from 'vue'
+
+export default defineComponent({
+  name: 'TsxScript',
+  setup() {
+    const count = ref(0)
+    function add() {
+      count.value++
+    }
+
+    return () => (
+      <>
+        <p>============ lang=tsx component start =============</p>
+        <AButton type="primary" onClick={add}>add</AButton>
+        <span class="value">count: {count.value}</span>
+        <p>============ lang=tsx component end =============</p>
+      </>
+    )
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.value {
+  margin-left: 10px;
+}
+</style>