refactor: improve invocation of builtin plugins in TypeScript projects (#1342)

Author: Akryum

packages/@vue/cli-plugin-pwa/generator/index.js

@@ -4,6 +4,11 @@ module.exports = api => {
       'register-service-worker': '^1.0.0'
     }
   })
-  api.injectImports(`src/main.js`, `import './registerServiceWorker'`)
+  api.injectImports(api.entryFile, `import './registerServiceWorker'`)
   api.render('./template')
+
+  if (api.invoking && api.hasPlugin('typescript')) {
+    const convertFiles = require('@vue/cli-plugin-typescript/generator/convert')
+    convertFiles(api)
+  }
 }

packages/@vue/cli-plugin-typescript/generator/convert.js

@@ -0,0 +1,22 @@
+module.exports = (api, { tsLint = false } = {}) => {
+  // delete all js files that have a ts file of the same name
+  // and simply rename other js files to ts
+  const jsRE = /\.js$/
+  const excludeRE = /^tests\/e2e\/|(\.config|rc)\.js$/
+  const convertLintFlags = require('../lib/convertLintFlags')
+  api.postProcessFiles(files => {
+    for (const file in files) {
+      if (jsRE.test(file) && !excludeRE.test(file)) {
+        const tsFile = file.replace(jsRE, '.ts')
+        if (!files[tsFile]) {
+          let content = files[file]
+          if (tsLint) {
+            content = convertLintFlags(content)
+          }
+          files[tsFile] = content
+        }
+        delete files[file]
+      }
+    }
+  })
+}

packages/@vue/cli-plugin-typescript/generator/index.js

@@ -79,24 +79,5 @@ module.exports = (api, {
     hasJest
   })
 
-  // delete all js files that have a ts file of the same name
-  // and simply rename other js files to ts
-  const jsRE = /\.js$/
-  const excludeRE = /^tests\/e2e\/|(\.config|rc)\.js$/
-  const convertLintFlags = require('../lib/convertLintFlags')
-  api.postProcessFiles(files => {
-    for (const file in files) {
-      if (jsRE.test(file) && !excludeRE.test(file)) {
-        const tsFile = file.replace(jsRE, '.ts')
-        if (!files[tsFile]) {
-          let content = files[file]
-          if (tsLint) {
-            content = convertLintFlags(content)
-          }
-          files[tsFile] = content
-        }
-        delete files[file]
-      }
-    }
-  })
+  require('./convert')(api, { tsLint })
 }

packages/@vue/cli-service/generator/router/index.js

@@ -1,14 +1,14 @@
 module.exports = (api, options) => {
-  api.injectImports(`src/main.js`, `import router from './router'`)
-  api.injectRootOptions(`src/main.js`, `router`)
+  api.injectImports(api.entryFile, `import router from './router'`)
+  api.injectRootOptions(api.entryFile, `router`)
   api.extendPackage({
     dependencies: {
       'vue-router': '^3.0.1'
     }
   })
   api.render('./template')
 
-  if (options.invoking) {
+  if (api.invoking) {
     api.postProcessFiles(files => {
       const appFile = files[`src/App.vue`]
       if (appFile) {
@@ -26,5 +26,10 @@ module.exports = (api, options) => {
         console.log(files[`src/App.vue`])
       }
     })
+
+    if (api.hasPlugin('typescript')) {
+      const convertFiles = require('@vue/cli-plugin-typescript/generator/convert')
+      convertFiles(api)
+    }
   }
 }

packages/@vue/cli-service/generator/vuex/index.js

@@ -1,10 +1,15 @@
 module.exports = (api, options) => {
-  api.injectImports(`src/main.js`, `import store from './store'`)
-  api.injectRootOptions(`src/main.js`, `store`)
+  api.injectImports(api.entryFile, `import store from './store'`)
+  api.injectRootOptions(api.entryFile, `store`)
   api.extendPackage({
     dependencies: {
       vuex: '^3.0.1'
     }
   })
   api.render('./template')
+
+  if (api.invoking && api.hasPlugin('typescript')) {
+    const convertFiles = require('@vue/cli-plugin-typescript/generator/convert')
+    convertFiles(api)
+  }
 }

packages/@vue/cli/lib/Generator.js

@@ -22,7 +22,8 @@ module.exports = class Generator {
     pkg = {},
     plugins = [],
     completeCbs = [],
-    files = {}
+    files = {},
+    invoking = false
   } = {}) {
     this.context = context
     this.plugins = plugins
@@ -31,6 +32,7 @@ module.exports = class Generator {
     this.imports = {}
     this.rootOptions = {}
     this.completeCbs = completeCbs
+    this.invoking = invoking
 
     // for conflict resolution
     this.depSources = {}

packages/@vue/cli/lib/GeneratorAPI.js

@@ -33,6 +33,8 @@ class GeneratorAPI {
         name: toShortPluginId(id),
         link: getPluginLink(id)
       }))
+
+    this._entryFile = undefined
   }
 
   /**
@@ -225,6 +227,25 @@ class GeneratorAPI {
       _options.add(opt)
     })
   }
+
+  /**
+   * Get the entry file taking into account typescript.
+   *
+   * @readonly
+   */
+  get entryFile () {
+    if (this._entryFile) return this._entryFile
+    return (this._entryFile = fs.existsSync(this.resolve('src/main.ts')) ? 'src/main.ts' : 'src/main.js')
+  }
+
+  /**
+   * Is the plugin being invoked?
+   *
+   * @readonly
+   */
+  get invoking () {
+    return this.generator.invoking
+  }
 }
 
 function extractCallDir () {

packages/@vue/cli/lib/add.js

@@ -46,16 +46,14 @@ async function add (pluginName, options = {}, context = process.cwd()) {
 async function addRouter (context) {
   invoke.runGenerator(context, {
     id: 'core:router',
-    apply: require('@vue/cli-service/generator/router'),
-    options: { invoking: true }
+    apply: require('@vue/cli-service/generator/router')
   })
 }
 
 async function addVuex (context) {
   invoke.runGenerator(context, {
     id: 'core:vuex',
-    apply: require('@vue/cli-service/generator/vuex'),
-    options: { invoking: true }
+    apply: require('@vue/cli-service/generator/vuex')
   })
 }
 

packages/@vue/cli/lib/invoke.js

@@ -100,7 +100,8 @@ async function runGenerator (context, plugin, pkg = getPkg(context)) {
     pkg,
     plugins: [plugin],
     files: await readFiles(context),
-    completeCbs: createCompleteCbs
+    completeCbs: createCompleteCbs,
+    invoking: true
   })
 
   log()