fix: handle vue invoke config merging for existing files

close #788

packages/@vue/cli-test-utils/createTestProject.js

@@ -4,6 +4,7 @@ const execa = require('execa')
 const { promisify } = require('util')
 const readFile = promisify(fs.readFile)
 const writeFile = promisify(fs.writeFile)
+const rmFile = promisify(fs.unlink)
 const mkdirp = promisify(require('mkdirp'))
 
 module.exports = function createTestProject (name, preset, cwd) {
@@ -25,6 +26,10 @@ module.exports = function createTestProject (name, preset, cwd) {
  return mkdirp(dir).then(() => writeFile(targetPath, content))
  }
 
+ const rm = file => {
+ return rmFile(path.resolve(projectRoot, file))
+ }
+
  const run = (command, args) => {
  [command, ...args] = command.split(/\s+/)
  if (command === 'vue-cli-service') {
@@ -54,6 +59,7 @@ module.exports = function createTestProject (name, preset, cwd) {
  has,
  read,
  write,
- run
+ run,
+ rm
  }))
 }

packages/@vue/cli/__tests__/Generator.spec.js

@@ -67,41 +67,6 @@ test('api: extendPackage function', async () => {
  })
 })
 
-test('api: extendPackage + { merge: false }', async () => {
- const generator = new Generator('/', {
- name: 'hello',
- list: [1],
- vue: {
- foo: 1,
- bar: 2
- }
- }, [{
- id: 'test',
- apply: api => {
- api.extendPackage({
- name: 'hello2',
- list: [2],
- vue: {
- foo: 2,
- baz: 3
- }
- }, { merge: false })
- }
- }])
-
- await generator.generate()
-
- const pkg = JSON.parse(fs.readFileSync('/package.json', 'utf-8'))
- expect(pkg).toEqual({
- name: 'hello2',
- list: [2],
- vue: {
- foo: 2,
- baz: 3
- }
- })
-})
-
 test('api: extendPackage merge dependencies', async () => {
  const generator = new Generator('/', {}, [
  {
@@ -292,7 +257,7 @@ test('api: onCreateComplete', () => {
  api.onCreateComplete(fn)
  }
  }
- ], false, cbs)
+ ], cbs)
  expect(cbs).toContain(fn)
 })
 
@@ -333,9 +298,11 @@ test('extract config files', async () => {
  api.extendPackage(configs)
  }
  }
- ], true)
+ ])
 
- await generator.generate()
+ await generator.generate({
+ extractConfigFiles: true
+ })
 
  const json = v => JSON.stringify(v, null, 2)
  expect(fs.readFileSync('/vue.config.js', 'utf-8')).toMatch('module.exports = {\n lintOnSave: true\n}')

packages/@vue/cli/__tests__/invoke.spec.js

@@ -1,4 +1,4 @@
-jest.setTimeout(10000)
+jest.setTimeout(12000)
 jest.mock('inquirer')
 
 const invoke = require('../lib/invoke')
@@ -22,13 +22,15 @@ async function assertUpdates (project) {
  const updatedPkg = JSON.parse(await project.read('package.json'))
  expect(updatedPkg.scripts.lint).toBe('vue-cli-service lint')
  expect(updatedPkg.devDependencies).toHaveProperty('lint-staged')
- expect(updatedPkg.eslintConfig).toEqual({
- extends: ['plugin:vue/essential', '@vue/airbnb']
- })
  expect(updatedPkg.gitHooks).toEqual({
  'pre-commit': 'lint-staged'
  })
 
+ const eslintrc = JSON.parse(await project.read('.eslintrc'))
+ expect(eslintrc).toEqual({
+ extends: ['plugin:vue/essential', '@vue/airbnb']
+ })
+
  const lintedMain = await project.read('src/main.js')
  expect(lintedMain).toMatch(';') // should've been linted in post-generate hook
 }
@@ -58,3 +60,66 @@ test('invoke with prompts', async () => {
  await invoke(`eslint`, {}, project.dir)
  await assertUpdates(project)
 })
+
+test('invoke with existing files', async () => {
+ const project = await create(`invoke-existing`, {
+ useConfigFiles: true,
+ plugins: {
+ '@vue/cli-plugin-babel': {},
+ '@vue/cli-plugin-eslint': { config: 'base' }
+ }
+ })
+ // mock install
+ const pkg = JSON.parse(await project.read('package.json'))
+ pkg.devDependencies['@vue/cli-plugin-eslint'] = '*'
+ await project.write('package.json', JSON.stringify(pkg, null, 2))
+
+ // mock existing vue.config.js
+ await project.write('vue.config.js', `module.exports = { lintOnSave: false }`)
+
+ const eslintrc = JSON.parse(await project.read('.eslintrc'))
+ expect(eslintrc).toEqual({
+ extends: ['plugin:vue/essential', 'eslint:recommended']
+ })
+
+ await project.run(`${require.resolve('../bin/vue')} invoke eslint --config airbnb --lintOn save,commit`)
+
+ await assertUpdates(project)
+ const updatedVueConfig = await project.read('vue.config.js')
+ expect(updatedVueConfig).toMatch(`module.exports = { lintOnSave: true }`)
+})
+
+test('invoke with existing files (yaml)', async () => {
+ const project = await create(`invoke-existing`, {
+ useConfigFiles: true,
+ plugins: {
+ '@vue/cli-plugin-babel': {},
+ '@vue/cli-plugin-eslint': { config: 'base' }
+ }
+ })
+ // mock install
+ const pkg = JSON.parse(await project.read('package.json'))
+ pkg.devDependencies['@vue/cli-plugin-eslint'] = '*'
+ await project.write('package.json', JSON.stringify(pkg, null, 2))
+
+ const eslintrc = JSON.parse(await project.read('.eslintrc'))
+ expect(eslintrc).toEqual({
+ extends: ['plugin:vue/essential', 'eslint:recommended']
+ })
+
+ await project.rm(`.eslintrc`)
+ await project.write(`.eslintrc.yml`, `
+extends:
+ - 'plugin:vue/essential'
+ - 'eslint:recommended'
+ `.trim())
+
+ await project.run(`${require.resolve('../bin/vue')} invoke eslint --config airbnb`)
+
+ const updated = await project.read('.eslintrc.yml')
+ expect(updated).toMatch(`
+extends:
+ - 'plugin:vue/essential'
+ - '@vue/airbnb'
+`.trim())
+})

packages/@vue/cli/acorn-test.js

@@ -0,0 +1,54 @@
+const acorn = require('acorn')
+const walk = require('acorn/dist/walk')
+
+const ast = acorn.parse(`
+module.exports = {
+ lintOnSave: true,
+ css: {
+ loaderOptions: {
+ sass: {
+ data: 'foo'
+ }
+ }
+ },
+ pluginsOptions: {
+ foo: 'bar'
+ }
+}
+`)
+
+let exportsIdentifier = null
+
+walk.simple(ast, {
+ AssignmentExpression (node) {
+ if (
+ node.left.type === 'MemberExpression' &&
+ node.left.object.name === 'module' &&
+ node.left.property.name === 'exports'
+ ) {
+ if (node.right.type === 'ObjectExpression') {
+ augmentExports(node.right)
+ } else if (node.right.type === 'Identifier') {
+ // do a second pass
+ exportsIdentifier = node.right.name
+ }
+ }
+ }
+})
+
+if (exportsIdentifier) {
+ walk.simple(ast, {
+ VariableDeclarator (node) {
+ if (
+ node.id.name === exportsIdentifier &&
+ node.init.type === 'ObjectExpression'
+ ) {
+ augmentExports(node.init)
+ }
+ }
+ })
+}
+
+function augmentExports (node) {
+ console.log(node)
+}

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

@@ -136,10 +136,11 @@ module.exports = class Creator {
  context,
  pkg,
  plugins,
- preset.useConfigFiles,
  createCompleteCbs
  )
- await generator.generate()
+ await generator.generate({
+ extractConfigFiles: preset.useConfigFiles
+ })
 
  // install additional deps (injected by generators)
  log(`📦 Installing additional dependencies...`)

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

@@ -1,16 +1,17 @@
 const ejs = require('ejs')
 const slash = require('slash')
 const debug = require('debug')
-const configMap = require('./util/configMap')
 const GeneratorAPI = require('./GeneratorAPI')
 const sortObject = require('./util/sortObject')
 const writeFileTree = require('./util/writeFileTree')
+const configTransforms = require('./util/configTransforms')
 
 module.exports = class Generator {
- constructor (context, pkg, plugins, extractConfigFiles, completeCbs = []) {
+ constructor (context, pkg, plugins, completeCbs = []) {
  this.context = context
  this.plugins = plugins
- this.pkg = pkg
+ this.originalPkg = pkg
+ this.pkg = Object.assign({}, pkg)
  this.completeCbs = completeCbs
 
  // for conflict resolution
@@ -27,11 +28,14 @@ module.exports = class Generator {
  const api = new GeneratorAPI(id, this, options, rootOptions || {})
  apply(api, options, rootOptions)
  })
- // extract configs from package.json into dedicated files.
- this.extractConfigFiles(extractConfigFiles)
  }
 
- async generate () {
+ async generate ({
+ extractConfigFiles = false,
+ checkExisting = false
+ } = {}) {
+ // extract configs from package.json into dedicated files.
+ this.extractConfigFiles(extractConfigFiles, checkExisting)
  // wait for file resolve
  await this.resolveFiles()
  // set package.json
@@ -41,21 +45,32 @@ module.exports = class Generator {
  await writeFileTree(this.context, this.files)
  }
 
- extractConfigFiles (all) {
+ extractConfigFiles (extractAll, checkExisting) {
  const extract = key => {
- if (configMap[key]) {
+ if (
+ configTransforms[key] &&
+ this.pkg[key] &&
+ // do not extract if the field exists in original package.json
+ !this.originalPkg[key]
+ ) {
  const value = this.pkg[key]
- const { transform, filename } = configMap[key]
- this.files[filename] = transform(value)
+ const transform = configTransforms[key]
+ const res = transform(
+ value,
+ checkExisting,
+ this.context
+ )
+ const { content, filename } = res
+ this.files[filename] = content
  delete this.pkg[key]
  }
  }
- if (all) {
+ if (extractAll) {
  for (const key in this.pkg) {
  extract(key)
  }
  } else if (!process.env.VUE_CLI_TEST) {
- // by default, extract vue.config.js
+ // by default, always extract vue.config.js
  extract('vue')
  }
  }

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

@@ -100,10 +100,9 @@ class GeneratorAPI {
  * Tool configuration fields may be extracted into standalone files before
  * files are written to disk.
  *
- * @param {object} fields - Fields to merge.
- * @param {object} [options] - pass { merge: false } to disable deep merging.
+ * @param {object | () => object} fields - Fields to merge.
  */
- extendPackage (fields, options = { merge: true }) {
+ extendPackage (fields) {
  const pkg = this.generator.pkg
  const toMerge = isFunction(fields) ? fields(pkg) : fields
  for (const key in toMerge) {
@@ -117,7 +116,7 @@ class GeneratorAPI {
  value,
  this.generator.depSources
  )
- } else if (!options.merge || !(key in pkg)) {
+ } else if (!(key in pkg)) {
  pkg[key] = value
  } else if (Array.isArray(value) && Array.isArray(existing)) {
  pkg[key] = existing.concat(value)

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

@@ -81,13 +81,15 @@ async function invoke (pluginName, options = {}, context = process.cwd()) {
  context,
  pkg,
  [plugin],
- isTestOrDebug ? false : loadOptions().useConfigFiles,
  createCompleteCbs
  )
 
  log()
  logWithSpinner('🚀', `Invoking generator for ${id}...`)
- await generator.generate()
+ await generator.generate({
+ extractConfigFiles: true,
+ checkExisting: true
+ })
 
  const newDeps = generator.pkg.dependencies
  const newDevDeps = generator.pkg.devDependencies
@@ -115,9 +117,11 @@ async function invoke (pluginName, options = {}, context = process.cwd()) {
  log(` Successfully invoked generator for plugin: ${chalk.cyan(id)}`)
  if (!process.env.VUE_CLI_TEST && hasGit()) {
  const { stdout } = await execa('git', ['ls-files', '--exclude-standard', '--modified', '--others'])
- log(` The following files have been updated / added:\n`)
- log(chalk.red(stdout.split(/\r?\n/g).map(line => ` ${line}`).join('\n')))
- log()
+ if (stdout.trim()) {
+ log(` The following files have been updated / added:\n`)
+ log(chalk.red(stdout.split(/\r?\n/g).map(line => ` ${line}`).join('\n')))
+ log()
+ }
  }
  log(` You should review and commit the changes.`)
  log()