From f937940902ba6250f32916c02e195b579291f74f Mon Sep 17 00:00:00 2001
From: Igor Randjelovic <rigor789@gmail.com>
Date: Sun, 22 Nov 2020 23:57:37 +0100
Subject: [PATCH] wip: better IPC messaging with the CLI

---
 packages/webpack5/src/configuration/base.ts   |  6 +-
 .../webpack5/src/plugins/WatchStatePlugin.ts  | 76 +++++++++++++++++++
 2 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 packages/webpack5/src/plugins/WatchStatePlugin.ts

diff --git a/packages/webpack5/src/configuration/base.ts b/packages/webpack5/src/configuration/base.ts
index dd5a354bf..bea1657e6 100644
--- a/packages/webpack5/src/configuration/base.ts
+++ b/packages/webpack5/src/configuration/base.ts
@@ -8,7 +8,8 @@ import {
 
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import { DefinePlugin, HotModuleReplacementPlugin } from 'webpack';
-import { WatchStateLoggerPlugin } from '../plugins/WatchStateLoggerPlugin';
+// import { WatchStateLoggerPlugin } from '../plugins/WatchStateLoggerPlugin';
+import { WatchStatePlugin } from '../plugins/WatchStatePlugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 
@@ -202,7 +203,8 @@ export default function (config: Config, env: IWebpackEnv): Config {
 	// ]);
 
 	// add the WatchStateLogger plugin used to notify the CLI of build state
-	config.plugin('WatchStateLoggerPlugin').use(WatchStateLoggerPlugin);
+	// config.plugin('WatchStateLoggerPlugin').use(WatchStateLoggerPlugin);
+	config.plugin('WatchStatePlugin').use(WatchStatePlugin);
 
 	config.when(env.hmr, (config) => {
 		config.plugin('HotModuleReplacementPlugin').use(HotModuleReplacementPlugin);
diff --git a/packages/webpack5/src/plugins/WatchStatePlugin.ts b/packages/webpack5/src/plugins/WatchStatePlugin.ts
new file mode 100644
index 000000000..30df67e26
--- /dev/null
+++ b/packages/webpack5/src/plugins/WatchStatePlugin.ts
@@ -0,0 +1,76 @@
+const id = 'WatchStateLoggerPlugin';
+const version = 1;
+
+export enum messages {
+	compilationComplete = 'Webpack compilation complete.',
+	startWatching = 'Webpack compilation complete. Watching for file changes.',
+	changeDetected = 'File change detected. Starting incremental webpack compilation...',
+}
+
+/**
+ * This little plugin will report the webpack state through the console.
+ * So the {N} CLI can get some idea when compilation completes.
+ */
+export class WatchStatePlugin {
+	isRunningWatching: boolean;
+
+	apply(compiler) {
+		let isWatchMode = false;
+		let prevAssets = [];
+
+		compiler.hooks.watchRun.tapAsync(id, function (compiler, callback) {
+			callback();
+
+			isWatchMode = true;
+			console.log(messages.changeDetected);
+		});
+
+		compiler.hooks.afterEmit.tapAsync(id, function (compilation, callback) {
+			callback();
+
+			console.log(
+				isWatchMode ? messages.startWatching : messages.compilationComplete
+			);
+
+			const assets =
+				compilation.getStats().toJson(
+					{
+						assets: true,
+					},
+					true
+				).assets || [];
+			const assetList = assets.map((asset) => asset.name);
+			const emittedAssets = Array.from(compilation.emittedAssets);
+			const staleAssets = prevAssets.filter((asset) => {
+				return assetList.includes(asset) === false;
+			});
+
+			// store assets for next compilation
+			prevAssets = assetList.sort();
+
+			notify({
+				type: 'compilation',
+				version,
+
+				emittedAssets,
+				staleAssets,
+				hash: compilation.hash,
+			});
+		});
+	}
+}
+
+function notify(message: any) {
+	if (!process.send) {
+		return;
+	}
+
+	console.log(`[${id}] Notify: `, message);
+	process.send(message, (error) => {
+		if (error) {
+			console.error(`[${id}] Process Send Error: `, error);
+		}
+
+		return null;
+	});
+}