refactor: HMR improvements (#667)

* Add HMR prefix to logs from HMR to be filterable

* add global.__hmrRefresh function so that it can be easily used by users

* Remove timeout as it is handled in the latest modules

* Improve file filtering of emitted hmr files

Author: vtrifonov

bundle-config-loader.js

@@ -15,9 +15,20 @@ 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();
+                        }
+                    });
+                }
+
                 global.__hmrInitialSync = true; // needed to determine if we are performing initial sync
                 global.__onLiveSync();
             }

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
+

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(

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;
         }