Cleanup

Author: hirasso

src/defs.ts

@@ -29,7 +29,6 @@ export type Logger = ReturnType<typeof createLogger>;
 export type ScrollContainer = Element & {
   __restore_scroll?: {
     selector: string;
-    onScroll: () => void;
   };
 };
 

src/helpers.ts

@@ -137,7 +137,7 @@ export function createContainerSelector(
   element: Element,
   logger?: Logger,
 ): string {
-  if (isRootElement(element) && !element.id) {
+  if (!isRootElement(element) && !element.id) {
     logger?.log(
       "💡 for best results, add an [id] to elements you want to restore",
       { element },

src/restoreScroll.ts

@@ -15,7 +15,7 @@ const defaults: Options = {
   debug: false,
 };
 
-/** Hook into beforeunload */
+/** Hooked into beforeunload? */
 let hookedIntoBeforeUnload = false;
 
 /**
@@ -44,12 +44,7 @@ export default function restoreScroll(
     window.addEventListener("beforeunload", storeAll);
   }
 
-  register(element, settings);
-
-  /**
-   * Return a destroy function
-   */
-  return { destroy: () => unregister(element) };
+  return register(element, settings);
 }
 
 /**
@@ -61,36 +56,20 @@ function register(element: ScrollContainer, settings: Settings) {
   /** Mark the element */
   element.setAttribute("data-restore-scroll", "");
 
+  /** First time? Then attach the scroll handler further down */
+  const isFirstTime = !element.__restore_scroll;
+
   /** Create and store the state in the element */
   element.__restore_scroll ??= {
     selector: createContainerSelector(element, logger),
-    onScroll: debounce(() => store(element, settings), 150),
   };
 
   /** Always restore when called */
   restore(element, settings);
 
-  const eventTarget = isRootElement(element) ? window : element;
-
-  /** Allow for repeated calls to `register` (interesting for e.g. the window) */
-  eventTarget.removeEventListener("scroll", element.__restore_scroll.onScroll);
-  eventTarget.addEventListener("scroll", element.__restore_scroll.onScroll, {
-    passive: true,
-  });
-}
-
-/**
- * Unregister an element from scroll restoration
- */
-function unregister(element: ScrollContainer) {
-  if (!element.__restore_scroll) return;
-
-  /** Unmark the element */
-  element.removeAttribute("data-restore-scroll");
-
-  const eventTarget = isRootElement(element) ? window : element;
-
-  eventTarget.removeEventListener("scroll", element.__restore_scroll.onScroll);
-
-  element.__restore_scroll = undefined;
+  if (isFirstTime) {
+    const eventTarget = isRootElement(element) ? window : element;
+    const onScroll = debounce(() => store(element, settings), 150);
+    eventTarget.addEventListener("scroll", onScroll, { passive: true });
+  }
 }

tests/unit/tests/events.test.ts

@@ -22,7 +22,7 @@ describe("events", () => {
   });
 
   afterEach(() => {
-    logSpy.mockRestore();
+    vi.restoreAllMocks();
     document.body.innerHTML = "";
   });
 
@@ -48,7 +48,6 @@ describe("events", () => {
       console.log(el, event.type, event.detail);
     });
 
-    const position = { top: 100, left: 0 };
     dispatch(el, "store", eventDetail, {});
     dispatch(el, "restore", eventDetail, {});
 
@@ -69,7 +68,6 @@ describe("events", () => {
       console.log(el, event.type, event.detail);
     });
 
-    const position = { top: 100, left: 0 };
     dispatch(el, "store", eventDetail, settingsWithEvents);
     dispatch(el, "restore", eventDetail, settingsWithEvents);