From 7d722f23f0043936376e752d6c4682422ee855e3 Mon Sep 17 00:00:00 2001 From: Vasil Trifonov Date: Thu, 20 Sep 2018 15:58:22 +0300 Subject: [PATCH 1/4] Add HMR prefix to logs from HMR to be filterable --- hot.js | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/hot.js b/hot.js index f6fcb225..ec976196 100644 --- a/hot.js +++ b/hot.js @@ -1,4 +1,9 @@ -const log = console; +const hmrPrefix = 'HMR:'; +const log = { + info: (message) => console.info(`${hmrPrefix} ${message}`), + warn: (message) => console.warn(`${hmrPrefix} ${message}`), + error: (message) => console.error(`${hmrPrefix} ${message}`), +}; const refresh = 'Application needs to be restarted in order to apply the changes.'; const hotOptions = { ignoreUnaccepted: true, @@ -45,19 +50,19 @@ function result(modules, appliedModules) { } if (!(appliedModules || []).length) { - console.info('No Modules Updated.'); + log.info('No Modules Updated.'); } else { - console.info('The following modules were updated:'); + log.info('The following modules were updated:'); for (const moduleId of appliedModules) { - console.info(` ↻ ${moduleId}`); + log.info(` ↻ ${moduleId}`); } const numberIds = appliedModules.every( (moduleId) => typeof moduleId === 'number' ); if (numberIds) { - console.info( + log.info( 'Please consider using the NamedModulesPlugin for module names.' ); } @@ -85,7 +90,7 @@ function check(options) { result(modules, appliedModules); if (upToDate()) { - console.info('App is up to date.'); + log.info('App is up to date.'); } }) .catch((err) => { @@ -97,7 +102,7 @@ function check(options) { window.location.reload(); } } else { - log.warn(`Update failed: ${err.stack}` || err.message); + log.warn(`Update failed: ${err.stack || err.message}`); } }); }) @@ -107,15 +112,15 @@ function check(options) { log.warn(`Cannot check for update. ${refresh}`); log.warn(err.stack || err.message); } else { - log.warn(`Update check failed: ${err.stack}` || err.message); + log.warn(`Update check failed: ${err.stack|| err.message}`); } }); } if (module.hot) { - console.info('Hot Module Replacement Enabled. Waiting for signal.'); + log.info('Hot Module Replacement Enabled. Waiting for signal.'); } else { - console.error('Hot Module Replacement is disabled.'); + log.error('Hot Module Replacement is disabled.'); } function update(currentHash, options) { @@ -124,7 +129,7 @@ function update(currentHash, options) { const status = module.hot.status(); if (status === 'idle') { - console.info('Checking for updates to the bundle.'); + log.info('Checking for updates to the bundle.'); check(options); } else if (['abort', 'fail'].indexOf(status) >= 0) { log.warn( From 13856b08a7a0276b473419268abe6526eb5e707f Mon Sep 17 00:00:00 2001 From: Vasil Trifonov Date: Thu, 20 Sep 2018 16:10:59 +0300 Subject: [PATCH 2/4] add global.__hmrRefresh function so that it can be easily used by users --- bundle-config-loader.js | 14 +++++++++++++- hot-loader-helper.js | 10 ++-------- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/bundle-config-loader.js b/bundle-config-loader.js index c3d379ff..e960ce74 100644 --- a/bundle-config-loader.js +++ b/bundle-config-loader.js @@ -15,9 +15,21 @@ module.exports = function (source) { global.__hmrLivesyncBackup = global.__onLiveSync; global.__onLiveSync = function () { - console.log("HMR Sync..."); + console.log("HMR: Sync..."); require("nativescript-dev-webpack/hot")(__webpack_require__.h(), (fileName) => applicationFiles.getFile(fileName)); }; + + global.__hmrRefresh = function(type) { + global.__hmrNeedReload = true; + setTimeout(() => { + if(global.__hmrNeedReload) { + global.__hmrNeedReload = false; + global.__hmrLivesyncBackup(); + } + }, type === 'style' ? (global.__hmrInitialSync ? 3000 : 0) : 0); + // we need to add a timeout of 3000 if we have a css change, otherwise the app crashes on initial hmr sync + } + global.__hmrInitialSync = true; // needed to determine if we are performing initial sync global.__onLiveSync(); } diff --git a/hot-loader-helper.js b/hot-loader-helper.js index 1a2542fd..1314d277 100644 --- a/hot-loader-helper.js +++ b/hot-loader-helper.js @@ -2,14 +2,8 @@ module.exports.reload = function(type) { return ` if (module.hot) { module.hot.accept(); module.hot.dispose(() => { - global.__hmrNeedReload = true; - setTimeout(() => { - if(global.__hmrNeedReload) { - global.__hmrNeedReload = false; - global.__hmrLivesyncBackup(); - } - }, ${type === 'style' ? "global.__hmrInitialSync ? 1000 : 0" : 0}); + global.__hmrRefresh('${type}'); }) } `}; -// we need to add a timeout of 1000 if we have a css change, otherwise the app crashes on initial hmr sync + From dbd5e70d03305ef1c8c123c9dedb2f111f670faf Mon Sep 17 00:00:00 2001 From: Vasil Trifonov Date: Thu, 20 Sep 2018 16:11:52 +0300 Subject: [PATCH 3/4] Remove timeout as it is handled in the latest modules --- bundle-config-loader.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/bundle-config-loader.js b/bundle-config-loader.js index e960ce74..92b73398 100644 --- a/bundle-config-loader.js +++ b/bundle-config-loader.js @@ -26,8 +26,7 @@ module.exports = function (source) { global.__hmrNeedReload = false; global.__hmrLivesyncBackup(); } - }, type === 'style' ? (global.__hmrInitialSync ? 3000 : 0) : 0); - // we need to add a timeout of 3000 if we have a css change, otherwise the app crashes on initial hmr sync + }); } global.__hmrInitialSync = true; // needed to determine if we are performing initial sync From f75efbcc9431a88b7bca945a73fe54a7a202ffa4 Mon Sep 17 00:00:00 2001 From: Vasil Trifonov Date: Thu, 20 Sep 2018 16:33:16 +0300 Subject: [PATCH 4/4] Improve file filtering of emitted hmr files --- plugins/WatchStateLoggerPlugin.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/plugins/WatchStateLoggerPlugin.ts b/plugins/WatchStateLoggerPlugin.ts index dd2cc68b..51a65bb6 100644 --- a/plugins/WatchStateLoggerPlugin.ts +++ b/plugins/WatchStateLoggerPlugin.ts @@ -98,9 +98,15 @@ export class WatchStateLoggerPlugin { * but only the update chunks */ static getUpdatedEmittedFiles(emittedFiles) { - // TODO: Once we are able to determine whether this is a vue project do not always include .css and .scss files, but only for vue projects if(emittedFiles.some(x => x.endsWith('.hot-update.json'))) { - return emittedFiles.filter(x => x.indexOf('.hot-update.') > 0 || x.endsWith('css')); + let result = emittedFiles.slice(); + const hotUpdateScripts = emittedFiles.filter(x => x.endsWith('.hot-update.js')); + hotUpdateScripts.forEach(hotUpdateScript => { + const { name } = this.parseHotUpdateChunkName(hotUpdateScript); + // remove bundle/vendor.js files if there's a bundle.XXX.hot-update.js or vendor.XXX.hot-update.js + result = result.filter(file => file !== `${name}.js`); + }); + return result; } else { return emittedFiles; }