public/lookbook-assets/app.js in lookbook-3.0.0.alpha.1 vs public/lookbook-assets/app.js in lookbook-3.0.0.alpha.2

@@ -7940,20 +7940,23 @@
   // assets/js/server_events_listener.js
   var ServerEventsListener = class {
     constructor(endpoint) {
       this.endpoint = endpoint;
       this.source = null;
+      this.broadcastChannel = this.initBroadCastChannel();
       this.handlers = [];
       this.$logger = new Logger("EventsListener");
       addEventListener("visibilitychange", () => {
-        document.hidden ? this.stop() : this.start();
+        if (!document.hidden)
+          this.start();
       });
     }
     start() {
       if (!this.source) {
         this.$logger.debug(`Starting`);
         this.source = this.initSource();
+        this.broadcastStart();
       }
     }
     stop() {
       if (this.source) {
         this.source.close();
@@ -7982,10 +7985,25 @@
         this.stop();
       });
       window.onbeforeunload = () => this.stop();
       return source;
     }
+    initBroadCastChannel() {
+      const bc = new BroadcastChannel("lookbook_events");
+      bc.addEventListener("message", (event) => {
+        const data2 = JSON.parse(event.data);
+        if (data2.type === "event-source-start") {
+          this.stop();
+        }
+      });
+      return bc;
+    }
+    broadcastStart() {
+      this.broadcastChannel.postMessage(
+        JSON.stringify({ type: "event-source-start" })
+      );
+    }
   };
 
   // assets/js/helpers.js
   function observeSize(element2, callback = () => {
   }) {
@@ -8015,10 +8033,12 @@
   // app/components/lookbook/ui/app/router/router.js
   var router_default = AlpineComponent("router", (sseEndpoint = null) => {
     return {
       serverEventsListener: null,
       routerLogger: null,
+      lastUpdate: Date.now(),
+      morphing: false,
       init() {
         this.routerLogger = new Logger("Router");
         if (sseEndpoint) {
           this.serverEventsListener = new ServerEventsListener(sseEndpoint);
           this.serverEventsListener.on("update", () => this.updatePage());
@@ -8032,10 +8052,11 @@
       async updatePage() {
         this.$dispatch("page-update:start");
         await this.updateDOM(location, "router", {
           headers: { "X-Lookbook-Frame": "root" }
         });
+        this.lastUpdate = Date.now();
         this.routerLogger.info(`Page updated`);
         this.$dispatch("page-update:complete");
       },
       async loadPage(url, updateHistory = true) {
         this.$dispatch("page-load:start");
@@ -8043,19 +8064,35 @@
           headers: { "X-Lookbook-Frame": "main" }
         });
         if (updateHistory) {
           history.pushState({}, "", result.url);
         }
+        this.lastUpdate = Date.now();
         this.routerLogger.debug(`Page loaded`);
         this.$dispatch("page-load:complete");
       },
+      async handleError(error2) {
+        if (this.morphing) {
+          const { stack } = error2.error;
+          if (stack.indexOf("Alpine") >= 0) {
+            window.location.reload();
+          }
+        }
+      },
       async updateDOM(url, selector, options = {}) {
+        if (this.morphing) {
+          return;
+        }
         const result = await fetchHTML(url, selector, options);
         if (result.status < 500) {
+          this.morphing = true;
           document.dispatchEvent(new CustomEvent("morph:start"));
           Alpine.morph(document.querySelector(selector), result.fragment);
-          document.dispatchEvent(new CustomEvent("morph:complete"));
+          this.$nextTick(() => {
+            document.dispatchEvent(new CustomEvent("morph:complete"));
+            this.morphing = false;
+          });
         } else {
           location.href = url;
         }
         return result;
       },
@@ -8067,13 +8104,17 @@
             event.preventDefault();
             this.visit(link.href);
           }
         }
       },
-      handleVisibilityChange() {
-        if (this.serverEventsListener && !document.hidden)
-          this.updatePage();
+      async handleVisibilityChange() {
+        if (this.serverEventsListener && !document.hidden) {
+          const response = await fetch(`${sseEndpoint}/ping`);
+          const lastServerUpdate = Date.parse(await response.text());
+          if (lastServerUpdate > this.lastUpdate)
+            this.updatePage();
+        }
       },
       destroy() {
         this.routerLogger.error(`Router instance destroyed!`);
       }
     };
@@ -17828,15 +17869,17 @@
   __export(nav_item_exports, {
     default: () => nav_item_default
   });
   var nav_item_default = AlpineComponent("navItem", ({ keywords, collection }) => {
     return {
+      key: null,
       keywords: [],
       isCollection: false,
       filteredOut: false,
       selected: false,
       init() {
+        this.key = this.$el.getAttribute("key");
         this.keywords = keywords || [];
         this.isCollection = collection || false;
         this.setSelectionState();
       },
       visit() {
@@ -17869,12 +17912,9 @@
         const selected = this.targetUrl === document.location.pathname;
         this.selected = selected;
       },
       get targetUrl() {
         return this.$root.getAttribute("data-url");
-      },
-      get key() {
-        return this.$root.getAttribute("key");
       },
       get expanded() {
         return this.expandedItems && this.key && this.expandedItems.includes(this.key);
       },
       set expanded(isExpanded) {