chore: improve logging

Author: meteorlxy

packages/bundler-vite/src/build/build.ts

@@ -1,12 +1,14 @@
 import type { CreateVueAppFunction } from '@vuepress/client'
 import type { App, Bundler } from '@vuepress/core'
-import { chalk, fs, importFile, ora, withSpinner } from '@vuepress/utils'
+import { chalk, debug, fs, importFile, withSpinner } from '@vuepress/utils'
 import type { OutputAsset, OutputChunk, RollupOutput } from 'rollup'
 import { build as viteBuild } from 'vite'
 import { resolveViteConfig } from '../resolveViteConfig.js'
 import type { ViteBundlerOptions } from '../types.js'
 import { renderPage } from './renderPage.js'
 
+const log = debug('vuepress:bundler-vite/build')
+
 export const build = async (
   options: ViteBundlerOptions,
   app: App
@@ -15,6 +17,7 @@ export const build = async (
   await app.pluginApi.hooks.extendsBundlerOptions.process(options, app)
 
   // vite compile
+  log('compiling start')
   let clientOutput!: RollupOutput
   let serverOutput!: RollupOutput
   await withSpinner('Compiling with vite')(async () => {
@@ -37,9 +40,10 @@ export const build = async (
       viteBuild(serverConfig) as Promise<RollupOutput>,
     ])
   })
+  log('compiling finish')
 
   // render pages
-  await withSpinner('Rendering pages')(async () => {
+  await withSpinner(`Rendering ${app.pages.length} pages`)(async (spinner) => {
     // load ssr template file
     const ssrTemplate = (
       await fs.readFile(app.options.templateBuild)
@@ -66,9 +70,10 @@ export const build = async (
     }>(serverEntryPath)
 
     // pre-render pages to html files
-    const spinner = ora()
     for (const page of app.pages) {
-      spinner.start(`Rendering pages ${chalk.magenta(page.path)}`)
+      if (spinner) {
+        spinner.text = `Rendering pages ${chalk.magenta(page.path)}`
+      }
       await renderPage({
         app,
         page,
@@ -79,7 +84,6 @@ export const build = async (
         outputCssAsset: clientCssAsset,
       })
     }
-    spinner.stop()
   })
 
   // keep the server bundle files in debug mode

packages/bundler-webpack/src/build/build.ts

@@ -1,6 +1,12 @@
 import type { CreateVueAppFunction } from '@vuepress/client'
 import type { App, Bundler } from '@vuepress/core'
-import { chalk, fs, importFileDefault, ora, withSpinner } from '@vuepress/utils'
+import {
+  chalk,
+  debug,
+  fs,
+  importFileDefault,
+  withSpinner,
+} from '@vuepress/utils'
 import webpack from 'webpack'
 import { resolveWebpackConfig } from '../resolveWebpackConfig.js'
 import type { WebpackBundlerOptions } from '../types.js'
@@ -13,6 +19,8 @@ import { renderPage } from './renderPage.js'
 import { resolveClientManifestMeta } from './resolveClientManifestMeta.js'
 import type { ClientManifest } from './ssr/index.js'
 
+const log = debug('vuepress:bundler-webpack/build')
+
 export const build = async (
   options: WebpackBundlerOptions,
   app: App
@@ -21,6 +29,7 @@ export const build = async (
   await app.pluginApi.hooks.extendsBundlerOptions.process(options, app)
 
   // webpack compile
+  log('compiling start')
   await withSpinner('Compiling with webpack')(async () => {
     // create webpack config
     const clientConfig = resolveWebpackConfig({
@@ -56,9 +65,10 @@ export const build = async (
       })
     })
   })
+  log('compiling finish')
 
   // render pages
-  await withSpinner('Rendering pages')(async () => {
+  await withSpinner(`Rendering ${app.pages.length} pages`)(async (spinner) => {
     // load ssr template file
     const ssrTemplate = (
       await fs.readFile(app.options.templateBuild)
@@ -83,9 +93,10 @@ export const build = async (
     }>(serverEntryPath)
 
     // pre-render pages to html files
-    const spinner = ora()
     for (const page of app.pages) {
-      spinner.start(`Rendering pages ${chalk.magenta(page.path)}`)
+      if (spinner) {
+        spinner.text = `Rendering pages ${chalk.magenta(page.path)}`
+      }
       await renderPage({
         app,
         page,
@@ -97,7 +108,6 @@ export const build = async (
         moduleFilesMetaMap,
       })
     }
-    spinner.stop()
   })
 
   // keep the server bundle files in debug mode

packages/cli/src/commands/build/createBuild.ts

@@ -1,7 +1,7 @@
 import process from 'node:process'
 import { createBuildApp } from '@vuepress/core'
 import type { AppConfig } from '@vuepress/core'
-import { debug, fs, logger } from '@vuepress/utils'
+import { debug, formatMs, fs, logger, withSpinner } from '@vuepress/utils'
 import {
   loadUserConfig,
   resolveAppConfig,
@@ -17,6 +17,8 @@ const log = debug('vuepress:cli/build')
 export const createBuild =
   (defaultAppConfig: Partial<AppConfig>): BuildCommand =>
   async (sourceDir = '.', commandOptions = {}): Promise<void> => {
+    const start = Date.now()
+
     log(`commandOptions:`, commandOptions)
 
     if (process.env.NODE_ENV === undefined) {
@@ -51,28 +53,32 @@ export const createBuild =
 
     // clean temp and cache
     if (commandOptions.cleanTemp === true) {
-      logger.info('Cleaning temp...')
-      await fs.remove(app.dir.temp())
+      await withSpinner('Cleaning temp')(() => {
+        return fs.remove(app.dir.temp())
+      })
     }
     if (commandOptions.cleanCache === true) {
-      logger.info('Cleaning cache...')
-      await fs.remove(app.dir.cache())
+      await withSpinner('Cleaning cache')(() => {
+        return fs.remove(app.dir.cache())
+      })
     }
 
     // empty dest directory
     await fs.emptyDir(app.dir.dest())
 
     // initialize and prepare
-    logger.info('Initializing VuePress and preparing data...')
-
-    await app.init()
-    await app.prepare()
+    await withSpinner('Initializing and preparing data')(async () => {
+      await app.init()
+      await app.prepare()
+    })
 
     // build
     await app.build()
 
     // plugin hook: onGenerated
     await app.pluginApi.hooks.onGenerated.process(app)
 
-    logger.success('VuePress build successfully!')
+    logger.success(
+      `VuePress build completed in ${formatMs(Date.now() - start)}!`
+    )
   }

packages/cli/src/commands/dev/createDev.ts

@@ -1,7 +1,7 @@
 import process from 'node:process'
 import { createDevApp } from '@vuepress/core'
 import type { AppConfig } from '@vuepress/core'
-import { debug, fs, logger } from '@vuepress/utils'
+import { debug, fs, logger, withSpinner } from '@vuepress/utils'
 import type { FSWatcher } from 'chokidar'
 import {
   loadUserConfig,
@@ -58,18 +58,21 @@ export const createDev = (defaultAppConfig: Partial<AppConfig>): DevCommand => {
 
     // clean temp and cache
     if (commandOptions.cleanTemp === true) {
-      logger.info('Cleaning temp...')
-      await fs.remove(app.dir.temp())
+      await withSpinner('Cleaning temp')(() => {
+        return fs.remove(app.dir.temp())
+      })
     }
     if (commandOptions.cleanCache === true) {
-      logger.info('Cleaning cache...')
-      await fs.remove(app.dir.cache())
+      await withSpinner('Cleaning cache')(() => {
+        return fs.remove(app.dir.cache())
+      })
     }
 
     // initialize and prepare
-    logger.info('Initializing VuePress and preparing data...')
-    await app.init()
-    await app.prepare()
+    await withSpinner('Initializing and preparing data')(async () => {
+      await app.init()
+      await app.prepare()
+    })
 
     // start dev server
     const close = await app.dev()

packages/utils/src/formatMs.ts

@@ -0,0 +1,7 @@
+/**
+ * Format millisecond
+ */
+export const formatMs = (ms: number): string => {
+  if (ms < 1000) return `${ms}ms`
+  return `${(ms / 1000).toFixed(2)}s`
+}

packages/utils/src/index.ts

@@ -10,6 +10,7 @@ export { debug, chalk, fs, globby, hash, ora, path }
 
 export * from './getDirname.js'
 export * from './importFile.js'
+export * from './formatMs.js'
 export * from './isChildPath.js'
 export * from './logger.js'
 export * from './renderHead.js'

packages/utils/src/withSpinner.ts

@@ -1,21 +1,23 @@
 import process from 'node:process'
-import ora from 'ora'
+import ora, { type Ora } from 'ora'
+import { formatMs } from './formatMs.js'
 
 export const withSpinner =
   (msg: string) =>
-  async <T>(target: () => Promise<T>): Promise<T> => {
+  async <T>(target: (spinner?: Ora) => Promise<T>): Promise<T> => {
     if (process.env.DEBUG) {
       return target()
     }
 
+    const start = Date.now()
     const spinner = ora()
     try {
       spinner.start(msg)
-      const result = await target()
-      spinner.succeed(`${msg} - done`)
+      const result = await target(spinner)
+      spinner.succeed(`${msg} - done in ${formatMs(Date.now() - start)}`)
       return result
     } catch (e) {
-      spinner.fail(`${msg} - failed`)
+      spinner.fail(`${msg} - failed in ${formatMs(Date.now() - start)}`)
       throw e
     }
   }