@inertiajs/svelte 2.2.7 → 2.2.9

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

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
 import type { ComponentResolver, ResolvedComponent } from '../types';
-import { type Page } from '@inertiajs/core';
-export interface InertiaAppProps {
+import { type Page, type PageProps } from '@inertiajs/core';
+export interface InertiaAppProps<SharedProps extends PageProps = PageProps> {
     initialComponent: ResolvedComponent;
-    initialPage: Page;
+    initialPage: Page<SharedProps>;
     resolveComponent: ComponentResolver;
 }
 declare const __propDef: {

package/dist/components/Form.svelte

@@ -34,7 +34,7 @@ const form = useForm({});
 let formElement;
 let isDirty = false;
 let defaultData = new FormData();
-$: _method = isUrlMethodPair(action) ? action.method : method.toLowerCase();
+$: _method = isUrlMethodPair(action) ? action.method : (method ?? "get").toLowerCase();
 $: _action = isUrlMethodPair(action) ? action.url : action;
 function getFormData() {
   return new FormData(formElement);

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

@@ -1,19 +1,17 @@
 import { SvelteComponent } from "svelte";
-import { type Errors, type FormDataConvertible } from '@inertiajs/core';
+import { type Errors, type Method, type FormDataConvertible } from '@inertiajs/core';
 declare const __propDef: {
     props: {
         [x: string]: any;
         action?: string | import("@inertiajs/core").UrlMethodPair | undefined;
-        method?: import("@inertiajs/core").Method | "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | undefined;
+        method?: Method | "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | undefined;
         headers?: Record<string, string> | undefined;
         queryStringArrayFormat?: "indices" | "brackets" | undefined;
         errorBag?: string | null | undefined;
         showProgress?: boolean | undefined;
         transform?: ((data: Record<string, FormDataConvertible>) => Record<string, FormDataConvertible>) | undefined;
         options?: import("@inertiajs/core").FormComponentOptions | undefined;
-        onCancelToken?: (({ cancel }: {
-            cancel: VoidFunction;
-        }) => void) | 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;

package/dist/components/InfiniteScroll.svelte

@@ -3,7 +3,7 @@
   useInfiniteScroll
 } from "@inertiajs/core";
 import { onDestroy, onMount } from "svelte";
-export let data = void 0;
+export let data;
 export let buffer = 0;
 export let as = "div";
 export let manual = false;
@@ -99,12 +99,12 @@ function setupInfiniteScrollInstance() {
   infiniteScrollInstance = useInfiniteScroll({
     // Data
     getPropName: () => data,
-    inReverseMode: () => reverse,
+    inReverseMode: () => reverse ?? false,
     shouldFetchNext: () => !onlyPrevious,
     shouldFetchPrevious: () => !onlyNext,
-    shouldPreserveUrl: () => preserveUrl,
+    shouldPreserveUrl: () => preserveUrl ?? false,
     // Elements
-    getTriggerMargin: () => buffer,
+    getTriggerMargin: () => buffer ?? 0,
     getStartElement: () => resolvedStartElement,
     getEndElement: () => resolvedEndElement,
     getItemsElement: () => resolvedItemsElement2,
@@ -130,7 +130,7 @@ function setupInfiniteScrollInstance() {
     scrollToBottom();
   }
 }
-$: manualMode = manual || manualAfter > 0 && requestCount >= manualAfter;
+$: manualMode = manual || manualAfter !== void 0 && manualAfter > 0 && requestCount >= manualAfter;
 $: autoLoad = !manualMode;
 $: headerAutoMode = autoLoad && !onlyNext;
 $: footerAutoMode = autoLoad && !onlyPrevious;

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

@@ -1,8 +1,9 @@
 import { SvelteComponent } from "svelte";
+import { type InfiniteScrollComponentBaseProps } from '@inertiajs/core';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        data?: string | undefined;
+        data: InfiniteScrollComponentBaseProps["data"];
         buffer?: number | undefined;
         as?: string | undefined;
         manual?: boolean | undefined;

package/dist/createInertiaApp.d.ts

@@ -1,5 +1,4 @@
-import { type InertiaAppResponse, type Page } from '@inertiajs/core';
-import type { ComponentType } from 'svelte';
+import { type CreateInertiaAppOptionsForCSR, type InertiaAppResponse, type PageProps } from '@inertiajs/core';
 import App, { type InertiaAppProps } from './components/App.svelte';
 import type { ComponentResolver } from './types';
 type SvelteRenderResult = {
@@ -9,24 +8,11 @@ type SvelteRenderResult = {
         code: string;
     };
 };
-type AppComponent = ComponentType<App> & {
-    render: (props: InertiaAppProps) => SvelteRenderResult;
+type SetupOptions<SharedProps extends PageProps> = {
+    el: HTMLElement | null;
+    App: typeof App;
+    props: InertiaAppProps<SharedProps>;
 };
-interface CreateInertiaAppProps {
-    id?: string;
-    resolve: ComponentResolver;
-    setup: (props: {
-        el: HTMLElement | null;
-        App: AppComponent;
-        props: InertiaAppProps;
-    }) => void | App | SvelteRenderResult;
-    progress?: false | {
-        delay?: number;
-        color?: string;
-        includeCSS?: boolean;
-        showSpinner?: boolean;
-    };
-    page?: Page;
-}
-export default function createInertiaApp({ id, resolve, setup, progress, page, }: CreateInertiaAppProps): InertiaAppResponse;
+type InertiaAppOptions<SharedProps extends PageProps> = CreateInertiaAppOptionsForCSR<SharedProps, ComponentResolver, SetupOptions<SharedProps>, SvelteRenderResult | void>;
+export default function createInertiaApp<SharedProps extends PageProps = PageProps>({ id, resolve, setup, progress, page, }: InertiaAppOptions<SharedProps>): InertiaAppResponse;
 export {};

package/dist/createInertiaApp.js

@@ -1,4 +1,4 @@
-import { router, setupProgress } from '@inertiajs/core';
+import { router, setupProgress, } from '@inertiajs/core';
 import { escape } from 'lodash-es';
 import App, {} from './components/App.svelte';
 export default async function createInertiaApp({ id = 'app', resolve, setup, progress = {}, page, }) {
@@ -6,24 +6,24 @@ export default async function createInertiaApp({ id = 'app', resolve, setup, pro
     const el = isServer ? null : document.getElementById(id);
     const initialPage = page || JSON.parse(el?.dataset.page || '{}');
     const resolveComponent = (name) => Promise.resolve(resolve(name));
-    const [initialComponent] = await Promise.all([
+    const svelteApp = await Promise.all([
         resolveComponent(initialPage.component),
         router.decryptHistory().catch(() => { }),
-    ]);
-    const props = { initialPage, initialComponent, resolveComponent };
-    const svelteApp = setup({
-        el,
-        App: App,
-        props,
+    ]).then(([initialComponent]) => {
+        return setup({
+            el,
+            App,
+            props: { initialPage, initialComponent, resolveComponent },
+        });
     });
-    if (isServer) {
+    if (isServer && svelteApp) {
         const { html, head, css } = svelteApp;
         return {
             body: `<div data-server-rendered="true" id="${id}" data-page="${escape(JSON.stringify(initialPage))}">${html}</div>`,
             head: [head, css ? `<style data-vite-css>${css.code}</style>` : ''],
         };
     }
-    if (progress) {
+    if (!isServer && progress) {
         setupProgress(progress);
     }
 }

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { default as Link } from './components/Link.svelte';
 export { default as WhenVisible } from './components/WhenVisible.svelte';
 export { default as createInertiaApp } from './createInertiaApp';
 export { default as inertia } from './link';
-export { default as page } from './page';
+export { default as page, usePage } from './page';
 export { type ResolvedComponent } from './types';
 export { default as useForm, type InertiaForm, type InertiaFormProps } from './useForm';
 export { default as usePoll } from './usePoll';

package/dist/index.js

@@ -6,7 +6,7 @@ export { default as Link } from './components/Link.svelte';
 export { default as WhenVisible } from './components/WhenVisible.svelte';
 export { default as createInertiaApp } from './createInertiaApp';
 export { default as inertia } from './link';
-export { default as page } from './page';
+export { default as page, usePage } from './page';
 export {} from './types';
 export { default as useForm } from './useForm';
 export { default as usePoll } from './usePoll';

package/dist/link.d.ts

@@ -1,5 +1,4 @@
-import { type GlobalEventsMap, type LinkComponentBaseProps, type VisitOptions } from '@inertiajs/core';
-import type { CancelTokenSource } from 'axios';
+import { type CancelToken, type GlobalEventsMap, type LinkComponentBaseProps, type VisitOptions } from '@inertiajs/core';
 import type { ActionReturn } from 'svelte/action';
 interface ActionElement extends HTMLElement {
     href?: string;
@@ -10,8 +9,8 @@ type SelectedGlobalEventsMap = Pick<GlobalEventsMap, SelectedEventKeys>;
 type ActionAttributes = {
     [K in keyof SelectedGlobalEventsMap as `on:${K}` | `on${K}`]?: (event: CustomEvent<SelectedGlobalEventsMap[K]['details']>) => void;
 } & {
-    'on:cancel-token'?: (event: CustomEvent<CancelTokenSource>) => void;
-    oncanceltoken?: (event: CustomEvent<CancelTokenSource>) => void;
+    'on:cancel-token'?: (event: CustomEvent<CancelToken>) => void;
+    oncanceltoken?: (event: CustomEvent<CancelToken>) => void;
 };
 declare function link(node: ActionElement, initialParams?: ActionParameters): ActionReturn<ActionParameters, ActionAttributes>;
 export default link;

package/dist/link.js

@@ -31,7 +31,7 @@ function link(node, initialParams = {}) {
             }
         },
         keydown: (event) => {
-            if (shouldIntercept(event) && shouldNavigate(event)) {
+            if (shouldNavigate(event)) {
                 event.preventDefault();
                 prefetch();
             }
@@ -71,7 +71,7 @@ function link(node, initialParams = {}) {
             }
             return 30_000;
         })();
-        cacheTags = cacheTagValues;
+        cacheTags = Array.isArray(cacheTagValues) ? cacheTagValues : [cacheTagValues];
         method = isUrlMethodPair(params.href) ? params.href.method : params.method?.toLowerCase() || 'get';
         [href, data] = hrefAndData(method, params);
         if (node.tagName === 'A') {

package/dist/page.d.ts

@@ -1,11 +1,13 @@
-import { type Page } from '@inertiajs/core';
-type SveltePage = Omit<Page, 'props'> & {
-    props: Page['props'] & {
+import { type Page, type PageProps, type SharedPageProps } from '@inertiajs/core';
+import { type Readable } from 'svelte/store';
+type SveltePage<TPageProps extends PageProps = PageProps> = Omit<Page<TPageProps & SharedPageProps>, 'props'> & {
+    props: Page<TPageProps & SharedPageProps>['props'] & {
         [key: string]: any;
     };
 };
-export declare const setPage: (this: void, value: SveltePage) => void;
+export declare const setPage: (this: void, value: SveltePage<PageProps>) => void;
 declare const _default: {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<SveltePage>, invalidate?: import("svelte/store").Invalidator<SveltePage> | undefined) => import("svelte/store").Unsubscriber;
+    subscribe: (this: void, run: import("svelte/store").Subscriber<SveltePage<PageProps>>, invalidate?: import("svelte/store").Invalidator<SveltePage<PageProps>> | undefined) => import("svelte/store").Unsubscriber;
 };
 export default _default;
+export declare function usePage<TPageProps extends PageProps = PageProps>(): Readable<SveltePage<TPageProps>>;

package/dist/page.js

@@ -1,5 +1,8 @@
 import {} from '@inertiajs/core';
-import { writable } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
 const { set, subscribe } = writable();
 export const setPage = set;
 export default { subscribe };
+export function usePage() {
+    return derived({ subscribe }, ($page) => $page);
+}

package/dist/useForm.d.ts

@@ -2,6 +2,8 @@ import type { ErrorValue, FormDataErrors, FormDataKeys, FormDataType, FormDataVa
 import { type Writable } from 'svelte/store';
 type InertiaFormStore<TForm extends object> = Writable<InertiaForm<TForm>> & InertiaForm<TForm>;
 type FormOptions = Omit<VisitOptions, 'data'>;
+type SubmitArgs = [Method, string, FormOptions?] | [UrlMethodPair, FormOptions?];
+type TransformCallback<TForm> = (data: TForm) => object;
 export interface InertiaFormProps<TForm extends object> {
     isDirty: boolean;
     errors: FormDataErrors<TForm>;
@@ -13,7 +15,7 @@ export interface InertiaFormProps<TForm extends object> {
     setStore(data: TForm): void;
     setStore<T extends FormDataKeys<TForm>>(key: T, value: FormDataValues<TForm, T>): void;
     data(): TForm;
-    transform(callback: (data: TForm) => object): this;
+    transform(callback: TransformCallback<TForm>): this;
     defaults(): this;
     defaults(fields: Partial<TForm>): this;
     defaults<T extends FormDataKeys<TForm>>(field: T, value: FormDataValues<TForm, T>): this;
@@ -22,7 +24,7 @@ export interface InertiaFormProps<TForm extends object> {
     resetAndClearErrors<K extends FormDataKeys<TForm>>(...fields: K[]): this;
     setError<K extends FormDataKeys<TForm>>(field: K, value: ErrorValue): this;
     setError(errors: FormDataErrors<TForm>): this;
-    submit: (...args: [Method, string, FormOptions?] | [UrlMethodPair, FormOptions?]) => void;
+    submit: (...args: SubmitArgs) => void;
     get(url: string, options?: FormOptions): void;
     post(url: string, options?: FormOptions): void;
     put(url: string, options?: FormOptions): void;

package/dist/useForm.js

@@ -13,6 +13,9 @@ export default function useForm(rememberKeyOrData, maybeData) {
     let recentlySuccessfulTimeoutId = null;
     let transform = (data) => data;
     let defaultsCalledInOnSuccess = false;
+    const setFormState = (key, value) => {
+        store.update((form) => ({ ...form, [key]: value }));
+    };
     const store = writable({
         ...(restored ? restored.data : data),
         isDirty: false,
@@ -64,14 +67,14 @@ export default function useForm(rememberKeyOrData, maybeData) {
             return this;
         },
         setError(fieldOrFields, maybeValue) {
-            this.setStore('errors', {
+            setFormState('errors', {
                 ...this.errors,
                 ...(typeof fieldOrFields === 'string' ? { [fieldOrFields]: maybeValue } : fieldOrFields),
             });
             return this;
         },
         clearErrors(...fields) {
-            this.setStore('errors', Object.keys(this.errors).reduce((carry, field) => ({
+            setFormState('errors', Object.keys(this.errors).reduce((carry, field) => ({
                 ...carry,
                 ...(fields.length > 0 && !fields.includes(field) ? { [field]: this.errors[field] } : {}),
             }), {}));
@@ -98,8 +101,8 @@ export default function useForm(rememberKeyOrData, maybeData) {
                     }
                 },
                 onBefore: (visit) => {
-                    this.setStore('wasSuccessful', false);
-                    this.setStore('recentlySuccessful', false);
+                    setFormState('wasSuccessful', false);
+                    setFormState('recentlySuccessful', false);
                     if (recentlySuccessfulTimeoutId) {
                         clearTimeout(recentlySuccessfulTimeoutId);
                     }
@@ -108,48 +111,51 @@ export default function useForm(rememberKeyOrData, maybeData) {
                     }
                 },
                 onStart: (visit) => {
-                    this.setStore('processing', true);
+                    setFormState('processing', true);
                     if (options.onStart) {
                         return options.onStart(visit);
                     }
                 },
                 onProgress: (event) => {
-                    this.setStore('progress', event);
+                    setFormState('progress', event || null);
                     if (options.onProgress) {
                         return options.onProgress(event);
                     }
                 },
                 onSuccess: async (page) => {
-                    this.setStore('processing', false);
-                    this.setStore('progress', null);
+                    setFormState('processing', false);
+                    setFormState('progress', null);
                     this.clearErrors();
-                    this.setStore('wasSuccessful', true);
-                    this.setStore('recentlySuccessful', true);
-                    recentlySuccessfulTimeoutId = setTimeout(() => this.setStore('recentlySuccessful', false), 2000);
+                    setFormState('wasSuccessful', true);
+                    setFormState('recentlySuccessful', true);
+                    recentlySuccessfulTimeoutId = setTimeout(() => setFormState('recentlySuccessful', false), 2000);
                     const onSuccess = options.onSuccess ? await options.onSuccess(page) : null;
                     if (!defaultsCalledInOnSuccess) {
-                        this.defaults(cloneDeep(this.data()));
+                        store.update((form) => {
+                            this.defaults(cloneDeep(form.data()));
+                            return form;
+                        });
                     }
                     return onSuccess;
                 },
                 onError: (errors) => {
-                    this.setStore('processing', false);
-                    this.setStore('progress', null);
+                    setFormState('processing', false);
+                    setFormState('progress', null);
                     this.clearErrors().setError(errors);
                     if (options.onError) {
                         return options.onError(errors);
                     }
                 },
                 onCancel: () => {
-                    this.setStore('processing', false);
-                    this.setStore('progress', null);
+                    setFormState('processing', false);
+                    setFormState('progress', null);
                     if (options.onCancel) {
                         return options.onCancel();
                     }
                 },
                 onFinish: (visit) => {
-                    this.setStore('processing', false);
-                    this.setStore('progress', null);
+                    setFormState('processing', false);
+                    setFormState('progress', null);
                     cancelToken = null;
                     if (options.onFinish) {
                         return options.onFinish(visit);
@@ -184,11 +190,11 @@ export default function useForm(rememberKeyOrData, maybeData) {
     });
     store.subscribe((form) => {
         if (form.isDirty === isEqual(form.data(), defaults)) {
-            form.setStore('isDirty', !form.isDirty);
+            setFormState('isDirty', !form.isDirty);
         }
         const hasErrors = Object.keys(form.errors).length > 0;
         if (form.hasErrors !== hasErrors) {
-            form.setStore('hasErrors', !form.hasErrors);
+            setFormState('hasErrors', !form.hasErrors);
         }
         if (rememberKey) {
             router.remember({ data: form.data(), errors: form.errors }, rememberKey);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inertiajs/svelte",
-  "version": "2.2.7",
+  "version": "2.2.9",
   "license": "MIT",
   "description": "The Svelte adapter for Inertia.js",
   "contributors": [
@@ -36,17 +36,17 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.43.2",
+    "@sveltejs/kit": "^2.47.2",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "axios": "^1.12.2",
-    "es-check": "^9.3.1",
+    "es-check": "^9.4.4",
     "publint": "^0.2.12",
     "svelte": "^4.2.20",
-    "svelte-check": "^4.3.2",
+    "svelte-check": "^4.3.3",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.2",
-    "vite": "^5.4.20"
+    "typescript": "^5.9.3",
+    "vite": "^5.4.21"
   },
   "peerDependencies": {
     "svelte": "^4.0.0 || ^5.0.0"
@@ -54,10 +54,10 @@
   "dependencies": {
     "@types/lodash-es": "^4.17.12",
     "lodash-es": "^4.17.21",
-    "@inertiajs/core": "2.2.7"
+    "@inertiajs/core": "2.2.9"
   },
   "scripts": {
-    "build": "pnpm package && publint",
+    "build": "pnpm package && svelte-check --tsconfig ./tsconfig.json && publint",
     "build:with-deps": "svelte-kit sync && vite build --config vite-with-deps.config.js",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",