chore: clean up HMR runtime

packages/webpack5/src/configuration/base.ts

@@ -283,6 +283,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 		{
 			__DEV__: mode === 'development',
 			__NS_WEBPACK__: true,
+			__NS_ENV_VERBOSE__: !!env.verbose,
 			__NS_DEV_HOST_IPS__:
 				mode === 'development' ? JSON.stringify(getIPS()) : `[]`,
 			__CSS_PARSER__: JSON.stringify('css-tree'), // todo: replace from config value

packages/webpack5/src/loaders/nativescript-hot-loader/hmr.runtime.ts

@@ -1,47 +1,97 @@
 // @ts-nocheck
 // This is a runtime module - included by nativescript-hot-loader
 // this file should not include external dependencies
-// todo: add verbose logs when enabled
 // ---
 
 if (module.hot) {
-	const setStatus = (hash: string, status: 'success' | 'failure') => {
+	let hash = __webpack_require__.h();
-		// format is important - CLI expects this exact format
+
-		console.log(`[HMR][${hash}] ${status}`)
+	const logVerbose = (title: string, ...info?: any) => {
+		if (__NS_ENV_VERBOSE__) {
+			console.log(`[HMR][Verbose] ${title}`)
+
+			if (info?.length) {
+				console.log(...info)
+				console.log('---')
 			}
-	const originalOnLiveSync = global.__onLiveSync
+		}
-	global.__onLiveSync = async function () {
+	}
-		const hash = __webpack_require__.h();
+
-		await module.hot.check().catch(err => {
+	const setStatus = (hash: string, status: 'success' | 'failure', message?: string, ...info?: any): boolean => {
-			setStatus(hash, 'failure')
+		// format is important - CLI expects this exact format
-		});
+		console.log(`[HMR][${hash}] ${status} | ${message}`)
-		await module.hot.apply({
+		if (info?.length) {
+			logVerbose('Additional Info', info)
+		}
+
+		// return true if operation was successful
+		return status === 'success'
+	}
+
+	const applyOptions = {
 		ignoreUnaccepted: false,
 		ignoreDeclined: false,
 		ignoreErrored: false,
 		onDeclined(info) {
-				setStatus(hash, 'failure')
+			setStatus(hash, 'failure', 'A module has been declined.', info)
 		},
 		onUnaccepted(info) {
-				setStatus(hash, 'failure')
+			setStatus(hash, 'failure', 'A module has not been accepted.', info)
 		},
 		onAccepted(info) {
 			// console.log('accepted', info)
+			logVerbose('Module Accepted', info)
 		},
 		onDisposed(info) {
 			// console.log('disposed', info)
+			logVerbose('Module Disposed', info)
 		},
 		onErrored(info) {
-				setStatus(hash, 'failure')
+			setStatus(hash, 'failure', 'A module has errored.', info)
 		}
-		}).then(() => {
+	}
-			setStatus(hash, 'success')
+
-		}).catch((err) => {
+	const checkAndApply = async () => {
-			setStatus(hash, 'failure')
+		hash = __webpack_require__.h();
+		const modules = await module.hot.check().catch(error => {
+			return setStatus(hash, 'failure', 'Failed to check.', error.message || error.stack)
 		})
 
-		setTimeout(() => {
+		if (!modules) {
-			originalOnLiveSync();
+			logVerbose('No modules to apply.')
+			return false;
+		}
+
+		const appliedModules = await module.hot.apply(applyOptions).catch(error => {
+			return setStatus(hash, 'failure', 'Failed to apply.', error.message || error.stack)
 		})
+
+		if (!appliedModules) {
+			logVerbose('No modules applied.')
+			return false;
+		}
+
+		return setStatus(hash, 'success', 'Successfully applied update.')
+	}
+
+	const hasUpdate = () => {
+		try {
+			__non_webpack_require__(`~/bundle.${__webpack_hash__}.hot-update.json`)
+			return true;
+		} catch (err) {
+			return false;
+		}
+	}
+
+	const originalOnLiveSync = global.__onLiveSync
+	global.__onLiveSync = async function () {
+		logVerbose('LiveSync')
+
+		if (!hasUpdate()) {
+			return;
+		}
+
+		await checkAndApply()
+		originalOnLiveSync();
 	};
 }

packages/webpack5/src/plugins/WatchStatePlugin.ts

@@ -1,6 +1,7 @@
+import { env } from "../";
+
 const id = 'WatchStatePlugin';
 const version = 1;
-const DEBUG = false;
 
 export enum messages {
 	compilationComplete = 'Webpack compilation complete.',
@@ -23,7 +24,7 @@ export class WatchStatePlugin {
 			if (isWatchMode) {
 				console.log(messages.changeDetected);
 
-				if (DEBUG) {
+				if (env.verbose) {
 					if (compiler.modifiedFiles) {
 						Array.from(compiler.modifiedFiles).forEach(file => {
 							console.log(`MODIFIED: ${file}`)
@@ -80,7 +81,7 @@ export class WatchStatePlugin {
 }
 
 function notify(message: any) {
-	DEBUG && console.log(`[${id}] Notify: `, message);
+	env.verbose && console.log(`[${id}] Notify: `, message);
 	if (!process.send) {
 		return;
 	}