refactor(ui): update all plugins in one command which is much quicker

Author: Guillaume Chau

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

@@ -154,7 +154,8 @@
       "plugin-install": "Installing {arg0}...",
       "plugin-uninstall": "Uninstalling {arg0}...",
       "plugin-invoke": "Invoking {arg0}...",
-      "plugin-update": "Updating {arg0}..."
+      "plugin-update": "Updating {arg0}...",
+      "plugins-update": "Updating {arg0} plugins..."
     }
   },
   "types": {

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

@@ -76,7 +76,7 @@ function findPlugins (deps) {
   )
 }
 
-function list (file, context) {
+function list (file, context, resetApi = true) {
   const pkg = folders.readPackage(file, context)
   plugins = []
   plugins = plugins.concat(findPlugins(pkg.devDependencies || {}))
@@ -90,7 +90,7 @@ function list (file, context) {
     plugins.unshift(service)
   }
 
-  resetPluginApi(context)
+  if (resetApi) resetPluginApi(context)
   return plugins
 }
 
@@ -379,7 +379,7 @@ async function initPrompts (id, context) {
   await prompts.start()
 }
 
-function update (id, context, multi = false) {
+function update (id, context) {
   return progress.wrap('plugin-update', context, async setProgress => {
     setProgress({
       status: 'plugin-update',
@@ -396,38 +396,56 @@ function update (id, context, multi = false) {
       type: 'info'
     }, context)
 
-    if (!multi) {
-      notify({
-        title: `Plugin updated`,
-        message: `Plugin ${id} was successfully updated`,
-        icon: 'done'
-      })
-      resetPluginApi(context)
-    }
+    notify({
+      title: `Plugin updated`,
+      message: `Plugin ${id} was successfully updated`,
+      icon: 'done'
+    })
+    resetPluginApi(context)
 
     currentPluginId = null
     return findOne(id)
   })
 }
 
 async function updateAll (context) {
-  const plugins = await list(cwd.get(), context)
-  let updatedPlugins = []
-  for (const plugin of plugins) {
-    const version = await getVersion(plugin, context)
-    if (version.current !== version.wanted) {
-      updatedPlugins.push(await update(plugin.id, context, true))
+  return progress.wrap('plugins-update', context, async setProgress => {
+    const plugins = await list(cwd.get(), context, false)
+    let updatedPlugins = []
+    for (const plugin of plugins) {
+      const version = await getVersion(plugin, context)
+      if (version.current !== version.wanted) {
+        updatedPlugins.push(plugin)
+      }
     }
-  }
 
-  notify({
-    title: `Plugins updated`,
-    message: `${updatedPlugins.length} plugin(s) were successfully updated`,
-    icon: 'done'
-  })
-  resetPluginApi(context)
+    if (!updatedPlugins.length) {
+      notify({
+        title: `No updates available`,
+        message: `No plugin to update in the version ranges declared in package.json`,
+        icon: 'done'
+      })
+      return []
+    }
+
+    setProgress({
+      status: 'plugins-update',
+      args: [updatedPlugins.length]
+    })
+
+    await updatePackage(cwd.get(), getCommand(), null, updatedPlugins.map(
+      p => p.id
+    ).join(' '))
 
-  return updatedPlugins
+    notify({
+      title: `Plugins updated`,
+      message: `${updatedPlugins.length} plugin(s) were successfully updated`,
+      icon: 'done'
+    })
+    resetPluginApi(context)
+
+    return updatedPlugins
+  })
 }
 
 function getApi () {

packages/@vue/cli-ui/src/views/ProjectPlugins.vue

@@ -50,9 +50,8 @@
       </ApolloQuery>
     </ContentView>
 
-    <ProgressScreen
-      progress-id="plugin-update"
-    />
+    <ProgressScreen progress-id="plugin-update"/>
+    <ProgressScreen progress-id="plugins-update"/>
   </div>
 </template>
 

packages/@vue/cli/lib/util/installDeps.js

@@ -242,7 +242,7 @@ exports.updatePackage = async function (targetDir, command, cliRegistry, package
 
   await addRegistryToArgs(command, args, cliRegistry)
 
-  args.push(packageName)
+  packageName.split(' ').forEach(name => args.push(name))
 
   debug(`command: `, command)
   debug(`args: `, args)