page.js in lookbook-0.5.0.beta.0

- old
+ new

@@ -1,7 +1,23 @@
 import createSocket from "../lib/socket";
 
+const morphOpts = {
+  key(el) {
+    return el.getAttribute("key") ? el.getAttribute("key") : el.id;
+  },
+  updating(el, toEl, childrenOnly, skip) {
+    if (
+      el.getAttribute &&
+      el.getAttribute("data-morph-strategy") === "replace"
+    ) {
+      el.innerHTML = toEl.innerHTML;
+      return skip();
+    }
+  },
+  lookahead: true,
+};
+
 export default function page() {
   return {
     init() {
       const socket = createSocket(window.SOCKET_PATH);
       socket.addListener("Lookbook::ReloadChannel", () => this.refresh());
@@ -20,14 +36,10 @@
     refresh() {
       this.$dispatch("popstate");
     },
     morph(dom) {
       const pageHtml = dom.getElementById(this.$root.id).outerHTML;
-      Alpine.morph(this.$root, pageHtml, {
-        key(el) {
-          return el.getAttribute("key") ? el.getAttribute("key") : el.id;
-        },
-      });
+      Alpine.morph(this.$root, pageHtml, morphOpts);
       this.$dispatch("page:morphed");
     },
   };
 }