diff --git a/packages/webpack5/src/configuration/base.ts b/packages/webpack5/src/configuration/base.ts index 2350782d2..d18941846 100644 --- a/packages/webpack5/src/configuration/base.ts +++ b/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 diff --git a/packages/webpack5/src/loaders/nativescript-hot-loader/hmr.runtime.ts b/packages/webpack5/src/loaders/nativescript-hot-loader/hmr.runtime.ts index 3c612c1fe..5862d7f04 100644 --- a/packages/webpack5/src/loaders/nativescript-hot-loader/hmr.runtime.ts +++ b/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') => { - // format is important - CLI expects this exact format - console.log(`[HMR][${hash}] ${status}`) - } - const originalOnLiveSync = global.__onLiveSync - global.__onLiveSync = async function () { - const hash = __webpack_require__.h(); - await module.hot.check().catch(err => { - setStatus(hash, 'failure') - }); - await module.hot.apply({ - ignoreUnaccepted: false, - ignoreDeclined: false, - ignoreErrored: false, - onDeclined(info) { - setStatus(hash, 'failure') - }, - onUnaccepted(info) { - setStatus(hash, 'failure') - }, - onAccepted(info) { - // console.log('accepted', info) - }, - onDisposed(info) { - // console.log('disposed', info) - }, - onErrored(info) { - setStatus(hash, 'failure') + let hash = __webpack_require__.h(); + + const logVerbose = (title: string, ...info?: any) => { + if (__NS_ENV_VERBOSE__) { + console.log(`[HMR][Verbose] ${title}`) + + if (info?.length) { + console.log(...info) + console.log('---') } - }).then(() => { - setStatus(hash, 'success') - }).catch((err) => { - setStatus(hash, 'failure') + } + } + + const setStatus = (hash: string, status: 'success' | 'failure', message?: string, ...info?: any): boolean => { + // format is important - CLI expects this exact format + console.log(`[HMR][${hash}] ${status} | ${message}`) + 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', 'A module has been declined.', info) + }, + onUnaccepted(info) { + 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', 'A module has errored.', info) + } + } + + const checkAndApply = async () => { + hash = __webpack_require__.h(); + const modules = await module.hot.check().catch(error => { + return setStatus(hash, 'failure', 'Failed to check.', error.message || error.stack) }) - setTimeout(() => { - originalOnLiveSync(); + if (!modules) { + 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(); }; } diff --git a/packages/webpack5/src/plugins/WatchStatePlugin.ts b/packages/webpack5/src/plugins/WatchStatePlugin.ts index a87b77c5f..bff43878d 100644 --- a/packages/webpack5/src/plugins/WatchStatePlugin.ts +++ b/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; }