From a88953fe8f566d80ead9b6f2140413002e12462a Mon Sep 17 00:00:00 2001
From: pooya parsa <pyapar@gmail.com>
Date: Wed, 17 Jun 2020 16:37:19 +0200
Subject: [PATCH] feat(cli): improve banner lines dx (#7537)

* feat: improve banner ocdx

* chore: make NODE_ENV more clear

* chore: update tests and improvements

* shame on me

* chore: mode ~> rendering
---
 packages/cli/src/utils/banner.js     | 29 ++++++++++++++++++++--------
 packages/cli/test/unit/utils.test.js | 10 +++++-----
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/packages/cli/src/utils/banner.js b/packages/cli/src/utils/banner.js
index c13fa41adf..496c5d0faa 100644
--- a/packages/cli/src/utils/banner.js
+++ b/packages/cli/src/utils/banner.js
@@ -21,21 +21,34 @@ export function showBanner (nuxt, showMemoryUsage = true) {
 
   // Name and version
   const { bannerColor, badgeMessages } = nuxt.options.cli
-  titleLines.push(`${chalk[bannerColor].bold('Nuxt.js')} ${nuxt.constructor.version}`)
+  titleLines.push(`${chalk[bannerColor].bold('Nuxt.js')} @ ${nuxt.constructor.version || 'exotic'}\n`)
 
-  // Running mode
-  const rendering = nuxt.options.render.ssr ? chalk.bold.yellow('server-side') : chalk.bold.yellow('client-side')
-  const envMode = nuxt.options.dev ? chalk.bold.blue('development') : chalk.bold.green('production')
-  const sentence = `△ Server: ${envMode}\n△ Rendering: ${rendering}\n△ Target: ${chalk.bold.cyan(nuxt.options.target)}`
-  titleLines.push(sentence)
+  const label = name => chalk.bold.cyan(`▸ ${name}:`)
+
+  // Environment
+  const isDev = nuxt.options.dev
+  let _env = isDev ? 'development' : 'production'
+  if (process.env.NODE_ENV !== _env) {
+    _env += ` (${chalk.cyan(process.env.NODE_ENV)})`
+  }
+  titleLines.push(`${label('Environment')} ${_env}`)
+
+  // Rendering
+  const isSSR = nuxt.options.render.ssr
+  const rendering = isSSR ? 'server-side' : 'client-side'
+  titleLines.push(`${label('Rendering')}   ${rendering}`)
+
+  // Target
+  const target = nuxt.options.target || 'server'
+  titleLines.push(`${label('Target')}      ${target}`)
 
   if (showMemoryUsage) {
-    titleLines.push(getFormattedMemoryUsage())
+    titleLines.push('\n' + getFormattedMemoryUsage())
   }
 
   // Listeners
   for (const listener of nuxt.server.listeners) {
-    messageLines.push(chalk.bold('Listening on: ') + chalk.underline.blue(listener.url))
+    messageLines.push(chalk.bold('Listening: ') + chalk.underline.blue(listener.url))
   }
 
   // Add custom badge messages
diff --git a/packages/cli/test/unit/utils.test.js b/packages/cli/test/unit/utils.test.js
index 3a8220a28a..4184c15b43 100644
--- a/packages/cli/test/unit/utils.test.js
+++ b/packages/cli/test/unit/utils.test.js
@@ -166,8 +166,8 @@ describe('cli/utils', () => {
     expect(successBox).toHaveBeenCalledTimes(1)
     expect(stdout).toHaveBeenCalledTimes(1)
     expect(stdout).toHaveBeenCalledWith(expect.stringMatching('Nuxt.js'))
-    expect(stdout).toHaveBeenCalledWith(expect.stringMatching(`Listening on: ${listeners[0].url}`))
-    expect(stdout).toHaveBeenCalledWith(expect.stringMatching(`Listening on: ${listeners[1].url}`))
+    expect(stdout).toHaveBeenCalledWith(expect.stringMatching(`Listening: ${listeners[0].url}`))
+    expect(stdout).toHaveBeenCalledWith(expect.stringMatching(`Listening: ${listeners[1].url}`))
     expect(stdout).toHaveBeenCalledWith(expect.stringMatching('Memory usage'))
     expect(stdout).toHaveBeenCalledWith(expect.stringMatching('badgeMessage'))
     stdout.mockRestore()
@@ -225,9 +225,9 @@ describe('cli/utils', () => {
     expect(successBox).toHaveBeenCalledTimes(1)
     expect(stdout).toHaveBeenCalledTimes(1)
     expect(stdout).toHaveBeenCalledWith(expect.stringMatching('Nuxt.js'))
-    expect(stdout).toHaveBeenCalledWith(expect.stringMatching('△ Server: production'))
-    expect(stdout).toHaveBeenCalledWith(expect.stringMatching('△ Rendering: client-side'))
-    expect(stdout).toHaveBeenCalledWith(expect.stringMatching('△ Target: static'))
+    expect(stdout).toHaveBeenCalledWith(expect.stringMatching('▸ Environment:'))
+    expect(stdout).toHaveBeenCalledWith(expect.stringMatching('▸ Rendering:'))
+    expect(stdout).toHaveBeenCalledWith(expect.stringMatching('▸ Target:'))
     stdout.mockRestore()
   })