feat: log compiler warnings to console (#45)

* fix: enable logging of compiler warnings

* remove todo

* refactor: use own logging instead of vites rollup warn handling to avoid context issues in handleHotUpdate and gain more control over output

* add changeset

* fix build error due to missing export

Author: dominikg

.changeset/selfish-experts-rest.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+enable logging for compiler warnings

.changeset/wise-impalas-glow.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+Feature: log svelte compiler warnings to console. use options.onwarn to customize logging

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

@@ -1,6 +1,6 @@
 import { ModuleNode, HmrContext } from 'vite';
 import { Code, CompileData } from './utils/compile';
-import { log } from './utils/log';
+import { log, logCompilerWarnings } from './utils/log';
 import { SvelteRequest } from './utils/id';
 import { VitePluginSvelteCache } from './utils/VitePluginSvelteCache';
 import { ResolvedOptions } from './utils/options';
@@ -13,7 +13,7 @@ export async function handleHotUpdate(
 	ctx: HmrContext,
 	svelteRequest: SvelteRequest,
 	cache: VitePluginSvelteCache,
-	options: Partial<ResolvedOptions>
+	options: ResolvedOptions
 ): Promise<ModuleNode[] | void> {
 	const { read, server } = ctx;
 
@@ -33,16 +33,22 @@ export async function handleHotUpdate(
 
 	const cssModule = server.moduleGraph.getModuleById(svelteRequest.cssId);
 	const mainModule = server.moduleGraph.getModuleById(svelteRequest.id);
-	if (cssModule && cssChanged(cachedCss, compileData.compiled.css)) {
+	const cssUpdated = cssModule && cssChanged(cachedCss, compileData.compiled.css);
+	if (cssUpdated) {
 		log.debug('handleHotUpdate css changed');
 		affectedModules.add(cssModule);
 	}
-
-	if (mainModule && jsChanged(cachedJS, compileData.compiled.js, svelteRequest.filename)) {
+	const jsUpdated = mainModule && jsChanged(cachedJS, compileData.compiled.js, svelteRequest.filename);
+	if (jsUpdated) {
 		log.debug('handleHotUpdate js changed');
 		affectedModules.add(mainModule);
 	}
 
+	if(!jsUpdated) {
+		// transform won't be called, log warnings here
+		logCompilerWarnings(compileData.compiled.warnings,options)
+	}
+
 	const result = [...affectedModules].filter(Boolean) as ModuleNode[];
 	log.debug(`handleHotUpdate result for ${svelteRequest.id}`, result);
 

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

@@ -1,11 +1,9 @@
 import * as path from 'path';
 import { HmrContext, IndexHtmlTransformContext, ModuleNode, Plugin, UserConfig } from 'vite';
-
 // @ts-ignore
 import * as relative from 'require-relative';
-
 import { handleHotUpdate } from './handleHotUpdate';
-import { log } from './utils/log';
+import { log, logCompilerWarnings } from './utils/log';
 import { CompileData, createCompileSvelte } from './utils/compile';
 import { buildIdParser, IdParser, SvelteRequest } from './utils/id';
 import {
@@ -29,7 +27,8 @@ export {
 	Arrayable,
 	MarkupPreprocessor,
 	ModuleFormat,
-	Processed
+	Processed,
+	Warning
 } from './utils/options';
 
 // extend the Vite plugin interface to be able to have `sveltePreprocess` injection
@@ -203,7 +202,7 @@ export default function vitePluginSvelte(inlineOptions?: Partial<Options>): Plug
 				throw new Error(`failed to transform tagged svelte request for id ${id}`);
 			}
 			const compileData = await compileSvelte(svelteRequest, code, options);
-
+			logCompilerWarnings(compileData.compiled.warnings, options);
 			cache.update(compileData);
 			if (compileData.dependencies?.length && options.server) {
 				compileData.dependencies.forEach((d) => this.addWatchFile(d));

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

@@ -13,7 +13,7 @@ const _createCompileSvelte = (makeHot: Function) =>
 		options: Partial<ResolvedOptions>
 	): Promise<CompileData> {
 		const { filename, normalizedFilename, cssId, ssr } = svelteRequest;
-		const { onwarn, emitCss = true } = options;
+		const { emitCss = true } = options;
 		const dependencies = [];
 		const finalCompilerOptions: CompileOptions = {
 			...options.compilerOptions,
@@ -36,13 +36,6 @@ const _createCompileSvelte = (makeHot: Function) =>
 
 		const compiled = compile(preprocessed ? preprocessed.code : code, finalCompilerOptions);
 
-		(compiled.warnings || []).forEach((warning) => {
-			if (!emitCss && warning.code === 'css-unused-selector') return;
-			// TODO handle warnings
-			if (onwarn) onwarn(warning /*, this.warn*/);
-			//else this.warn(warning)
-		});
-
 		if (emitCss && compiled.css.code) {
 			// TODO properly update sourcemap?
 			compiled.js.code += `\nimport ${JSON.stringify(cssId)};\n`;

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

@@ -1,6 +1,8 @@
 /* eslint-disable no-unused-vars */
 import chalk from 'chalk';
 import debug from 'debug';
+import {ResolvedOptions, Warning} from "./options";
+
 const levels: string[] = ['debug', 'info', 'warn', 'error', 'silent'];
 const prefix = 'vite-plugin-svelte';
 const loggers: { [key: string]: any } = {
@@ -93,3 +95,44 @@ export const log = {
 	// TODO still needed?
 	setViteLogOverwriteProtection
 };
+
+
+export function logCompilerWarnings(
+	warnings: Warning[],
+	options: ResolvedOptions
+	) {
+	const {emitCss,onwarn, isBuild} = options;
+	const warn = isBuild ? warnBuild : warnDev;
+	warnings?.forEach(warning => {
+		if (!emitCss && warning.code === 'css-unused-selector'){
+			return;
+		}
+		if (onwarn) {
+			onwarn(warning , warn);
+		} else {
+			warn(warning)
+		}
+	})
+}
+
+function warnDev(w: Warning) {
+	log.info.enabled && log.info(buildExtendedLogMessage(w))
+}
+
+function warnBuild(w: Warning) {
+	log.warn.enabled && log.warn(buildExtendedLogMessage(w),w.frame)
+}
+
+function buildExtendedLogMessage(w: Warning) {
+	const parts = [];
+	if(w.filename) {
+		parts.push(w.filename)
+	}
+	if(w.start) {
+		parts.push(':',w.start.line,':',w.start.column)
+	}
+	if(w.message){
+		parts.push(' ',w.message)
+	}
+	return parts.join('');
+}

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

@@ -11,6 +11,7 @@ const knownOptions = new Set([
 	'extensions',
 	'emitCss',
 	'compilerOptions',
+	'onwarn',
 	'preprocess',
 	'hot',
 	'disableCssHmr',
@@ -180,7 +181,10 @@ export interface Options {
 	/** Options passed to `svelte.compile` method. */
 	compilerOptions: Partial<CompileOptions>;
 
-	onwarn?: undefined | false | ((warning: any, defaultHandler?: any) => void);
+	/**
+	 * custom warning handler for svelte compiler warnings
+	 */
+	onwarn?: ((warning: Warning, defaultHandler?: (warning: Warning)=>void) => void);
 
 	/**
 	 * enable/disable hmr. You want this enabled.
@@ -392,3 +396,21 @@ export interface PreprocessorGroup {
 }
 
 export type Arrayable<T> = T | T[];
+
+export interface Warning {
+	start?: {
+		line: number;
+		column: number;
+		pos?: number;
+	};
+	end?: {
+		line: number;
+		column: number;
+	};
+	pos?: number;
+	code: string;
+	message: string;
+	filename?: string;
+	frame?: string;
+	toString: () => string;
+}