fix: vue template tsx support

zoy-l · Apr 6, 2021 · 8590a3d · 8590a3d
1 parent 62fc94e
commit 8590a3d
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 16 deletions.
diff --git a/examples/normal-react/src/app.tsx b/examples/normal-react/src/app.tsx
@@ -11,9 +11,7 @@ function App() {
         <img src={logo} className="App-logo" alt="logo" />
         <p>Hello zmi + React!</p>
         <p>
-          <button onClick={() => setCount((count) => count + 1)}>
-            count is: {count}
-          </button>
+          <button onClick={() => setCount((count) => count + 1)}>count is: {count}</button>
         </p>
         <p>
           Edit <code>App.jsx</code> and save to test HMR updates.

diff --git a/examples/normal-vue/src/home.vue b/examples/normal-vue/src/home.vue
@@ -1,10 +1,4 @@
-<template>
-  <div @click="hello" class="div">
-    {{ msg }}
-  </div>
-</template>
-
-<script lang="ts">
+<script lang="tsx">
 import { defineComponent } from 'vue'
 
 export default defineComponent({
@@ -18,6 +12,9 @@ export default defineComponent({
     hello(num: number) {
       console.log(num)
     }
+  },
+  render() {
+    return <div onClick={() => this.hello(123)}>123</div>
   }
 })
 </script>

diff --git a/packages/zmi-webpack/src/applyLoader.ts b/packages/zmi-webpack/src/applyLoader.ts
@@ -106,14 +106,39 @@ async function applyLoader(options: IPenetrateOptions) {
       .options({ hotReload: hot, prettify: false })
 
     if (isTypescript) {
-      WConifg.module
-        .rule('vue-ts')
-        .test(/\.(ts|tsx)$/)
-        .use('ts-loader')
-        .loader(require.resolve('ts-loader'))
-        .options({
+      const tsRule = WConifg.module.rule('ts').test(/\.ts$/)
+      const tsxRule = WConifg.module.rule('tsx').test(/\.tsx$/)
+
+      const addLoader = ({
+        name,
+        loader,
+        options
+      }: {
+        name: string
+        loader: string
+        options: Record<string, any>
+      }) => {
+        tsRule.use(name).loader(loader).options(options)
+        tsxRule.use(name).loader(loader).options(options)
+      }
+
+      addLoader({
+        name: 'ts-loader',
+        loader: require.resolve('ts-loader'),
+        options: {
           transpileOnly: true,
           appendTsSuffixTo: ['\\.vue$']
+        }
+      })
+      // make sure to append TSX suffix
+      tsxRule
+        .use('ts-loader')
+        .loader(require.resolve('ts-loader'))
+        .tap((options) => {
+          options = { ...options }
+          delete options.appendTsSuffixTo
+          options.appendTsxSuffixTo = ['\\.vue$']
+          return options
         })
     }
   })