refactor: update cli output (#16)

Author: ivodolenc

src/bin/build.ts

@@ -11,18 +11,27 @@ import resolvePlugin from '@rollup/plugin-node-resolve'
 import aliasPlugin from '@rollup/plugin-alias'
 import { dts as dtsPlugin } from 'rollup-plugin-dts'
 import { esbuild as esbuildPlugin } from '@/utils/plugins/esbuild'
-import { getOutputPath, formatMs, formatBytes, error } from '@/utils'
+import {
+  getOutputPath,
+  getLongestOutput,
+  formatMs,
+  formatBytes,
+  error,
+} from '@/utils'
 import type { ModuleFormat } from 'rollup'
 import type { RollupAliasOptions } from '@rollup/plugin-alias'
 import type { Options, BuildStats, BuildLogs } from '@/types'
 
-function logModuleStats(file: {
-  format: string
-  path: string
-  buildTime: number
-  size: number
-  logs: BuildLogs[]
-}) {
+function logModuleStats(
+  file: {
+    format: string
+    path: string
+    buildTime: number
+    size: number
+    logs: BuildLogs[]
+  },
+  longestOutput: number,
+) {
   const cl = console.log
   const base = parse(file.path).base
   const path = file.path.replace(base, '')
@@ -32,17 +41,32 @@ function logModuleStats(file: {
   if (format === 'commonjs') format = 'cjs'
   if (format === 'module') format = 'esm'
 
+  longestOutput = longestOutput + 2
+  const ansiCode = 9
+  const pathDim = dim(path)
+  const output = pathDim + base
+  const pathDimNoAnsi = pathDim.length - ansiCode
+  const difference = longestOutput - pathDimNoAnsi - base.length
+  const padLength = output.length + difference
+
   cl(
-    dim('├─'),
-    `+ ${format}`,
-    dim(path) + base,
-    dim(`(${formatMs(file.buildTime)})`),
+    dim('+'),
+    format.padEnd(5),
+    output.padEnd(padLength),
+    dim('time'),
+    formatMs(file.buildTime).padEnd(7),
+    dim('size'),
     formatBytes(file.size),
   )
 
   if (file.logs) {
     for (const log of file.logs) {
-      cl(dim('├─'), `! ${log.level}`, dim(path) + base, dim(log.log.message))
+      cl(
+        dim('!'),
+        log.level.padEnd(5),
+        output.padEnd(padLength),
+        dim(log.log.message),
+      )
     }
   }
 }
@@ -64,6 +88,8 @@ export async function build(
   await hooks?.['build:start']?.(options, buildStats)
 
   if (options.entries) {
+    const longestOutput = getLongestOutput(outDir, options.entries)
+
     start = Date.now()
 
     const aliasDir = resolve(cwd, './src')
@@ -133,7 +159,7 @@ export async function build(
           buildStats.files.push(fileStats)
           buildStats.size = buildStats.size + stats.size
 
-          logModuleStats(fileStats)
+          logModuleStats(fileStats, longestOutput)
         }
       }
 
@@ -234,7 +260,7 @@ export async function build(
         buildStats.files.push(file)
         buildStats.size = buildStats.size + stats.size
 
-        logModuleStats(file)
+        logModuleStats(file, longestOutput)
 
         await hooks?.['build:entry:end']?.(_entry, buildStats)
       }
@@ -300,7 +326,7 @@ export async function build(
         buildStats.files.push(fileStats)
         buildStats.size = buildStats.size + stats.size
 
-        logModuleStats(fileStats)
+        logModuleStats(fileStats, longestOutput)
 
         await hooks?.['build:entry:end']?.(_entry, buildStats)
       }
@@ -328,7 +354,7 @@ export async function build(
         buildStats.files.push(fileStats)
         buildStats.size = buildStats.size + stats.size
 
-        logModuleStats(fileStats)
+        logModuleStats(fileStats, longestOutput)
       }
     }
 

src/bin/builder.ts

@@ -1,5 +1,5 @@
-import { green, dim, bold } from '@hypernym/colors'
-import { logoname, version } from './meta'
+import { dim } from '@hypernym/colors'
+import { version } from './meta'
 import { build } from './build'
 import { logger, formatMs, formatBytes, error } from '@/utils'
 import type { ConfigLoader } from '@/types'
@@ -14,42 +14,33 @@ export async function createBuilder(
   const cl = console.log
 
   await hooks?.['bundle:start']?.(options)
-  const line = '─'.repeat(logoname.length + 2)
 
-  cl()
-  cl(dim(`┌${line}┐`))
-  cl(dim('│'), `${logoname.toUpperCase()}`, dim('│'), dim(`v${version}`))
-  cl(dim(`└${line}┘`))
-  cl(dim(bold('i')), 'Config', dim(configPath))
-  cl(dim(bold('i')), 'Bundling started...')
+  logger.info(dim(`v${version}`))
+  cl('Config', dim(configPath))
+  cl('Bundling started...')
   cl(
-    dim(bold('*')),
     'Processing',
     dim(`[${new Date().toLocaleTimeString()}]`),
     'Transforming files',
   )
-  cl(dim('│'))
+  cl()
 
   await build(cwd, options)
     .then((stats) => {
-      const check = green(bold('✔'))
-      const buildTime = green(formatMs(stats.buildTime))
-      const buildSize = green(formatBytes(stats.size))
+      const buildTime = dim(formatMs(stats.buildTime))
+      const buildSize = dim(formatBytes(stats.size))
       const totalModules = stats.files.length
       const modules =
-        totalModules > 1
-          ? `${green(totalModules)} modules`
-          : `${green(totalModules)} module`
+        totalModules > 1 ? `${totalModules} modules` : `${totalModules} module`
 
-      cl(dim('│'))
+      cl()
       cl(
-        dim(bold('*')),
         'Succeeded',
         dim(`[${new Date().toLocaleTimeString()}]`),
         'Module transformation is done',
       )
-      cl(check, `Bundling fully completed in ${buildTime}`)
-      cl(check, `${modules} transformed. Total size is ${buildSize}`)
+      cl(`Bundling fully completed in ${buildTime}`)
+      cl(`${modules} transformed. Total size is ${buildSize}`)
       logger.info(`Bundle is generated and ready for production`)
       cl()
     })

src/utils/get-longest-output.ts

@@ -0,0 +1,32 @@
+import { getOutputPath } from './get-output-path'
+import type { Options } from '@/types'
+
+export function getLongestOutput(
+  outDir: string,
+  entries: Options['entries'],
+): number {
+  const outputs: string[] = []
+
+  for (const entry of entries) {
+    if ('copy' in entry && entry.copy) {
+      const out = entry.copy.output
+      outputs.push(out)
+    }
+
+    if ('input' in entry && entry.input) {
+      const out = entry.output || getOutputPath(outDir, entry.input)
+      outputs.push(out)
+    }
+
+    if ('declaration' in entry && entry.declaration) {
+      const out = entry.output || getOutputPath(outDir, entry.declaration, true)
+      outputs.push(out)
+    }
+
+    if ('template' in entry && entry.template) {
+      outputs.push(entry.output)
+    }
+  }
+
+  return Math.max(...outputs.map((v) => v.length))
+}

src/utils/index.ts

@@ -3,3 +3,4 @@ export * from './error'
 export * from './format-ms'
 export * from './format-bytes'
 export * from './get-output-path'
+export * from './get-longest-output'

src/utils/logger.ts

@@ -1,22 +1,23 @@
 import process from 'node:process'
 import { dim } from '@hypernym/colors'
-import { logoname } from '@/bin/meta'
+import { logo } from '@/bin/meta'
 
-const name = logoname.toUpperCase()
 const cl = console.log
+const separator = `/`
 
 export const logger = {
   info: (...args: any[]): void => {
-    const time = new Date().toLocaleTimeString()
-    return cl(name, dim(`[${time}]`), ...args)
+    cl(logo, dim(separator), ...args)
   },
   error: (...args: any[]): void => {
-    const time = new Date().toLocaleTimeString()
-    return cl(name, dim(`[${time}]`), ...args)
+    cl()
+    cl(logo, dim(separator), ...args)
+    cl()
   },
   exit: (message: string): never => {
-    const time = new Date().toLocaleTimeString()
-    cl(name, dim(`[${time}]`), message)
+    cl()
+    cl(logo, dim(separator), message)
+    cl()
 
     return process.exit()
   },