From 2e87dfc90f0c2b340ece71b192f2ddc08318737c Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 11 Jan 2018 20:43:26 -0500
Subject: [PATCH] simplfy ts + babel, add generator test for ts

---
 .../__tests__/pwaGenerator.spec.js            |  26 ++++
 .../{pwa.spec.js => pwaPlugin.spec.js}        |   0
 .../cli-plugin-typescript/__tests__/.eslintrc |   5 +
 .../__tests__/tsGenerator.spec.js             | 126 ++++++++++++++++++
 .../cli-plugin-typescript/generator/index.js  |  27 +---
 packages/@vue/cli-plugin-typescript/index.js  |   2 +-
 .../@vue/cli-plugin-typescript/lib/tslint.js  |   2 +
 packages/@vue/cli/lib/promptModules/babel.js  |   6 +-
 8 files changed, 170 insertions(+), 24 deletions(-)
 create mode 100644 packages/@vue/cli-plugin-pwa/__tests__/pwaGenerator.spec.js
 rename packages/@vue/cli-plugin-pwa/__tests__/{pwa.spec.js => pwaPlugin.spec.js} (100%)
 create mode 100644 packages/@vue/cli-plugin-typescript/__tests__/.eslintrc
 create mode 100644 packages/@vue/cli-plugin-typescript/__tests__/tsGenerator.spec.js

diff --git a/packages/@vue/cli-plugin-pwa/__tests__/pwaGenerator.spec.js b/packages/@vue/cli-plugin-pwa/__tests__/pwaGenerator.spec.js
new file mode 100644
index 000000000..c2bb995d3
--- /dev/null
+++ b/packages/@vue/cli-plugin-pwa/__tests__/pwaGenerator.spec.js
@@ -0,0 +1,26 @@
+const generateWithPlugin = require('@vue/cli-test-utils/generateWithPlugin')
+
+test('inject import statement for service worker', async () => {
+  const mockMain = (
+    `import Vue from 'vue'\n` +
+    `import Bar from './Bar.vue'`
+  )
+  const { files } = await generateWithPlugin([
+    {
+      id: 'files',
+      apply: api => {
+        api.render(files => {
+          files['src/main.js'] = mockMain
+        })
+      },
+      options: {}
+    },
+    {
+      id: 'pwa',
+      apply: require('../generator'),
+      options: {}
+    }
+  ])
+
+  expect(files['src/main.js']).toMatch(`${mockMain}\nimport './registerServiceWorker'`)
+})
diff --git a/packages/@vue/cli-plugin-pwa/__tests__/pwa.spec.js b/packages/@vue/cli-plugin-pwa/__tests__/pwaPlugin.spec.js
similarity index 100%
rename from packages/@vue/cli-plugin-pwa/__tests__/pwa.spec.js
rename to packages/@vue/cli-plugin-pwa/__tests__/pwaPlugin.spec.js
diff --git a/packages/@vue/cli-plugin-typescript/__tests__/.eslintrc b/packages/@vue/cli-plugin-typescript/__tests__/.eslintrc
new file mode 100644
index 000000000..92b6bda70
--- /dev/null
+++ b/packages/@vue/cli-plugin-typescript/__tests__/.eslintrc
@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "vue-libs/no-async-functions": 0
+  }
+}
diff --git a/packages/@vue/cli-plugin-typescript/__tests__/tsGenerator.spec.js b/packages/@vue/cli-plugin-typescript/__tests__/tsGenerator.spec.js
new file mode 100644
index 000000000..62d1a1700
--- /dev/null
+++ b/packages/@vue/cli-plugin-typescript/__tests__/tsGenerator.spec.js
@@ -0,0 +1,126 @@
+const generateWithPlugin = require('@vue/cli-test-utils/generateWithPlugin')
+
+test('generate files', async () => {
+  const { files } = await generateWithPlugin([
+    {
+      id: 'core',
+      apply: require('@vue/cli-service/generator'),
+      options: {}
+    },
+    {
+      id: 'ts',
+      apply: require('../generator'),
+      options: {}
+    }
+  ])
+
+  expect(files['src/main.ts']).toBeTruthy()
+  expect(files['src/main.js']).toBeFalsy()
+  expect(files['src/App.vue']).toMatch('<script lang="ts">')
+})
+
+test('classComponent', async () => {
+  const { pkg, files } = await generateWithPlugin([
+    {
+      id: 'ts',
+      apply: require('../generator'),
+      options: {
+        classComponent: true
+      }
+    }
+  ])
+
+  expect(pkg.devDependencies).toHaveProperty('vue-class-component')
+  expect(pkg.devDependencies).toHaveProperty('vue-property-decorator')
+
+  expect(files['tsconfig.json']).toMatch(`"experimentalDecorators": true`)
+  expect(files['tsconfig.json']).toMatch(`"emitDecoratorMetadata": true`)
+  expect(files['src/App.vue']).toMatch(`export default class App extends Vue {`)
+  expect(files['src/components/HelloWorld.vue']).toMatch(`export default class HelloWorld extends Vue {`)
+})
+
+test('use with Babel', async () => {
+  const { pkg, files } = await generateWithPlugin([
+    {
+      id: 'babel',
+      apply: require('@vue/cli-plugin-babel/generator'),
+      options: {}
+    },
+    {
+      id: 'ts',
+      apply: require('../generator'),
+      options: {
+        useTsWithBabel: true
+      }
+    }
+  ])
+
+  expect(pkg.devDependencies).toHaveProperty('@vue/babel-preset-app')
+  expect(pkg.babel).toEqual({ presets: ['@vue/app'] })
+  expect(files['tsconfig.json']).toMatch(`"target": "es2015"`)
+})
+
+test('lint', async () => {
+  const { pkg, files } = await generateWithPlugin([
+    {
+      id: 'ts',
+      apply: require('../generator'),
+      options: {
+        lint: true,
+        lintOn: ['save', 'commit']
+      }
+    }
+  ])
+
+  expect(pkg.scripts.lint).toBe(`vue-cli-service lint`)
+  expect(pkg.vue).toEqual({ lintOnSave: true })
+  expect(pkg.devDependencies).toHaveProperty('lint-staged')
+  expect(pkg.gitHooks).toEqual({ 'pre-commit': 'lint-staged' })
+  expect(pkg['lint-staged']).toEqual({
+    '*.ts': ['vue-cli-service lint', 'git add'],
+    '*.vue': ['vue-cli-service lint', 'git add']
+  })
+
+  expect(files['tslint.json']).toBeTruthy()
+})
+
+test('compat with unit-mocha', async () => {
+  const { pkg } = await generateWithPlugin([
+    {
+      id: '@vue/cli-plugin-unit-mocha',
+      apply: () => {},
+      options: {}
+    },
+    {
+      id: 'ts',
+      apply: require('../generator'),
+      options: {
+        lint: true,
+        lintOn: ['save', 'commit']
+      }
+    }
+  ])
+
+  expect(pkg.devDependencies).toHaveProperty('@types/mocha')
+  expect(pkg.devDependencies).toHaveProperty('@types/chai')
+})
+
+test('compat with unit-jest', async () => {
+  const { pkg } = await generateWithPlugin([
+    {
+      id: '@vue/cli-plugin-unit-jest',
+      apply: () => {},
+      options: {}
+    },
+    {
+      id: 'ts',
+      apply: require('../generator'),
+      options: {
+        lint: true,
+        lintOn: ['save', 'commit']
+      }
+    }
+  ])
+
+  expect(pkg.devDependencies).toHaveProperty('@types/jest')
+})
diff --git a/packages/@vue/cli-plugin-typescript/generator/index.js b/packages/@vue/cli-plugin-typescript/generator/index.js
index baa17d8ab..68b256f02 100644
--- a/packages/@vue/cli-plugin-typescript/generator/index.js
+++ b/packages/@vue/cli-plugin-typescript/generator/index.js
@@ -14,27 +14,10 @@ module.exports = (api, {
     })
   }
 
-  if (useTsWithBabel) {
+  if (experimentalCompileTsWithBabel) {
     api.extendPackage({
       devDependencies: {
-        'babel-loader': '8 || ^8.0.0-beta || ^8.0.0-rc',
-        '@babel/core': '7 || ^7.0.0-beta || ^7.0.0-rc',
-        '@vue/babel-preset-app': '^3.0.0-alpha.1'
-      },
-      vue: {
-        useTsWithBabel: true
-      },
-      babel: {
-        presets: ['@vue/app']
-      }
-    })
-  } else if (experimentalCompileTsWithBabel) {
-    api.extendPackage({
-      devDependencies: {
-        'babel-loader': '8 || ^8.0.0-beta || ^8.0.0-rc',
-        '@babel/core': '7 || ^7.0.0-beta || ^7.0.0-rc',
-        '@babel/preset-typescript': '7 || ^7.0.0-beta || ^7.0.0-rc',
-        '@vue/babel-preset-app': '^3.0.0-alpha.1'
+        '@babel/preset-typescript': '7 || ^7.0.0-beta || ^7.0.0-rc'
       },
       vue: {
         experimentalCompileTsWithBabel: true
@@ -79,7 +62,7 @@ module.exports = (api, {
           'pre-commit': 'lint-staged'
         },
         'lint-staged': {
-          '*.js': ['vue-cli-service lint', 'git add'],
+          '*.ts': ['vue-cli-service lint', 'git add'],
           '*.vue': ['vue-cli-service lint', 'git add']
         }
       })
@@ -93,7 +76,7 @@ module.exports = (api, {
 
   // inject necessary typings for other plugins
 
-  const hasMocha = api.hasPlugin('@vue/cli-plugin-unit-mocha')
+  const hasMocha = api.hasPlugin('unit-mocha')
   if (hasMocha) {
     api.extendPackage({
       devDependencies: {
@@ -103,7 +86,7 @@ module.exports = (api, {
     })
   }
 
-  const hasJest = api.hasPlugin('@vue/cli-plugin-unit-jest')
+  const hasJest = api.hasPlugin('unit-jest')
   if (hasJest) {
     api.extendPackage({
       devDependencies: {
diff --git a/packages/@vue/cli-plugin-typescript/index.js b/packages/@vue/cli-plugin-typescript/index.js
index cbafff66f..6f2bc4bd2 100644
--- a/packages/@vue/cli-plugin-typescript/index.js
+++ b/packages/@vue/cli-plugin-typescript/index.js
@@ -32,7 +32,7 @@ module.exports = (api, options) => {
               return options
             })
     } else {
-      if (options.useTsWithBabel) {
+      if (api.hasPlugin('babel')) {
         tsRule
           .use('babel-loader')
             .loader('babel-loader')
diff --git a/packages/@vue/cli-plugin-typescript/lib/tslint.js b/packages/@vue/cli-plugin-typescript/lib/tslint.js
index 4063fa6fa..2402855db 100644
--- a/packages/@vue/cli-plugin-typescript/lib/tslint.js
+++ b/packages/@vue/cli-plugin-typescript/lib/tslint.js
@@ -81,6 +81,8 @@ module.exports = function lint (args = {}, api, silent) {
   return globby(files).then(files => {
     return Promise.all(files.map(lint))
   }).then(() => {
+    if (silent) return
+
     const result = linter.getResult()
     if (result.output.trim()) {
       process.stdout.write(stripTsExtension(result.output))
diff --git a/packages/@vue/cli/lib/promptModules/babel.js b/packages/@vue/cli/lib/promptModules/babel.js
index ee7717be4..1c15a90a3 100644
--- a/packages/@vue/cli/lib/promptModules/babel.js
+++ b/packages/@vue/cli/lib/promptModules/babel.js
@@ -1,6 +1,10 @@
 module.exports = cli => {
   cli.onPromptComplete((answers, options) => {
-    if (!answers.features.includes('ts')) {
+    if (
+      !answers.features.includes('ts') ||
+      answers.useTsWithBabel ||
+      answers.experimentalCompileTsWithBabel
+    ) {
       options.plugins['@vue/cli-plugin-babel'] = {}
     }
   })