feat(ts): add TSX support (#4613)

packages/builder/src/builder.js

@@ -45,7 +45,7 @@ export default class Builder {
       restart: null
     }
 
-    this.supportedExtensions = ['vue', 'js', 'ts']
+    this.supportedExtensions = ['vue', 'js', 'ts', 'tsx']
 
     // Helper to resolve build paths
     this.relativeToBuild = (...args) =>

packages/config/src/config/build.js

@@ -47,6 +47,10 @@ export default () => ({
       transpileOnly: true,
       appendTsSuffixTo: [/\.vue$/]
     },
+    tsx: {
+      transpileOnly: true,
+      appendTsxSuffixTo: [/\.vue$/]
+    },
     vueStyle: {}
   },
   styleResources: {},

packages/utils/src/route.js

@@ -133,7 +133,7 @@ const sortRoutes = function sortRoutes(routes) {
 }
 
 export const createRoutes = function createRoutes(files, srcDir, pagesDir = '', routeNameSplitter = '-') {
-  const supportedExtensions = ['vue', 'js', 'ts']
+  const supportedExtensions = ['vue', 'js', 'ts', 'tsx']
   const routes = []
   files.forEach((file) => {
     const keys = file

packages/webpack/src/config/base.js

@@ -234,6 +234,19 @@ export default class WebpackBaseConfig {
         loader: 'ts-loader',
         options: this.loaders.ts
       },
+      {
+        test: /\.tsx$/,
+        use: [
+          {
+            loader: require.resolve('babel-loader'),
+            options: this.getBabelOptions()
+          },
+          {
+            loader: 'ts-loader',
+            options: this.loaders.tsx
+          }
+        ]
+      },
       {
         test: /\.css$/,
         oneOf: styleLoader.apply('css')
@@ -392,7 +405,7 @@ export default class WebpackBaseConfig {
         hints: this.options.dev ? false : 'warning'
       },
       resolve: {
-        extensions: ['.wasm', '.mjs', '.js', '.json', '.vue', '.jsx', '.ts'],
+        extensions: ['.wasm', '.mjs', '.js', '.json', '.vue', '.jsx', '.ts', '.tsx'],
         alias: this.alias(),
         modules: webpackModulesDir
       },

test/fixtures/typescript/pages/contact.tsx

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'Contact',
+  // @ts-ignore: h not used but needed to compile
+  render (h) {
+    return <div>Contact Page</div>
+  }
+})

test/fixtures/typescript/tsconfig.json

@@ -7,6 +7,7 @@
     "esModuleInterop": true,
     "experimentalDecorators": true,
     "allowJs": true,
+    "jsx": "preserve",
     "sourceMap": true,
     "strict": true,
     "noImplicitAny": true,

test/unit/basic.dev.test.js

@@ -80,10 +80,10 @@ describe('basic dev', () => {
   })
 
   test('Config: build.loaders', () => {
-    expect(Object.keys(loadersOptions)).toHaveLength(13)
+    expect(Object.keys(loadersOptions)).toHaveLength(14)
     expect(loadersOptions).toHaveProperty(
       'file', 'fontUrl', 'imgUrl', 'pugPlain', 'vue',
-      'css', 'cssModules', 'less', 'sass', 'scss', 'stylus', 'ts', 'vueStyle'
+      'css', 'cssModules', 'less', 'sass', 'scss', 'stylus', 'ts', 'tsx', 'vueStyle'
     )
     const { cssModules, vue } = loadersOptions
     expect(cssModules.localIdentName).toBe('[hash:base64:6]')

test/unit/typescript.test.js

@@ -25,6 +25,11 @@ describe('typescript', () => {
     expect(html).toContain('<div>Interface Page</div>')
   })
 
+  test('/contact', async () => {
+    const { html } = await nuxt.server.renderRoute('/contact')
+    expect(html).toContain('<div>Contact Page</div>')
+  })
+
   // Close server and ask nuxt to stop listening to file changes
   afterAll(async () => {
     await nuxt.close()