chore: better upgrade messages (#3926)

* chore: better upgrade messages

* feat: try to find the right command to update

Author: phanan

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

@@ -1,7 +1,29 @@
 const chalk = require('chalk')
+const execa = require('execa')
 const semver = require('semver')
 const getVersions = require('./getVersions')
-const { clearConsole } = require('@vue/cli-shared-utils')
+const { clearConsole, hasYarn, hasPnpm3OrLater } = require('@vue/cli-shared-utils')
+
+async function getInstallationCommand () {
+  if (hasYarn()) {
+    const { stdout: yarnGlobalDir } = await execa('yarn', ['global', 'dir'])
+    if (__dirname.includes(yarnGlobalDir)) {
+      return 'yarn global add'
+    }
+  }
+
+  if (hasPnpm3OrLater()) {
+    const { stdout: pnpmGlobalPrefix } = await execa('pnpm', ['config', 'get', 'prefix'])
+    if (__dirname.includes(pnpmGlobalPrefix) && __dirname.includes('pnpm-global')) {
+      return `pnpm i -g`
+    }
+  }
+
+  const { stdout: npmGlobalPrefix } = await execa('npm', ['config', 'get', 'prefix'])
+  if (__dirname.includes(npmGlobalPrefix)) {
+    return `npm i -g`
+  }
+}
 
 exports.generateTitle = async function (checkUpdate) {
   const { current, latest } = await getVersions()
@@ -16,12 +38,31 @@ exports.generateTitle = async function (checkUpdate) {
   }
   if (checkUpdate && semver.gt(latest, current)) {
     if (process.env.VUE_CLI_API_MODE) {
-      title += chalk.green(` 🌟️ Update available: ${latest}`)
+      title += chalk.green(` 🌟️ New version available: ${latest}`)
     } else {
-      title += chalk.green(`
-┌────────────────────${`─`.repeat(latest.length)}──┐
-│  Update available: ${latest}  │
-└────────────────────${`─`.repeat(latest.length)}──┘`)
+      let upgradeMessage = `New version available ${chalk.magenta(current)} → ${chalk.green(latest)}`
+
+      try {
+        const command = await getInstallationCommand()
+        let name = require('../../package.json').name
+        if (semver.prerelease(latest)) {
+          name += '@next'
+        }
+
+        if (command) {
+          upgradeMessage +=
+            `\nRun ${chalk.yellow(`${command} ${name}`)} to update!`
+        }
+      } catch (e) {}
+
+      const upgradeBox = require('boxen')(upgradeMessage, {
+        align: 'center',
+        borderColor: 'green',
+        dimBorder: true,
+        padding: 1
+      })
+
+      title += `\n${upgradeBox}\n`
     }
   }
 

packages/@vue/cli/package.json

@@ -28,6 +28,7 @@
     "@vue/cli-ui": "^4.0.0-rc.7",
     "@vue/cli-ui-addon-webpack": "^4.0.0-rc.7",
     "@vue/cli-ui-addon-widgets": "^4.0.0-rc.7",
+    "boxen": "^4.1.0",
     "chalk": "^2.4.1",
     "cmd-shim": "^2.0.2",
     "commander": "^2.20.0",