fix(ts): switch from babel preset to ts-loader (nuxt#4563)

Kevin Marrec · clarkdo · commit 75e3df6be5ef · 2018-12-17T15:21:53.000Z
diff --git a/package.json b/package.json
@@ -74,6 +74,7 @@
     "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-replace": "^2.1.0",
     "sort-package-json": "^1.17.1",
+    "ts-loader": "^5.3.1",
     "typescript": "^3.2.2",
     "vue-jest": "^3.0.2",
     "vue-property-decorator": "^7.2.0"
diff --git a/packages/babel-preset-app/package.json b/packages/babel-preset-app/package.json
@@ -17,7 +17,6 @@
     "@babel/plugin-syntax-jsx": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.2.0",
-    "@babel/preset-typescript": "^7.1.0",
     "@babel/runtime": "^7.2.0",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-plugin-transform-vue-jsx": "^4.0.1"
diff --git a/packages/babel-preset-app/src/index.js b/packages/babel-preset-app/src/index.js
@@ -92,11 +92,6 @@ module.exports = (context, options = {}) => {
     }
   ])
 
-  // TypeScript preset
-  if (options.typescript) {
-    presets.push(require('@babel/preset-typescript'))
-  }
-
   plugins.push(
     require('@babel/plugin-syntax-dynamic-import'),
     [require('@babel/plugin-proposal-decorators'), {
diff --git a/packages/builder/src/builder.js b/packages/builder/src/builder.js
@@ -45,10 +45,7 @@ export default class Builder {
       restart: null
     }
 
-    this.supportedExtensions = ['vue', 'js']
-    if (this.options.build.typescript) {
-      this.supportedExtensions.push('ts', 'tsx')
-    }
+    this.supportedExtensions = ['vue', 'js', 'ts']
 
     // Helper to resolve build paths
     this.relativeToBuild = (...args) =>
@@ -326,8 +323,7 @@ export default class Builder {
       templateVars.router.routes = createRoutes(
         Object.values(files),
         this.options.srcDir,
-        this.options.dir.pages,
-        this.supportedExtensions
+        this.options.dir.pages
       )
     } else { // If user defined a custom method to create routes
       templateVars.router.routes = this.options.build.createRoutes(
diff --git a/packages/common/src/utils.js b/packages/common/src/utils.js
@@ -316,7 +316,8 @@ const sortRoutes = function sortRoutes(routes) {
   return routes
 }
 
-export const createRoutes = function createRoutes(files, srcDir, pagesDir, supportedExtensions = ['vue', 'js']) {
+export const createRoutes = function createRoutes(files, srcDir, pagesDir) {
+  const supportedExtensions = ['vue', 'js', 'ts']
   const routes = []
   files.forEach((file) => {
     const keys = file
diff --git a/packages/config/src/config/build.js b/packages/config/src/config/build.js
@@ -5,7 +5,6 @@ export default () => ({
   analyze: false,
   profile: process.argv.includes('--profile'),
   extractCSS: false,
-  typescript: false,
   crossorigin: undefined,
   cssSourceMap: undefined,
   ssr: undefined,
diff --git a/packages/config/src/options.js b/packages/config/src/options.js
@@ -118,10 +118,7 @@ export function getNuxtConfig(_options) {
     )
   )
 
-  const mandatoryExtensions = ['js', 'mjs']
-  if (options.build.typescript) {
-    mandatoryExtensions.push('ts')
-  }
+  const mandatoryExtensions = ['js', 'mjs', 'ts']
 
   options.extensions = mandatoryExtensions
     .filter(ext => !options.extensions.includes(ext))
diff --git a/packages/webpack/src/config/base.js b/packages/webpack/src/config/base.js
@@ -75,8 +75,7 @@ export default class WebpackBaseConfig {
         [
           require.resolve('@nuxt/babel-preset-app'),
           {
-            buildTarget: this.isServer ? 'server' : 'client',
-            typescript: this.options.build.typescript
+            buildTarget: this.isServer ? 'server' : 'client'
           }
         ]
       ]
@@ -216,7 +215,7 @@ export default class WebpackBaseConfig {
         ]
       },
       {
-        test: this.options.build.typescript ? /\.(j|t)sx?$/ : /\.jsx?$/,
+        test: /\.jsx?$/,
         exclude: (file) => {
           // not exclude files outside node_modules
           if (!/node_modules/.test(file)) {
@@ -231,6 +230,14 @@ export default class WebpackBaseConfig {
           options: this.getBabelOptions()
         })
       },
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader',
+        options: {
+          transpileOnly: true,
+          appendTsSuffixTo: [/\.vue$/]
+        }
+      },
       {
         test: /\.css$/,
         oneOf: styleLoader.apply('css')
@@ -377,10 +384,6 @@ export default class WebpackBaseConfig {
   config() {
     // Prioritize nested node_modules in webpack search path (#2558)
     const webpackModulesDir = ['node_modules'].concat(this.options.modulesDir)
-    let extensionsToResolve = ['.wasm', '.mjs', '.js', '.json', '.vue', '.jsx']
-    if (this.options.build.typescript) {
-      extensionsToResolve = extensionsToResolve.concat(['.ts', '.tsx'])
-    }
 
     const config = {
       name: this.name,
@@ -393,7 +396,7 @@ export default class WebpackBaseConfig {
         hints: this.options.dev ? false : 'warning'
       },
       resolve: {
-        extensions: extensionsToResolve,
+        extensions: ['.wasm', '.mjs', '.js', '.json', '.vue', '.jsx', '.ts'],
         alias: this.alias(),
         modules: webpackModulesDir
       },
diff --git a/test/fixtures/typescript-custom/layouts/default.vue b/test/fixtures/typescript-custom/layouts/default.vue
@@ -0,0 +1,10 @@
+<template>
+  <Nuxt />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component
+export default class DefaultLayout extends Vue {}
+</script>
diff --git a/test/fixtures/typescript-custom/modules/typescript.js b/test/fixtures/typescript-custom/modules/typescript.js
@@ -0,0 +1,19 @@
+export default function typeScriptModule() {
+  // Add .ts extension for store, middleware and more
+  this.nuxt.options.extensions.push('ts')
+
+  // Extend build
+  this.extendBuild((config) => {
+    // Add TypeScript loader
+    config.module.rules.push({
+      test: /\.ts$/,
+      loader: 'ts-loader',
+      options: {
+        transpileOnly: true,
+        appendTsSuffixTo: ['\\.vue$']
+      }
+    })
+    // Add .ts extension in webpack resolve
+    config.resolve.extensions.push('.ts')
+  })
+}
diff --git a/test/fixtures/typescript-custom/nuxt.config.js b/test/fixtures/typescript-custom/nuxt.config.js
@@ -0,0 +1,3 @@
+export default {
+  modules: ['~/modules/typescript']
+}
diff --git a/test/fixtures/typescript-custom/pages/about.ts b/test/fixtures/typescript-custom/pages/about.ts
@@ -0,0 +1,8 @@
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'About',
+  render (h) {
+    return h('div', 'About Page')
+  }
+})
diff --git a/test/fixtures/typescript-custom/pages/index.vue b/test/fixtures/typescript-custom/pages/index.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>{{ message }}</div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component
+export default class Index extends Vue {
+  message: string = 'Index Page'
+}
+</script>
diff --git a/test/fixtures/typescript-custom/tsconfig.json b/test/fixtures/typescript-custom/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": ["esnext", "esnext.asynciterable", "dom"],
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "allowJs": true,
+    "sourceMap": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./*"]
+    }
+  }
+}
diff --git a/test/fixtures/typescript-custom/typescript-custom.test.js b/test/fixtures/typescript-custom/typescript-custom.test.js
@@ -0,0 +1,3 @@
+import { buildFixture } from '../../utils/build'
+
+buildFixture('typescript-custom')
diff --git a/test/fixtures/typescript/@types/process.d.ts b/test/fixtures/typescript/@types/process.d.ts
diff --git a/test/fixtures/typescript/@types/shims-tsx.d.ts b/test/fixtures/typescript/@types/shims-tsx.d.ts
diff --git a/test/fixtures/typescript/layouts/default.vue b/test/fixtures/typescript/layouts/default.vue
@@ -6,8 +6,7 @@
 import { Component, Vue } from 'vue-property-decorator'
 
 @Component({
-  name: 'DefaultLayout',
   middleware: 'test'
 })
-export default class extends Vue {}
+export default class DefaultLayout extends Vue {}
 </script>
diff --git a/test/fixtures/typescript/nuxt.config.js b/test/fixtures/typescript/nuxt.config.js
@@ -1,8 +1,3 @@
 export default {
-  plugins: [
-    '~/plugins/plugin.ts'
-  ],
-  build: {
-    typescript: true
-  }
+  plugins: ['~/plugins/plugin']
 }
diff --git a/test/fixtures/typescript/pages/contact.tsx b/test/fixtures/typescript/pages/contact.tsx
diff --git a/test/fixtures/typescript/pages/index.vue b/test/fixtures/typescript/pages/index.vue
@@ -5,10 +5,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component({
-  name: 'Index'
-})
-export default class extends Vue {
-  message = 'Index Page'
+@Component
+export default class Index extends Vue {
+  message: string = 'Index Page'
 }
 </script>
diff --git a/test/fixtures/typescript/pages/interface.vue b/test/fixtures/typescript/pages/interface.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>{{ test.attributes.message }}</div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+interface Test {
+  attributes: {
+    message: string
+  }
+}
+
+@Component
+export default class Interface extends Vue {
+  test: Test = {
+    attributes: {
+      message: 'Interface Page'
+    }
+  }
+}
+</script>
diff --git a/test/fixtures/typescript/tsconfig.json b/test/fixtures/typescript/tsconfig.json
@@ -1,13 +1,12 @@
 {
   "compilerOptions": {
-    "target": "esnext",
+    "target": "es5",
     "module": "esnext",
     "moduleResolution": "node",
     "lib": ["esnext", "esnext.asynciterable", "dom"],
     "esModuleInterop": true,
     "experimentalDecorators": true,
     "allowJs": true,
-    "jsx": "preserve",
     "sourceMap": true,
     "strict": true,
     "noImplicitAny": true,
diff --git a/test/unit/typescript-custom.test.js b/test/unit/typescript-custom.test.js
@@ -0,0 +1,27 @@
+import { loadFixture, getPort, Nuxt } from '../utils'
+
+let nuxt = null
+
+describe('typescript-custom', () => {
+  beforeAll(async () => {
+    const options = await loadFixture('typescript-custom')
+    nuxt = new Nuxt(options)
+    const port = await getPort()
+    await nuxt.server.listen(port, '0.0.0.0')
+  })
+
+  test('/', async () => {
+    const { html } = await nuxt.server.renderRoute('/')
+    expect(html).toContain('<div>Index Page</div>')
+  })
+
+  test('/about', async () => {
+    const { html } = await nuxt.server.renderRoute('/about')
+    expect(html).toContain('<div>About Page</div>')
+  })
+
+  // Close server and ask nuxt to stop listening to file changes
+  afterAll(async () => {
+    await nuxt.close()
+  })
+})
diff --git a/test/unit/typescript.test.js b/test/unit/typescript.test.js
@@ -20,9 +20,9 @@ describe('typescript', () => {
     expect(html).toContain('<div>About Page</div>')
   })
 
-  test('/contact', async () => {
-    const { html } = await nuxt.server.renderRoute('/contact')
-    expect(html).toContain('<div>Contact Page</div>')
+  test('/interface', async () => {
+    const { html } = await nuxt.server.renderRoute('/interface')
+    expect(html).toContain('<div>Interface Page</div>')
   })
 
   // Close server and ask nuxt to stop listening to file changes
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -316,7 +316,8 @@ const sortRoutes = function sortRoutes(routes) {`
`316`	`316`	`return routes`
`317`	`317`	`}`
`318`	`318`
`319`		`-export const createRoutes = function createRoutes(files, srcDir, pagesDir, supportedExtensions = ['vue', 'js']) {`
	`319`	`+export const createRoutes = function createRoutes(files, srcDir, pagesDir) {`
	`320`	`+ const supportedExtensions = ['vue', 'js', 'ts']`
`320`	`321`	`const routes = []`
`321`	`322`	`files.forEach((file) => {`
`322`	`323`	`const keys = file`
Original file line number	Diff line number	Diff line change
`@@ -118,10 +118,7 @@ export function getNuxtConfig(_options) {`
`118`	`118`	`)`
`119`	`119`	`)`
`120`	`120`
`121`		`- const mandatoryExtensions = ['js', 'mjs']`
`122`		`- if (options.build.typescript) {`
`123`		`- mandatoryExtensions.push('ts')`
`124`		`- }`
	`121`	`+ const mandatoryExtensions = ['js', 'mjs', 'ts']`
`125`	`122`
`126`	`123`	`options.extensions = mandatoryExtensions`
`127`	`124`	`.filter(ext => !options.extensions.includes(ext))`