Repository: nuxt/nuxt.js
Pull request #7537 (2020-06-17 12:45:44)

feat(cli): improve banner lines dx
<!--- Provide a general summary of your changes in the title above -->

## Types of changes
<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
- [ ] Bug fix (a non-breaking change which fixes an issue)
- [ ] New feature (a non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to change)


## Description
<!--- Describe your changes in detail -->
<!--- Why is this change required? What problem does it solve? -->
<!--- If it resolves an open issue, please link to the issue here. For example "Resolves: #1337" -->

- Alignments for OCD people like me
- Use cyan to keep consistent with all **informative** messages and avoid drawing attention
- The environment is `development` or `production` with notice of custom `NODE_ENV` if provided.

Before:

![image](https://user-images.githubusercontent.com/5158436/84897363-bcb08980-b0a5-11ea-9e1d-0baec6d70452.png)


After (prod with custom `NODE_ENV`):

![image](https://user-images.githubusercontent.com/5158436/84904368-8841cb00-b0af-11ea-9dfc-f3329923bb9b.png)

windows: (outdated)

![image](https://user-images.githubusercontent.com/5158436/84903586-917e6800-b0ae-11ea-8b7c-df081fc45a41.png)



## Checklist:
<!--- Put an `x` in all the boxes that apply. -->
<!--- If your change requires a documentation PR, please link it appropriately -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly. (PR: #)
- [ ] I have added tests to cover my changes (if not applicable, please state why)
- [ ] All new and existing tests are passing.



codecov-commenter: # [Codecov](https://codecov.io/gh/nuxt/nuxt.js/pull/7537?src=pr&el=h1) Report
> Merging [#7537](https://codecov.io/gh/nuxt/nuxt.js/pull/7537?src=pr&el=desc) into [dev](https://codecov.io/gh/nuxt/nuxt.js/commit/5cfaf0aca10a549e35d6008ead2e57281f76336f&el=desc) will **increase** coverage by `0.05%`.
> The diff coverage is `100.00%`.

[![Impacted file tree graph](https://codecov.io/gh/nuxt/nuxt.js/pull/7537/graphs/tree.svg?width=650&height=150&src=pr&token=nGD1PtMB3M)](https://codecov.io/gh/nuxt/nuxt.js/pull/7537?src=pr&el=tree)

```diff
@@            Coverage Diff             @@
##              dev    #7537      +/-   ##
==========================================
+ Coverage   70.21%   70.26%   +0.05%     
==========================================
  Files          88       88              
  Lines        3740     3747       +7     
  Branches     1017     1020       +3     
==========================================
+ Hits         2626     2633       +7     
  Misses        905      905              
  Partials      209      209              
```

| Flag | Coverage Δ | |
|---|---|---|
| #unittests | `70.26% <100.00%> (+0.05%)` | :arrow_up: |

| [Impacted Files](https://codecov.io/gh/nuxt/nuxt.js/pull/7537?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [packages/cli/src/utils/banner.js](https://codecov.io/gh/nuxt/nuxt.js/pull/7537/diff?src=pr&el=tree#diff-cGFja2FnZXMvY2xpL3NyYy91dGlscy9iYW5uZXIuanM=) | `100.00% <100.00%> (ø)` | |

------

[Continue to review full report at Codecov](https://codecov.io/gh/nuxt/nuxt.js/pull/7537?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/nuxt/nuxt.js/pull/7537?src=pr&el=footer). Last update [5cfaf0a...02dafb3](https://codecov.io/gh/nuxt/nuxt.js/pull/7537?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).

pi0: @clarkdo It is however only for our internal development not end-users :)

![image](https://user-images.githubusercontent.com/5158436/84902799-92fb6080-b0ad-11ea-84bd-fd5347f2d712.png)


pimlie: What is `mode: server-side`? I understand the first `Rendering: server-side` but `mode: server-side` doesnt seem to make much sense to me.
manniL: Maybe `ssr: enabled` / `ssr: disabled` instead? 🤔 
Atinux: I am not found of using acronyms here since it targets also beginners, Rendering: server-side looks good :)
manniL: > I am not found of using acronyms here since it targets also beginners

..which should learn what SSR means anyway when they are using it through dynamic SSR or static site generation, right? 😋 

Patch:
diff --git a/packages/cli/src/utils/banner.js b/packages/cli/src/utils/banner.js
index c13fa41ad..496c5d0fa 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


Test patch:
diff --git a/packages/cli/test/unit/utils.test.js b/packages/cli/test/unit/utils.test.js
index 3a8220a28..4184c15b4 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()
   })