fix: stale live reload due to dropped watch events

CHANGELOG.md

@@ -45,6 +45,7 @@ Go to the `v1` branch to see the changelog of Lume 1.
 - Watcher new files on Windows.
 - Feed plugin: error when the updated/published value is a string [#638].
 - Fixed esbuild reload [#647].
+- Fixed serve showing stale pages [#649].
 - Speed up logging to console with colors [#651]
 
 ## [2.2.4] - 2024-07-18

core/watcher.ts

@@ -77,30 +77,31 @@ export default class FSWatcher implements Watcher {
   async start() {
     const { root, ignore, debounce } = this.options;
     const watcher = Deno.watchFs(root);
-    const changes = new Set<string>();
+    const changeQueue: Set<string>[] = [];
     let timer = 0;
     let runningCallback = false;
 
     await this.dispatchEvent({ type: "start" });
 
     const callback = async () => {
-      if (!changes.size || runningCallback) {
-        return;
-      }
-
-      const files = new Set(changes);
-      changes.clear();
-
       runningCallback = true;
 
-      try {
-        const result = await this.dispatchEvent({ type: "change", files });
-        if (false === result) {
-          return watcher.close();
+      let changes: Set<string> | undefined;
+      while ((changes = changeQueue.pop()) !== undefined) {
+        try {
+          const result = await this.dispatchEvent({
+            type: "change",
+            files: changes,
+          });
+          if (false === result) {
+            runningCallback = false;
+            return watcher.close();
+          }
+        } catch (error) {
+          await this.dispatchEvent({ type: "error", error });
         }
-      } catch (error) {
-        await this.dispatchEvent({ type: "error", error });
       }
+
       runningCallback = false;
     };
 
@@ -123,11 +124,24 @@ export default class FSWatcher implements Watcher {
         continue;
       }
 
+      const changes = new Set<string>();
       paths.forEach((path) => changes.add(normalizePath(relative(root, path))));
 
-      // Debounce
-      clearTimeout(timer);
-      timer = setTimeout(callback, debounce ?? 100);
+      // If we're already processing and have a pending
+      // queue item, we can merge all future changes together
+      if (runningCallback && changeQueue.length > 0) {
+        const last = changeQueue[changeQueue.length - 1];
+        changeQueue[changeQueue.length - 1] = last.union(changes);
+      } else {
+        changeQueue.unshift(changes);
+
+        // Only start if processing queue is not already running
+        if (!runningCallback) {
+          // Debounce
+          clearTimeout(timer);
+          timer = setTimeout(callback, debounce ?? 100);
+        }
+      }
     }
   }
 }

middlewares/reload.ts

@@ -13,14 +13,33 @@ export function reload(options: Options): Middleware {
   const sockets = new Set<WebSocket>();
   const { watcher } = options;
 
+  // Keep track of the change revision. A watch change
+  // can be dispatched in-between the browser loading
+  // the HTML and before it has established a WebSocket
+  // connection. In this case the browser is out of sync
+  // and shows an old version of the page. Upon establishing
+  // a websocket connection we send the latest revision
+  // and the browser can potentially refresh itself when
+  // it has an older revision. The initial revision is
+  // sent to the browser as part of the HTML.
+  let revision = 0;
+  let lastAcknowledgedRevision = 0;
+
   watcher.addEventListener("change", (event) => {
+    revision++;
+
     if (!sockets.size) {
       return;
     }
 
+    lastAcknowledgedRevision = revision;
+
     const files = event.files!;
-    const urls = Array.from(files).map((file) => normalizePath(file));
-    const message = JSON.stringify(urls);
+    const message = JSON.stringify({
+      type: "update",
+      revision,
+      files: Array.from(files).map((file) => normalizePath(file)),
+    });
     sockets.forEach((socket) => {
       if (socket.readyState === WebSocket.OPEN) {
         socket.send(message);
@@ -36,7 +55,19 @@ export function reload(options: Options): Middleware {
     if (request.headers.get("upgrade") === "websocket") {
       const { socket, response } = Deno.upgradeWebSocket(request);
 
-      socket.onopen = () => sockets.add(socket);
+      socket.onopen = () => {
+        // Browser was in the process of being reloaded. Notify
+        // the user that the latest changes were sent.
+        if (lastAcknowledgedRevision < revision) {
+          lastAcknowledgedRevision = revision;
+          console.log("Changes sent to the browser");
+        }
+
+        // Tell the browser about the most recent revision
+        socket.send(JSON.stringify({ type: "init", revision }));
+
+        sockets.add(socket);
+      };
       socket.onclose = () => sockets.delete(socket);
       socket.onerror = (e) => console.log("Socket errored", e);
 
@@ -63,8 +94,9 @@ export function reload(options: Options): Middleware {
         result = await reader.read();
       }
 
+      // Add live reload script and pass initial revision
       body +=
-        `<script type="module" id="lume-live-reload">${reloadClient}; liveReload();</script>`;
+        `<script type="module" id="lume-live-reload">${reloadClient}; liveReload(${revision});</script>`;
 
       const { status, statusText, headers } = response;
 

middlewares/reload_client.js

@@ -1,6 +1,7 @@
-export default function liveReload() {
+export default function liveReload(initRevision) {
   let ws;
   let wasClosed = false;
+  let revision = initRevision;
 
   function socket() {
     if (ws && ws.readyState !== 3) {
@@ -26,14 +27,26 @@ export default function liveReload() {
       }
     };
     ws.onmessage = (e) => {
-      const files = JSON.parse(e.data);
+      const message = JSON.parse(e.data);
 
-      if (!Array.isArray(files)) {
-        console.log(e.data);
+      if (message.type === "init" && message.revision > revision) {
+        location.reload();
         return;
       }
 
-      refresh(files);
+      // Always update revision
+      revision = message.revision;
+
+      if (message.type === "update") {
+        const files = message.files;
+
+        if (!Array.isArray(message.files)) {
+          console.log(e.data);
+          return;
+        }
+
+        refresh(files);
+      }
     };
     ws.onclose = () => {
       wasClosed = true;