@inertiajs/svelte 2.3.17 → 3.0.0-beta.1

package/dist/components/Form.svelte.d.ts

@@ -1,98 +1,53 @@
-import { SvelteComponent } from "svelte";
-import { type Errors, type Method, type FormDataConvertible } from '@inertiajs/core';
+import { type FormComponentProps, type FormComponentSlotProps, type FormDataConvertible } from '@inertiajs/core';
 import { type NamedInputEvent, type ValidationConfig, type Validator } from 'laravel-precognition';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        action?: string | import("@inertiajs/core").UrlMethodPair | undefined;
-        method?: Method | "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | undefined;
-        headers?: Record<string, string> | undefined;
-        queryStringArrayFormat?: import("@inertiajs/core").QueryStringArrayFormatOption | undefined;
-        errorBag?: string | null | undefined;
-        showProgress?: boolean | undefined;
-        transform?: ((data: Record<string, FormDataConvertible>) => Record<string, FormDataConvertible>) | undefined;
-        options?: import("@inertiajs/core").FormComponentOptions | undefined;
-        onCancelToken?: import("@inertiajs/core").CancelTokenCallback | undefined;
-        onBefore?: import("@inertiajs/core").GlobalEventCallback<"before", import("@inertiajs/core").RequestPayload> | undefined;
-        onStart?: import("@inertiajs/core").GlobalEventCallback<"start", import("@inertiajs/core").RequestPayload> | undefined;
-        onProgress?: import("@inertiajs/core").GlobalEventCallback<"progress", import("@inertiajs/core").RequestPayload> | undefined;
-        onFinish?: import("@inertiajs/core").GlobalEventCallback<"finish", import("@inertiajs/core").RequestPayload> | undefined;
-        onCancel?: import("@inertiajs/core").GlobalEventCallback<"cancel", import("@inertiajs/core").RequestPayload> | undefined;
-        onSuccess?: import("@inertiajs/core").GlobalEventCallback<"success", import("@inertiajs/core").RequestPayload> | undefined;
-        onError?: import("@inertiajs/core").GlobalEventCallback<"error", import("@inertiajs/core").RequestPayload> | undefined;
-        onSubmitComplete?: ((props: import("@inertiajs/core").FormComponentonSubmitCompleteArguments) => void) | undefined;
-        disableWhileProcessing?: boolean | undefined;
-        invalidateCacheTags?: string | string[] | undefined;
-        resetOnError?: boolean | string[] | undefined;
-        resetOnSuccess?: boolean | string[] | undefined;
-        setDefaultsOnSuccess?: boolean | undefined;
-        validateFiles?: boolean | undefined;
-        validationTimeout?: number | undefined;
-        withAllErrors?: boolean | null | undefined;
-        getFormData?: ((submitter?: HTMLElement | null) => FormData) | undefined;
-        getData?: ((submitter?: HTMLElement | null) => Record<string, FormDataConvertible>) | undefined;
-        submit?: ((submitter?: HTMLElement | null) => void) | undefined;
-        reset?: ((...fields: string[]) => void) | undefined;
-        clearErrors?: ((...fields: string[]) => void) | undefined;
-        resetAndClearErrors?: ((...fields: string[]) => void) | undefined;
-        setError?: ((fieldOrFields: string | Record<string, string>, maybeValue?: string) => void) | undefined;
-        defaults?: (() => void) | undefined;
-        validate?: ((field?: string | NamedInputEvent | ValidationConfig, config?: ValidationConfig) => import("svelte/store").Writable<import("../useForm").InertiaPrecognitiveForm<Record<string, any>>> & import("../useForm").InertiaFormProps<Record<string, any>> & Record<string, any> & import("../useForm").InertiaFormValidationProps<Record<string, any>>) | undefined;
-        valid?: ((field: string) => boolean) | undefined;
-        invalid?: ((field: string) => boolean) | undefined;
-        touch?: ((field: string | NamedInputEvent | string[], ...fields: string[]) => import("svelte/store").Writable<import("../useForm").InertiaPrecognitiveForm<Record<string, any>>> & import("../useForm").InertiaFormProps<Record<string, any>> & Record<string, any> & import("../useForm").InertiaFormValidationProps<Record<string, any>>) | undefined;
-        touched?: ((field?: string) => boolean) | undefined;
-        validator?: (() => Validator) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            errors: Errors;
-            hasErrors: boolean;
-            processing: boolean;
-            progress: import("axios").AxiosProgressEvent | null;
-            wasSuccessful: boolean;
-            recentlySuccessful: boolean;
-            clearErrors: (...fields: string[]) => void;
-            resetAndClearErrors: (...fields: string[]) => void;
-            setError: (fieldOrFields: string | Record<string, string>, maybeValue?: string) => void;
-            isDirty: boolean;
-            submit: (submitter?: HTMLElement | null) => void;
-            defaults: () => void;
-            reset: (...fields: string[]) => void;
-            getData: (submitter?: HTMLElement | null) => Record<string, FormDataConvertible>;
-            getFormData: (submitter?: HTMLElement | null) => FormData;
-            validator: () => Validator;
-            validate: (field?: string | NamedInputEvent | ValidationConfig, config?: ValidationConfig) => import("svelte/store").Writable<import("../useForm").InertiaPrecognitiveForm<Record<string, any>>> & import("../useForm").InertiaFormProps<Record<string, any>> & Record<string, any> & import("../useForm").InertiaFormValidationProps<Record<string, any>>;
-            touch: (field: string | NamedInputEvent | string[], ...fields: string[]) => import("svelte/store").Writable<import("../useForm").InertiaPrecognitiveForm<Record<string, any>>> & import("../useForm").InertiaFormProps<Record<string, any>> & Record<string, any> & import("../useForm").InertiaFormValidationProps<Record<string, any>>;
-            validating: boolean;
-            valid: <K extends string>(field: K) => boolean;
-            invalid: <K extends string>(field: K) => boolean;
-            touched: <K extends string>(field?: K | undefined) => boolean;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type FormProps = typeof __propDef.props;
-export type FormEvents = typeof __propDef.events;
-export type FormSlots = typeof __propDef.slots;
-export default class Form extends SvelteComponent<FormProps, FormEvents, FormSlots> {
-    get getFormData(): (submitter?: HTMLElement | null) => FormData;
-    get getData(): (submitter?: HTMLElement | null) => Record<string, FormDataConvertible>;
-    get submit(): (submitter?: HTMLElement | null) => void;
-    get reset(): (...fields: string[]) => void;
-    get clearErrors(): (...fields: string[]) => void;
-    get resetAndClearErrors(): (...fields: string[]) => void;
-    get setError(): (fieldOrFields: string | Record<string, string>, maybeValue?: string) => void;
-    get defaults(): () => void;
-    get validate(): (field?: string | NamedInputEvent | ValidationConfig, config?: ValidationConfig) => import("svelte/store").Writable<import("../useForm").InertiaPrecognitiveForm<Record<string, any>>> & import("../useForm").InertiaFormProps<Record<string, any>> & Record<string, any> & import("../useForm").InertiaFormValidationProps<Record<string, any>>;
-    get valid(): (field: string) => boolean;
-    get invalid(): (field: string) => boolean;
-    get touch(): (field: string | NamedInputEvent | string[], ...fields: string[]) => import("svelte/store").Writable<import("../useForm").InertiaPrecognitiveForm<Record<string, any>>> & import("../useForm").InertiaFormProps<Record<string, any>> & Record<string, any> & import("../useForm").InertiaFormValidationProps<Record<string, any>>;
-    get touched(): (field?: string) => boolean;
-    get validator(): () => Validator;
+interface Props {
+    action?: FormComponentProps['action'];
+    method?: FormComponentProps['method'];
+    headers?: FormComponentProps['headers'];
+    queryStringArrayFormat?: FormComponentProps['queryStringArrayFormat'];
+    errorBag?: FormComponentProps['errorBag'];
+    showProgress?: FormComponentProps['showProgress'];
+    transform?: FormComponentProps['transform'];
+    options?: FormComponentProps['options'];
+    onCancelToken?: FormComponentProps['onCancelToken'];
+    onBefore?: FormComponentProps['onBefore'];
+    onStart?: FormComponentProps['onStart'];
+    onProgress?: FormComponentProps['onProgress'];
+    onFinish?: FormComponentProps['onFinish'];
+    onCancel?: FormComponentProps['onCancel'];
+    onSuccess?: FormComponentProps['onSuccess'];
+    onError?: FormComponentProps['onError'];
+    onSubmitComplete?: FormComponentProps['onSubmitComplete'];
+    disableWhileProcessing?: boolean;
+    invalidateCacheTags?: FormComponentProps['invalidateCacheTags'];
+    resetOnError?: FormComponentProps['resetOnError'];
+    resetOnSuccess?: FormComponentProps['resetOnSuccess'];
+    setDefaultsOnSuccess?: FormComponentProps['setDefaultsOnSuccess'];
+    validateFiles?: FormComponentProps['validateFiles'];
+    validationTimeout?: FormComponentProps['validationTimeout'];
+    optimistic?: FormComponentProps['optimistic'];
+    withAllErrors?: FormComponentProps['withAllErrors'];
+    component?: FormComponentProps['component'];
+    instant?: FormComponentProps['instant'];
+    children?: import('svelte').Snippet<[FormComponentSlotProps]>;
+    [key: string]: any;
 }
-export {};
+type FormSubmitter = HTMLElement | null;
+declare const Form: import("svelte").Component<Props, {
+    getFormData: (submitter?: FormSubmitter) => FormData;
+    getData: (submitter?: FormSubmitter) => Record<string, FormDataConvertible>;
+    submit: (submitter?: FormSubmitter) => void;
+    reset: (...fields: string[]) => void;
+    clearErrors: (...fields: string[]) => void;
+    resetAndClearErrors: (...fields: string[]) => void;
+    setError: (fieldOrFields: string | Record<string, string>, maybeValue?: string) => void;
+    defaults: () => void;
+    validate: (field?: string | NamedInputEvent | ValidationConfig, config?: ValidationConfig) => import("../useForm.svelte").InertiaFormProps<Record<string, any>> & Record<string, any> & import("../useForm.svelte").InertiaFormValidationProps<Record<string, any>>;
+    valid: (field: string) => boolean;
+    invalid: (field: string) => boolean;
+    touch: (field: string | NamedInputEvent | string[], ...fields: string[]) => import("../useForm.svelte").InertiaFormProps<Record<string, any>> & Record<string, any> & import("../useForm.svelte").InertiaFormValidationProps<Record<string, any>>;
+    touched: (field?: string) => boolean;
+    validator: () => Validator;
+}, "action">;
+type Form = ReturnType<typeof Form>;
+export default Form;

package/dist/components/InfiniteScroll.svelte

@@ -1,195 +1,255 @@
-<script>import {
-  getScrollableParent,
-  useInfiniteScroll
-} from "@inertiajs/core";
-import { onDestroy, onMount } from "svelte";
-export let data;
-export let buffer = 0;
-export let as = "div";
-export let manual = false;
-export let manualAfter = 0;
-export let preserveUrl = false;
-export let reverse = false;
-export let autoScroll = void 0;
-export let startElement = null;
-export let endElement = null;
-export let itemsElement = null;
-export let onlyNext = false;
-export let onlyPrevious = false;
-let itemsElementRef;
-let startElementRef;
-let endElementRef;
-let loadingPrevious = false;
-let loadingNext = false;
-let requestCount = 0;
-let hasPreviousPage = false;
-let hasNextPage = false;
-$: resolvedItemsElement = resolveHTMLElement(itemsElement, itemsElementRef);
-$: scrollableParent = resolvedItemsElement ? getScrollableParent(resolvedItemsElement) : null;
-$: sharedExposed = {
-  loadingPrevious,
-  loadingNext,
-  hasPrevious: hasPreviousPage,
-  hasNext: hasNextPage
-};
-$: exposedPrevious = {
-  loading: loadingPrevious,
-  fetch: fetchPrevious,
-  autoMode: headerAutoMode,
-  manualMode: !headerAutoMode,
-  hasMore: hasPreviousPage,
-  ...sharedExposed
-};
-$: exposedNext = {
-  loading: loadingNext,
-  fetch: fetchNext,
-  autoMode: footerAutoMode,
-  manualMode: !footerAutoMode,
-  hasMore: hasNextPage,
-  ...sharedExposed
-};
-$: exposedSlot = {
-  loading: loadingPrevious || loadingNext,
-  loadingPrevious,
-  loadingNext
-};
-let infiniteScrollInstance = null;
-function resolveHTMLElement(value, fallback) {
-  if (!value) {
-    return fallback;
+<script lang="ts">
+  import {
+    getScrollableParent,
+    type InfiniteScrollActionSlotProps,
+    type InfiniteScrollComponentBaseProps,
+    type UseInfiniteScrollProps,
+    type InfiniteScrollSlotProps,
+    type ReloadOptions,
+    useInfiniteScroll,
+  } from '@inertiajs/core'
+  import { onDestroy, onMount } from 'svelte'
+
+  interface Props {
+    data: InfiniteScrollComponentBaseProps['data']
+    buffer?: InfiniteScrollComponentBaseProps['buffer']
+    as?: InfiniteScrollComponentBaseProps['as']
+    manual?: InfiniteScrollComponentBaseProps['manual']
+    manualAfter?: InfiniteScrollComponentBaseProps['manualAfter']
+    preserveUrl?: InfiniteScrollComponentBaseProps['preserveUrl']
+    reverse?: InfiniteScrollComponentBaseProps['reverse']
+    autoScroll?: InfiniteScrollComponentBaseProps['autoScroll']
+    startElement?: string | (() => HTMLElement | null) | null
+    endElement?: string | (() => HTMLElement | null) | null
+    itemsElement?: string | (() => HTMLElement | null) | null
+    params?: ReloadOptions
+    onlyNext?: boolean
+    onlyPrevious?: boolean
+    previous?: import('svelte').Snippet<[any]>
+    loading?: import('svelte').Snippet<[any]>
+    next?: import('svelte').Snippet<[any]>
+    children?: import('svelte').Snippet<[any]>
+    [key: string]: any
+  }
+
+  let {
+    data,
+    buffer = 0,
+    as = 'div',
+    manual = false,
+    manualAfter = 0,
+    preserveUrl = false,
+    reverse = false,
+    autoScroll = undefined,
+    startElement = null,
+    endElement = null,
+    itemsElement = null,
+    params = {},
+    onlyNext = false,
+    onlyPrevious = false,
+    previous,
+    loading,
+    next,
+    children,
+    ...rest
+  }: Props = $props()
+
+  let itemsElementRef: HTMLElement = $state(null!)
+  let startElementRef: HTMLElement = $state(null!)
+  let endElementRef: HTMLElement = $state(null!)
+  let loadingPrevious = $state(false)
+  let loadingNext = $state(false)
+  let requestCount = $state(0)
+  let hasPreviousPage = $state(false)
+  let hasNextPage = $state(false)
+
+  let infiniteScrollInstance: UseInfiniteScrollProps = $state(null!)
+
+  function resolveHTMLElement(
+    value: string | (() => HTMLElement | null) | null,
+    fallback: HTMLElement | null,
+  ): HTMLElement | null {
+    if (!value) {
+      return fallback
+    }
+
+    if (typeof value === 'string') {
+      return document.querySelector(value) as HTMLElement | null
+    }
+
+    if (typeof value === 'function') {
+      return value() || null
+    }
+
+    return fallback
+  }
+
+  function scrollToBottom() {
+    if (scrollableParent) {
+      scrollableParent.scrollTo({
+        top: scrollableParent.scrollHeight,
+        behavior: 'instant',
+      })
+    } else {
+      window.scrollTo({
+        top: document.body.scrollHeight,
+        behavior: 'instant',
+      })
+    }
+  }
+
+  export function fetchPrevious(options?: any) {
+    infiniteScrollInstance?.dataManager.fetchPrevious(options)
+  }
+
+  export function fetchNext(options?: any) {
+    infiniteScrollInstance?.dataManager.fetchNext(options)
   }
-  if (typeof value === "string") {
-    return document.querySelector(value);
+
+  export function hasPrevious(): boolean {
+    return infiniteScrollInstance?.dataManager.hasPrevious() || false
   }
-  if (typeof value === "function") {
-    return value() || null;
+
+  export function hasNext(): boolean {
+    return infiniteScrollInstance?.dataManager.hasNext() || false
   }
-  return fallback;
-}
-function scrollToBottom() {
-  if (scrollableParent) {
-    scrollableParent.scrollTo({
-      top: scrollableParent.scrollHeight,
-      behavior: "instant"
-    });
-  } else {
-    window.scrollTo({
-      top: document.body.scrollHeight,
-      behavior: "instant"
-    });
+
+  onMount(() => {
+    setTimeout(setupInfiniteScrollInstance)
+  })
+
+  function syncStateFromDataManager() {
+    requestCount = infiniteScrollInstance!.dataManager.getRequestCount()
+    hasPreviousPage = infiniteScrollInstance!.dataManager.hasPrevious()
+    hasNextPage = infiniteScrollInstance!.dataManager.hasNext()
   }
-}
-export function fetchPrevious(options) {
-  infiniteScrollInstance?.dataManager.fetchPrevious(options);
-}
-export function fetchNext(options) {
-  infiniteScrollInstance?.dataManager.fetchNext(options);
-}
-export function hasPrevious() {
-  return infiniteScrollInstance?.dataManager.hasPrevious() || false;
-}
-export function hasNext() {
-  return infiniteScrollInstance?.dataManager.hasNext() || false;
-}
-onMount(() => {
-  setTimeout(setupInfiniteScrollInstance);
-});
-function syncStateFromDataManager() {
-  requestCount = infiniteScrollInstance.dataManager.getRequestCount();
-  hasPreviousPage = infiniteScrollInstance.dataManager.hasPrevious();
-  hasNextPage = infiniteScrollInstance.dataManager.hasNext();
-}
-function setupInfiniteScrollInstance() {
-  const resolvedItemsElement2 = resolveHTMLElement(itemsElement, itemsElementRef);
-  const resolvedStartElement = resolveHTMLElement(startElement, startElementRef);
-  const resolvedEndElement = resolveHTMLElement(endElement, endElementRef);
-  infiniteScrollInstance = useInfiniteScroll({
-    // Data
-    getPropName: () => data,
-    inReverseMode: () => reverse ?? false,
-    shouldFetchNext: () => !onlyPrevious,
-    shouldFetchPrevious: () => !onlyNext,
-    shouldPreserveUrl: () => preserveUrl ?? false,
-    // Elements
-    getTriggerMargin: () => buffer ?? 0,
-    getStartElement: () => resolvedStartElement,
-    getEndElement: () => resolvedEndElement,
-    getItemsElement: () => resolvedItemsElement2,
-    getScrollableParent: () => resolvedItemsElement2 ? getScrollableParent(resolvedItemsElement2) : null,
-    // Request callbacks
-    onBeforePreviousRequest: () => loadingPrevious = true,
-    onBeforeNextRequest: () => loadingNext = true,
-    onCompletePreviousRequest: () => {
-      loadingPrevious = false;
-      syncStateFromDataManager();
-    },
-    onCompleteNextRequest: () => {
-      loadingNext = false;
-      syncStateFromDataManager();
-    },
-    onDataReset: syncStateFromDataManager
-  });
-  const { dataManager, elementManager } = infiniteScrollInstance;
-  syncStateFromDataManager();
-  elementManager.setupObservers();
-  elementManager.processServerLoadedElements(dataManager.getLastLoadedPage());
-  const shouldAutoScroll = autoScroll !== void 0 ? autoScroll : reverse;
-  if (shouldAutoScroll) {
-    scrollToBottom();
+
+  function setupInfiniteScrollInstance() {
+    const resolvedItemsElement = resolveHTMLElement(itemsElement, itemsElementRef)
+    const resolvedStartElement = resolveHTMLElement(startElement, startElementRef)
+    const resolvedEndElement = resolveHTMLElement(endElement, endElementRef)
+
+    infiniteScrollInstance = useInfiniteScroll({
+      // Data
+      getPropName: () => data,
+      inReverseMode: () => reverse ?? false,
+      shouldFetchNext: () => !onlyPrevious,
+      shouldFetchPrevious: () => !onlyNext,
+      shouldPreserveUrl: () => preserveUrl ?? false,
+      getReloadOptions: () => params,
+
+      // Elements
+      getTriggerMargin: () => buffer ?? 0,
+      getStartElement: () => resolvedStartElement!,
+      getEndElement: () => resolvedEndElement!,
+      getItemsElement: () => resolvedItemsElement!,
+      getScrollableParent: () => (resolvedItemsElement ? getScrollableParent(resolvedItemsElement) : null),
+
+      // Request callbacks
+      onBeforePreviousRequest: () => (loadingPrevious = true),
+      onBeforeNextRequest: () => (loadingNext = true),
+      onCompletePreviousRequest: () => {
+        loadingPrevious = false
+        syncStateFromDataManager()
+      },
+      onCompleteNextRequest: () => {
+        loadingNext = false
+        syncStateFromDataManager()
+      },
+      onDataReset: syncStateFromDataManager,
+    })
+
+    const { dataManager, elementManager } = infiniteScrollInstance
+
+    syncStateFromDataManager()
+
+    elementManager.setupObservers()
+    elementManager.processServerLoadedElements(dataManager.getLastLoadedPage())
+
+    // autoScroll defaults to reverse value if not explicitly set
+    const shouldAutoScroll = autoScroll !== undefined ? autoScroll : reverse
+
+    if (shouldAutoScroll) {
+      scrollToBottom()
+    }
   }
-}
-$: manualMode = manual || manualAfter !== void 0 && manualAfter > 0 && requestCount >= manualAfter;
-$: autoLoad = !manualMode;
-$: headerAutoMode = autoLoad && !onlyNext;
-$: footerAutoMode = autoLoad && !onlyPrevious;
-$: {
-  ;
-  [autoLoad, onlyNext, onlyPrevious, reverse];
-  autoLoad ? infiniteScrollInstance?.elementManager.enableTriggers() : infiniteScrollInstance?.elementManager.disableTriggers();
-}
-onDestroy(() => infiniteScrollInstance?.flush());
+
+  onDestroy(() => infiniteScrollInstance?.flush())
+  let resolvedItemsElement = $derived(resolveHTMLElement(itemsElement, itemsElementRef))
+  let scrollableParent = $derived(resolvedItemsElement ? getScrollableParent(resolvedItemsElement) : null)
+  let sharedExposed = $derived({
+    loadingPrevious,
+    loadingNext,
+    hasPrevious: hasPreviousPage,
+    hasNext: hasNextPage,
+  } satisfies Pick<InfiniteScrollActionSlotProps, 'loadingPrevious' | 'loadingNext' | 'hasPrevious' | 'hasNext'>)
+  let manualMode = $derived(manual || (manualAfter !== undefined && manualAfter > 0 && requestCount >= manualAfter))
+  let autoLoad = $derived(!manualMode)
+  let headerAutoMode = $derived(autoLoad && !onlyNext)
+  let exposedPrevious = $derived({
+    loading: loadingPrevious,
+    fetch: fetchPrevious,
+    autoMode: headerAutoMode,
+    manualMode: !headerAutoMode,
+    hasMore: hasPreviousPage,
+    ...sharedExposed,
+  } satisfies InfiniteScrollActionSlotProps)
+  let footerAutoMode = $derived(autoLoad && !onlyPrevious)
+  let exposedNext = $derived({
+    loading: loadingNext,
+    fetch: fetchNext,
+    autoMode: footerAutoMode,
+    manualMode: !footerAutoMode,
+    hasMore: hasNextPage,
+    ...sharedExposed,
+  } satisfies InfiniteScrollActionSlotProps)
+  let exposedSlot = $derived({
+    loading: loadingPrevious || loadingNext,
+    loadingPrevious,
+    loadingNext,
+  } satisfies InfiniteScrollSlotProps)
+  $effect(() => {
+    // Make this block run whenever these change
+    ;[autoLoad, onlyNext, onlyPrevious, reverse]
+
+    autoLoad
+      ? infiniteScrollInstance?.elementManager.enableTriggers()
+      : infiniteScrollInstance?.elementManager.disableTriggers()
+  })
 </script>
 
 {#if !startElement && !reverse}
   <div bind:this={startElementRef}>
-    <slot name="previous" {exposedPrevious} {...exposedPrevious}>
-      {#if loadingPrevious}
-        <slot name="loading" {exposedPrevious} {...exposedPrevious} />
-      {/if}
-    </slot>
+    {#if previous}{@render previous({ exposedPrevious, ...exposedPrevious })}{:else if loadingPrevious}
+      {@render loading?.({ exposedPrevious, ...exposedPrevious })}
+    {/if}
   </div>
 {/if}
 
 {#if !endElement && reverse}
   <div bind:this={endElementRef}>
-    <slot name="next" {exposedNext} {...exposedNext}>
-      {#if loadingNext}
-        <slot name="loading" {exposedNext} {...exposedNext} />
-      {/if}
-    </slot>
+    {#if next}{@render next({ exposedNext, ...exposedNext })}{:else if loadingNext}
+      {@render loading?.({ exposedNext, ...exposedNext })}
+    {/if}
   </div>
 {/if}
 
-<svelte:element this={as} bind:this={itemsElementRef} {...$$restProps}>
-  <slot {exposedSlot} {...exposedSlot} />
+<svelte:element this={as} bind:this={itemsElementRef} {...rest}>
+  {@render children?.({ exposedSlot, ...exposedSlot })}
 </svelte:element>
 
 {#if !startElement && reverse}
   <div bind:this={startElementRef}>
-    <slot name="previous" {exposedPrevious} {...exposedPrevious}>
-      {#if loadingPrevious}
-        <slot name="loading" {exposedPrevious} {...exposedPrevious} />
-      {/if}
-    </slot>
+    {#if previous}{@render previous({ exposedPrevious, ...exposedPrevious })}{:else if loadingPrevious}
+      {@render loading?.({ exposedPrevious, ...exposedPrevious })}
+    {/if}
   </div>
 {/if}
 
 {#if !endElement && !reverse}
   <div bind:this={endElementRef}>
-    <slot name="next" {exposedNext} {...exposedNext}>
-      {#if loadingNext}
-        <slot name="loading" {exposedNext} {...exposedNext} />
-      {/if}
-    </slot>
+    {#if next}{@render next({ exposedNext, ...exposedNext })}{:else if loadingNext}
+      {@render loading?.({ exposedNext, ...exposedNext })}
+    {/if}
   </div>
 {/if}