@inertiajs/svelte 2.1.0 → 2.1.2

package/dist/components/Form.svelte

@@ -1,5 +1,6 @@
 <script>import {
   formDataToObject,
+  resetFormFields,
   mergeDataIntoQueryString
 } from "@inertiajs/core";
 import { isEqual } from "es-toolkit";
@@ -22,32 +23,71 @@ export let onFinish = noop;
 export let onCancel = noop;
 export let onSuccess = noop;
 export let onError = noop;
+export let onSubmitComplete = noop;
+export let disableWhileProcessing = false;
+export let invalidateCacheTags = [];
+export let resetOnError = false;
+export let resetOnSuccess = false;
+export let setDefaultsOnSuccess = false;
 const form = useForm({});
 let formElement;
 let isDirty = false;
-let defaultValues = {};
+let defaultData = new FormData();
 $: _method = typeof action === "object" ? action.method : method.toLowerCase();
 $: _action = typeof action === "object" ? action.url : action;
+function getFormData() {
+  return new FormData(formElement);
+}
 function getData() {
-  return formDataToObject(new FormData(formElement));
+  return formDataToObject(getFormData());
 }
 function updateDirtyState(event) {
-  isDirty = event.type === "reset" ? false : !isEqual(getData(), defaultValues);
+  isDirty = event.type === "reset" ? false : !isEqual(getData(), formDataToObject(defaultData));
 }
 export function submit() {
   const [url, _data] = mergeDataIntoQueryString(_method, _action, getData(), queryStringArrayFormat);
+  const maybeReset = (resetOption) => {
+    if (!resetOption) {
+      return;
+    }
+    if (resetOption === true) {
+      reset();
+    } else if (resetOption.length > 0) {
+      reset(...resetOption);
+    }
+  };
   const submitOptions = {
     headers,
     errorBag,
     showProgress,
+    invalidateCacheTags,
     onCancelToken,
     onBefore,
     onStart,
     onProgress,
     onFinish,
     onCancel,
-    onSuccess,
-    onError,
+    onSuccess: (...args) => {
+      if (onSuccess) {
+        onSuccess(...args);
+      }
+      if (onSubmitComplete) {
+        onSubmitComplete({
+          reset,
+          defaults
+        });
+      }
+      maybeReset(resetOnSuccess);
+      if (setDefaultsOnSuccess === true) {
+        defaults();
+      }
+    },
+    onError: (...args) => {
+      if (onError) {
+        onError(...args);
+      }
+      maybeReset(resetOnError);
+    },
     ...options
   };
   $form.transform(() => transform(_data)).submit(_method, url, submitOptions);
@@ -56,14 +96,15 @@ function handleSubmit(event) {
   event.preventDefault();
   submit();
 }
-export function reset() {
-  formElement.reset();
+export function reset(...fields) {
+  resetFormFields(formElement, defaultData, fields);
 }
 export function clearErrors(...fields) {
   $form.clearErrors(...fields);
 }
 export function resetAndClearErrors(...fields) {
-  $form.resetAndClearErrors(...fields);
+  $form.clearErrors(...fields);
+  reset(...fields);
 }
 export function setError(field, value) {
   if (typeof field === "string") {
@@ -72,14 +113,19 @@ export function setError(field, value) {
     $form.setError(field);
   }
 }
+export function defaults() {
+  defaultData = getFormData();
+  isDirty = false;
+}
 onMount(() => {
-  defaultValues = getData();
+  defaultData = getFormData();
   const formEvents = ["input", "change", "reset"];
   formEvents.forEach((e) => formElement.addEventListener(e, updateDirtyState));
   return () => {
     formEvents.forEach((e) => formElement?.removeEventListener(e, updateDirtyState));
   };
 });
+$: slotErrors = $form.errors;
 </script>
 
 <form
@@ -87,9 +133,10 @@ onMount(() => {
   action={_action}
   method={_method}
   on:submit={handleSubmit} {...$$restProps}
+  inert={disableWhileProcessing && $form.processing ? true : undefined}
 >
   <slot
-    errors={$form.errors}
+    errors={slotErrors}
     hasErrors={$form.hasErrors}
     processing={$form.processing}
     progress={$form.progress}
@@ -99,7 +146,7 @@ onMount(() => {
     {resetAndClearErrors}
     {setError}
     {isDirty}
-    {reset}
     {submit}
+    {defaults}
   />
 </form>

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

@@ -1,13 +1,10 @@
 import { SvelteComponent } from "svelte";
-import { type FormDataConvertible } from '@inertiajs/core';
+import { type Errors, type FormDataConvertible } from '@inertiajs/core';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        action?: string | {
-            url: string;
-            method: import("@inertiajs/core").Method;
-        } | undefined;
-        method?: import("@inertiajs/core").Method | undefined;
+        action?: string | import("@inertiajs/core").UrlMethodPair | undefined;
+        method?: import("@inertiajs/core").Method | "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | undefined;
         headers?: Record<string, string> | undefined;
         queryStringArrayFormat?: "indices" | "brackets" | undefined;
         errorBag?: string | null | undefined;
@@ -17,25 +14,32 @@ declare const __propDef: {
         onCancelToken?: (({ cancel }: {
             cancel: VoidFunction;
         }) => void) | undefined;
-        onBefore?: import("@inertiajs/core").GlobalEventCallback<"before"> | undefined;
-        onStart?: import("@inertiajs/core").GlobalEventCallback<"start"> | undefined;
-        onProgress?: import("@inertiajs/core").GlobalEventCallback<"progress"> | undefined;
-        onFinish?: import("@inertiajs/core").GlobalEventCallback<"finish"> | undefined;
-        onCancel?: import("@inertiajs/core").GlobalEventCallback<"cancel"> | undefined;
-        onSuccess?: import("@inertiajs/core").GlobalEventCallback<"success"> | undefined;
-        onError?: import("@inertiajs/core").GlobalEventCallback<"error"> | 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;
         submit?: (() => void) | undefined;
-        reset?: (() => void) | undefined;
+        reset?: ((...fields: string[]) => void) | undefined;
         clearErrors?: ((...fields: string[]) => void) | undefined;
         resetAndClearErrors?: ((...fields: string[]) => void) | undefined;
         setError?: ((field: string | object, value?: string) => void) | undefined;
+        defaults?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {
-            errors: Partial<Record<never, string>>;
+            errors: Errors;
             hasErrors: boolean;
             processing: boolean;
             progress: import("axios").AxiosProgressEvent | null;
@@ -45,8 +49,8 @@ declare const __propDef: {
             resetAndClearErrors: (...fields: string[]) => void;
             setError: (field: string | object, value?: string) => void;
             isDirty: boolean;
-            reset: () => void;
             submit: () => void;
+            defaults: () => void;
         };
     };
     exports?: undefined;
@@ -57,9 +61,10 @@ export type FormEvents = typeof __propDef.events;
 export type FormSlots = typeof __propDef.slots;
 export default class Form extends SvelteComponent<FormProps, FormEvents, FormSlots> {
     get submit(): () => void;
-    get reset(): () => void;
+    get reset(): (...fields: string[]) => void;
     get clearErrors(): (...fields: string[]) => void;
     get resetAndClearErrors(): (...fields: string[]) => void;
     get setError(): (field: string | object, value?: string) => void;
+    get defaults(): () => void;
 }
 export {};

package/dist/components/Link.svelte

@@ -13,6 +13,7 @@ export let queryStringArrayFormat = "brackets";
 export let async = false;
 export let prefetch = false;
 export let cacheFor = 0;
+export let cacheTags = [];
 $: _method = typeof href === "object" ? href.method : method;
 $: _href = typeof href === "object" ? href.url : href;
 $: asProp = _method !== "get" ? "button" : as.toLowerCase();
@@ -39,6 +40,7 @@ $: elProps = {
     async,
     prefetch,
     cacheFor,
+    cacheTags,
   }}
   {...$$restProps}
   {...elProps}
@@ -59,6 +61,8 @@ $: elProps = {
   on:cancel
   on:success
   on:error
+  on:prefetching
+  on:prefetched
 >
   <slot />
 </svelte:element>

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

@@ -1,12 +1,9 @@
 import { SvelteComponent } from "svelte";
-import type { CacheForOption, FormDataConvertible, LinkPrefetchOption, Method, PreserveStateOption } from '@inertiajs/core';
+import type { CacheForOption, FormDataConvertible, LinkPrefetchOption, Method, PreserveStateOption, UrlMethodPair } from '@inertiajs/core';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        href?: string | {
-            url: string;
-            method: Method;
-        } | undefined;
+        href?: (string | UrlMethodPair) | undefined;
         as?: keyof HTMLElementTagNameMap | undefined;
         data?: Record<string, FormDataConvertible> | undefined;
         method?: Method | undefined;
@@ -20,6 +17,7 @@ declare const __propDef: {
         async?: boolean | undefined;
         prefetch?: (boolean | LinkPrefetchOption | LinkPrefetchOption[]) | undefined;
         cacheFor?: (CacheForOption | CacheForOption[]) | undefined;
+        cacheTags?: string | string[] | undefined;
     };
     events: {
         focus: FocusEvent;
@@ -39,6 +37,8 @@ declare const __propDef: {
         cancel: Event;
         success: Event | ProgressEvent<EventTarget> | SubmitEvent | ErrorEvent | UIEvent | AnimationEvent | MouseEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | TouchEvent | TransitionEvent | WheelEvent;
         error: ErrorEvent;
+        prefetching: Event | ProgressEvent<EventTarget> | SubmitEvent | ErrorEvent | UIEvent | AnimationEvent | MouseEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | TouchEvent | TransitionEvent | WheelEvent;
+        prefetched: Event | ProgressEvent<EventTarget> | SubmitEvent | ErrorEvent | UIEvent | AnimationEvent | MouseEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | TouchEvent | TransitionEvent | WheelEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/createInertiaApp.js

@@ -1,6 +1,6 @@
 import { router, setupProgress } from '@inertiajs/core';
 import escape from 'html-escape';
-import App from './components/App.svelte';
+import App, {} from './components/App.svelte';
 export default async function createInertiaApp({ id = 'app', resolve, setup, progress = {}, page, }) {
     const isServer = typeof window === 'undefined';
     const el = isServer ? null : document.getElementById(id);

package/dist/index.js

@@ -6,6 +6,7 @@ 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 {} from './types';
 export { default as useForm } from './useForm';
 export { default as usePoll } from './usePoll';
 export { default as usePrefetch } from './usePrefetch';

package/dist/link.d.ts

@@ -1,19 +1,11 @@
-import { type CacheForOption, type FormDataConvertible, type GlobalEventsMap, type LinkPrefetchOption, type Method, type VisitOptions } from '@inertiajs/core';
+import { type GlobalEventsMap, type LinkComponentBaseProps, type VisitOptions } from '@inertiajs/core';
 import type { CancelTokenSource } from 'axios';
 import type { ActionReturn } from 'svelte/action';
 interface ActionElement extends HTMLElement {
     href?: string;
 }
-type ActionParameters = Omit<VisitOptions, 'data' | 'prefetch'> & {
-    href?: string | {
-        url: string;
-        method: Method;
-    };
-    data?: Record<string, FormDataConvertible>;
-    prefetch?: boolean | LinkPrefetchOption | LinkPrefetchOption[];
-    cacheFor?: CacheForOption | CacheForOption[];
-};
-type SelectedEventKeys = 'start' | 'progress' | 'finish' | 'before' | 'cancel' | 'success' | 'error';
+type ActionParameters = Omit<LinkComponentBaseProps, 'onCancelToken'> & Omit<VisitOptions, keyof LinkComponentBaseProps>;
+type SelectedEventKeys = 'start' | 'progress' | 'finish' | 'before' | 'cancel' | 'success' | 'error' | 'prefetching' | 'prefetched';
 type SelectedGlobalEventsMap = Pick<GlobalEventsMap, SelectedEventKeys>;
 type ActionAttributes = {
     [K in keyof SelectedGlobalEventsMap as `on:${K}` | `on${K}`]?: (event: CustomEvent<SelectedGlobalEventsMap[K]['details']>) => void;

package/dist/link.js

@@ -4,6 +4,7 @@ function link(node, initialParams = {}) {
     let hoverTimeout;
     let prefetchModes = [];
     let cacheForValue;
+    let cacheTags = [];
     let method;
     let href;
     let data;
@@ -39,7 +40,7 @@ function link(node, initialParams = {}) {
             }
         },
     };
-    function update({ cacheFor = 0, prefetch = false, ...params }) {
+    function update({ cacheFor = 0, prefetch = false, cacheTags: cacheTagValues = [], ...params }) {
         prefetchModes = (() => {
             if (prefetch === true) {
                 return ['hover'];
@@ -58,6 +59,7 @@ function link(node, initialParams = {}) {
             }
             return 30_000;
         })();
+        cacheTags = cacheTagValues;
         method = typeof params.href === 'object' ? params.href.method : (params.method?.toLowerCase() || 'get');
         [href, data] = hrefAndData(method, params);
         if (node.tagName === 'A') {
@@ -92,6 +94,8 @@ function link(node, initialParams = {}) {
             onSuccess: (page) => dispatchEvent('success', { detail: { page } }),
             onError: (errors) => dispatchEvent('error', { detail: { errors } }),
             onCancelToken: (token) => dispatchEvent('cancel-token', { detail: { token } }),
+            onPrefetching: (visit) => dispatchEvent('prefetching', { detail: { visit } }),
+            onPrefetched: (response, visit) => dispatchEvent('prefetched', { detail: { response, visit } }),
         };
         updateEventListeners();
     }
@@ -102,7 +106,11 @@ function link(node, initialParams = {}) {
         return mergeDataIntoQueryString(method, typeof params.href === 'object' ? params.href.url : node.href || params.href || '', params.data || {}, params.queryStringArrayFormat || 'brackets');
     }
     function prefetch() {
-        router.prefetch(href, baseParams, { cacheFor: cacheForValue });
+        router.prefetch(href, {
+            ...baseParams,
+            onPrefetching: (visit) => dispatchEvent('prefetching', { detail: { visit } }),
+            onPrefetched: (response, visit) => dispatchEvent('prefetched', { detail: { response, visit } }),
+        }, { cacheFor: cacheForValue, cacheTags });
     }
     function updateNodeAttributes() {
         if (inFlightCount > 0) {

package/dist/page.js

@@ -1,3 +1,4 @@
+import {} from '@inertiajs/core';
 import { writable } from 'svelte/store';
 const { set, subscribe } = writable();
 export const setPage = set;

package/dist/useForm.d.ts

@@ -1,31 +1,28 @@
-import type { Errors, FormDataConvertible, FormDataKeys, Method, Progress, VisitOptions } from '@inertiajs/core';
+import type { ErrorValue, FormDataErrors, FormDataKeys, FormDataType, FormDataValues, Method, Progress, UrlMethodPair, VisitOptions } from '@inertiajs/core';
 import { type Writable } from 'svelte/store';
-type FormDataType = Record<string, FormDataConvertible>;
+type InertiaFormStore<TForm extends object> = Writable<InertiaForm<TForm>> & InertiaForm<TForm>;
 type FormOptions = Omit<VisitOptions, 'data'>;
-export interface InertiaFormProps<TForm extends FormDataType> {
+export interface InertiaFormProps<TForm extends object> {
     isDirty: boolean;
-    errors: Partial<Record<FormDataKeys<TForm>, string>>;
+    errors: FormDataErrors<TForm>;
     hasErrors: boolean;
     progress: Progress | null;
     wasSuccessful: boolean;
     recentlySuccessful: boolean;
     processing: boolean;
     setStore(data: TForm): void;
-    setStore(key: FormDataKeys<TForm>, value?: FormDataConvertible): void;
+    setStore<T extends FormDataKeys<TForm>>(key: T, value: FormDataValues<TForm, T>): void;
     data(): TForm;
     transform(callback: (data: TForm) => object): this;
     defaults(): this;
     defaults(fields: Partial<TForm>): this;
-    defaults(field?: FormDataKeys<TForm>, value?: FormDataConvertible): this;
-    reset(...fields: FormDataKeys<TForm>[]): this;
-    clearErrors(...fields: FormDataKeys<TForm>[]): this;
-    resetAndClearErrors(...fields: FormDataKeys<TForm>[]): this;
-    setError(field: FormDataKeys<TForm>, value: string): this;
-    setError(errors: Errors): this;
-    submit: (...args: [Method, string, FormOptions?] | [{
-        url: string;
-        method: Method;
-    }, FormOptions?]) => void;
+    defaults<T extends FormDataKeys<TForm>>(field: T, value: FormDataValues<TForm, T>): this;
+    reset<K extends FormDataKeys<TForm>>(...fields: K[]): this;
+    clearErrors<K extends FormDataKeys<TForm>>(...fields: K[]): this;
+    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;
     get(url: string, options?: FormOptions): void;
     post(url: string, options?: FormOptions): void;
     put(url: string, options?: FormOptions): void;
@@ -33,7 +30,7 @@ export interface InertiaFormProps<TForm extends FormDataType> {
     delete(url: string, options?: FormOptions): void;
     cancel(): void;
 }
-export type InertiaForm<TForm extends FormDataType> = InertiaFormProps<TForm> & TForm;
-export default function useForm<TForm extends FormDataType>(data: TForm | (() => TForm)): Writable<InertiaForm<TForm>>;
-export default function useForm<TForm extends FormDataType>(rememberKey: string, data: TForm | (() => TForm)): Writable<InertiaForm<TForm>>;
+export type InertiaForm<TForm extends object> = InertiaFormProps<TForm> & TForm;
+export default function useForm<TForm extends FormDataType<TForm>>(data: TForm | (() => TForm)): InertiaFormStore<TForm>;
+export default function useForm<TForm extends FormDataType<TForm>>(rememberKey: string, data: TForm | (() => TForm)): InertiaFormStore<TForm>;
 export {};

package/dist/useForm.js

@@ -16,7 +16,7 @@ export default function useForm(rememberKeyOrData, maybeData) {
     const store = writable({
         ...(restored ? restored.data : data),
         isDirty: false,
-        errors: restored ? restored.errors : {},
+        errors: (restored ? restored.errors : {}),
         hasErrors: false,
         progress: null,
         wasSuccessful: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inertiajs/svelte",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "license": "MIT",
   "description": "The Svelte adapter for Inertia.js",
   "contributors": [
@@ -37,7 +37,7 @@
   "dependencies": {
     "es-toolkit": "^1.33.0",
     "html-escape": "^2.0.0",
-    "@inertiajs/core": "2.1.0"
+    "@inertiajs/core": "2.1.2"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.0",