feat(vite): use custom logger to show vite logs (#19523)

packages/schema/src/config/vite.ts

@@ -18,9 +18,6 @@ export default defineUntypedSchema({
     mode: {
       $resolve: async (val, get) => val ?? (await get('dev') ? 'development' : 'production')
     },
-    logLevel:{
-      $resolve: async (val, get) => val ?? (await get('dev') ? 'warn' : 'info')
-    },
     define: {
       $resolve: async (val, get) => ({
         'process.dev': await get('dev'),

packages/vite/package.json

@@ -25,6 +25,7 @@
     "@vitejs/plugin-vue-jsx": "^3.0.0",
     "autoprefixer": "^10.4.13",
     "chokidar": "^3.5.3",
+    "clear": "^0.1.0",
     "cssnano": "^5.1.15",
     "defu": "^6.1.2",
     "esbuild": "^0.17.11",
@@ -46,6 +47,7 @@
     "postcss-url": "^10.1.3",
     "rollup": "^3.18.0",
     "rollup-plugin-visualizer": "^5.9.0",
+    "std-env": "^3.3.2",
     "strip-literal": "^1.0.1",
     "ufo": "^1.1.1",
     "unplugin": "^1.1.0",

packages/vite/src/client.ts

@@ -17,6 +17,7 @@ import { devStyleSSRPlugin } from './plugins/dev-ssr-css'
 import { runtimePathsPlugin } from './plugins/paths'
 import { pureAnnotationsPlugin } from './plugins/pure-annotations'
 import { viteNodePlugin } from './vite-node'
+import { createViteLogger } from './utils/logger'
 
 export async function buildClient (ctx: ViteBuildContext) {
   const clientConfig: vite.InlineConfig = vite.mergeConfig(ctx.config, {
@@ -82,6 +83,8 @@ export async function buildClient (ctx: ViteBuildContext) {
     }
   } as ViteOptions)
 
+  clientConfig.customLogger = createViteLogger(clientConfig)
+
   // In build mode we explicitly override any vite options that vite is relying on
   // to detect whether to inject production or development code (such as HMR code)
   if (!ctx.nuxt.options.dev) {

packages/vite/src/server.ts

@@ -5,6 +5,7 @@ import viteJsxPlugin from '@vitejs/plugin-vue-jsx'
 import { logger, resolveModule, resolvePath } from '@nuxt/kit'
 import { joinURL, withoutLeadingSlash, withTrailingSlash } from 'ufo'
 import type { ViteBuildContext, ViteOptions } from './vite'
+import { createViteLogger } from './utils/logger'
 import { cacheDirPlugin } from './plugins/cache-dir'
 import { initViteNodeServer } from './vite-node'
 import { ssrStylesPlugin } from './plugins/ssr-styles'
@@ -119,6 +120,8 @@ export async function buildServer (ctx: ViteBuildContext) {
     ]
   } as ViteOptions)
 
+  serverConfig.customLogger = createViteLogger(serverConfig)
+
   if (ctx.nuxt.options.experimental.inlineSSRStyles) {
     const chunksWithInlinedCSS = new Set<string>()
     serverConfig.plugins!.push(ssrStylesPlugin({

packages/vite/src/utils/logger.ts

@@ -0,0 +1,85 @@
+import type * as vite from 'vite'
+import { logger } from '@nuxt/kit'
+import { hasTTY, isCI } from 'std-env'
+import clear from 'clear'
+import type { NuxtOptions } from 'nuxt/schema'
+
+let duplicateCount = 0
+let lastType: vite.LogType | null = null
+let lastMsg: string | null = null
+
+export const logLevelMap: Record<NuxtOptions['logLevel'], vite.UserConfig['logLevel']> = {
+  silent: 'silent',
+  info: 'info',
+  verbose: 'info'
+}
+
+export const logLevelMapReverse: Record<NonNullable<vite.UserConfig['logLevel']>, number> = {
+  silent: 0,
+  error: 1,
+  warn: 2,
+  info: 3
+}
+
+export function createViteLogger (config: vite.InlineConfig): vite.Logger {
+  const loggedErrors = new WeakSet<any>()
+  const canClearScreen = hasTTY && !isCI
+  const clearScreen = canClearScreen ? clear : () => {}
+
+  function output (type: vite.LogType, msg: string, options: vite.LogErrorOptions = {}) {
+    const sameAsLast = lastType === type && lastMsg === msg
+    if (sameAsLast) {
+      duplicateCount += 1
+      clearScreen()
+    } else {
+      duplicateCount = 0
+      lastType = type
+      lastMsg = msg
+
+      if (options.clear) {
+        clearScreen()
+      }
+    }
+
+    if (options.error) {
+      loggedErrors.add(options.error)
+    }
+
+    const prevLevel = logger.level
+    logger.level = logLevelMapReverse[config.logLevel || 'info']
+    // TODO: colorize counter after https://github.com/unjs/consola/pull/166
+    logger[type](msg + (sameAsLast ? ` (x${duplicateCount + 1})` : ''))
+    logger.level = prevLevel
+  }
+
+  const warnedMessages = new Set<string>()
+
+  const viteLogger: vite.Logger = {
+    hasWarned: false,
+    info (msg, opts) {
+      output('info', msg, opts)
+    },
+    warn (msg, opts) {
+      viteLogger.hasWarned = true
+      output('warn', msg, opts)
+    },
+    warnOnce (msg, opts) {
+      if (warnedMessages.has(msg)) { return }
+      viteLogger.hasWarned = true
+      output('warn', msg, opts)
+      warnedMessages.add(msg)
+    },
+    error (msg, opts) {
+      viteLogger.hasWarned = true
+      output('error', msg, opts)
+    },
+    clearScreen () {
+      clear()
+    },
+    hasErrorLogged (error) {
+      return loggedErrors.has(error)
+    }
+  }
+
+  return viteLogger
+}

packages/vite/src/vite.ts

@@ -1,7 +1,7 @@
 import * as vite from 'vite'
 import { join, resolve } from 'pathe'
-import type { Nuxt, NuxtOptions } from '@nuxt/schema'
+import type { Nuxt } from '@nuxt/schema'
-import type { InlineConfig, SSROptions, UserConfig } from 'vite'
+import type { InlineConfig, SSROptions } from 'vite'
 import { logger, isIgnored, resolvePath, addVitePlugin } from '@nuxt/kit'
 import type { Options as VueOptions } from '@vitejs/plugin-vue'
 import type { Options as VueJsxOptions } from '@vitejs/plugin-vue-jsx'
@@ -16,6 +16,7 @@ import virtual from './plugins/virtual'
 import { warmupViteServer } from './utils/warmup'
 import { resolveCSSOptions } from './css'
 import { composableKeysPlugin } from './plugins/composable-keys'
+import { logLevelMap } from './utils/logger'
 
 export interface ViteOptions extends InlineConfig {
   vue?: VueOptions
@@ -152,9 +153,3 @@ export async function bundle (nuxt: Nuxt) {
   await buildClient(ctx)
   await buildServer(ctx)
 }
-
-const logLevelMap: Record<NuxtOptions['logLevel'], UserConfig['logLevel']> = {
-  silent: 'silent',
-  info: 'info',
-  verbose: 'info'
-}

pnpm-lock.yaml

@@ -593,6 +593,7 @@ importers:
       '@vitejs/plugin-vue-jsx': ^3.0.0
       autoprefixer: ^10.4.13
       chokidar: ^3.5.3
+      clear: ^0.1.0
       cssnano: ^5.1.15
       defu: ^6.1.2
       esbuild: ^0.17.11
@@ -614,6 +615,7 @@ importers:
       postcss-url: ^10.1.3
       rollup: ^3.18.0
       rollup-plugin-visualizer: ^5.9.0
+      std-env: ^3.3.2
       strip-literal: ^1.0.1
       ufo: ^1.1.1
       unbuild: ^1.1.2
@@ -630,6 +632,7 @@ importers:
       '@vitejs/plugin-vue-jsx': 3.0.0_vite@4.1.4+vue@3.2.47
       autoprefixer: 10.4.13_postcss@8.4.21
       chokidar: 3.5.3
+      clear: 0.1.0
       cssnano: 5.1.15_postcss@8.4.21
       defu: 6.1.2
       esbuild: 0.17.11
@@ -651,6 +654,7 @@ importers:
       postcss-url: 10.1.3_postcss@8.4.21
       rollup: 3.18.0
       rollup-plugin-visualizer: 5.9.0_rollup@3.18.0
+      std-env: 3.3.2
       strip-literal: 1.0.1
       ufo: 1.1.1
       unplugin: 1.1.0
@@ -3521,7 +3525,6 @@ packages:
 
   /clear/0.1.0:
     resolution: {integrity: sha512-qMjRnoL+JDPJHeLePZJuao6+8orzHMGP04A8CdwCNsKhRbOnKRjefxONR7bwILT3MHecxKBjHkKL/tkZ8r4Uzw==}
-    dev: true
 
   /cli-cursor/4.0.0:
     resolution: {integrity: sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==}