Improve CLI output for compilation warnings

.changeset/shiny-gifts-talk.md

@@ -0,0 +1,5 @@
+---
+'wmr': patch
+---
+
+Improve CLI output for compilation warnings

packages/wmr/src/bundler.js

@@ -3,6 +3,7 @@ import * as rollup from 'rollup';
 import terser from './plugins/fast-minify.js';
 import totalist from 'totalist';
 import { getPlugins } from './lib/plugins.js';
+import { onWarn } from './lib/output-utils.js';
 
 /** @param {string} p */
 const pathToPosix = p => p.split(sep).join(posix.sep);
@@ -23,6 +24,7 @@ export async function bundleProd(options) {
 
 	const bundle = await rollup.rollup({
 		input,
+		onwarn: onWarn,
 		perf: !!profile,
 		preserveEntrySignatures: 'allow-extension',
 		manualChunks: npmChunks ? extractNpmChunks : undefined,

packages/wmr/src/lib/compile-single-module.js

@@ -2,6 +2,7 @@ import * as rollup from 'rollup';
 import wmrPlugin from '../plugins/wmr/plugin.js';
 import htmPlugin from '../plugins/htm-plugin.js';
 import sucrasePlugin from '../plugins/sucrase-plugin.js';
+import { onWarn } from './output-utils.js';
 // import localNpmPlugin from './plugins/local-npm-plugin.js';
 
 // disabled for now
@@ -36,6 +37,7 @@ export const compileSingleModule = withCache(
 		// console.log('compiling ' + input);
 		const bundle = await rollup.rollup({
 			input,
+			onwarn: onWarn,
 			treeshake: false,
 			preserveModules: true,
 			// these should theroetically improve performance:

packages/wmr/src/lib/npm-middleware.js

@@ -10,7 +10,7 @@ import aliasPlugin from '../plugins/aliases-plugin.js';
 import { getMimeType } from './mimetypes.js';
 import nodeBuiltinsPlugin from '../plugins/node-builtins-plugin.js';
 import * as kl from 'kolorist';
-import { hasDebugFlag } from './output-utils.js';
+import { hasDebugFlag, onWarn } from './output-utils.js';
 
 /**
  * Serve a "proxy module" that uses the WMR runtime to load CSS.
@@ -130,6 +130,7 @@ async function bundleNpmModule(mod, { source, alias, cwd }) {
 
 	const bundle = await rollup.rollup({
 		input: mod,
+		onwarn: onWarn,
 		// input: '\0entry',
 		cache: npmCache,
 		shimMissingExports: true,

packages/wmr/src/lib/output-utils.js

@@ -232,3 +232,43 @@ export function formatBootMessage(message, addresses) {
 
 	return `${intro}${local}${network}\n`;
 }
+
+function formatWarnMessage(str) {
+	return str !== kl.stripColors(str) ? kl.yellow('(!) ') + str : kl.yellow('(!) ' + str);
+}
+
+/** @type {import('rollup').WarningHandlerWithDefault} */
+export function onWarn(warning) {
+	if (typeof warning === 'string') {
+		// eslint-disable-next-line no-console
+		console.log(formatWarnMessage(warning));
+		return;
+	}
+
+	const { message, loc, frame } = warning;
+	let msg = formatWarnMessage(message) + '\n';
+
+	if (loc && loc.file) {
+		msg += `${kl.cyan(`${loc.file}:${loc.line}:${loc.column}`)}\n`;
+	}
+
+	// Reformat code frame to match our format
+	if (frame) {
+		const lines = frame.split('\n');
+		const max = Math.max(...lines.map(x => x.indexOf(':')).filter(x => x >= 0));
+
+		const reformatted = lines
+			.map(line => {
+				if (/\s+\^/.test(line)) {
+					return kl.red('> ') + ' '.repeat(max) + kl.dim(' |') + kl.red(line.slice(max + 1));
+				}
+
+				return line.replace(/^(\d+): /, (_, g) => '  ' + kl.dim(g) + kl.dim(' | '));
+			})
+			.join('\n');
+		msg += `${reformatted}\n`;
+	}
+
+	// eslint-disable-next-line no-console
+	console.log(msg);
+}

packages/wmr/src/plugins/worker-plugin.js

@@ -3,6 +3,7 @@ import * as rollup from 'rollup';
 import path from 'path';
 import { getPlugins } from '../lib/plugins.js';
 import * as kl from 'kolorist';
+import { onWarn } from '../lib/output-utils.js';
 
 /**
  * @param {import("wmr").Options} options
@@ -51,6 +52,7 @@ export function workerPlugin(options) {
 				// See: https://bugzilla.mozilla.org/show_bug.cgi?id=1247687
 				const bundle = await rollup.rollup({
 					input: id,
+					onwarn: onWarn,
 					plugins: [
 						{
 							name: 'worker-meta',