feat(ui): PWA config + ESLint extra config

docs/plugin-dev-ui.md

@@ -127,7 +127,7 @@ Use the `onRead` hook to return a list of prompts to be displayed for the config
 ```js
 api.describeConfig({
   /* ... */
-  onRead: ({ data }) => ({
+  onRead: ({ data, cwd }) => ({
     prompts: [
       // Prompt objects
     ]
@@ -156,7 +156,7 @@ Use the `onWrite` hook to write the data to the configuration file (or execute a
 ```js
 api.describeConfig({
   /* ... */
-  onWrite: ({ prompts, answers, data, file, api }) => {
+  onWrite: ({ prompts, answers, data, file, cwd, api }) => {
     // ...
   }
 })
@@ -168,6 +168,7 @@ Arguments:
 - `answers`: answers data from the user inputs
 - `data`: read-only initial data read from the file
 - `file`: descriptor of the found file (`{ type: 'json', path: '...' }`)
+- `cwd`: current working directory
 - `api`: onWrite API
 
 Prompts runtime objects:

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

@@ -6,7 +6,7 @@ module.exports = api => {
     id: 'eslintrc',
     name: 'ESLint configuration',
     description: 'eslint.config.eslint.description',
-    link: 'https://eslint.org',
+    link: 'https://github.com/vuejs/eslint-plugin-vue',
     icon: '.eslintrc.json',
     files: {
       json: ['.eslintrc', '.eslintrc.json'],
@@ -178,10 +178,41 @@ module.exports = api => {
     }
   })
 
+  api.describeConfig({
+    id: 'eslintrc-config',
+    name: 'ESLint extra',
+    description: 'eslint.config.eslint-extra.description',
+    link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint#configuration',
+    icon: '.eslintrc.json',
+    files: {
+      js: ['vue.config.js']
+    },
+    onRead: ({ data }) => ({
+      prompts: [
+        {
+          name: 'lintOnSave',
+          type: 'confirm',
+          message: 'Lint on save',
+          description: 'Automatically lint source files when saved',
+          link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint#configuration',
+          default: false,
+          value: data.lintOnSave
+        }
+      ]
+    }),
+    onWrite: async ({ api, prompts }) => {
+      const result = {}
+      for (const prompt of prompts) {
+        result[prompt.id] = await api.getAnswer(prompt.id)
+      }
+      api.setData(result)
+    }
+  })
+
   // Tasks
   api.describeTask({
     match: /vue-cli-service lint/,
-    description: 'Lints and fixes files',
+    description: 'eslint.tasks.lint.description',
     link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint#injected-commands',
     prompts: [
       {

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

@@ -0,0 +1,138 @@
+/* eslint-disable vue-libs/no-async-functions */
+const path = require('path')
+const fs = require('fs')
+
+function readAppManifest (cwd) {
+  const manifestPath = path.join(cwd, 'public/manifest.json')
+  if (fs.existsSync(manifestPath)) {
+    try {
+      return JSON.parse(fs.readFileSync(manifestPath, { encoding: 'utf8' }))
+    } catch (e) {
+      console.log(`Can't read JSON in ${manifestPath}`)
+    }
+  }
+}
+
+function updateAppManifest (cwd, handler) {
+  const manifestPath = path.join(cwd, 'public/manifest.json')
+  if (fs.existsSync(manifestPath)) {
+    try {
+      const manifest = JSON.parse(fs.readFileSync(manifestPath, { encoding: 'utf8' }))
+      handler(manifest)
+      fs.writeFileSync(manifestPath, JSON.stringify(manifest), { encoding: 'utf8' })
+    } catch (e) {
+      console.log(`Can't update JSON in ${manifestPath}`)
+    }
+  }
+}
+
+module.exports = api => {
+  // Config file
+  api.describeConfig({
+    id: 'pwa',
+    name: 'PWA',
+    description: 'pwa.config.pwa.description',
+    link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration',
+    icon: 'mobile.xm',
+    files: {
+      js: ['vue.config.js']
+    },
+    onRead: ({ data, cwd }) => {
+      const manifest = readAppManifest(cwd)
+      return {
+        prompts: [
+          {
+            name: 'workboxPluginMode',
+            type: 'list',
+            message: 'Plugin mode',
+            description: 'This allows you to the choose between the two modes supported by the underlying `workbox-webpack-plugin`',
+            link: 'https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#which_plugin_to_use',
+            default: 'GenerateSW',
+            value: data.pwa && data.pwa.workboxPluginMode,
+            choices: [
+              {
+                name: 'GenerateSW',
+                value: 'GenerateSW'
+              },
+              {
+                name: 'InjectManifest',
+                value: 'InjectManifest'
+              }
+            ]
+          },
+          {
+            name: 'name',
+            type: 'input',
+            message: 'App name',
+            description: 'Used as the value for the `apple-mobile-web-app-title` meta tag in the generated HTML.',
+            value: data.pwa && data.pwa.name
+          },
+          {
+            name: 'themeColor',
+            type: 'input',
+            message: 'Theme color',
+            description: 'Color used to theme the browser',
+            default: '#4DBA87',
+            value: data.pwa && data.pwa.themeColor
+          },
+          {
+            name: 'backgroundColor',
+            type: 'input',
+            message: 'Splash background color',
+            description: 'Background color used for the app splash screen',
+            default: '#000000',
+            value: manifest && manifest.background_color,
+            skipSave: true
+          },
+          {
+            name: 'msTileColor',
+            type: 'input',
+            message: 'Windows app tile color',
+            description: 'Color used for the app tile on Windows',
+            default: '#000000',
+            value: data.pwa && data.pwa.msTileColor
+          },
+          {
+            name: 'appleMobileWebAppStatusBarStyle',
+            type: 'input',
+            message: 'Apple mobile status bar style',
+            description: 'Style for the web app status bar on iOS',
+            default: 'default',
+            value: data.pwa && data.pwa.appleMobileWebAppStatusBarStyle
+          }
+        ]
+      }
+    },
+    onWrite: async ({ api, prompts, cwd }) => {
+      const result = {}
+      for (const prompt of prompts.filter(p => !p.raw.skipSave)) {
+        result[`pwa.${prompt.id}`] = await api.getAnswer(prompt.id)
+      }
+      api.setData(result)
+
+      // Update app manifest
+
+      const name = result['pwa.name']
+      if (name) {
+        updateAppManifest(cwd, manifest => {
+          manifest.name = name
+          manifest.short_name = name
+        })
+      }
+
+      const themeColor = result['pwa.themeColor']
+      if (themeColor) {
+        updateAppManifest(cwd, manifest => {
+          manifest.theme_color = themeColor
+        })
+      }
+
+      const backgroundColor = await api.getAnswer('backgroundColor')
+      if (backgroundColor) {
+        updateAppManifest(cwd, manifest => {
+          manifest.background_color = backgroundColor
+        })
+      }
+    }
+  })
+}

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

@@ -109,6 +109,7 @@ async function getPrompts (id, context) {
       data
     }
     const configData = await config.onRead({
+      cwd: cwd.get(),
       data
     })
     await prompts.reset()
@@ -134,6 +135,7 @@ async function save (id, context) {
         answers,
         data: current.data,
         file: config.file,
+        cwd: cwd.get(),
         api: {
           assignData: newData => {
             changedFields.push(...Object.keys(newData))

packages/@vue/cli-ui/vue.config.js

@@ -1,6 +1,4 @@
 module.exports = {
-  lintOnSave: false,
-
   pluginOptions: {
     graphqlMock: false,
     apolloEngine: false,

packages/@vue/cli/locales/en.json

@@ -375,6 +375,21 @@
           "strongly-recommended": "Strongly recommended",
           "recommended": "Recommended"
         }
+      },
+      "eslint-extra": {
+        "description": "Extra ESLint settings"
+      }
+    },
+    "tasks": {
+      "lint": {
+        "description": "Lints and fixes files"
+      }
+    }
+  },
+  "pwa": {
+    "config": {
+      "pwa": {
+        "description": "Progressive Web App"
       }
     }
   }