fix(cli): drop clack gutter framing from redirected output

Author: danielroe

packages/nuxt-cli/src/commands/add-template.ts

@@ -4,12 +4,11 @@ import { promises as fsp } from 'node:fs'
 importprocessfrom'node:process'
 import{styleText}from'node:util'
 
-import{intro,outro}from'@clack/prompts'
 import{defineCommand}from'citty'
 import{dirname,isAbsolute,relative,resolve}from'pathe'
 
 import{loadKit}from'../utils/kit'
-import{logger}from'../utils/logger'
+import{intro,logger,outro}from'../utils/logger'
 import{relativeToProcess}from'../utils/paths'
 import{templates}from'../utils/templates/index'
 import{httpMethods,modes}from'../utils/templates/modifiers'

packages/nuxt-cli/src/commands/analyze.ts

@@ -4,7 +4,7 @@ import { promises as fsp } from 'node:fs'
 importprocessfrom'node:process'
 
 import{styleText}from'node:util'
-import{intro,note,outro,taskLog}from'@clack/prompts'
+import{note,taskLog}from'@clack/prompts'
 import{defineCommand}from'citty'
 import{defu}from'defu'
 import{join,relative,resolve}from'pathe'
@@ -16,7 +16,7 @@ import { ActionableError } from '../utils/errors'
 import{clearDir}from'../utils/fs'
 import{loadKit}from'../utils/kit'
 import{acquireLock,acquireOutputLock,formatLockError}from'../utils/lockfile'
-import{logger}from'../utils/logger'
+import{intro,logger,outro}from'../utils/logger'
 import{relativeToProcess,resolveRootDir}from'../utils/paths'
 import{dotEnvArgs,extendsArgs,logLevelArgs,rootDirArgs}from'./_shared'
 

packages/nuxt-cli/src/commands/build.ts

@@ -1,7 +1,6 @@
 importprocessfrom'node:process'
 
 import{styleText}from'node:util'
-import{intro,outro}from'@clack/prompts'
 import{defineCommand}from'citty'
 
 import{relative}from'pathe'
@@ -14,7 +13,7 @@ import { formatDuration } from '../utils/formatting'
 import{clearBuildDir}from'../utils/fs'
 import{loadKit}from'../utils/kit'
 import{acquireLock,acquireOutputLock,formatLockError}from'../utils/lockfile'
-import{logger}from'../utils/logger'
+import{intro,logger,outro}from'../utils/logger'
 import{resolveRootDir}from'../utils/paths'
 import{startCpuProfile,stopCpuProfile}from'../utils/profile'
 import{dotEnvArgs,envNameArgs,extendsArgs,logLevelArgs,profileArgs,rootDirArgs}from'./_shared'

packages/nuxt-cli/src/commands/preview.ts

@@ -3,15 +3,15 @@ import { dirname } from 'node:path'
 importprocessfrom'node:process'
 
 import{styleText}from'node:util'
-import{box,outro}from'@clack/prompts'
+import{box}from'@clack/prompts'
 import{tokenizeArgs}from'args-tokenizer'
 import{defineCommand}from'citty'
 import{resolve}from'pathe'
 import{x}from'tinyexec'
 
 import{resolveDotenvFileNames}from'../utils/args'
 import{loadKit}from'../utils/kit'
-import{logger}from'../utils/logger'
+import{logger,outro}from'../utils/logger'
 import{withPrependedPath}from'../utils/path-env'
 import{relativeToProcess,resolveRootDir}from'../utils/paths'
 import{dotEnvArgs,envNameArgs,extendsArgs,logLevelArgs,rootDirArgs}from'./_shared'

packages/nuxt-cli/src/commands/upgrade.ts

@@ -7,7 +7,7 @@ import { existsSync } from 'node:fs'
 importprocessfrom'node:process'
 
 import{styleText}from'node:util'
-import{cancel,intro,isCancel,note,outro,select,spinner}from'@clack/prompts'
+import{cancel,isCancel,note,select,spinner}from'@clack/prompts'
 import{defineCommand}from'citty'
 import{detectPackageManager}from'nypm'
 import{dirname,relative,resolve}from'pathe'
@@ -16,7 +16,7 @@ import { findWorkspaceDir, readPackageJSON } from 'pkg-types'
 import{resolveCatalogEntry,updateCatalogEntries}from'../utils/catalog'
 import{createInstallLog,runDedupe,runInstall,takeUnreportedIgnoredBuilds}from'../utils/install'
 import{loadKit}from'../utils/kit'
-import{logger}from'../utils/logger'
+import{intro,logger,outro}from'../utils/logger'
 import{cleanupNuxtDirs,nuxtVersionToGitIdentifier}from'../utils/nuxt'
 import{getPackageManagerVersion}from'../utils/packageManagers'
 import{relativeToProcess,resolveRootDir}from'../utils/paths'

packages/nuxt-cli/src/utils/logger.ts

@@ -1,12 +1,39 @@
+importprocessfrom'node:process'
 import{styleText}from'node:util'
-import{log,S_INFO}from'@clack/prompts'
+import{introasclackIntro,outroasclackOutro,log,S_ERROR,S_INFO,S_STEP_SUBMIT,S_SUCCESS,S_WARN}from'@clack/prompts'
 import{createDebug}from'obug'
+import{isCI}from'std-env'
 
 import{blankLineBefore,writeDirect}from'./stdout'
 
 typeLoggerImpl=Pick<typeoflog,'info'|'warn'|'error'|'success'|'step'|'message'>
 
-letimpl: LoggerImpl=log
+typeLineColor='blue'|'yellow'|'red'|'green'
+
+/**
+ * A log line with no clack framing: the `│` gutter connects one prompt to the
+ * next on screen, and in a redirected log it is a bare column of punctuation
+ * between every line of real output.
+ */
+functionplainLine(symbol: string,color: LineColor,message?: string): void{
+constbody=String(message??'').replace(/\n/g,'\n ')
+writeDirect(`${styleText(color,symbol)}${body}\n`)
+}
+
+constplain: LoggerImpl={
+info: message=>plainLine(S_INFO,'blue',message),
+warn: message=>plainLine(S_WARN,'yellow',message),
+error: message=>plainLine(S_ERROR,'red',message),
+success: message=>plainLine(S_SUCCESS,'green',message),
+step: message=>plainLine(S_STEP_SUBMIT,'green',message),
+message: message=>writeDirect(`${String(message??'')}\n`),
+}
+
+functiondefaultImpl(): LoggerImpl{
+return!process.stdout.isTTY||isCI ? plain : log
+}
+
+letimpl: LoggerImpl|undefined
 letdepth=0
 
 /**
@@ -36,16 +63,37 @@ function emit<T>(write: () => T): T {
  * guideline, which reads as a stray artefact next to a persistent footer.
  */
 exportfunctionsetLoggerImpl(next?: LoggerImpl): void{
-impl=next??log
+impl=next
 }
 
 exportconstlogger: LoggerImpl={
-info: message=>emit(()=>impl.info(message)),
-warn: message=>emit(()=>impl.warn(message)),
-error: message=>emit(()=>impl.error(message)),
-success: message=>emit(()=>impl.success(message)),
-step: message=>emit(()=>impl.step(message)),
-message: (message,options)=>emit(()=>impl.message(message,options)),
+info: message=>emit(()=>(impl??defaultImpl()).info(message)),
+warn: message=>emit(()=>(impl??defaultImpl()).warn(message)),
+error: message=>emit(()=>(impl??defaultImpl()).error(message)),
+success: message=>emit(()=>(impl??defaultImpl()).success(message)),
+step: message=>emit(()=>(impl??defaultImpl()).step(message)),
+message: (message,options)=>emit(()=>(impl??defaultImpl()).message(message,options)),
+}
+
+/**
+ * Open a command's output. Falls back to a bare headline where clack's opening
+ * corner would only introduce a gutter nothing draws against.
+ */
+exportfunctionintro(message: string): void{
+if(!process.stdout.isTTY||isCI){
+writeDirect(`${message}\n`)
+return
+}
+clackIntro(message)
+}
+
+/** {@link intro}, for the line a command finishes on. */
+exportfunctionoutro(message: string): void{
+if(!process.stdout.isTTY||isCI){
+writeDirect(`${styleText('green',S_SUCCESS)}${message}\n`)
+return
+}
+clackOutro(message)
 }
 
 exportconstdebug=createDebug('nuxi')

packages/nuxt-cli/test/unit/commands/build.spec.ts

@@ -37,6 +37,8 @@ vi.mock('../../../src/utils/lockfile', () => ({
 }))
 vi.mock('../../../src/utils/logger',()=>({
 logger: {error: vi.fn(),info: vi.fn(),warn: vi.fn()},
+intro: vi.fn(),
+outro: vi.fn(),
 }))
 vi.mock('../../../src/utils/profile',()=>({
 startCpuProfile: mocks.startCpuProfile,

packages/nuxt-cli/test/unit/utils/banner.spec.ts

@@ -4,6 +4,11 @@ import { describe, expect, it, vi } from 'vitest'
 
 import{render,screen}from'../../utils/terminal'
 
+vi.mock('std-env',asyncimportOriginal=>({
+ ...awaitimportOriginal<typeofimport('std-env')>(),
+isCI: false,
+}))
+
 constVERSIONS: Record<string,string>={
 'webpack': '5.99.0',
 '@rspack/core': '1.3.0',

packages/nuxt-cli/test/unit/utils/logger.spec.ts

@@ -0,0 +1,72 @@
+import{afterEach,describe,expect,it,vi}from'vitest'
+
+import{stripAnsi}from'../../../src/dev/tui/width'
+import{logger}from'../../../src/utils/logger'
+
+constenvironment=vi.hoisted(()=>({isCI: false}))
+
+vi.mock('std-env',asyncimportOriginal=>({
+ ...awaitimportOriginal<typeofimport('std-env')>(),
+getisCI(){
+returnenvironment.isCI
+},
+}))
+
+describe('logger',()=>{
+constrestores: Array<()=>void>=[]
+
+afterEach(()=>{
+restores.splice(0).forEach(restore=>restore())
+environment.isCI=false
+vi.restoreAllMocks()
+})
+
+functioncapture(isTTY: boolean): {written: ()=>string}{
+constoriginal=process.stdout.isTTY
+Object.defineProperty(process.stdout,'isTTY',{value: isTTY,configurable: true})
+restores.push(()=>Object.defineProperty(process.stdout,'isTTY',{value: original,configurable: true}))
+
+constchunks: string[]=[]
+constwrite=vi.spyOn(process.stdout,'write').mockImplementation((chunk: unknown)=>{
+chunks.push(String(chunk))
+returntrue
+})
+restores.push(()=>write.mockRestore())
+
+return{written: ()=>stripAnsi(chunks.join(''))}
+}
+
+it('should leave no clack gutter in redirected output',()=>{
+const{ written }=capture(false)
+
+logger.info('Bundling app')
+logger.warn('Slow')
+
+expect(written()).toBe('● Bundling app\n▲ Slow\n')
+})
+
+it('should keep clack framing in a terminal',()=>{
+const{ written }=capture(true)
+
+logger.info('Bundling app')
+
+expect(written()).toContain('│\n')
+})
+
+it('should leave no clack gutter in CI, where nothing draws against it',()=>{
+environment.isCI=true
+const{ written }=capture(true)
+
+logger.info('Bundling app')
+
+expect(written()).toBe('● Bundling app\n')
+})
+
+it('should indent a continuation line under its symbol',()=>{
+const{ written }=capture(false)
+
+logger.info('Ready in 2.4s\nconfig 320ms')
+
+expect(written()).toBe('● Ready in 2.4s\n config 320ms\n')
+})
+})