fix: log stats in debug mode (#614)

Co-authored-by: Dominik G <[email protected]>

Author: bluwy

.changeset/strong-coins-shout.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+Log stats in debug mode and remove `experimental.disableCompileStats` option. Use `DEBUG="vite:vite-plugin-svelte:stats"` when starting the dev server or build to log the compile stats.

docs/config.md

@@ -403,10 +403,3 @@ export default {
     rawWarnings: Warning[]; // raw compiler output
   };
   ```
-
-### disableCompileStats
-
-- **Type** `boolean | 'dev' | 'build'`
-- **Default:** `false`
-
-  disable svelte compile statistics.

docs/faq.md

@@ -169,7 +169,7 @@ export default {
 There is no golden rule, but you can follow these recommendations:
 
 1. **Never** combine plugins or preprocessors that rewrite imports with prebundling
-2. Start with index imports and if your dev-server or build process feels slow, check compile stats to see if switching to deep imports can improve the experience.
+2. Start with index imports and if your dev-server or build process feels slow, run the process with `DEBUG="vite:vite-plugin-svelte:stats"` to check compile stats to see if switching to deep imports can improve the experience.
 3. Do not mix deep and index imports for the same library, use one style consistently.
 4. Use different import styles for different libraries where it helps. E.g. deep imports for the few icons of that one huge icon library, but index import for the component library that is heavily used.
 

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

@@ -3,7 +3,6 @@ import { cyan, yellow, red } from 'kleur/colors';
 import debug from 'debug';
 import { ResolvedOptions, Warning } from './options';
 import { SvelteRequest } from './id';
-
 const levels: string[] = ['debug', 'info', 'warn', 'error', 'silent'];
 const prefix = 'vite-plugin-svelte';
 const loggers: { [key: string]: any } = {
@@ -48,36 +47,43 @@ function setLevel(level: string) {
 	}
 }
 
-function _log(logger: any, message: string, payload?: any) {
+function _log(logger: any, message: string, payload?: any, namespace?: string) {
 	if (!logger.enabled) {
 		return;
 	}
 	if (logger.isDebug) {
-		payload !== undefined ? logger.log(message, payload) : logger.log(message);
+		const log = namespace ? logger.log.extend(namespace) : logger.log;
+		payload !== undefined ? log(message, payload) : log(message);
 	} else {
-		logger.log(logger.color(`${new Date().toLocaleTimeString()} [${prefix}] ${message}`));
+		logger.log(
+			logger.color(
+				`${new Date().toLocaleTimeString()} [${prefix}${
+					namespace ? `:${namespace}` : ''
+				}] ${message}`
+			)
+		);
 		if (payload) {
 			logger.log(payload);
 		}
 	}
 }
 
 export interface LogFn {
-	(message: string, payload?: any): void;
+	(message: string, payload?: any, namespace?: string): void;
 	enabled: boolean;
-	once: (message: string, payload?: any) => void;
+	once: (message: string, payload?: any, namespace?: string) => void;
 }
 
 function createLogger(level: string): LogFn {
 	const logger = loggers[level];
 	const logFn: LogFn = _log.bind(null, logger) as LogFn;
 	const logged = new Set<String>();
-	const once = function (message: string, payload?: any) {
+	const once = function (message: string, payload?: any, namespace?: string) {
 		if (logged.has(message)) {
 			return;
 		}
 		logged.add(message);
-		logFn.apply(null, [message, payload]);
+		logFn.apply(null, [message, payload, namespace]);
 	};
 	Object.defineProperty(logFn, 'enabled', {
 		get() {
@@ -209,3 +215,7 @@ export function buildExtendedLogMessage(w: Warning) {
 	}
 	return parts.join('');
 }
+
+export function isDebugNamespaceEnabled(namespace: string) {
+	return debug.enabled(`vite:${prefix}:${namespace}`);
+}

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import { ConfigEnv, ResolvedConfig, UserConfig, ViteDevServer, normalizePath } from 'vite';
-import { log } from './log';
+import { isDebugNamespaceEnabled, log } from './log';
 import { loadSvelteConfig } from './load-svelte-config';
 import {
 	SVELTE_EXPORT_CONDITIONS,
@@ -206,11 +206,7 @@ export function resolveOptions(
 	enforceOptionsForHmr(merged);
 	enforceOptionsForProduction(merged);
 	// mergeConfigs would mangle functions on the stats class, so do this afterwards
-	const isLogLevelInfo = [undefined, 'info'].includes(viteConfig.logLevel);
-	const disableCompileStats = merged.experimental?.disableCompileStats;
-	const statsEnabled =
-		disableCompileStats !== true && disableCompileStats !== (merged.isBuild ? 'build' : 'dev');
-	if (statsEnabled && isLogLevelInfo) {
+	if (log.debug.enabled && isDebugNamespaceEnabled('stats')) {
 		merged.stats = new VitePluginSvelteStats();
 	}
 	return merged;
@@ -725,13 +721,6 @@ export interface ExperimentalOptions {
 	 *
 	 */
 	sendWarningsToBrowser?: boolean;
-
-	/**
-	 * disable svelte compile statistics
-	 *
-	 * @default false
-	 */
-	disableCompileStats?: 'dev' | 'build' | boolean;
 }
 
 export interface InspectorOptions {

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

@@ -140,7 +140,7 @@ export class VitePluginSvelteStats {
 					stats.push(stat);
 					if (!hasLoggedProgress && options.logInProgress(collection, now)) {
 						hasLoggedProgress = true;
-						log.info(`${name} in progress ...`);
+						log.debug(`${name} in progress ...`, undefined, 'stats');
 					}
 				};
 			},
@@ -164,7 +164,11 @@ export class VitePluginSvelteStats {
 			const logResult = collection.options.logResult(collection);
 			if (logResult) {
 				await this._aggregateStatsResult(collection);
-				log.info(`${collection.name} done.`, formatPackageStats(collection.packageStats!));
+				log.debug(
+					`${collection.name} done.\n${formatPackageStats(collection.packageStats!)}`,
+					undefined,
+					'stats'
+				);
 			}
 			// cut some ties to free it for garbage collection
 			const index = this._collections.indexOf(collection);
@@ -179,7 +183,7 @@ export class VitePluginSvelteStats {
 			collection.finish = () => {};
 		} catch (e) {
 			// this should not happen, but stats taking also should not break the process
-			log.debug.once(`failed to finish stats for ${collection.name}`, e);
+			log.debug.once(`failed to finish stats for ${collection.name}\n`, e, 'stats');
 		}
 	}