fix: reduced logging (fixes #42) (#83)

* feat: add timestamp to log output; use kleur instead of chalk

* reduce debug logs: only log when the hooks return something and make sure its on a single line

* add changeset

Author: dominikg

.changeset/yellow-panthers-beg.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+reduced debug output

packages/vite-plugin-svelte/package.json

@@ -45,8 +45,8 @@
   "homepage": "https://github.com/sveltejs/vite-plugin-svelte/tree/main/packages/vite-plugin-svelte#readme",
   "dependencies": {
     "@rollup/pluginutils": "^4.1.0",
-    "chalk": "^4.1.1",
     "debug": "^4.3.2",
+    "kleur": "^4.1.4",
     "magic-string": "^0.25.7",
     "require-relative": "^0.8.7",
     "svelte-hmr": "^0.14.4"

packages/vite-plugin-svelte/src/handle-hot-update.ts

@@ -51,15 +51,18 @@ export async function handleHotUpdate(
 	}
 
 	const result = [...affectedModules].filter(Boolean) as ModuleNode[];
-	log.debug(`handleHotUpdate result for ${svelteRequest.id}`, result);
 
 	// TODO is this enough? see also: https://github.com/vitejs/vite/issues/2274
 	const ssrModulesToInvalidate = result.filter((m) => !!m.ssrTransformResult);
 	if (ssrModulesToInvalidate.length > 0) {
 		log.debug(`invalidating modules ${ssrModulesToInvalidate.map((m) => m.id).join(', ')}`);
 		ssrModulesToInvalidate.forEach((moduleNode) => server.moduleGraph.invalidateModule(moduleNode));
 	}
-
+	if (result.length > 0) {
+		log.debug(
+			`handleHotUpdate for ${svelteRequest.id} result: ${result.map((m) => m.id).join(', ')}`
+		);
+	}
 	return result;
 }
 

packages/vite-plugin-svelte/src/index.ts

@@ -1,12 +1,5 @@
 import fs from 'fs';
-import {
-	HmrContext,
-	IndexHtmlTransformContext,
-	ModuleNode,
-	Plugin,
-	ResolvedConfig,
-	UserConfig
-} from 'vite';
+import { HmrContext, ModuleNode, Plugin, ResolvedConfig, UserConfig } from 'vite';
 import { handleHotUpdate } from './handle-hot-update';
 import { log, logCompilerWarnings } from './utils/log';
 import { CompileData, createCompileSvelte } from './utils/compile';
@@ -109,7 +102,6 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 
 		async resolveId(importee, importer, customOptions, ssr) {
 			const svelteRequest = requestParser(importee, !!ssr);
-			log.debug('resolveId', svelteRequest || importee);
 			if (svelteRequest?.query.svelte) {
 				if (svelteRequest.query.type === 'style') {
 					// return cssId with root prefix so postcss pipeline of vite finds the directory correctly
@@ -164,7 +156,6 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 			if (!svelteRequest) {
 				return;
 			}
-			log.debug('transform', svelteRequest);
 			const { filename, query } = svelteRequest;
 
 			if (query.svelte) {
@@ -193,18 +184,11 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 				return;
 			}
 			const svelteRequest = requestParser(ctx.file, false, ctx.timestamp);
-			if (!svelteRequest) {
-				return;
+			if (svelteRequest) {
+				return handleHotUpdate(compileSvelte, ctx, svelteRequest, cache, options);
 			}
-			log.debug('handleHotUpdate', svelteRequest);
-			return handleHotUpdate(compileSvelte, ctx, svelteRequest, cache, options);
 		},
 
-		// eslint-disable-next-line no-unused-vars
-		transformIndexHtml(html: string, ctx: IndexHtmlTransformContext) {
-			// TODO useful for ssr? and maybe svelte:head stuff
-			log.debug('transformIndexHtml', html);
-		},
 		/**
 		 * All resolutions done; display warnings wrt `package.json` access.
 		 */

packages/vite-plugin-svelte/src/utils/log.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import chalk from 'chalk';
+import { cyan, yellow, red } from 'kleur/colors';
 import debug from 'debug';
 import { ResolvedOptions, Warning } from './options';
 
@@ -12,17 +12,17 @@ const loggers: { [key: string]: any } = {
 		isDebug: true
 	},
 	info: {
-		color: chalk.cyan,
+		color: cyan,
 		log: console.log,
 		enabled: true
 	},
 	warn: {
-		color: chalk.yellow,
+		color: yellow,
 		log: console.warn,
 		enabled: true
 	},
 	error: {
-		color: chalk.red,
+		color: red,
 		log: console.error,
 		enabled: true
 	},
@@ -47,26 +47,18 @@ function setLevel(level: string) {
 	}
 }
 
-let _viteLogOverwriteProtection = false;
-function setViteLogOverwriteProtection(viteLogOverwriteProtection: boolean) {
-	_viteLogOverwriteProtection = viteLogOverwriteProtection;
-}
-
 function _log(logger: any, message: string, payload?: any) {
 	if (!logger.enabled) {
 		return;
 	}
 	if (logger.isDebug) {
 		payload !== undefined ? logger.log(message, payload) : logger.log(message);
 	} else {
-		logger.log(logger.color(`[${prefix}] ${message}`));
+		logger.log(logger.color(`${new Date().toLocaleTimeString()} [${prefix}] ${message}`));
 		if (payload) {
 			logger.log(payload);
 		}
 	}
-	if (_viteLogOverwriteProtection) {
-		logger.log('');
-	}
 }
 
 export interface LogFn {
@@ -90,10 +82,7 @@ export const log = {
 	info: createLogger('info'),
 	warn: createLogger('warn'),
 	error: createLogger('error'),
-	setLevel,
-
-	// TODO still needed?
-	setViteLogOverwriteProtection
+	setLevel
 };
 
 export function logCompilerWarnings(warnings: Warning[], options: ResolvedOptions) {