Merge pull request #873 from NativeScript/tachev/fix-hmr-runtime-chunk

fix: ignore the Webpack runtime chunks when sending HMR updates

Author: Dimitar Tachev

lib/compiler.js

@@ -80,7 +80,7 @@ exports.runWebpackCompiler = function runWebpackCompiler(config, $projectData, $
                         return;
                     }
 
-                    const result = getUpdatedEmittedFiles(message.emittedFiles);
+                    const result = getUpdatedEmittedFiles(message.emittedFiles, message.webpackRuntimeFiles);
 
                     if (hookArgs.hmrData) {
                         hookArgs.hmrData[platform] = {

lib/utils.js

@@ -34,7 +34,7 @@ function buildEnvData($projectData, platform, env) {
  * if yes this is a HMR update and remove all bundle files as we don't need them to be synced,
  * but only the update chunks
  */
-function getUpdatedEmittedFiles(emittedFiles) {
+function getUpdatedEmittedFiles(emittedFiles, webpackRuntimeFiles) {
     let fallbackFiles = [];
     let hotHash;
     if (emittedFiles.some(x => x.endsWith('.hot-update.json'))) {
@@ -45,6 +45,10 @@ function getUpdatedEmittedFiles(emittedFiles) {
             hotHash = hash;
             // 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`);
+            if (webpackRuntimeFiles && webpackRuntimeFiles.length) {
+                // remove files containing only the Webpack runtime (e.g. runtime.js)
+                result = result.filter(file => webpackRuntimeFiles.indexOf(file) === -1);
+            }
         });
         //if applying of hot update fails, we must fallback to the full files
         fallbackFiles = emittedFiles.filter(file => result.indexOf(file) === -1);

plugins/WatchStateLoggerPlugin.ts

@@ -31,6 +31,7 @@ export class WatchStateLoggerPlugin {
                 console.log(messages.compilationComplete);
             }
 
+            const runtimeOnlyFiles = getWebpackRuntimeOnlyFiles(compilation, compiler.context);
             let emittedFiles = Object
                 .keys(compilation.assets)
                 .filter(assetKey => compilation.assets[assetKey].emitted);
@@ -42,7 +43,27 @@ export class WatchStateLoggerPlugin {
 
             process.send && process.send(messages.compilationComplete, error => null);
             // Send emitted files so they can be LiveSynced if need be
-            process.send && process.send({ emittedFiles: emittedFilesFakePaths }, error => null);
+            process.send && process.send({ emittedFiles: emittedFilesFakePaths, webpackRuntimeFiles: runtimeOnlyFiles }, error => null);
         });
     }
 }
+
+function getWebpackRuntimeOnlyFiles(compilation, basePath) {
+    let runtimeOnlyFiles = [];
+    try {
+        runtimeOnlyFiles = [].concat(...Array.from<any>(compilation.entrypoints.values())
+            .map(entrypoint => entrypoint.runtimeChunk)
+            // filter embedded runtime chunks (e.g. part of bundle.js or inspector-modules.js)
+            .filter(runtimeChunk => !!runtimeChunk && runtimeChunk.preventIntegration)
+            .map(runtimeChunk => runtimeChunk.files))
+            // get only the unique files in case of "single" runtime (e.g. runtime.js)
+            .filter((value, index, self) => self.indexOf(value) === index)
+            // convert to absolute paths
+            .map(fileName => join(basePath, fileName));
+    } catch (e) {
+        // breaking change in the Webpack API
+        console.log("Warning: Unable to find Webpack runtime files.");
+    }
+
+    return runtimeOnlyFiles;
+}