fix(hmr): catch render errors and clear state for module replacement (#3

)

package.json

@@ -39,7 +39,7 @@
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-loader": "^2.0.0",
     "eslint-plugin-import": "^2.9.0",
-    "jasmine-core": "^2.99",
+    "jasmine-core": "^3.1.0",
     "karma": "^2.0.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-coverage": "^1.1.1",

src/cache.js

@@ -53,7 +53,13 @@ export function get(target, key, getter) {
   context = entry;
 
   entry.deps = [];
-  entry.value = getter(target, entry.value);
+
+  try {
+    entry.value = getter(target, entry.value);
+  } catch (e) {
+    context = null;
+    throw e;
+  }
 
   context = parentContext;
 

src/render.js

@@ -11,26 +11,39 @@ function update(iterator, startTime) {
   } else {
     const { done, value: target } = iterator.next();
     const nextTime = performance.now();
+    const next = () => update(iterator, nextTime);
 
     if (done) {
       queue.clear();
     } else if (map.has(target)) {
       const key = map.get(target);
       const prevFn = cache.get(target);
-      const nextFn = target[key];
+      let nextFn;
 
-      if (nextFn !== prevFn) {
-        cache.set(target, nextFn);
+      try {
+        nextFn = target[key];
 
-        Promise.resolve().then(() => {
-          nextFn();
-          update(iterator, nextTime);
-        });
-      } else {
-        update(iterator, nextTime);
+        if (nextFn !== prevFn) {
+          cache.set(target, nextFn);
+
+          Promise.resolve().then(() => {
+            try {
+              nextFn();
+              next();
+            } catch (e) {
+              next();
+              throw e;
+            }
+          });
+        } else {
+          next();
+        }
+      } catch (e) {
+        next();
+        throw e;
       }
     } else {
-      update(iterator, nextTime);
+      next();
     }
   }
 }

test/spec/render.js

@@ -103,4 +103,44 @@ describe('render:', () => {
       });
     }));
   });
+
+  it('catches error inside of the passed function', (done) => {
+    define('test-render-throws-in-render', {
+      render: () => {
+        throw Error();
+      },
+    });
+
+    let throwEl;
+
+    Promise.resolve().then(() => {
+      throwEl = document.createElement('test-render-throws-in-render');
+      document.body.appendChild(throwEl);
+    }).catch(() => {});
+
+    tree(el => resolveRender(() => {
+      expect(el.shadowRoot.children[0].textContent).toBe('0');
+      document.body.removeChild(throwEl);
+      done();
+    }));
+  });
+
+  it('catches error inside of the returned function', (done) => {
+    define('test-render-throws-in-callback', {
+      render: () => () => { throw Error; },
+    });
+
+    let throwEl;
+
+    Promise.resolve().then(() => {
+      throwEl = document.createElement('test-render-throws-in-callback');
+      document.body.appendChild(throwEl);
+    }).catch(() => {});
+
+    tree(el => resolveRender(() => {
+      expect(el.shadowRoot.children[0].textContent).toBe('0');
+      document.body.removeChild(throwEl);
+      done();
+    }));
+  });
 });