feat: add option to send warnings to dev client via websocket (#372)

* feat: add option to send warnings to dev client via websocket

* fix: optional experimental

* fix: add data to websocket message that client needs to work with repeated message for the same file

* chore: add type for message and improve docs

Author: dominikg

.changeset/rich-pianos-fly.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+New experimental option sendWarningsToBrowser

docs/config.md

@@ -332,3 +332,33 @@ export default defineConfig({
     ]
   });
   ```
+
+### sendWarningsToBrowser
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+  Sends a websocket message `svelte:warnings` with the warnings that are passed to `onwarn`. This is only useful if you build a custom browser based integration where you want to display these.
+
+  **Example**
+
+  ```js
+  import.meta.hot.on('svelte:warnings', (message) => {
+    // handle warnings message, eg log to console
+    console.warn(`Warnings for ${message.filename}`, message.warnings);
+  });
+  ```
+
+  **Message format**
+
+  ```ts
+  type SvelteWarningsMessage = {
+    id: string;
+    filename: string;
+    normalizedFilename: string;
+    timestamp: number;
+    warnings: Warning[]; // allWarnings filtered by warnings where onwarn did not call the default handler
+    allWarnings: Warning[]; // includes warnings filtered by onwarn and our extra vite plugin svelte warnings
+    rawWarnings: Warning[]; // raw compiler output
+  };
+  ```

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

@@ -53,7 +53,7 @@ export async function handleHotUpdate(
 
 	if (!jsUpdated) {
 		// transform won't be called, log warnings here
-		logCompilerWarnings(compileData.compiled.warnings, options);
+		logCompilerWarnings(svelteRequest, compileData.compiled.warnings, options);
 	}
 
 	const result = [...affectedModules].filter(Boolean) as ModuleNode[];

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

@@ -186,7 +186,7 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 					cache.setError(svelteRequest, e);
 					throw toRollupError(e, options);
 				}
-				logCompilerWarnings(compileData.compiled.warnings, options);
+				logCompilerWarnings(svelteRequest, compileData.compiled.warnings, options);
 				cache.update(compileData);
 				if (compileData.dependencies?.length && options.server) {
 					compileData.dependencies.forEach((d) => {
@@ -237,3 +237,5 @@ export {
 	Processed,
 	Warning
 } from './utils/options';
+
+export { SvelteWarningsMessage } from './utils/log';

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

@@ -2,6 +2,7 @@
 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';
@@ -99,18 +100,54 @@ export const log = {
 	setLevel
 };
 
-export function logCompilerWarnings(warnings: Warning[], options: ResolvedOptions) {
+export type SvelteWarningsMessage = {
+	id: string;
+	filename: string;
+	normalizedFilename: string;
+	timestamp: number;
+	warnings: Warning[]; // allWarnings filtered by warnings where onwarn did not call the default handler
+	allWarnings: Warning[]; // includes warnings filtered by onwarn and our extra vite plugin svelte warnings
+	rawWarnings: Warning[]; // raw compiler output
+};
+
+export function logCompilerWarnings(
+	svelteRequest: SvelteRequest,
+	warnings: Warning[],
+	options: ResolvedOptions
+) {
 	const { emitCss, onwarn, isBuild } = options;
-	const warn = isBuild ? warnBuild : warnDev;
-	const notIgnoredWarnings = warnings?.filter((w) => !ignoreCompilerWarning(w, isBuild, emitCss));
-	const extraWarnings = buildExtraWarnings(warnings, isBuild);
-	[...notIgnoredWarnings, ...extraWarnings].forEach((warning) => {
+	const sendViaWS = !isBuild && options.experimental?.sendWarningsToBrowser;
+	let warn = isBuild ? warnBuild : warnDev;
+	const handledByDefaultWarn: Warning[] = [];
+	const notIgnored = warnings?.filter((w) => !ignoreCompilerWarning(w, isBuild, emitCss));
+	const extra = buildExtraWarnings(warnings, isBuild);
+	const allWarnings = [...notIgnored, ...extra];
+	if (sendViaWS) {
+		warn = (w: Warning) => {
+			handledByDefaultWarn.push(w);
+			warn(w);
+		};
+	}
+	allWarnings.forEach((warning) => {
 		if (onwarn) {
 			onwarn(warning, warn);
 		} else {
 			warn(warning);
 		}
 	});
+	if (sendViaWS) {
+		const message: SvelteWarningsMessage = {
+			id: svelteRequest.id,
+			filename: svelteRequest.filename,
+			normalizedFilename: svelteRequest.normalizedFilename,
+			timestamp: svelteRequest.timestamp,
+			warnings: handledByDefaultWarn, // allWarnings filtered by warnings where onwarn did not call the default handler
+			allWarnings, // includes warnings filtered by onwarn and our extra vite plugin svelte warnings
+			rawWarnings: warnings // raw compiler output
+		};
+		log.debug(`sending svelte:warnings message for ${svelteRequest.normalizedFilename}`);
+		options.server?.ws?.send('svelte:warnings', message);
+	}
 }
 
 function ignoreCompilerWarning(

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

@@ -560,6 +560,12 @@ export interface ExperimentalOptions {
 	 * enable svelte inspector
 	 */
 	inspector?: InspectorOptions | boolean;
+
+	/**
+	 * send a websocket message with svelte compiler warnings during dev
+	 *
+	 */
+	sendWarningsToBrowser?: boolean;
 }
 
 export interface InspectorOptions {
@@ -609,7 +615,7 @@ export interface InspectorOptions {
 export interface PreResolvedOptions extends Options {
 	// these options are non-nullable after resolve
 	compilerOptions: CompileOptions;
-	experimental: ExperimentalOptions;
+	experimental?: ExperimentalOptions;
 	// extra options
 	root: string;
 	isBuild: boolean;