From 39831333b11e56c906f9a14acdc90ac4a9c1e957 Mon Sep 17 00:00:00 2001 From: Adrien S Date: Wed, 29 Nov 2023 15:09:02 +0100 Subject: [PATCH 1/3] Refactor the way scroll is saved and restored to avoid premature restoration (#47) --- .../hotwire-livereload-turbo-stream.js | 27 ++++++++ app/assets/javascripts/hotwire-livereload.js | 65 +++++++++---------- app/javascript/hotwire-livereload.js | 22 ++----- .../lib/hotwire-livereload-received.js | 2 + .../lib/hotwire-livereload-scroll-position.js | 15 +++-- 5 files changed, 71 insertions(+), 60 deletions(-) diff --git a/app/assets/javascripts/hotwire-livereload-turbo-stream.js b/app/assets/javascripts/hotwire-livereload-turbo-stream.js index cd69d20..f2c019c 100644 --- a/app/assets/javascripts/hotwire-livereload-turbo-stream.js +++ b/app/assets/javascripts/hotwire-livereload-turbo-stream.js @@ -81,6 +81,32 @@ // 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) { @@ -88,6 +114,7 @@ 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); diff --git a/app/assets/javascripts/hotwire-livereload.js b/app/assets/javascripts/hotwire-livereload.js index 42bb9c5..772f0ec 100644 --- a/app/assets/javascripts/hotwire-livereload.js +++ b/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(); + }); })(); diff --git a/app/javascript/hotwire-livereload.js b/app/javascript/hotwire-livereload.js index a9ac237..cdac474 100644 --- a/app/javascript/hotwire-livereload.js +++ b/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() +}) diff --git a/app/javascript/lib/hotwire-livereload-received.js b/app/javascript/lib/hotwire-livereload-received.js index 8fd7cfa..6aee6da 100644 --- a/app/javascript/lib/hotwire-livereload-received.js +++ b/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) diff --git a/app/javascript/lib/hotwire-livereload-scroll-position.js b/app/javascript/lib/hotwire-livereload-scroll-position.js index 852aeee..8320273 100644 --- a/app/javascript/lib/hotwire-livereload-scroll-position.js +++ b/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 } From 4c2ebecd6b603b8f4e77d9da036a7cbe7de50ca1 Mon Sep 17 00:00:00 2001 From: Kirill Platonov Date: Thu, 4 Jan 2024 10:16:42 +0100 Subject: [PATCH 2/3] Update bundled js --- app/assets/javascripts/hotwire-livereload-turbo-stream.js | 4 ++-- app/assets/javascripts/hotwire-livereload.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/hotwire-livereload-turbo-stream.js b/app/assets/javascripts/hotwire-livereload-turbo-stream.js index f2c019c..b39bc37 100644 --- a/app/assets/javascripts/hotwire-livereload-turbo-stream.js +++ b/app/assets/javascripts/hotwire-livereload-turbo-stream.js @@ -87,7 +87,7 @@ function read() { const value = localStorage.getItem(KEY); if (!value) - return null; + return; return parseInt(value); } function save() { @@ -95,7 +95,7 @@ localStorage.setItem(KEY, pos.toString()); } function remove() { - localStorage.removeItem(KEY, "0"); + localStorage.removeItem(KEY); } function restore() { const value = read(); diff --git a/app/assets/javascripts/hotwire-livereload.js b/app/assets/javascripts/hotwire-livereload.js index 772f0ec..2d35afd 100644 --- a/app/assets/javascripts/hotwire-livereload.js +++ b/app/assets/javascripts/hotwire-livereload.js @@ -669,7 +669,7 @@ function read() { const value = localStorage.getItem(KEY); if (!value) - return null; + return; return parseInt(value); } function save() { @@ -677,7 +677,7 @@ localStorage.setItem(KEY, pos.toString()); } function remove() { - localStorage.removeItem(KEY, "0"); + localStorage.removeItem(KEY); } function restore() { const value = read(); From bb53ea8b6808452388cf4c02e47217c649ae257f Mon Sep 17 00:00:00 2001 From: Kirill Platonov Date: Thu, 4 Jan 2024 10:17:54 +0100 Subject: [PATCH 3/3] Bump version for 1.3.1 --- Gemfile.lock | 2 +- lib/hotwire/livereload/version.rb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index f9079fa..8e65dda 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - hotwire-livereload (1.3.0) + hotwire-livereload (1.3.1) actioncable (>= 6.0.0) listen (>= 3.0.0) railties (>= 6.0.0) diff --git a/lib/hotwire/livereload/version.rb b/lib/hotwire/livereload/version.rb index 0919c71..92168b9 100644 --- a/lib/hotwire/livereload/version.rb +++ b/lib/hotwire/livereload/version.rb @@ -1,5 +1,5 @@ module Hotwire module Livereload - VERSION = "1.3.0" + VERSION = "1.3.1" end end