Unhandled HMR updates should cause a page reload (#2676)

parcel-bundler · Mar 5, 2019 · f68f0df · f68f0df
1 parent c3921cb
commit f68f0df
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 20 deletions.
diff --git a/packages/core/integration-tests/test/hmr.js b/packages/core/integration-tests/test/hmr.js
@@ -392,6 +392,45 @@ describe('hmr', function() {
     assert.deepEqual(outputs, [3, 10]);
   });
 
+  it('should bubble up HMR events to a page reload', async function() {
+    await ncp(
+      path.join(__dirname, '/integration/hmr-reload'),
+      path.join(__dirname, '/input')
+    );
+
+    b = bundler(path.join(__dirname, '/input/index.js'), {
+      watch: true,
+      hmr: true
+    });
+    let bundle = await b.bundle();
+
+    let outputs = [];
+    let ctx = await run(
+      bundle,
+      {
+        output(o) {
+          outputs.push(o);
+        }
+      },
+      {require: false}
+    );
+    let spy = sinon.spy(ctx.location, 'reload');
+
+    await sleep(50);
+    assert.deepEqual(outputs, [3]);
+    assert(spy.notCalled);
+
+    await sleep(100);
+    fs.writeFile(
+      path.join(__dirname, '/input/local.js'),
+      'exports.a = 5; exports.b = 5;'
+    );
+
+    await nextEvent(b, 'bundled');
+    assert.deepEqual(outputs, [3]);
+    assert(spy.calledOnce);
+  });
+
   it('should log emitted errors and show an error overlay', async function() {
     await ncp(
       path.join(__dirname, '/integration/commonjs'),

diff --git a/packages/core/integration-tests/test/integration/hmr-circular/index.js b/packages/core/integration-tests/test/integration/hmr-circular/index.js
@@ -4,6 +4,8 @@ function run() {
   output(local.a + local.b);
 }
 
+module.hot.accept();
+
 run();
 
 module.exports = 'value';
diff --git a/packages/core/integration-tests/test/integration/hmr-dynamic/index.js b/packages/core/integration-tests/test/integration/hmr-dynamic/index.js
@@ -6,4 +6,6 @@ function run() {
   });
 };
 
+module.hot.accept();
+
 run();
diff --git a/packages/core/integration-tests/test/integration/hmr-reload/index.js b/packages/core/integration-tests/test/integration/hmr-reload/index.js
@@ -0,0 +1,7 @@
+var local = require('./local');
+
+function run() {
+  output(local.a + local.b);
+}
+
+run();
diff --git a/packages/core/integration-tests/test/integration/hmr-reload/local.js b/packages/core/integration-tests/test/integration/hmr-reload/local.js
@@ -0,0 +1,2 @@
+exports.a = 1;
+exports.b = 2;
diff --git a/packages/core/integration-tests/test/integration/hmr/index.js b/packages/core/integration-tests/test/integration/hmr/index.js
@@ -4,4 +4,6 @@ function run() {
   output(local.a + local.b);
 }
 
+module.hot.accept();
+
 run();
diff --git a/packages/core/parcel-bundler/src/builtins/hmr-runtime.js b/packages/core/parcel-bundler/src/builtins/hmr-runtime.js
@@ -20,30 +20,43 @@ function Module(moduleName) {
 }
 
 module.bundle.Module = Module;
-var updatedAssets;
+var checkedAssets, assetsToAccept;
 
 var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = process.env.HMR_HOSTNAME || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
   var ws = new WebSocket(protocol + '://' + hostname + ':' + process.env.HMR_PORT + '/');
   ws.onmessage = function(event) {
-    updatedAssets = {};
-
+    checkedAssets = {};
+    assetsToAccept = [];
+
     var data = JSON.parse(event.data);
 
     if (data.type === 'update') {
-      console.clear();
-
-      data.assets.forEach(function (asset) {
-        hmrApply(global.parcelRequire, asset);
-      });
-
-      data.assets.forEach(function (asset) {
+      var handled = false;
+      data.assets.forEach(function(asset) {
         if (!asset.isNew) {
-          hmrAccept(global.parcelRequire, asset.id);
+          var didAccept = hmrAcceptCheck(global.parcelRequire, asset.id);
+          if (didAccept) {
+            handled = true;
+          }
         }
       });
+
+      if(handled){
+        console.clear();
+
+        data.assets.forEach(function (asset) {
+          hmrApply(global.parcelRequire, asset);
+        });
+
+        assetsToAccept.forEach(function (v) {
+          hmrAcceptRun(v[0], v[1]);
+        });
+      } else {
+        window.location.reload();
+      }
     }
 
     if (data.type === 'reload') {
@@ -140,21 +153,35 @@ function hmrApply(bundle, asset) {
   }
 }
 
-function hmrAccept(bundle, id) {
+function hmrAcceptCheck(bundle, id) {
   var modules = bundle.modules;
   if (!modules) {
     return;
   }
 
   if (!modules[id] && bundle.parent) {
-    return hmrAccept(bundle.parent, id);
+    return hmrAcceptCheck(bundle.parent, id);
   }
 
-  if (updatedAssets[id]) {
+  if (checkedAssets[id]) {
     return;
   }
-  updatedAssets[id] = true;
+  checkedAssets[id] = true;
+
+  var cached = bundle.cache[id];
+
+  assetsToAccept.push([bundle, id])
+
+  if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
+    return true;
+  }
 
+  return getParents(global.parcelRequire, id).some(function (id) {
+    return hmrAcceptCheck(global.parcelRequire, id)
+  });
+}
+
+function hmrAcceptRun(bundle, id) {
   var cached = bundle.cache[id];
   bundle.hotData = {};
   if (cached) {
@@ -177,8 +204,4 @@ function hmrAccept(bundle, id) {
     });
     return true;
   }
-
-  return getParents(global.parcelRequire, id).some(function (id) {
-    return hmrAccept(global.parcelRequire, id)
-  });
 }
diff --git a/packages/core/test-utils/src/utils.js b/packages/core/test-utils/src/utils.js
@@ -230,7 +230,7 @@ function prepareBrowserContext(bundle, globals) {
       document: fakeDocument,
       WebSocket,
       console,
-      location: {hostname: 'localhost'},
+      location: {hostname: 'localhost', reload() {}},
       fetch(url) {
         return Promise.resolve({
           arrayBuffer() {