@inertiajs/core 2.1.10 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inertiajs/core",
-  "version": "2.1.10",
+  "version": "2.2.0",
   "license": "MIT",
   "description": "A framework for creating server-driven single page apps.",
   "contributors": [
@@ -45,18 +45,18 @@
   },
   "dependencies": {
     "@types/lodash-es": "^4.17.12",
-    "axios": "^1.12.0",
+    "axios": "^1.12.2",
     "lodash-es": "^4.17.21",
-    "qs": "^6.9.0"
+    "qs": "^6.14.0"
   },
   "devDependencies": {
-    "@types/deepmerge": "^2.2.0",
-    "@types/node": "^18.4",
-    "@types/nprogress": "^0.2.0",
-    "@types/qs": "^6.9.0",
+    "@types/deepmerge": "^2.2.3",
+    "@types/node": "^18.19.127",
+    "@types/nprogress": "^0.2.3",
+    "@types/qs": "^6.14.0",
     "es-check": "^9.3.1",
-    "esbuild": "^0.25.0",
-    "esbuild-node-externals": "^1.6.0",
+    "esbuild": "^0.25.10",
+    "esbuild-node-externals": "^1.18.0",
     "typescript": "^5.9.2"
   },
   "scripts": {

package/types/domUtils.d.ts

@@ -0,0 +1,2 @@
+export declare const getScrollableParent: (element: HTMLElement | null) => HTMLElement | null;
+export declare const getElementsInViewportFromCollection: (referenceElement: HTMLElement, elements: HTMLElement[]) => HTMLElement[];

package/types/events.d.ts

@@ -4,6 +4,7 @@ export declare const fireErrorEvent: GlobalEventTrigger<'error'>;
 export declare const fireExceptionEvent: GlobalEventTrigger<'exception'>;
 export declare const fireFinishEvent: GlobalEventTrigger<'finish'>;
 export declare const fireInvalidEvent: GlobalEventTrigger<'invalid'>;
+export declare const fireBeforeUpdateEvent: GlobalEventTrigger<'beforeUpdate'>;
 export declare const fireNavigateEvent: GlobalEventTrigger<'navigate'>;
 export declare const fireProgressEvent: GlobalEventTrigger<'progress'>;
 export declare const fireStartEvent: GlobalEventTrigger<'start'>;

package/types/index.d.ts

@@ -1,9 +1,11 @@
 import { Router } from './router';
+export { getScrollableParent } from './domUtils';
 export { objectToFormData } from './formData';
 export { formDataToObject } from './formObject';
 export { default as createHeadManager } from './head';
+export { default as useInfiniteScroll } from './infiniteScroll';
 export { shouldIntercept, shouldNavigate } from './navigationEvents';
-export { hide as hideProgress, reveal as revealProgress, default as setupProgress } from './progress';
+export { hide as hideProgress, progress, reveal as revealProgress, default as setupProgress } from './progress';
 export { resetFormFields } from './resetFormFields';
 export * from './types';
 export { hrefToUrl, isUrlMethodPair, mergeDataIntoQueryString, urlWithoutHash } from './url';

package/types/infiniteScroll/data.d.ts

@@ -0,0 +1,9 @@
+import { UseInfiniteScrollDataManager } from '../types';
+export declare const useInfiniteScrollData: (options: {
+    getPropName: () => string;
+    onBeforeUpdate: () => void;
+    onBeforePreviousRequest: () => void;
+    onBeforeNextRequest: () => void;
+    onCompletePreviousRequest: (loadedPage?: string | number) => void;
+    onCompleteNextRequest: (loadedPage?: string | number) => void;
+}) => UseInfiniteScrollDataManager;

package/types/infiniteScroll/elements.d.ts

@@ -0,0 +1,14 @@
+import { UseInfiniteScrollElementManager } from '../types';
+export declare const getPageFromElement: (element: HTMLElement) => string | undefined;
+export declare const useInfiniteScrollElementManager: (options: {
+    shouldFetchNext: () => boolean;
+    shouldFetchPrevious: () => boolean;
+    getTriggerMargin: () => number;
+    getStartElement: () => HTMLElement;
+    getEndElement: () => HTMLElement;
+    getItemsElement: () => HTMLElement;
+    getScrollableParent: () => HTMLElement | null;
+    onPreviousTriggered: () => void;
+    onNextTriggered: () => void;
+    onItemIntersected: (element: HTMLElement) => void;
+}) => UseInfiniteScrollElementManager;

package/types/infiniteScroll/queryString.d.ts

@@ -0,0 +1,12 @@
+/**
+ * As users scroll through infinite content, this system updates the URL to reflect
+ * which page they're currently viewing. It uses a "most visible page" calculation
+ * so that the URL reflects whichever page has the most visible items.
+ */
+export declare const useInfiniteScrollQueryString: (options: {
+    getPageName: () => string;
+    getItemsElement: () => HTMLElement;
+    shouldPreserveUrl: () => boolean;
+}) => {
+    onItemIntersected: (itemElement: HTMLElement) => void;
+};

package/types/infiniteScroll/scrollPreservation.d.ts

@@ -0,0 +1,18 @@
+/**
+ * When loading content "before" the current viewport (e.g. loading page 1 when viewing page 2),
+ * new content is prepended to the DOM, which naturally pushes existing content down and
+ * disrupts the user's scroll position. This system maintains visual stability by:
+ *
+ * 1. Capturing a reference element and its position before the update
+ * 2. After new content is added, calculating how far that reference element moved
+ * 3. Adjusting scroll position to keep the reference element in the same visual location
+ */
+export declare const useInfiniteScrollPreservation: (options: {
+    getScrollableParent: () => HTMLElement | null;
+    getItemsElement: () => HTMLElement;
+}) => {
+    createCallbacks: () => {
+        captureScrollPosition: () => void;
+        restoreScrollPosition: () => void;
+    };
+};

package/types/infiniteScroll.d.ts

@@ -0,0 +1,12 @@
+import { UseInfiniteScrollOptions, UseInfiniteScrollProps } from './types';
+/**
+ * Core infinite scroll composable that orchestrates data fetching, DOM management,
+ * scroll preservation, and URL synchronization.
+ *
+ * This is the main entry point that coordinates four sub-systems:
+ * - Data management: Handles pagination state and server requests
+ * - Element management: DOM observation and intersection detection
+ * - Query string sync: Updates URL as user scrolls through pages
+ * - Scroll preservation: Maintains scroll position during content updates
+ */
+export default function useInfiniteScroll(options: UseInfiniteScrollOptions): UseInfiniteScrollProps;

package/types/intersectionObservers.d.ts

@@ -0,0 +1,7 @@
+type IntersectionObserverCallback = (entry: IntersectionObserverEntry) => void;
+interface IntersectionObserverManager {
+    new: (callback: IntersectionObserverCallback, options?: IntersectionObserverInit) => IntersectionObserver;
+    flushAll: () => void;
+}
+export declare const useIntersectionObservers: () => IntersectionObserverManager;
+export {};

package/types/progress.d.ts

@@ -1,3 +1,16 @@
+declare class Progress {
+    hideCount: number;
+    start(): void;
+    reveal(force?: boolean): void;
+    hide(): void;
+    set(status: number): void;
+    finish(): void;
+    reset(): void;
+    remove(): void;
+    isStarted(): boolean;
+    getStatus(): number | null;
+}
+export declare const progress: Progress;
 export declare const reveal: (force?: boolean) => void;
 export declare const hide: () => void;
 export default function setupProgress({ delay, color, includeCSS, showSpinner, }?: {
@@ -6,3 +19,4 @@ export default function setupProgress({ delay, color, includeCSS, showSpinner, }
     includeCSS?: boolean | undefined;
     showSpinner?: boolean | undefined;
 }): void;
+export {};

package/types/response.d.ts

@@ -27,7 +27,10 @@ export declare class Response {
     protected shouldSetPage(pageResponse: Page): boolean;
     protected pageUrl(pageResponse: Page): string;
     protected mergeProps(pageResponse: Page): void;
-    protected mergeOrMatchItems(target: any[], source: any[], currentKey: string, matchPropsOn: string[]): any[];
+    protected mergeOrMatchItems(existingItems: any[], newItems: any[], matchProp: string, matchPropsOn: string[], shouldAppend?: boolean): any[];
+    protected appendWithMatching(existingItems: any[], newItems: any[], newItemsMap: Map<any, any>, uniqueProperty: string): any[];
+    protected prependWithMatching(existingItems: any[], newItems: any[], newItemsMap: Map<any, any>, uniqueProperty: string): any[];
+    protected hasUniqueProperty(item: any, property: string): boolean;
     protected setRememberedState(pageResponse: Page): Promise<void>;
     protected getScopedErrors(errors: Errors & ErrorBag): Errors;
 }

package/types/router.d.ts

@@ -30,6 +30,9 @@ export declare class Router {
     decryptHistory(): Promise<Page>;
     resolveComponent(component: string): Promise<Component>;
     replace<TProps = Page['props']>(params: ClientSideVisitOptions<TProps>): void;
+    replaceProp<TProps = Page['props']>(name: string, value: unknown | ((oldValue: unknown, props: TProps) => unknown), options?: Pick<ClientSideVisitOptions, 'onError' | 'onFinish' | 'onSuccess'>): void;
+    appendToProp<TProps = Page['props']>(name: string, value: unknown | unknown[] | ((oldValue: unknown, props: TProps) => unknown | unknown[]), options?: Pick<ClientSideVisitOptions, 'onError' | 'onFinish' | 'onSuccess'>): void;
+    prependToProp<TProps = Page['props']>(name: string, value: unknown | unknown[] | ((oldValue: unknown, props: TProps) => unknown | unknown[]), options?: Pick<ClientSideVisitOptions, 'onError' | 'onFinish' | 'onSuccess'>): void;
     push<TProps = Page['props']>(params: ClientSideVisitOptions<TProps>): void;
     protected clientVisit<TProps = Page['props']>(params: ClientSideVisitOptions<TProps>, { replace }?: {
         replace?: boolean;

package/types/types.d.ts

@@ -53,6 +53,12 @@ export type RequestPayload = Record<string, FormDataConvertible> | FormData;
 export interface PageProps {
     [key: string]: unknown;
 }
+export type ScrollProp = {
+    pageName: string;
+    previousPage?: number | string;
+    nextPage?: number | string;
+    currentPage?: number | string;
+};
 export interface Page<SharedProps extends PageProps = PageProps> {
     component: string;
     props: PageProps & SharedProps & {
@@ -65,8 +71,10 @@ export interface Page<SharedProps extends PageProps = PageProps> {
     encryptHistory: boolean;
     deferredProps?: Record<string, VisitOptions['only']>;
     mergeProps?: string[];
+    prependProps?: string[];
     deepMergeProps?: string[];
     matchPropsOn?: string[];
+    scrollProps?: Record<keyof PageProps, ScrollProp>;
     /** @internal */
     rememberedState: Record<string, unknown>;
 }
@@ -152,6 +160,13 @@ export type GlobalEventsMap<T extends RequestPayload = RequestPayload> = {
         details: {};
         result: void;
     };
+    beforeUpdate: {
+        parameters: [Page];
+        details: {
+            page: Page;
+        };
+        result: void;
+    };
     navigate: {
         parameters: [Page];
         details: {
@@ -220,6 +235,7 @@ export type VisitCallbacks<T extends RequestPayload = RequestPayload> = {
         }): void;
     };
     onBefore: GlobalEventCallback<'before', T>;
+    onBeforeUpdate: GlobalEventCallback<'beforeUpdate', T>;
     onStart: GlobalEventCallback<'start', T>;
     onProgress: GlobalEventCallback<'progress', T>;
     onFinish: GlobalEventCallback<'finish', T>;
@@ -348,6 +364,77 @@ export type FormComponentState = {
 };
 export type FormComponentSlotProps = FormComponentMethods & FormComponentState;
 export type FormComponentRef = FormComponentSlotProps;
+export interface UseInfiniteScrollOptions {
+    getPropName: () => string;
+    inReverseMode: () => boolean;
+    shouldFetchNext: () => boolean;
+    shouldFetchPrevious: () => boolean;
+    shouldPreserveUrl: () => boolean;
+    getTriggerMargin: () => number;
+    getStartElement: () => HTMLElement;
+    getEndElement: () => HTMLElement;
+    getItemsElement: () => HTMLElement;
+    getScrollableParent: () => HTMLElement | null;
+    onBeforePreviousRequest: () => void;
+    onBeforeNextRequest: () => void;
+    onCompletePreviousRequest: () => void;
+    onCompleteNextRequest: () => void;
+}
+export interface UseInfiniteScrollDataManager {
+    getLastLoadedPage: () => number | string | undefined;
+    getPageName: () => string;
+    hasPrevious: () => boolean;
+    hasNext: () => boolean;
+    fetchNext: (reloadOptions?: ReloadOptions) => void;
+    fetchPrevious: (reloadOptions?: ReloadOptions) => void;
+}
+export interface UseInfiniteScrollElementManager {
+    setupObservers: () => void;
+    enableTriggers: () => void;
+    disableTriggers: () => void;
+    refreshTriggers: () => void;
+    flushAll: () => void;
+    processManuallyAddedElements: () => void;
+    processServerLoadedElements: (loadedPage?: string | number | undefined) => void;
+}
+export interface UseInfiniteScrollProps {
+    dataManager: UseInfiniteScrollDataManager;
+    elementManager: UseInfiniteScrollElementManager;
+}
+export interface InfiniteScrollSlotProps {
+    loading: boolean;
+    loadingPrevious: boolean;
+    loadingNext: boolean;
+}
+export interface InfiniteScrollActionSlotProps {
+    loading: boolean;
+    loadingPrevious: boolean;
+    loadingNext: boolean;
+    fetch: () => void;
+    autoMode: boolean;
+    manualMode: boolean;
+    hasMore: boolean;
+    hasPrevious: boolean;
+    hasNext: boolean;
+}
+export interface InfiniteScrollRef {
+    fetchNext: (reloadOptions?: ReloadOptions) => void;
+    fetchPrevious: (reloadOptions?: ReloadOptions) => void;
+    hasPrevious: () => boolean;
+    hasNext: () => boolean;
+}
+export interface InfiniteScrollComponentBaseProps {
+    data?: string;
+    buffer?: number;
+    as?: string;
+    manual?: boolean;
+    manualAfter?: number;
+    preserveUrl?: boolean;
+    reverse?: boolean;
+    autoScroll?: boolean;
+    onlyNext?: boolean;
+    onlyPrevious?: boolean;
+}
 declare global {
     interface DocumentEventMap {
         'inertia:before': GlobalEvent<'before'>;
@@ -358,6 +445,7 @@ declare global {
         'inertia:invalid': GlobalEvent<'invalid'>;
         'inertia:exception': GlobalEvent<'exception'>;
         'inertia:finish': GlobalEvent<'finish'>;
+        'inertia:beforeUpdate': GlobalEvent<'beforeUpdate'>;
         'inertia:navigate': GlobalEvent<'navigate'>;
     }
 }