Refactor the way scroll is saved and restored to avoid premature restoration

app/assets/javascripts/hotwire-livereload-turbo-stream.js

@@ -81,13 +81,40 @@
 
   // app/javascript/lib/hotwire-livereload-received.js
   var import_debounce = __toESM(require_debounce());
+
+  // app/javascript/lib/hotwire-livereload-scroll-position.js
+  var KEY = "hotwire-livereload-scrollPosition";
+  function read() {
+    const value = localStorage.getItem(KEY);
+    if (!value)
+      return null;
+    return parseInt(value);
+  }
+  function save() {
+    const pos = window.scrollY;
+    localStorage.setItem(KEY, pos.toString());
+  }
+  function remove() {
+    localStorage.removeItem(KEY, "0");
+  }
+  function restore() {
+    const value = read();
+    if (value) {
+      console.log("[Hotwire::Livereload] Restoring scroll position to", value);
+      window.scrollTo(0, value);
+    }
+  }
+  var hotwire_livereload_scroll_position_default = { read, save, restore, remove };
+
+  // app/javascript/lib/hotwire-livereload-received.js
   var hotwire_livereload_received_default = (0, import_debounce.default)(({ force_reload }) => {
     const onErrorPage = document.title === "Action Controller: Exception caught";
     if (onErrorPage || force_reload) {
       console.log("[Hotwire::Livereload] Files changed. Force reloading..");
       document.location.reload();
     } else {
       console.log("[Hotwire::Livereload] Files changed. Reloading..");
+      hotwire_livereload_scroll_position_default.save();
       Turbo.visit(window.location.href, { action: "replace" });
     }
   }, 300);

app/assets/javascripts/hotwire-livereload.js

@@ -453,7 +453,7 @@
             this.subscribe(subscription);
             return subscription;
           };
-          Subscriptions2.prototype.remove = function remove(subscription) {
+          Subscriptions2.prototype.remove = function remove2(subscription) {
             this.forget(subscription);
             if (!this.findAll(subscription.identifier).length) {
               this.sendCommand(subscription, "unsubscribe");
@@ -607,7 +607,7 @@
   // node_modules/debounce/index.js
   var require_debounce = __commonJS({
     "node_modules/debounce/index.js"(exports, module) {
-      function debounce3(func, wait, immediate) {
+      function debounce2(func, wait, immediate) {
         var timeout, args, context, timestamp, result;
         if (null == wait)
           wait = 100;
@@ -653,8 +653,8 @@
         };
         return debounced;
       }
-      debounce3.debounce = debounce3;
-      module.exports = debounce3;
+      debounce2.debounce = debounce2;
+      module.exports = debounce2;
     }
   });
 
@@ -663,41 +663,45 @@
 
   // app/javascript/lib/hotwire-livereload-received.js
   var import_debounce = __toESM(require_debounce());
-  var hotwire_livereload_received_default = (0, import_debounce.default)(({ force_reload }) => {
-    const onErrorPage = document.title === "Action Controller: Exception caught";
-    if (onErrorPage || force_reload) {
-      console.log("[Hotwire::Livereload] Files changed. Force reloading..");
-      document.location.reload();
-    } else {
-      console.log("[Hotwire::Livereload] Files changed. Reloading..");
-      Turbo.visit(window.location.href, { action: "replace" });
-    }
-  }, 300);
 
   // app/javascript/lib/hotwire-livereload-scroll-position.js
   var KEY = "hotwire-livereload-scrollPosition";
   function read() {
     const value = localStorage.getItem(KEY);
     if (!value)
-      return 0;
+      return null;
     return parseInt(value);
   }
   function save() {
     const pos = window.scrollY;
     localStorage.setItem(KEY, pos.toString());
   }
-  function reset() {
-    localStorage.setItem(KEY, "0");
+  function remove() {
+    localStorage.removeItem(KEY, "0");
   }
   function restore() {
     const value = read();
-    console.log("[Hotwire::Livereload] Restoring scroll position to", value);
-    window.scrollTo(0, value);
+    if (value) {
+      console.log("[Hotwire::Livereload] Restoring scroll position to", value);
+      window.scrollTo(0, value);
+    }
   }
-  var hotwire_livereload_scroll_position_default = { read, save, restore, reset };
+  var hotwire_livereload_scroll_position_default = { read, save, restore, remove };
+
+  // app/javascript/lib/hotwire-livereload-received.js
+  var hotwire_livereload_received_default = (0, import_debounce.default)(({ force_reload }) => {
+    const onErrorPage = document.title === "Action Controller: Exception caught";
+    if (onErrorPage || force_reload) {
+      console.log("[Hotwire::Livereload] Files changed. Force reloading..");
+      document.location.reload();
+    } else {
+      console.log("[Hotwire::Livereload] Files changed. Reloading..");
+      hotwire_livereload_scroll_position_default.save();
+      Turbo.visit(window.location.href, { action: "replace" });
+    }
+  }, 300);
 
   // app/javascript/hotwire-livereload.js
-  var import_debounce2 = __toESM(require_debounce());
   var consumer = (0, import_actioncable.createConsumer)();
   consumer.subscriptions.create("Hotwire::Livereload::ReloadChannel", {
     received: hotwire_livereload_received_default,
@@ -708,19 +712,8 @@
       console.log("[Hotwire::Livereload] Websocket disconnected");
     }
   });
-  var debouncedScroll = (0, import_debounce2.default)(() => {
-    if (window.scrollY !== 0)
-      return hotwire_livereload_scroll_position_default.save();
-    setTimeout(() => {
-      if (window.scrollY !== 0)
-        return;
-      hotwire_livereload_scroll_position_default.save();
-    }, 1e3);
-  }, 100);
-  window.addEventListener("scroll", debouncedScroll);
-  document.addEventListener("turbo:click", hotwire_livereload_scroll_position_default.reset);
-  document.addEventListener("turbo:before-visit", hotwire_livereload_scroll_position_default.restore);
-  document.addEventListener("turbo:load", hotwire_livereload_scroll_position_default.restore);
-  document.addEventListener("DOMContentLoaded", hotwire_livereload_scroll_position_default.restore);
-  document.addEventListener("turbo:frame-load", hotwire_livereload_scroll_position_default.restore);
+  document.addEventListener("turbo:load", () => {
+    hotwire_livereload_scroll_position_default.restore();
+    hotwire_livereload_scroll_position_default.remove();
+  });
 })();

app/javascript/hotwire-livereload.js

@@ -1,7 +1,6 @@
 import { createConsumer } from "@rails/actioncable"
 import received from "./lib/hotwire-livereload-received"
 import scrollPosition from "./lib/hotwire-livereload-scroll-position"
-import debounce from "debounce"
 
 const consumer = createConsumer()
 consumer.subscriptions.create("Hotwire::Livereload::ReloadChannel", {
@@ -16,21 +15,8 @@ consumer.subscriptions.create("Hotwire::Livereload::ReloadChannel", {
   },
 })
 
-const debouncedScroll = debounce(() => {
-  if (window.scrollY !== 0) return scrollPosition.save();
-
-  // On a second update, the page mysteriously jumps to the top and sends a scroll event.
-  // So we wait a bit and if the page is still is at the top, it was likely on purpose.
-  setTimeout(() => {
-    if (window.scrollY !== 0) return;
-    scrollPosition.save();
-  }, 1000);
-}, 100)
-window.addEventListener("scroll", debouncedScroll)
-
-document.addEventListener("turbo:click", scrollPosition.reset)
-document.addEventListener("turbo:before-visit", scrollPosition.restore)
-document.addEventListener("turbo:load", scrollPosition.restore)
-document.addEventListener("DOMContentLoaded", scrollPosition.restore)
-document.addEventListener("turbo:frame-load", scrollPosition.restore)
+document.addEventListener("turbo:load", () => {
+  scrollPosition.restore()
+  scrollPosition.remove()
+})
 

app/javascript/lib/hotwire-livereload-received.js

@@ -1,4 +1,5 @@
 import debounce from "debounce"
+import scrollPosition from "./hotwire-livereload-scroll-position"
 
 export default debounce(({force_reload}) => {
   const onErrorPage = document.title === "Action Controller: Exception caught"
@@ -8,6 +9,7 @@ export default debounce(({force_reload}) => {
     document.location.reload()
   } else {
     console.log("[Hotwire::Livereload] Files changed. Reloading..")
+    scrollPosition.save()
     Turbo.visit(window.location.href, { action: 'replace' })
   }
 }, 300)

app/javascript/lib/hotwire-livereload-scroll-position.js

@@ -2,7 +2,7 @@ const KEY = "hotwire-livereload-scrollPosition"
 
 export function read() {
   const value = localStorage.getItem(KEY)
-  if (!value) return 0;
+  if (!value) return
   return parseInt(value)
 }
 
@@ -11,14 +11,17 @@ export function save() {
   localStorage.setItem(KEY, pos.toString())
 }
 
-export function reset() {
-  localStorage.setItem(KEY, "0");
+export function remove() {
+  localStorage.removeItem(KEY)
 }
 
 export function restore() {
   const value = read()
-  console.log("[Hotwire::Livereload] Restoring scroll position to", value)
-  window.scrollTo(0, value)
+  if (value) {
+    console.log("[Hotwire::Livereload] Restoring scroll position to", value)
+    window.scrollTo(0, value)
+  }
+
 }
 
-export default { read, save, restore, reset }
+export default { read, save, restore, remove }