@inertiajs/core 2.1.11 → 2.2.1

package/dist/index.esm.js

@@ -1,3 +1,6 @@
+// src/router.ts
+import { cloneDeep as cloneDeep2, get as get2, set as set2 } from "lodash-es";
+
 // src/debounce.ts
 function debounce(fn, delay) {
   let timeoutID;
@@ -26,6 +29,9 @@ var fireFinishEvent = (visit) => {
 var fireInvalidEvent = (response) => {
   return fireEvent("invalid", { cancelable: true, detail: { response } });
 };
+var fireBeforeUpdateEvent = (page2) => {
+  return fireEvent("beforeUpdate", { detail: { page: page2 } });
+};
 var fireNavigateEvent = (page2) => {
   return fireEvent("navigate", { detail: { page: page2 } });
 };
@@ -692,6 +698,11 @@ var History = class {
       this.replaceState(this.current);
     }
   }
+  clearInitialState(key) {
+    if (this.initialState && this.initialState[key] !== void 0) {
+      delete this.initialState[key];
+    }
+  }
   hasAnyState() {
     return !!this.getAllState();
   }
@@ -821,6 +832,7 @@ var InitialVisit = class {
   static clearRememberedStateOnReload() {
     if (navigationType.isReload()) {
       history.deleteState(history.rememberedState);
+      history.clearInitialState(history.rememberedState);
     }
   }
   static handleBackForward() {
@@ -1188,6 +1200,7 @@ var PrefetchedRequests = class {
         "replace",
         "prefetch",
         "onBefore",
+        "onBeforeUpdate",
         "onStart",
         "onProgress",
         "onFinish",
@@ -1216,6 +1229,7 @@ var RequestParams = class _RequestParams {
     } else {
       const wrappedCallbacks = {
         onBefore: this.wrapCallback(params, "onBefore"),
+        onBeforeUpdate: this.wrapCallback(params, "onBeforeUpdate"),
         onStart: this.wrapCallback(params, "onStart"),
         onProgress: this.wrapCallback(params, "onProgress"),
         onFinish: this.wrapCallback(params, "onFinish"),
@@ -1346,6 +1360,9 @@ var RequestParams = class _RequestParams {
   }
 };
 
+// src/response.ts
+import { get, set } from "lodash-es";
+
 // src/modal.ts
 var modal_default = {
   modal: null,
@@ -1508,6 +1525,8 @@ var Response = class _Response {
     await this.setRememberedState(pageResponse);
     this.requestParams.setPreserveOptions(pageResponse);
     pageResponse.url = history.preserveUrl ? page.get().url : this.pageUrl(pageResponse);
+    this.requestParams.all().onBeforeUpdate(pageResponse);
+    fireBeforeUpdateEvent(pageResponse);
     return page.set(pageResponse, {
       replace: this.requestParams.all().replace,
       preserveScroll: this.requestParams.all().preserveScroll,
@@ -1547,36 +1566,43 @@ var Response = class _Response {
     if (!this.requestParams.isPartial() || pageResponse.component !== page.get().component) {
       return;
     }
-    const propsToMerge = pageResponse.mergeProps || [];
+    const propsToAppend = pageResponse.mergeProps || [];
+    const propsToPrepend = pageResponse.prependProps || [];
     const propsToDeepMerge = pageResponse.deepMergeProps || [];
     const matchPropsOn = pageResponse.matchPropsOn || [];
-    propsToMerge.forEach((prop) => {
-      const incomingProp = pageResponse.props[prop];
+    const mergeProp = (prop, shouldAppend) => {
+      const currentProp = get(page.get().props, prop);
+      const incomingProp = get(pageResponse.props, prop);
       if (Array.isArray(incomingProp)) {
-        pageResponse.props[prop] = this.mergeOrMatchItems(
-          page.get().props[prop] || [],
+        const newArray = this.mergeOrMatchItems(
+          currentProp || [],
           incomingProp,
           prop,
-          matchPropsOn
+          matchPropsOn,
+          shouldAppend
         );
+        set(pageResponse.props, prop, newArray);
       } else if (typeof incomingProp === "object" && incomingProp !== null) {
-        pageResponse.props[prop] = {
-          ...page.get().props[prop] || [],
+        const newObject = {
+          ...currentProp || {},
           ...incomingProp
         };
+        set(pageResponse.props, prop, newObject);
       }
-    });
+    };
+    propsToAppend.forEach((prop) => mergeProp(prop, true));
+    propsToPrepend.forEach((prop) => mergeProp(prop, false));
     propsToDeepMerge.forEach((prop) => {
-      const incomingProp = pageResponse.props[prop];
       const currentProp = page.get().props[prop];
-      const deepMerge = (target, source, currentKey) => {
+      const incomingProp = pageResponse.props[prop];
+      const deepMerge = (target, source, matchProp) => {
         if (Array.isArray(source)) {
-          return this.mergeOrMatchItems(target, source, currentKey, matchPropsOn);
+          return this.mergeOrMatchItems(target, source, matchProp, matchPropsOn);
         }
         if (typeof source === "object" && source !== null) {
           return Object.keys(source).reduce(
             (acc, key) => {
-              acc[key] = deepMerge(target ? target[key] : void 0, source[key], `${currentKey}.${key}`);
+              acc[key] = deepMerge(target ? target[key] : void 0, source[key], `${matchProp}.${key}`);
               return acc;
             },
             { ...target }
@@ -1588,32 +1614,52 @@ var Response = class _Response {
     });
     pageResponse.props = { ...page.get().props, ...pageResponse.props };
   }
-  mergeOrMatchItems(target, source, currentKey, matchPropsOn) {
-    const matchOn = matchPropsOn.find((key) => {
-      const path = key.split(".").slice(0, -1).join(".");
-      return path === currentKey;
+  mergeOrMatchItems(existingItems, newItems, matchProp, matchPropsOn, shouldAppend = true) {
+    const items = Array.isArray(existingItems) ? existingItems : [];
+    const matchingKey = matchPropsOn.find((key) => {
+      const keyPath = key.split(".").slice(0, -1).join(".");
+      return keyPath === matchProp;
     });
-    if (!matchOn) {
-      return [...Array.isArray(target) ? target : [], ...source];
-    }
-    const uniqueProperty = matchOn.split(".").pop() || "";
-    const targetArray = Array.isArray(target) ? target : [];
-    const map = /* @__PURE__ */ new Map();
-    targetArray.forEach((item) => {
-      if (item && typeof item === "object" && uniqueProperty in item) {
-        map.set(item[uniqueProperty], item);
-      } else {
-        map.set(Symbol(), item);
+    if (!matchingKey) {
+      return shouldAppend ? [...items, ...newItems] : [...newItems, ...items];
+    }
+    const uniqueProperty = matchingKey.split(".").pop() || "";
+    const newItemsMap = /* @__PURE__ */ new Map();
+    newItems.forEach((item) => {
+      if (this.hasUniqueProperty(item, uniqueProperty)) {
+        newItemsMap.set(item[uniqueProperty], item);
       }
     });
-    source.forEach((item) => {
-      if (item && typeof item === "object" && uniqueProperty in item) {
-        map.set(item[uniqueProperty], item);
-      } else {
-        map.set(Symbol(), item);
+    return shouldAppend ? this.appendWithMatching(items, newItems, newItemsMap, uniqueProperty) : this.prependWithMatching(items, newItems, newItemsMap, uniqueProperty);
+  }
+  appendWithMatching(existingItems, newItems, newItemsMap, uniqueProperty) {
+    const updatedExisting = existingItems.map((item) => {
+      if (this.hasUniqueProperty(item, uniqueProperty) && newItemsMap.has(item[uniqueProperty])) {
+        return newItemsMap.get(item[uniqueProperty]);
+      }
+      return item;
+    });
+    const newItemsToAdd = newItems.filter((item) => {
+      if (!this.hasUniqueProperty(item, uniqueProperty)) {
+        return true;
+      }
+      return !existingItems.some(
+        (existing) => this.hasUniqueProperty(existing, uniqueProperty) && existing[uniqueProperty] === item[uniqueProperty]
+      );
+    });
+    return [...updatedExisting, ...newItemsToAdd];
+  }
+  prependWithMatching(existingItems, newItems, newItemsMap, uniqueProperty) {
+    const untouchedExisting = existingItems.filter((item) => {
+      if (this.hasUniqueProperty(item, uniqueProperty)) {
+        return !newItemsMap.has(item[uniqueProperty]);
       }
+      return true;
     });
-    return Array.from(map.values());
+    return [...newItems, ...untouchedExisting];
+  }
+  hasUniqueProperty(item, property) {
+    return item && typeof item === "object" && property in item;
   }
   async setRememberedState(pageResponse) {
     const rememberedState = await history.getState(history.rememberedState, {});
@@ -1955,6 +2001,43 @@ var Router = class {
   replace(params) {
     this.clientVisit(params, { replace: true });
   }
+  replaceProp(name, value, options) {
+    this.replace({
+      preserveScroll: true,
+      preserveState: true,
+      props(currentProps) {
+        const newValue = typeof value === "function" ? value(get2(currentProps, name), currentProps) : value;
+        return set2(cloneDeep2(currentProps), name, newValue);
+      },
+      ...options || {}
+    });
+  }
+  appendToProp(name, value, options) {
+    this.replaceProp(
+      name,
+      (currentValue, currentProps) => {
+        const newValue = typeof value === "function" ? value(currentValue, currentProps) : value;
+        if (!Array.isArray(currentValue)) {
+          currentValue = currentValue !== void 0 ? [currentValue] : [];
+        }
+        return [...currentValue, newValue];
+      },
+      options
+    );
+  }
+  prependToProp(name, value, options) {
+    this.replaceProp(
+      name,
+      (currentValue, currentProps) => {
+        const newValue = typeof value === "function" ? value(currentValue, currentProps) : value;
+        if (!Array.isArray(currentValue)) {
+          currentValue = currentValue !== void 0 ? [currentValue] : [];
+        }
+        return [newValue, ...currentValue];
+      },
+      options
+    );
+  }
   push(params) {
     this.clientVisit(params);
   }
@@ -2047,6 +2130,8 @@ var Router = class {
       }),
       onBefore: options.onBefore || (() => {
       }),
+      onBeforeUpdate: options.onBeforeUpdate || (() => {
+      }),
       onStart: options.onStart || (() => {
       }),
       onProgress: options.onProgress || (() => {
@@ -2074,8 +2159,48 @@ var Router = class {
   }
 };
 
+// src/domUtils.ts
+var elementInViewport = (el) => {
+  const rect = el.getBoundingClientRect();
+  const verticallyVisible = rect.top < window.innerHeight && rect.bottom >= 0;
+  const horizontallyVisible = rect.left < window.innerWidth && rect.right >= 0;
+  return verticallyVisible && horizontallyVisible;
+};
+var getScrollableParent = (element) => {
+  let parent = element?.parentElement;
+  while (parent) {
+    const overflowY = window.getComputedStyle(parent).overflowY;
+    if (overflowY === "auto" || overflowY === "scroll") {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return null;
+};
+var getElementsInViewportFromCollection = (referenceElement, elements) => {
+  const referenceIndex = elements.indexOf(referenceElement);
+  const visibleElements = [];
+  for (let i = referenceIndex; i >= 0; i--) {
+    const element = elements[i];
+    if (elementInViewport(element)) {
+      visibleElements.push(element);
+    } else {
+      break;
+    }
+  }
+  for (let i = referenceIndex + 1; i < elements.length; i++) {
+    const element = elements[i];
+    if (elementInViewport(element)) {
+      visibleElements.push(element);
+    } else {
+      break;
+    }
+  }
+  return visibleElements;
+};
+
 // src/formObject.ts
-import { get, set } from "lodash-es";
+import { get as get3, set as set3 } from "lodash-es";
 function undotKey(key) {
   if (!key.includes(".")) {
     return key;
@@ -2110,15 +2235,15 @@ function formDataToObject(source) {
     const path = parseKey(undotKey(key));
     if (path[path.length - 1] === "") {
       const arrayPath = path.slice(0, -1);
-      const existing = get(form, arrayPath);
+      const existing = get3(form, arrayPath);
       if (Array.isArray(existing)) {
         existing.push(value);
       } else {
-        set(form, arrayPath, [value]);
+        set3(form, arrayPath, [value]);
       }
       continue;
     }
-    set(form, path, value);
+    set3(form, path, value);
   }
   return form;
 }
@@ -2235,6 +2360,463 @@ function createHeadManager(isServer2, titleCallback, onUpdate) {
   };
 }
 
+// src/infiniteScroll/data.ts
+var MERGE_INTENT_HEADER = "X-Inertia-Infinite-Scroll-Merge-Intent";
+var useInfiniteScrollData = (options) => {
+  const getScrollPropFromCurrentPage = () => {
+    const scrollProp = page.get().scrollProps?.[options.getPropName()];
+    if (scrollProp) {
+      return scrollProp;
+    }
+    throw new Error(`The page object does not contain a scroll prop named "${options.getPropName()}".`);
+  };
+  const { previousPage, nextPage, currentPage: lastLoadedPage } = getScrollPropFromCurrentPage();
+  const state = {
+    loading: false,
+    previousPage,
+    nextPage,
+    lastLoadedPage,
+    requestCount: 0
+  };
+  const getRememberKey = () => `inertia:infinite-scroll-data:${options.getPropName()}`;
+  const rememberedState = router.restore(getRememberKey());
+  if (rememberedState && typeof rememberedState === "object") {
+    state.previousPage = rememberedState.previousPage;
+    state.nextPage = rememberedState.nextPage;
+    state.lastLoadedPage = rememberedState.lastLoadedPage;
+    state.requestCount = rememberedState.requestCount || 0;
+  }
+  const getScrollPropKeyForSide = (side) => {
+    return side === "next" ? "nextPage" : "previousPage";
+  };
+  const findPageToLoad = (side) => {
+    const pagePropName = getScrollPropKeyForSide(side);
+    return state[pagePropName];
+  };
+  const syncStateOnSuccess = (side) => {
+    const scrollProp = getScrollPropFromCurrentPage();
+    const paginationProp = getScrollPropKeyForSide(side);
+    state.lastLoadedPage = scrollProp.currentPage;
+    state[paginationProp] = scrollProp[paginationProp];
+    state.requestCount += 1;
+    router.remember(
+      {
+        previousPage: state.previousPage,
+        nextPage: state.nextPage,
+        lastLoadedPage: state.lastLoadedPage,
+        requestCount: state.requestCount
+      },
+      getRememberKey()
+    );
+  };
+  const getPageName = () => getScrollPropFromCurrentPage().pageName;
+  const getRequestCount = () => state.requestCount;
+  const fetchPage = (side, reloadOptions = {}) => {
+    const page2 = findPageToLoad(side);
+    if (state.loading || page2 === null) {
+      return;
+    }
+    state.loading = true;
+    router.reload({
+      ...reloadOptions,
+      data: { [getPageName()]: page2 },
+      only: [options.getPropName()],
+      preserveUrl: true,
+      // we handle URL updates manually via useInfiniteScrollQueryString()
+      headers: {
+        [MERGE_INTENT_HEADER]: side === "previous" ? "prepend" : "append",
+        ...reloadOptions.headers
+      },
+      onBefore: (visit) => {
+        side === "next" ? options.onBeforeNextRequest() : options.onBeforePreviousRequest();
+        reloadOptions.onBefore?.(visit);
+      },
+      onBeforeUpdate: (page3) => {
+        options.onBeforeUpdate();
+        reloadOptions.onBeforeUpdate?.(page3);
+      },
+      onSuccess: (page3) => {
+        syncStateOnSuccess(side);
+        reloadOptions.onSuccess?.(page3);
+      },
+      onFinish: (visit) => {
+        state.loading = false;
+        side === "next" ? options.onCompleteNextRequest(state.lastLoadedPage) : options.onCompletePreviousRequest(state.lastLoadedPage);
+        reloadOptions.onFinish?.(visit);
+      }
+    });
+  };
+  const getLastLoadedPage = () => state.lastLoadedPage;
+  const hasPrevious = () => !!state.previousPage;
+  const hasNext = () => !!state.nextPage;
+  const fetchPrevious = (reloadOptions) => fetchPage("previous", reloadOptions);
+  const fetchNext = (reloadOptions) => fetchPage("next", reloadOptions);
+  return {
+    getLastLoadedPage,
+    getPageName,
+    getRequestCount,
+    hasPrevious,
+    hasNext,
+    fetchNext,
+    fetchPrevious
+  };
+};
+
+// src/intersectionObservers.ts
+var useIntersectionObservers = () => {
+  const intersectionObservers = [];
+  const newIntersectionObserver = (callback, options = {}) => {
+    const observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          callback(entry);
+        }
+      }
+    }, options);
+    intersectionObservers.push(observer);
+    return observer;
+  };
+  const flushAll = () => {
+    intersectionObservers.forEach((observer) => observer.disconnect());
+    intersectionObservers.length = 0;
+  };
+  return {
+    new: newIntersectionObserver,
+    flushAll
+  };
+};
+
+// src/infiniteScroll/elements.ts
+var INFINITE_SCROLL_PAGE_KEY = "infiniteScrollPage";
+var INFINITE_SCROLL_IGNORE_KEY = "infiniteScrollIgnore";
+var getPageFromElement = (element) => element.dataset[INFINITE_SCROLL_PAGE_KEY];
+var useInfiniteScrollElementManager = (options) => {
+  const intersectionObservers = useIntersectionObservers();
+  let itemsObserver;
+  let startElementObserver;
+  let endElementObserver;
+  let itemsMutationObserver;
+  let triggersEnabled = false;
+  const setupObservers = () => {
+    itemsMutationObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType !== Node.ELEMENT_NODE) {
+            return;
+          }
+          addedElements.add(node);
+        });
+      });
+      rememberElementsDebounced();
+    });
+    itemsMutationObserver.observe(options.getItemsElement(), { childList: true });
+    itemsObserver = intersectionObservers.new(
+      (entry) => options.onItemIntersected(entry.target),
+      { threshold: 0 }
+    );
+    const observerOptions = {
+      root: options.getScrollableParent(),
+      rootMargin: `${Math.max(1, options.getTriggerMargin())}px`
+    };
+    startElementObserver = intersectionObservers.new(options.onPreviousTriggered, observerOptions);
+    endElementObserver = intersectionObservers.new(options.onNextTriggered, observerOptions);
+  };
+  const enableTriggers = () => {
+    if (triggersEnabled) {
+      disableTriggers();
+    }
+    const startElement = options.getStartElement();
+    const endElement = options.getEndElement();
+    if (startElement && options.shouldFetchPrevious()) {
+      startElementObserver.observe(startElement);
+    }
+    if (endElement && options.shouldFetchNext()) {
+      endElementObserver.observe(endElement);
+    }
+    triggersEnabled = true;
+  };
+  const disableTriggers = () => {
+    if (!triggersEnabled) {
+      return;
+    }
+    startElementObserver.disconnect();
+    endElementObserver.disconnect();
+    triggersEnabled = false;
+  };
+  const refreshTriggers = () => {
+    if (triggersEnabled) {
+      enableTriggers();
+    }
+  };
+  const flushAll = () => {
+    intersectionObservers.flushAll();
+    itemsMutationObserver?.disconnect();
+  };
+  const addedElements = /* @__PURE__ */ new Set();
+  const elementIsUntagged = (element) => !(INFINITE_SCROLL_PAGE_KEY in element.dataset) && !(INFINITE_SCROLL_IGNORE_KEY in element.dataset);
+  const processManuallyAddedElements = () => {
+    Array.from(addedElements).forEach((element) => {
+      if (elementIsUntagged(element)) {
+        element.dataset[INFINITE_SCROLL_IGNORE_KEY] = "true";
+      }
+      itemsObserver.observe(element);
+    });
+    addedElements.clear();
+  };
+  const findUntaggedElements = (containerElement) => {
+    return Array.from(
+      containerElement.querySelectorAll(
+        `:scope > *:not([data-infinite-scroll-page]):not([data-infinite-scroll-ignore])`
+      )
+    );
+  };
+  let hasRestoredElements = false;
+  const processServerLoadedElements = (loadedPage) => {
+    if (!hasRestoredElements) {
+      hasRestoredElements = true;
+      if (restoreElements()) {
+        return;
+      }
+    }
+    findUntaggedElements(options.getItemsElement()).forEach((element) => {
+      if (elementIsUntagged(element)) {
+        element.dataset[INFINITE_SCROLL_PAGE_KEY] = loadedPage?.toString() || "1";
+      }
+      itemsObserver.observe(element);
+    });
+    rememberElements();
+  };
+  const getElementsRememberKey = () => `inertia:infinite-scroll-elements:${options.getPropName()}`;
+  const rememberElements = () => {
+    const pageElementRange = {};
+    const childNodes = options.getItemsElement().childNodes;
+    for (let index = 0; index < childNodes.length; index++) {
+      const node = childNodes[index];
+      if (node.nodeType !== Node.ELEMENT_NODE) {
+        continue;
+      }
+      const page2 = getPageFromElement(node);
+      if (typeof page2 === "undefined") {
+        continue;
+      }
+      if (!(page2 in pageElementRange)) {
+        pageElementRange[page2] = { from: index, to: index };
+      } else {
+        pageElementRange[page2].to = index;
+      }
+    }
+    router.remember(pageElementRange, getElementsRememberKey());
+  };
+  const rememberElementsDebounced = debounce(rememberElements, 250);
+  const restoreElements = () => {
+    const pageElementRange = router.restore(getElementsRememberKey());
+    if (!pageElementRange || typeof pageElementRange !== "object") {
+      return false;
+    }
+    const childNodes = options.getItemsElement().childNodes;
+    for (let index = 0; index < childNodes.length; index++) {
+      const node = childNodes[index];
+      if (node.nodeType !== Node.ELEMENT_NODE) {
+        continue;
+      }
+      const element = node;
+      let elementPage;
+      for (const [page2, range] of Object.entries(pageElementRange)) {
+        if (index >= range.from && index <= range.to) {
+          elementPage = page2;
+          break;
+        }
+      }
+      if (elementPage) {
+        element.dataset[INFINITE_SCROLL_PAGE_KEY] = elementPage;
+      } else if (!elementIsUntagged(element)) {
+        continue;
+      } else {
+        element.dataset[INFINITE_SCROLL_IGNORE_KEY] = "true";
+      }
+      itemsObserver.observe(element);
+    }
+    return true;
+  };
+  return {
+    setupObservers,
+    enableTriggers,
+    disableTriggers,
+    refreshTriggers,
+    flushAll,
+    processManuallyAddedElements,
+    processServerLoadedElements
+  };
+};
+
+// src/infiniteScroll/queryString.ts
+var useInfiniteScrollQueryString = (options) => {
+  const onItemIntersected = debounce((itemElement) => {
+    if (options.shouldPreserveUrl() || !itemElement) {
+      return;
+    }
+    const pageMap = /* @__PURE__ */ new Map();
+    const elements = [...options.getItemsElement().children];
+    getElementsInViewportFromCollection(itemElement, elements).forEach((element) => {
+      const page2 = getPageFromElement(element) ?? "1";
+      if (pageMap.has(page2)) {
+        pageMap.set(page2, pageMap.get(page2) + 1);
+      } else {
+        pageMap.set(page2, 1);
+      }
+    });
+    const sortedPages = Array.from(pageMap.entries()).sort((a, b) => b[1] - a[1]);
+    const mostVisiblePage = sortedPages[0]?.[0];
+    if (mostVisiblePage === void 0) {
+      return;
+    }
+    const url = new URL(window.location.href);
+    if (mostVisiblePage === "1") {
+      url.searchParams.delete(options.getPageName());
+    } else {
+      url.searchParams.set(options.getPageName(), mostVisiblePage.toString());
+    }
+    router.replace({
+      url: url.toString(),
+      preserveScroll: true,
+      preserveState: true
+    });
+  }, 250);
+  return {
+    onItemIntersected
+  };
+};
+
+// src/infiniteScroll/scrollPreservation.ts
+var useInfiniteScrollPreservation = (options) => {
+  const createCallbacks = () => {
+    let currentScrollTop;
+    let referenceElement = null;
+    let referenceElementTop = 0;
+    const captureScrollPosition = () => {
+      const scrollableContainer = options.getScrollableParent();
+      const itemsElement = options.getItemsElement();
+      currentScrollTop = scrollableContainer?.scrollTop || window.scrollY;
+      const visibleElements = getElementsInViewportFromCollection(
+        itemsElement.firstElementChild,
+        [...itemsElement.children]
+      );
+      if (visibleElements.length > 0) {
+        referenceElement = visibleElements[0];
+        const containerRect = scrollableContainer?.getBoundingClientRect() || { top: 0 };
+        const containerTop = scrollableContainer ? containerRect.top : 0;
+        const rect = referenceElement.getBoundingClientRect();
+        referenceElementTop = rect.top - containerTop;
+      }
+    };
+    const restoreScrollPosition = () => {
+      if (!referenceElement) {
+        return;
+      }
+      let attempts = 0;
+      let restored = false;
+      const restore = () => {
+        attempts++;
+        if (restored || attempts > 10) {
+          return false;
+        }
+        const scrollableContainer = options.getScrollableParent();
+        const containerRect = scrollableContainer?.getBoundingClientRect() || { top: 0 };
+        const containerTop = scrollableContainer ? containerRect.top : 0;
+        const newRect = referenceElement.getBoundingClientRect();
+        const newElementTop = newRect.top - containerTop;
+        const adjustment = newElementTop - referenceElementTop;
+        if (adjustment === 0) {
+          window.requestAnimationFrame(restore);
+          return;
+        }
+        if (scrollableContainer) {
+          scrollableContainer.scrollTo({ top: currentScrollTop + adjustment });
+        } else {
+          window.scrollTo(0, window.scrollY + adjustment);
+        }
+        restored = true;
+      };
+      restore();
+    };
+    return {
+      captureScrollPosition,
+      restoreScrollPosition
+    };
+  };
+  return {
+    createCallbacks
+  };
+};
+
+// src/infiniteScroll.ts
+function useInfiniteScroll(options) {
+  const queryStringManager = useInfiniteScrollQueryString({ ...options, getPageName: () => dataManager.getPageName() });
+  const scrollPreservation = useInfiniteScrollPreservation(options);
+  const elementManager = useInfiniteScrollElementManager({
+    ...options,
+    // As items enter viewport, update URL to reflect the most visible page
+    onItemIntersected: queryStringManager.onItemIntersected,
+    onPreviousTriggered: () => dataManager.fetchPrevious(),
+    onNextTriggered: () => dataManager.fetchNext()
+  });
+  const dataManager = useInfiniteScrollData({
+    ...options,
+    // Before updating page data, tag any manually added DOM elements
+    // so they don't get confused with server-loaded content
+    onBeforeUpdate: elementManager.processManuallyAddedElements,
+    // After successful request, tag new server content
+    onCompletePreviousRequest: (loadedPage) => {
+      setTimeout(() => {
+        elementManager.processServerLoadedElements(loadedPage);
+        options.onCompletePreviousRequest();
+        window.queueMicrotask(elementManager.refreshTriggers);
+      });
+    },
+    onCompleteNextRequest: (loadedPage) => {
+      setTimeout(() => {
+        elementManager.processServerLoadedElements(loadedPage);
+        options.onCompleteNextRequest();
+        window.queueMicrotask(elementManager.refreshTriggers);
+      });
+    }
+  });
+  const addScrollPreservationCallbacks = (reloadOptions) => {
+    const { captureScrollPosition, restoreScrollPosition } = scrollPreservation.createCallbacks();
+    const originalOnBeforeUpdate = reloadOptions.onBeforeUpdate || (() => {
+    });
+    const originalOnSuccess = reloadOptions.onSuccess || (() => {
+    });
+    reloadOptions.onBeforeUpdate = (page2) => {
+      originalOnBeforeUpdate(page2);
+      captureScrollPosition();
+    };
+    reloadOptions.onSuccess = (page2) => {
+      originalOnSuccess(page2);
+      restoreScrollPosition();
+    };
+    return reloadOptions;
+  };
+  const originalFetchNext = dataManager.fetchNext;
+  dataManager.fetchNext = (reloadOptions = {}) => {
+    if (options.inReverseMode()) {
+      reloadOptions = addScrollPreservationCallbacks(reloadOptions);
+    }
+    originalFetchNext(reloadOptions);
+  };
+  const originalFetchPrevious = dataManager.fetchPrevious;
+  dataManager.fetchPrevious = (reloadOptions = {}) => {
+    if (!options.inReverseMode()) {
+      reloadOptions = addScrollPreservationCallbacks(reloadOptions);
+    }
+    originalFetchPrevious(reloadOptions);
+  };
+  return {
+    dataManager,
+    elementManager
+  };
+}
+
 // src/navigationEvents.ts
 function shouldIntercept(event) {
   const isLink = event.currentTarget.tagName.toLowerCase() === "a";
@@ -2280,7 +2862,7 @@ var configure = (options) => {
   progress2.id = baseComponentSelector;
   progress2.innerHTML = settings.template;
 };
-var set2 = (n) => {
+var set4 = (n) => {
   const started = isStarted();
   n = clamp(n, settings.minimum, 1);
   status = n === 1 ? null : n;
@@ -2329,7 +2911,7 @@ var set2 = (n) => {
 var isStarted = () => typeof status === "number";
 var start = () => {
   if (!status) {
-    set2(0);
+    set4(0);
   }
   const work = function() {
     setTimeout(function() {
@@ -2349,7 +2931,7 @@ var done = (force) => {
     return;
   }
   increaseByRandom(0.3 + 0.5 * Math.random());
-  set2(1);
+  set4(1);
 };
 var increaseByRandom = (amount) => {
   const n = status;
@@ -2373,7 +2955,7 @@ var increaseByRandom = (amount) => {
     }
     return 0;
   })();
-  return set2(clamp(n + amount, 0, 0.994));
+  return set4(clamp(n + amount, 0, 0.994));
 };
 var render = (fromStart) => {
   if (isRendered()) {
@@ -2519,7 +3101,7 @@ var progress_component_default = {
   configure,
   isStarted,
   done,
-  set: set2,
+  set: set4,
   remove,
   start,
   status,
@@ -2746,6 +3328,7 @@ var router = new Router();
 export {
   createHeadManager,
   formDataToObject,
+  getScrollableParent,
   hide2 as hideProgress,
   hrefToUrl,
   isUrlMethodPair,
@@ -2758,7 +3341,8 @@ export {
   setupProgress,
   shouldIntercept,
   shouldNavigate,
-  urlWithoutHash
+  urlWithoutHash,
+  useInfiniteScroll
 };
 /* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
  * @license MIT */