feat(ui): JS config support

Author: Guillaume Chau

docs/plugin-dev-ui.md

@@ -104,21 +104,22 @@ api.describeConfig({
 })
 ```
 
-Then you can specify which files will be read when loading the configuration and then written to (JS files aren't supported yet):
+Then you can specify which files will be read when loading the configuration and then written to:
 
 ```js
 api.describeConfig({
   /* ... */
   // All possible files for this config
   files: {
     json: ['.eslintrc', '.eslintrc.json'],
+    js: ['.eslintrc.js'],
     // Will read from `package.json`
     package: 'eslintConfig'
   },
 })
 ```
 
-Supported types: `json`, `yaml`, `package`.
+Supported types: `json`, `yaml`, `js`, `package`.
 
 Use the `onRead` hook to return a list of prompts to be displayed for the configuration:
 
@@ -164,7 +165,7 @@ Arguments:
 
 - `prompts`: current prompts runtime objects
 - `answers`: answers data from the user inputs
-- `data`: initial data read from the file
+- `data`: read-only initial data read from the file
 - `file`: descriptor of the found file (`{ type: 'json', path: '...' }`)
 - `api`: onWrite API
 

packages/@vue/cli-ui/src/graphql-api/connectors/configurations.js

@@ -9,6 +9,8 @@ const folders = require('./folders')
 const prompts = require('./prompts')
 // Utils
 const { get, set, remove } = require('../../util/object')
+const { loadModule } = require('@vue/cli/lib/util/module')
+const extendJSConfig = require('@vue/cli/lib/util/extendJSConfig')
 
 const fileTypes = ['js', 'json', 'yaml']
 let current = {}
@@ -56,24 +58,24 @@ function readData (config, context) {
     if (file.type === 'package') {
       const pkg = folders.readPackage(cwd.get(), context)
       return pkg[config.files.package]
+    } else if (file.type === 'js') {
+      return loadModule(file.path, cwd.get(), true)
     } else {
       const rawContent = fs.readFileSync(file.path, { encoding: 'utf8' })
       if (file.type === 'json') {
         return JSON.parse(rawContent)
       } else if (file.type === 'yaml') {
         return yaml.safeLoad(rawContent)
-      } else if (file.type === 'js') {
-        // TODO
-        console.warn('JS config read not implemented')
       }
     }
   }
   return {}
 }
 
-function writeData ({ config, data }, context) {
+function writeData ({ config, data, changedFields }, context) {
   const file = findFile(config, context)
   if (file) {
+    if (process.env.NODE_ENV !== 'production') console.log('write', config.id, data, changedFields)
     let rawContent
     if (file.type === 'package') {
       const pkg = folders.readPackage(cwd.get(), context)
@@ -85,8 +87,12 @@ function writeData ({ config, data }, context) {
       } else if (file.type === 'yaml') {
         rawContent = yaml.safeDump(data)
       } else if (file.type === 'js') {
-        // TODO
-        console.warn('JS config write not implemented')
+        const changedData = changedFields.reduce((obj, field) => {
+          obj[field] = data[field]
+          return obj
+        }, {})
+        const source = fs.readFileSync(file.path, { encoding: 'utf8' })
+        rawContent = extendJSConfig(changedData, source)
       }
     }
     fs.writeFileSync(file.path, rawContent, { encoding: 'utf8' })
@@ -97,6 +103,7 @@ async function getPrompts (id, context) {
   const config = findOne(id, context)
   if (config) {
     const data = readData(config, context)
+    if (process.env.NODE_ENV !== 'production') console.log('read', config.id, data)
     current = {
       config,
       data
@@ -121,17 +128,26 @@ async function save (id, context) {
     if (current.config === config) {
       const answers = prompts.getAnswers()
       let data = clone(current.data)
+      const changedFields = []
       await config.onWrite({
         prompts: prompts.list(),
         answers,
-        data,
+        data: current.data,
         file: config.file,
         api: {
           assignData: newData => {
+            changedFields.push(...Object.keys(newData))
             Object.assign(data, newData)
           },
           setData: newData => {
             Object.keys(newData).forEach(key => {
+              let field = key
+              const dotIndex = key.indexOf('.')
+              if (dotIndex !== -1) {
+                field = key.substr(0, dotIndex)
+              }
+              changedFields.push(field)
+
               const value = newData[key]
               if (typeof value === 'undefined') {
                 remove(data, key)
@@ -155,7 +171,7 @@ async function save (id, context) {
           }
         }
       })
-      writeData({ config, data }, context)
+      writeData({ config, data, changedFields }, context)
       current = {}
     }
   }