feat: implement custom logger

[stingalleman]

This PR implements a way to use your own logger.

You just need to make a class that implements the already exported class Logger and inject it in the config.

A really quick and ugly example:

import { defineConfig, Logger, LogOptions, LogType } from 'vite'
import vue from '@vitejs/plugin-vue'
import chalk from 'chalk';

// From Vite:
//
// export declare interface Logger {
//   info(msg: string, options?: LogOptions): void;
//   warn(msg: string, options?: LogOptions): void;
//   error(msg: string, options?: LogOptions): void;
//   clearScreen(type: LogType): void;
//   hasWarned: boolean;
// }

class MyLogger implements Logger {
  clearScreen(type: LogType): void {
    console.clear()
  }
  
  hasWarned: false;

  info(msg: string, options?: LogOptions): void {
    if (options?.timestamp) {
      console.log(`${chalk.red.bold('info')}: ${msg}`)
    } else {
      console.log(msg)
    }
  }
  error() { }
  warn() { }
}

export default defineConfig({
  plugins: [vue()],
  logger: new MyLogger()
})

will result in:

[antfu]

@stingalleman Can you explain a bit more about why you want this feature? We would like to keep our config interface as minimal as possible, and from our team aspect, we didn't yet see many use cases of providing custom logger here. Thanks.

Dismiss

[stingalleman]

@antfu We run our developer environment in Docker, and the problem is that all the logs are shown at once, and it's just a nice visual addition if Vite uses the same format as the other loggers, which are all the same.