feat(ui): prompt-list default choice + config field auto-remove

Author: Guillaume Chau

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

@@ -20,6 +20,7 @@ module.exports = api => {
             message: 'Trailing commas',
             description: 'Enforce or disallow trailing commas at the end of the lines',
             link: 'https://eslint.org/docs/rules/comma-dangle',
+            default: JSON.stringify(['error', 'never']),
             choices: [
               {
                 name: 'Off',
@@ -42,14 +43,14 @@ module.exports = api => {
                 value: JSON.stringify(['error', 'only-multiline'])
               }
             ],
-            value: JSON.stringify(data.rules && data.rules['comma-dangle'] || ['error', 'never'])
+            value: JSON.stringify(data.rules && data.rules['comma-dangle'])
           }
         ]
       }
     },
-    onWrite: ({ file, answers }) => {
-      file.setData({
-        'rules.comma-dangle': JSON.parse(answers.rules.commaDangle)
+    onWrite: ({ api }) => {
+      api.setData({
+        'rules.comma-dangle': api.getAnswer('rules.commaDangle', JSON.parse)
       })
     }
   })

packages/@vue/cli-ui/.eslintrc

@@ -4,4 +4,4 @@
     "plugin:vue/essential",
     "@vue/standard"
   ]
-}
+}

packages/@vue/cli-ui/package.json

@@ -28,6 +28,7 @@
     "lowdb": "^1.0.0",
     "lru-cache": "^4.1.2",
     "mkdirp": "^0.5.1",
+    "parse-diff": "^0.4.2",
     "rimraf": "^2.6.2",
     "semver": "^5.5.0",
     "shortid": "^2.2.8",

packages/@vue/cli-ui/src/components/PromptList.vue

@@ -19,7 +19,7 @@
             v-for="(choice, index) of prompt.choices"
             :key="index"
             :value="value(choice.value)"
-            :label="choice.name"
+            :label="generateLabel(choice)"
           />
         </VueSelect>
       </div>
@@ -33,6 +33,16 @@
 import Prompt from './Prompt'
 
 export default {
-  extends: Prompt
+  extends: Prompt,
+
+  methods: {
+    generateLabel (choice) {
+      let label = choice.name
+      if (choice.isDefault) {
+        label += ` (${this.$t('components.prompt-list.default')})`
+      }
+      return label
+    }
+  }
 }
 </script>

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

@@ -8,7 +8,7 @@ const plugins = require('./plugins')
 const folders = require('./folders')
 const prompts = require('./prompts')
 // Utils
-const { set } = require('../../util/object')
+const { get, set, remove } = require('../../util/object')
 
 const fileTypes = ['js', 'json', 'yaml']
 let current = {}
@@ -116,15 +116,34 @@ function save (id, context) {
       config.onWrite({
         answers,
         data,
-        file: {
-          ...config.file,
+        file: config.file,
+        api: {
           assignData: newData => {
             Object.assign(data, newData)
           },
           setData: newData => {
             Object.keys(newData).forEach(key => {
-              set(data, key, newData[key])
+              const value = newData[key]
+              if (typeof value === 'undefined') {
+                remove(data, key)
+              } else {
+                set(data, key, value)
+              }
             })
+          },
+          getAnswer: (id, mapper) => {
+            const prompt = prompts.findOne(id)
+            if (prompt) {
+              const defaultValue = prompts.getDefaultValue(prompt)
+              console.log(defaultValue, prompt.rawValue)
+              if (defaultValue !== prompt.rawValue) {
+                let value = get(answers, prompt.id)
+                if (mapper) {
+                  value = mapper(value)
+                }
+                return value
+              }
+            }
           }
         }
       })

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

@@ -3,12 +3,6 @@ const ObjectUtil = require('../../util/object')
 let answers = {}
 let prompts = []
 
-function getPrompt (id) {
-  return prompts.find(
-    p => p.id === id
-  )
-}
-
 function generatePromptError (value) {
   let message
   if (typeof value === 'string') {
@@ -21,28 +15,6 @@ function generatePromptError (value) {
   }
 }
 
-function getDefaultValue (prompt) {
-  if (typeof prompt.raw.value !== 'undefined') {
-    return prompt.raw.value
-  }
-  const defaultValue = prompt.raw.default
-  if (typeof defaultValue === 'function') {
-    return defaultValue(answers)
-  } else if (prompt.type === 'checkbox') {
-    const choices = getChoices(prompt)
-    if (choices) {
-      return choices.filter(
-        c => c.checked
-      ).map(
-        c => c.value
-      )
-    }
-  } else if (prompt.type === 'confirm') {
-    return false
-  }
-  return defaultValue
-}
-
 function getEnabled (value) {
   const type = typeof value
   if (type === 'function') {
@@ -78,12 +50,13 @@ function getDisplayedValue (prompt, value) {
   return JSON.stringify(value)
 }
 
-function generatePromptChoice (prompt, data) {
+function generatePromptChoice (prompt, data, defaultValue) {
   return {
     value: getDisplayedValue(prompt, data.value),
     name: data.name,
     checked: data.checked,
-    disabled: data.disabled
+    disabled: data.disabled,
+    isDefault: data.value === defaultValue
   }
 }
 
@@ -99,8 +72,9 @@ function getChoices (prompt) {
   } else {
     result = data
   }
+  const defaultValue = getDefaultValue(prompt)
   return result.map(
-    item => generatePromptChoice(prompt, item)
+    item => generatePromptChoice(prompt, item, defaultValue)
   )
 }
 
@@ -149,10 +123,13 @@ function updatePrompts () {
       const answer = getAnswer(prompt.id)
       if (typeof answer !== 'undefined') {
         value = answer
+      } else if (typeof prompt.raw.value !== 'undefined') {
+        value = prompt.raw.value
       } else {
         value = getDefaultValue(prompt)
       }
       prompt.value = getDisplayedValue(prompt, value)
+      prompt.rawValue = value
       setAnswer(prompt.id, getValue(prompt, value))
     }
   }
@@ -197,7 +174,7 @@ function remove (id) {
 }
 
 function setValue ({ id, value }) {
-  const prompt = getPrompt(id)
+  const prompt = findOne(id)
   if (!prompt) {
     console.warn(`Prompt '${prompt}' not found`)
     return null
@@ -210,13 +187,39 @@ function setValue ({ id, value }) {
     prompt.error = null
   }
   prompt.value = getDisplayedValue(prompt, value)
+  prompt.rawValue = value
   const finalValue = getValue(prompt, value)
   prompt.valueChanged = true
   setAnswer(prompt.id, finalValue)
   updatePrompts()
   return prompt
 }
 
+function findOne (id) {
+  return prompts.find(
+    p => p.id === id
+  )
+}
+
+function getDefaultValue (prompt) {
+  const defaultValue = prompt.raw.default
+  if (typeof defaultValue === 'function') {
+    return defaultValue(answers)
+  } else if (prompt.type === 'checkbox') {
+    const choices = getChoices(prompt)
+    if (choices) {
+      return choices.filter(
+        c => c.checked
+      ).map(
+        c => c.value
+      )
+    }
+  } else if (prompt.type === 'confirm') {
+    return defaultValue || false
+  }
+  return defaultValue
+}
+
 module.exports = {
   setAnswers,
   changeAnswers,
@@ -226,5 +229,7 @@ module.exports = {
   add,
   remove,
   start,
-  setValue
+  setValue,
+  findOne,
+  getDefaultValue
 }

packages/@vue/cli-ui/src/graphql-api/type-defs.js

@@ -124,6 +124,7 @@ type PromptChoice {
   name: String
   checked: Boolean
   disabled: Boolean
+  isDefault: Boolean
 }
 
 type PromptError {

packages/@vue/cli-ui/src/graphql/promptChoiceFragment.gql

@@ -3,4 +3,5 @@ fragment promptChoice on PromptChoice {
   name
   checked
   disabled
+  isDefault
 }

packages/@vue/cli-ui/src/locales/en.json

@@ -57,6 +57,9 @@
         "update": "Update {target}"
       }
     },
+    "prompt-list": {
+      "default": "Default"
+    },
     "prompts-list": {
       "empty": "No configuration"
     },

packages/@vue/cli-ui/src/locales/fr.json

@@ -57,6 +57,9 @@
         "update": "Mettre à jour {target}"
       }
     },
+    "prompt-list": {
+      "default": "Par défaut"
+    },
     "prompts-list": {
       "empty": "Pas de configuration"
     },