refactor: add invoking flag for generators, fix eslint + ts

close #1972

packages/@vue/cli-plugin-eslint/__tests__/eslintGenerator.spec.js

@@ -98,7 +98,9 @@ test('typescript', async () => {
     '@vue/prettier',
     '@vue/typescript'
   ])
-  expect(pkg.eslintConfig).not.toHaveProperty('parserOptions')
+  expect(pkg.eslintConfig.parserOptions).toEqual({
+    parser: 'typescript-eslint-parser'
+  })
   expect(pkg.devDependencies).toHaveProperty('@vue/eslint-config-prettier')
   expect(pkg.devDependencies).toHaveProperty('@vue/eslint-config-typescript')
 })

packages/@vue/cli-plugin-eslint/generator.js

@@ -1,4 +1,4 @@
-module.exports = (api, { config, lintOn = [] }) => {
+module.exports = (api, { config, lintOn = [] }, _, invoking) => {
   if (typeof lintOn === 'string') {
     lintOn = lintOn.split(',')
   }
@@ -33,14 +33,6 @@ module.exports = (api, { config, lintOn = [] }) => {
     eslintConfig.extends.push('eslint:recommended')
   }
 
-  // typescript support
-  if (api.hasPlugin('typescript')) {
-    eslintConfig.extends.push('@vue/typescript')
-    Object.assign(pkg.devDependencies, {
-      '@vue/eslint-config-typescript': '^3.0.0-rc.8'
-    })
-  }
-
   if (!lintOn.includes('save')) {
     pkg.vue = {
       lintOnSave: false // eslint-loader configured in runtime plugin
@@ -62,30 +54,20 @@ module.exports = (api, { config, lintOn = [] }) => {
 
   api.extendPackage(pkg)
 
-  if (api.hasPlugin('unit-mocha')) {
-    const config = {
-      env: { mocha: true }
+  // typescript support
+  if (api.hasPlugin('typescript')) {
+    applyTS(api)
+  }
+
+  // invoking only
+  if (invoking) {
+    if (api.hasPlugin('unit-mocha')) {
+      // eslint-disable-next-line node/no-extraneous-require
+      require('@vue/cli-plugin-unit-mocha/generator').applyESLint(api)
+    } else if (api.hasPlugin('unit-jest')) {
+      // eslint-disable-next-line node/no-extraneous-require
+      require('@vue/cli-plugin-unit-jest/generator').applyESLint(api)
     }
-    if (config === 'airbnb') {
-      config.rules = {
-        'import/no-extraneous-dependencies': 'off'
-      }
-    }
-    api.render(files => {
-      files['tests/unit/.eslintrc.js'] = api.genJSConfig(config)
-    })
-  } else if (api.hasPlugin('unit-jest')) {
-    const config = {
-      env: { jest: true }
-    }
-    if (config === 'airbnb') {
-      config.rules = {
-        'import/no-extraneous-dependencies': 'off'
-      }
-    }
-    api.render(files => {
-      files['tests/unit/.eslintrc.js'] = api.genJSConfig(config)
-    })
   }
 
   // lint & fix after create to ensure files adhere to chosen config
@@ -95,3 +77,17 @@ module.exports = (api, { config, lintOn = [] }) => {
     })
   }
 }
+
+const applyTS = module.exports.applyTS = api => {
+  api.extendPackage({
+    eslintConfig: {
+      extends: ['@vue/typescript'],
+      parserOptions: {
+        parser: 'typescript-eslint-parser'
+      }
+    },
+    devDependencies: {
+      '@vue/eslint-config-typescript': '^3.0.0-rc.8'
+    }
+  })
+}

packages/@vue/cli-plugin-typescript/__tests__/tsGenerator.spec.js

@@ -116,11 +116,11 @@ test('compat with unit-mocha', async () => {
   const { pkg } = await generateWithPlugin([
     {
       id: '@vue/cli-plugin-unit-mocha',
-      apply: () => {},
+      apply: require('@vue/cli-plugin-unit-mocha/generator'),
       options: {}
     },
     {
-      id: 'ts',
+      id: '@vue/cli-plugin-typescript',
       apply: require('../generator'),
       options: {
         lint: true,
@@ -137,11 +137,11 @@ test('compat with unit-jest', async () => {
   const { pkg } = await generateWithPlugin([
     {
       id: '@vue/cli-plugin-unit-jest',
-      apply: () => {},
+      apply: require('@vue/cli-plugin-unit-jest/generator'),
       options: {}
     },
     {
-      id: 'ts',
+      id: '@vue/cli-plugin-typescript',
       apply: require('../generator'),
       options: {
         lint: true,

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

@@ -2,7 +2,7 @@ module.exports = (api, {
   classComponent,
   tsLint,
   lintOn = []
-}) => {
+}, _, invoking) => {
   if (typeof lintOn === 'string') {
     lintOn = lintOn.split(',')
   }
@@ -58,43 +58,28 @@ module.exports = (api, {
     })
   }
 
-  // inject necessary typings for other plugins
+  // late invoke compat
+  if (invoking) {
+    if (api.hasPlugin('unit-mocha')) {
+      // eslint-disable-next-line node/no-extraneous-require
+      require('@vue/cli-plugin-unit-mocha/generator').applyTS(api)
+    }
 
-  const hasMocha = api.hasPlugin('unit-mocha')
-  if (hasMocha) {
-    api.extendPackage({
-      devDependencies: {
-        '@types/mocha': '^5.2.4',
-        '@types/chai': '^4.1.0'
-      }
-    })
-  }
+    if (api.hasPlugin('unit-jest')) {
+      // eslint-disable-next-line node/no-extraneous-require
+      require('@vue/cli-plugin-unit-jest/generator').applyTS(api)
+    }
 
-  const hasJest = api.hasPlugin('unit-jest')
-  if (hasJest) {
-    api.extendPackage({
-      devDependencies: {
-        '@types/jest': '^23.1.4'
-      }
-    })
-  }
-
-  const hasESLint = api.hasPlugin('eslint')
-  if (hasESLint) {
-    api.extendPackage({
-      devDependencies: {
-        '@vue/eslint-config-typescript': '^3.0.0-rc.8'
-      },
-      eslintConfig: {
-        extends: ['@vue/typescript']
-      }
-    })
+    if (api.hasPlugin('eslint')) {
+      // eslint-disable-next-line node/no-extraneous-require
+      require('@vue/cli-plugin-eslint/generator').applyTS(api)
+    }
   }
 
   api.render('./template', {
     isTest: process.env.VUE_CLI_TEST || process.env.VUE_CLI_DEBUG,
-    hasMocha,
-    hasJest
+    hasMocha: api.hasPlugin('unit-mocha'),
+    hasJest: api.hasPlugin('unit-jest')
   })
 
   require('./convert')(api, { tsLint })

packages/@vue/cli-plugin-unit-jest/generator/index.js

@@ -6,39 +6,44 @@ module.exports = api => {
     },
     devDependencies: {
       '@vue/test-utils': '^1.0.0-beta.20'
+    },
+    jest: {
+      'moduleFileExtensions': [
+        'js',
+        'jsx',
+        'json',
+        // tell Jest to handle *.vue files
+        'vue'
+      ],
+      'transform': {
+        // process *.vue files with vue-jest
+        '^.+\\.vue$': 'vue-jest',
+        '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub'
+      },
+      // support the same @ -> src alias mapping in source code
+      'moduleNameMapper': {
+        '^@/(.*)$': '<rootDir>/src/$1'
+      },
+      // serializer for snapshots
+      'snapshotSerializers': [
+        'jest-serializer-vue'
+      ],
+      'testMatch': [
+        '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+      ],
+      // https://github.com/facebook/jest/issues/6766
+      'testURL': 'http://localhost/'
     }
   })
 
-  const jestConfig = {
-    'moduleFileExtensions': [
-      'js',
-      'jsx',
-      'json',
-      // tell Jest to handle *.vue files
-      'vue'
-    ],
-    'transform': {
-      // process *.vue files with vue-jest
-      '^.+\\.vue$': 'vue-jest',
-      '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub'
-    },
-    // support the same @ -> src alias mapping in source code
-    'moduleNameMapper': {
-      '^@/(.*)$': '<rootDir>/src/$1'
-    },
-    // serializer for snapshots
-    'snapshotSerializers': [
-      'jest-serializer-vue'
-    ],
-    'testMatch': [
-      '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
-    ],
-    // https://github.com/facebook/jest/issues/6766
-    'testURL': 'http://localhost/'
-  }
-
   if (!api.hasPlugin('typescript')) {
-    jestConfig.transform['^.+\\.jsx?$'] = 'babel-jest'
+    api.extendPackage({
+      jest: {
+        transform: {
+          '^.+\\.jsx?$': 'babel-jest'
+        }
+      }
+    })
     if (api.hasPlugin('babel')) {
       api.extendPackage({
         devDependencies: {
@@ -55,33 +60,45 @@ module.exports = api => {
       })
     }
   } else {
-    jestConfig.moduleFileExtensions.unshift('ts', 'tsx')
-    jestConfig.transform['^.+\\.tsx?$'] = 'ts-jest'
-    api.extendPackage({
-      devDependencies: {
-        'ts-jest': '^23.0.0'
-      }
-    })
-    if (api.hasPlugin('babel')) {
-      api.extendPackage({
-        devDependencies: {
-          // this is for now necessary to force ts-jest and vue-jest to use babel 7
-          'babel-core': '7.0.0-bridge.0'
-        }
-      })
-    }
+    applyTS(api)
   }
 
-  api.extendPackage({ jest: jestConfig })
-
   if (api.hasPlugin('eslint')) {
-    api.render(files => {
-      files['tests/unit/.eslintrc.js'] = api.genJSConfig({
-        env: { jest: true },
-        rules: {
-          'import/no-extraneous-dependencies': 'off'
-        }
-      })
+    applyESLint(api)
+  }
+}
+
+const applyTS = module.exports.applyTS = api => {
+  // TODO inject type into tsconfig.json
+  api.extendPackage({
+    jest: {
+      moduleFileExtensions: ['ts', 'tsx'],
+      transform: {
+        '^.+\\.tsx?$': 'ts-jest'
+      }
+    },
+    devDependencies: {
+      '@types/jest': '^23.1.4',
+      'ts-jest': '^23.0.0'
+    }
+  })
+  if (api.hasPlugin('babel')) {
+    api.extendPackage({
+      devDependencies: {
+        // this is for now necessary to force ts-jest and vue-jest to use babel 7
+        'babel-core': '7.0.0-bridge.0'
+      }
     })
   }
 }
+
+const applyESLint = module.exports.applyESLint = api => {
+  api.render(files => {
+    files['tests/unit/.eslintrc.js'] = api.genJSConfig({
+      env: { jest: true },
+      rules: {
+        'import/no-extraneous-dependencies': 'off'
+      }
+    })
+  })
+}

packages/@vue/cli-plugin-unit-mocha/generator/index.js

@@ -1,26 +1,42 @@
 module.exports = api => {
   api.render('./template')
 
-  const devDependencies = {
-    '@vue/test-utils': '^1.0.0-beta.20',
-    'chai': '^4.1.2'
-  }
-
   api.extendPackage({
-    devDependencies,
+    devDependencies: {
+      '@vue/test-utils': '^1.0.0-beta.20',
+      'chai': '^4.1.2'
+    },
     scripts: {
       'test:unit': 'vue-cli-service test:unit'
     }
   })
 
   if (api.hasPlugin('eslint')) {
-    api.render(files => {
-      files['tests/unit/.eslintrc.js'] = api.genJSConfig({
-        env: { mocha: true },
-        rules: {
-          'import/no-extraneous-dependencies': 'off'
-        }
-      })
-    })
+    applyESLint(api)
+  }
+
+  if (api.hasPlugin('typescript')) {
+    applyTS(api)
   }
 }
+
+const applyESLint = module.exports.applyESLint = api => {
+  api.render(files => {
+    files['tests/unit/.eslintrc.js'] = api.genJSConfig({
+      env: { mocha: true },
+      rules: {
+        'import/no-extraneous-dependencies': 'off'
+      }
+    })
+  })
+}
+
+const applyTS = module.exports.applyTS = api => {
+  // TODO inject type into tsconfig.json
+  api.extendPackage({
+    devDependencies: {
+      '@types/mocha': '^5.2.4',
+      '@types/chai': '^4.1.0'
+    }
+  })
+}

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

@@ -93,7 +93,7 @@ module.exports = class Generator {
     // apply generators from plugins
     plugins.forEach(({ id, apply, options }) => {
       const api = new GeneratorAPI(id, this, options, rootOptions)
-      apply(api, options, rootOptions)
+      apply(api, options, rootOptions, invoking)
     })
   }