Small refactor of client to reduce deep nesting

Author: zachleat

client/reload-client.js

@@ -93,6 +93,11 @@ class Util {
     script.innerHTML = source.innerHTML;
     (target || source).replaceWith(script);
   }
+
+  static fullPageReload() {
+    Util.log(`Page reload initiated.`);
+    window.location.reload();
+  }
 }
 
 class EleventyReload {
@@ -111,93 +116,96 @@ class EleventyReload {
     default: async (files, build = {}) => {
       let morphed = false;
 
+      if((build.templates || []).length === 0) {
+        return;
+      }
+
+      let templates = (build?.templates || []).filter(({url, inputPath}) => {
+        return url === document.location.pathname && (files || []).includes(inputPath);
+      });
+
+      if(templates.length === 0) {
+        Util.fullPageReload();
+        return;
+      }
+
       try {
-        if((build.templates || []).length > 0) {
-          // Important: using `./` in `./morphdom.js` allows the special `.11ty` folder to be changed upstream
-          const { default: morphdom } = await import(`./morphdom.js`);
-
-          // { url, inputPath, content }
-          for (let template of build?.templates || []) {
-            if (template.url === document.location.pathname) {
-              // Importantly, if this does not match but is still relevant (layout/include/etc), a full reload happens below. This could be improved.
-              if ((files || []).includes(template.inputPath)) {
-                // Notable limitation: this won’t re-run script elements or JavaScript page lifecycle events (load/DOMContentLoaded)
-                morphed = true;
-
-                morphdom(document.documentElement, template.content, {
-                  childrenOnly: true,
-                  onBeforeElUpdated: function (fromEl, toEl) {
-                    if (fromEl.nodeName === "SCRIPT" && toEl.nodeName === "SCRIPT") {
-                      if(toEl.innerHTML !== fromEl.innerHTML) {
-                        Util.log(`JavaScript modified, reload initiated.`);
-                        window.location.reload();
-                      }
-
-                      return false;
-                    }
-
-                    // Speed-up trick from morphdom docs
-                    // https://dom.spec.whatwg.org/#concept-node-equals
-                    if (fromEl.isEqualNode(toEl)) {
-                      return false;
-                    }
-
-                    if(Util.isEleventyLinkNodeMatch(fromEl, toEl)) {
-                      return false;
-                    }
-
-                    return true;
-                  },
-                  addChild: function(parent, child) {
-                    // Declarative Shadow DOM https://github.com/11ty/eleventy-dev-server/issues/90
-                    if(child.nodeName === "TEMPLATE" && child.hasAttribute("shadowrootmode")) {
-                      let root = parent.shadowRoot;
-                      if(root) {
-                        // remove all shadow root children
-                        while(root.firstChild) {
-                          root.removeChild(root.firstChild);
-                        }
-                      }
-                      for(let newChild of child.content.childNodes) {
-                        root.appendChild(newChild);
-                      }
-                    } else {
-                      parent.appendChild(child);
-                    }
-                  },
-                  onNodeAdded: function (node) {
-                    if (node.nodeName === 'SCRIPT') {
-                      Util.log(`JavaScript added, reload initiated.`);
-                      window.location.reload();
-                    }
-                  },
-                  onElUpdated: function(node) {
-                    // Re-attach custom elements
-                    if(customElements.get(node.tagName.toLowerCase())) {
-                      let placeholder = document.createElement("div");
-                      node.replaceWith(placeholder);
-                      requestAnimationFrame(() => {
-                        placeholder.replaceWith(node);
-                        placeholder = undefined;
-                      });
-                    }
+        // Important: using `./` allows the `.11ty` folder name to be changed
+        const { default: morphdom } = await import(`./morphdom.js`);
+
+        for (let {url, inputPath, content} of templates) {
+          // Notable limitation: this won’t re-run script elements or JavaScript page lifecycle events (load/DOMContentLoaded)
+          morphed = true;
+
+          morphdom(document.documentElement, content, {
+            childrenOnly: true,
+            onBeforeElUpdated: function (fromEl, toEl) {
+              if (fromEl.nodeName === "SCRIPT" && toEl.nodeName === "SCRIPT") {
+                if(toEl.innerHTML !== fromEl.innerHTML) {
+                  Util.log(`JavaScript modified, reload initiated.`);
+                  window.location.reload();
+                }
+
+                return false;
+              }
+
+              // Speed-up trick from morphdom docs
+              // https://dom.spec.whatwg.org/#concept-node-equals
+              if (fromEl.isEqualNode(toEl)) {
+                return false;
+              }
+
+              if(Util.isEleventyLinkNodeMatch(fromEl, toEl)) {
+                return false;
+              }
+
+              return true;
+            },
+            addChild: function(parent, child) {
+              // Declarative Shadow DOM https://github.com/11ty/eleventy-dev-server/issues/90
+              if(child.nodeName === "TEMPLATE" && child.hasAttribute("shadowrootmode")) {
+                let root = parent.shadowRoot;
+                if(root) {
+                  // remove all shadow root children
+                  while(root.firstChild) {
+                    root.removeChild(root.firstChild);
                   }
+                }
+                for(let newChild of child.content.childNodes) {
+                  root.appendChild(newChild);
+                }
+              } else {
+                parent.appendChild(child);
+              }
+            },
+            onNodeAdded: function (node) {
+              if (node.nodeName === 'SCRIPT') {
+                Util.log(`JavaScript added, reload initiated.`);
+                window.location.reload();
+              }
+            },
+            onElUpdated: function(node) {
+              // Re-attach custom elements
+              if(customElements.get(node.tagName.toLowerCase())) {
+                let placeholder = document.createElement("div");
+                node.replaceWith(placeholder);
+                requestAnimationFrame(() => {
+                  placeholder.replaceWith(node);
+                  placeholder = undefined;
                 });
-
-                Util.matchRootAttributes(template.content);
-                Util.log(`HTML delta applied without page reload.`);
               }
-              break;
             }
-          }
+          });
+
+          Util.matchRootAttributes(content);
+          Util.log(`HTML delta applied without page reload.`);
         }
       } catch(e) {
         Util.error( "Morphdom error", e );
       }
 
       if (!morphed) {
-        Util.log(`Page reload initiated.`);
-        window.location.reload();
+        Util.fullPageReload();
       }
     }
   }