@inertiajs/svelte 2.3.17 → 3.0.0-beta.2

package/dist/useForm.svelte.js

@@ -0,0 +1,116 @@
+import { router, UseFormUtils } from '@inertiajs/core';
+import { cloneDeep } from 'lodash-es';
+import useFormState, {} from './useFormState.svelte';
+let reservedFormKeys = null;
+let bootstrapping = false;
+function validateFormDataKeys(data) {
+    if (bootstrapping) {
+        return;
+    }
+    if (reservedFormKeys === null) {
+        bootstrapping = true;
+        const store = useForm({});
+        reservedFormKeys = new Set(Object.keys(store));
+        bootstrapping = false;
+    }
+    const conflicts = Object.keys(data).filter((key) => reservedFormKeys.has(key));
+    if (conflicts.length > 0) {
+        console.error(`[Inertia] useForm() data contains field(s) that conflict with form properties: ${conflicts.map((k) => `"${k}"`).join(', ')}. ` +
+            `These fields will be overwritten by form methods/properties. Please rename these fields.`);
+    }
+}
+export default function useForm(...args) {
+    const { rememberKey, data, precognitionEndpoint } = UseFormUtils.parseUseFormArguments(...args);
+    const resolvedData = typeof data === 'function' ? data() : data;
+    validateFormDataKeys(resolvedData);
+    let cancelToken = null;
+    let pendingOptimisticCallback = null;
+    const { form: baseForm, setDefaults, getTransform, getPrecognitionEndpoint, setFormState, markAsSuccessful, wasDefaultsCalledInOnSuccess, resetDefaultsCalledInOnSuccess, setRememberExcludeKeys, resetBeforeSubmit, finishProcessing, } = useFormState({
+        data,
+        rememberKey,
+        precognitionEndpoint,
+    });
+    const formWithPrecognition = () => baseForm;
+    const submit = (...args) => {
+        const { method, url, options } = UseFormUtils.parseSubmitArguments(args, getPrecognitionEndpoint());
+        resetDefaultsCalledInOnSuccess();
+        const transformedData = getTransform()(form.data());
+        const _options = {
+            ...options,
+            onCancelToken: (token) => {
+                cancelToken = token;
+                return options.onCancelToken?.(token);
+            },
+            onBefore: (visit) => {
+                resetBeforeSubmit();
+                return options.onBefore?.(visit);
+            },
+            onStart: (visit) => {
+                setFormState('processing', true);
+                return options.onStart?.(visit);
+            },
+            onProgress: (event) => {
+                setFormState('progress', event || null);
+                return options.onProgress?.(event);
+            },
+            onSuccess: async (page) => {
+                markAsSuccessful();
+                const onSuccess = options.onSuccess ? await options.onSuccess(page) : null;
+                if (!wasDefaultsCalledInOnSuccess()) {
+                    setDefaults(cloneDeep(form.data()));
+                }
+                return onSuccess;
+            },
+            onError: (errors) => {
+                form.clearErrors().setError(errors);
+                return options.onError?.(errors);
+            },
+            onCancel: () => {
+                return options.onCancel?.();
+            },
+            onFinish: (visit) => {
+                finishProcessing();
+                cancelToken = null;
+                return options.onFinish?.(visit);
+            },
+        };
+        _options.optimistic = _options.optimistic ?? pendingOptimisticCallback ?? undefined;
+        pendingOptimisticCallback = null;
+        if (method === 'delete') {
+            router.delete(url, { ..._options, data: transformedData });
+        }
+        else {
+            router[method](url, transformedData, _options);
+        }
+    };
+    const cancel = () => {
+        cancelToken?.cancel();
+    };
+    const createSubmitMethod = (method) => (url, options = {}) => {
+        submit(method, url, options);
+    };
+    Object.assign(baseForm, {
+        submit,
+        get: createSubmitMethod('get'),
+        post: createSubmitMethod('post'),
+        put: createSubmitMethod('put'),
+        patch: createSubmitMethod('patch'),
+        delete: createSubmitMethod('delete'),
+        cancel,
+        dontRemember(...keys) {
+            setRememberExcludeKeys(keys);
+            return form;
+        },
+        optimistic(callback) {
+            pendingOptimisticCallback = callback;
+            return form;
+        },
+    });
+    const form = baseForm;
+    const originalWithPrecognition = formWithPrecognition().withPrecognition;
+    form.withPrecognition = (...args) => {
+        originalWithPrecognition(...args);
+        return form;
+    };
+    return getPrecognitionEndpoint() ? form : form;
+}

package/dist/useFormState.svelte.d.ts

@@ -0,0 +1,84 @@
+import type { ErrorValue, FormDataErrors, FormDataKeys, FormDataValues, Progress, UrlMethodPair, UseFormTransformCallback, UseFormWithPrecognitionArguments } from '@inertiajs/core';
+import type { NamedInputEvent, ValidationConfig, Validator } from 'laravel-precognition';
+type TransformCallback<TForm> = (data: TForm) => object;
+type PrecognitionValidationConfig<TKeys> = ValidationConfig & {
+    only?: TKeys[] | Iterable<TKeys> | ArrayLike<TKeys>;
+};
+export interface FormStateProps<TForm extends object> {
+    isDirty: boolean;
+    errors: FormDataErrors<TForm>;
+    hasErrors: boolean;
+    progress: Progress | null;
+    wasSuccessful: boolean;
+    recentlySuccessful: boolean;
+    processing: boolean;
+    setStore(data: TForm): void;
+    setStore<T extends FormDataKeys<TForm>>(key: T, value: FormDataValues<TForm, T>): void;
+    data(): TForm;
+    transform(callback: UseFormTransformCallback<TForm>): this;
+    defaults(): this;
+    defaults(fields: Partial<TForm>): this;
+    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;
+    withPrecognition: (...args: UseFormWithPrecognitionArguments) => FormStateWithPrecognition<TForm>;
+}
+export interface FormStateValidationProps<TForm extends object> {
+    invalid<K extends FormDataKeys<TForm>>(field: K): boolean;
+    setValidationTimeout(duration: number): this;
+    touch<K extends FormDataKeys<TForm>>(field: K | NamedInputEvent | Array<K>, ...fields: K[]): this;
+    touched<K extends FormDataKeys<TForm>>(field?: K): boolean;
+    valid<K extends FormDataKeys<TForm>>(field: K): boolean;
+    validate<K extends FormDataKeys<TForm>>(field?: K | NamedInputEvent | PrecognitionValidationConfig<K>, config?: PrecognitionValidationConfig<K>): this;
+    validateFiles(): this;
+    validating: boolean;
+    validator: () => Validator;
+    withAllErrors(): this;
+    withoutFileValidation(): this;
+    setErrors(errors: FormDataErrors<TForm> | Record<string, string | string[]>): this;
+    forgetError<K extends FormDataKeys<TForm> | NamedInputEvent>(field: K): this;
+}
+export interface InternalPrecognitionState {
+    __touched: string[];
+    __valid: string[];
+}
+export interface InternalRememberState<TForm extends object> {
+    __rememberable: boolean;
+    __remember: () => {
+        data: TForm;
+        errors: FormDataErrors<TForm>;
+    };
+    __restore: (restored: {
+        data: TForm;
+        errors: FormDataErrors<TForm>;
+    }) => void;
+}
+export type FormState<TForm extends object> = FormStateProps<TForm> & TForm;
+export type FormStateWithPrecognition<TForm extends object> = FormState<TForm> & FormStateValidationProps<TForm> & InternalPrecognitionState;
+export interface UseFormStateOptions<TForm extends object> {
+    data: TForm | (() => TForm);
+    rememberKey?: string | null;
+    precognitionEndpoint?: (() => UrlMethodPair) | null;
+}
+export interface UseFormStateReturn<TForm extends object> {
+    form: FormState<TForm> & InternalRememberState<TForm>;
+    setDefaults: (newDefaults: TForm) => void;
+    getTransform: () => TransformCallback<TForm>;
+    getPrecognitionEndpoint: () => (() => UrlMethodPair) | null;
+    setFormState: <K extends string>(key: K, value: any) => void;
+    markAsSuccessful: () => void;
+    wasDefaultsCalledInOnSuccess: () => boolean;
+    resetDefaultsCalledInOnSuccess: () => void;
+    setRememberExcludeKeys: (keys: FormDataKeys<TForm>[]) => void;
+    resetBeforeSubmit: () => void;
+    finishProcessing: () => void;
+    withAllErrors: {
+        enabled: () => boolean;
+        enable: () => void;
+    };
+}
+export default function useFormState<TForm extends object>(options: UseFormStateOptions<TForm>): UseFormStateReturn<TForm>;
+export {};

package/dist/useFormState.svelte.js

@@ -0,0 +1,290 @@
+import { router, UseFormUtils } from '@inertiajs/core';
+import { createValidator, resolveName, toSimpleValidationErrors } from 'laravel-precognition';
+import { cloneDeep, get, has, isEqual, set } from 'lodash-es';
+import { config } from '.';
+export default function useFormState(options) {
+    const { data: dataOption, rememberKey, precognitionEndpoint: initialPrecognitionEndpoint } = options;
+    const isDataFunction = typeof dataOption === 'function';
+    const resolveData = () => (isDataFunction ? dataOption() : dataOption);
+    const restored = rememberKey
+        ? router.restore(rememberKey)
+        : null;
+    const initialData = restored?.data ?? cloneDeep(resolveData());
+    let defaults = cloneDeep(initialData);
+    let transform = (data) => data;
+    let validatorRef = null;
+    let withAllErrors = null;
+    const withAllErrorsEnabled = () => withAllErrors ?? config.get('form.withAllErrors');
+    let precognitionEndpoint = initialPrecognitionEndpoint ?? null;
+    let recentlySuccessfulTimeoutId = null;
+    let defaultsCalledInOnSuccess = false;
+    let rememberExcludeKeys = [];
+    let setFormStateInternal;
+    const tap = (value, callback) => {
+        callback(value);
+        return value;
+    };
+    const withPrecognition = (...args) => {
+        precognitionEndpoint = UseFormUtils.createWayfinderCallback(...args);
+        const formWithPrecognition = () => form;
+        if (!validatorRef) {
+            const validator = createValidator((client) => {
+                const { method, url } = precognitionEndpoint();
+                const f = formWithPrecognition();
+                const transformedData = cloneDeep(transform(f.data()));
+                return client[method](url, transformedData);
+            }, cloneDeep(defaults));
+            validatorRef = validator;
+            validator
+                .on('validatingChanged', () => {
+                setFormStateInternal('validating', validator.validating());
+            })
+                .on('validatedChanged', () => {
+                setFormStateInternal('__valid', validator.valid());
+            })
+                .on('touchedChanged', () => {
+                setFormStateInternal('__touched', validator.touched());
+            })
+                .on('errorsChanged', () => {
+                const validationErrors = withAllErrorsEnabled()
+                    ? validator.errors()
+                    : toSimpleValidationErrors(validator.errors());
+                setFormStateInternal('errors', {});
+                formWithPrecognition().setError(validationErrors);
+                setFormStateInternal('__valid', validator.valid());
+            });
+        }
+        Object.assign(form, {
+            ...form,
+            __touched: [],
+            __valid: [],
+            validating: false,
+            validator: () => validatorRef,
+            validate: (field, config) => {
+                const f = formWithPrecognition();
+                if (typeof field === 'object' && !('target' in field)) {
+                    config = field;
+                    field = undefined;
+                }
+                if (field === undefined) {
+                    validatorRef.validate(config);
+                }
+                else {
+                    field = resolveName(field);
+                    const transformedData = transform(f.data());
+                    validatorRef.validate(field, get(transformedData, field), config);
+                }
+                return f;
+            },
+            touch: (field, ...fields) => {
+                const f = formWithPrecognition();
+                if (Array.isArray(field)) {
+                    validatorRef?.touch(field);
+                }
+                else if (typeof field === 'string') {
+                    validatorRef?.touch([field, ...fields]);
+                }
+                else {
+                    validatorRef?.touch(field);
+                }
+                return f;
+            },
+            validateFiles: () => tap(formWithPrecognition(), () => validatorRef?.validateFiles()),
+            setValidationTimeout: (duration) => tap(formWithPrecognition(), () => validatorRef.setTimeout(duration)),
+            withAllErrors: () => tap(formWithPrecognition(), () => (withAllErrors = true)),
+            withoutFileValidation: () => tap(formWithPrecognition(), () => validatorRef?.withoutFileValidation()),
+            valid: (field) => formWithPrecognition().__valid.includes(field),
+            invalid: (field) => field in formWithPrecognition().errors,
+            touched: (field) => {
+                const touched = formWithPrecognition().__touched;
+                return typeof field === 'string' ? touched.includes(field) : touched.length > 0;
+            },
+            setErrors: (errors) => tap(formWithPrecognition(), () => {
+                const f = formWithPrecognition();
+                f.setError(errors);
+            }),
+            forgetError: (field) => tap(formWithPrecognition(), () => {
+                const f = formWithPrecognition();
+                f.clearErrors(resolveName(field));
+            }),
+        });
+        return form;
+    };
+    let form = $state({
+        ...initialData,
+        isDirty: false,
+        errors: (restored?.errors ?? {}),
+        hasErrors: false,
+        progress: null,
+        wasSuccessful: false,
+        recentlySuccessful: false,
+        processing: false,
+        setStore(keyOrData, maybeValue = undefined) {
+            if (typeof keyOrData === 'string') {
+                set(form, keyOrData, maybeValue);
+            }
+            else {
+                Object.assign(form, keyOrData);
+            }
+        },
+        data() {
+            return Object.keys(defaults).reduce((carry, key) => {
+                return set(carry, key, get(this, key));
+            }, {});
+        },
+        transform(callback) {
+            transform = callback;
+            return this;
+        },
+        defaults(fieldOrFields, maybeValue) {
+            if (isDataFunction) {
+                throw new Error('You cannot call `defaults()` when using a function to define your form data.');
+            }
+            defaultsCalledInOnSuccess = true;
+            if (typeof fieldOrFields === 'undefined') {
+                defaults = cloneDeep(this.data());
+                this.isDirty = false;
+            }
+            else {
+                defaults =
+                    typeof fieldOrFields === 'string'
+                        ? set(cloneDeep(defaults), fieldOrFields, maybeValue)
+                        : Object.assign(cloneDeep(defaults), fieldOrFields);
+            }
+            validatorRef?.defaults(defaults);
+            return this;
+        },
+        reset(...fields) {
+            const resolvedData = isDataFunction ? cloneDeep(resolveData()) : defaults;
+            const clonedData = cloneDeep(resolvedData);
+            if (fields.length === 0) {
+                if (isDataFunction) {
+                    defaults = clonedData;
+                }
+                this.setStore(clonedData);
+            }
+            else {
+                ;
+                fields
+                    .filter((key) => has(clonedData, key))
+                    .forEach((key) => {
+                    if (isDataFunction) {
+                        set(defaults, key, get(clonedData, key));
+                    }
+                    set(this, key, get(clonedData, key));
+                });
+            }
+            validatorRef?.reset(...fields);
+            return this;
+        },
+        setError(fieldOrFields, maybeValue) {
+            const errors = typeof fieldOrFields === 'string' ? { [fieldOrFields]: maybeValue } : fieldOrFields;
+            setFormStateInternal('errors', {
+                ...this.errors,
+                ...errors,
+            });
+            validatorRef?.setErrors(errors);
+            return this;
+        },
+        clearErrors(...fields) {
+            setFormStateInternal('errors', Object.keys(this.errors).reduce((carry, field) => ({
+                ...carry,
+                ...(fields.length > 0 && !fields.includes(field) ? { [field]: this.errors[field] } : {}),
+            }), {}));
+            if (validatorRef) {
+                if (fields.length === 0) {
+                    validatorRef.setErrors({});
+                }
+                else {
+                    fields.forEach(validatorRef.forgetError);
+                }
+            }
+            return this;
+        },
+        resetAndClearErrors(...fields) {
+            this.reset(...fields);
+            this.clearErrors(...fields);
+            return this;
+        },
+        withPrecognition,
+        __rememberable: rememberKey === null,
+        __remember() {
+            const formData = this.data();
+            if (rememberExcludeKeys.length > 0) {
+                const filtered = { ...formData };
+                rememberExcludeKeys.forEach((k) => delete filtered[k]);
+                return { data: filtered, errors: $state.snapshot(this.errors) };
+            }
+            return { data: formData, errors: $state.snapshot(this.errors) };
+        },
+        __restore(restored) {
+            Object.assign(this, restored.data);
+            this.setError(restored.errors);
+        },
+    });
+    setFormStateInternal = (key, value) => {
+        form[key] = value;
+    };
+    $effect(() => {
+        const newIsDirty = !isEqual(form.data(), defaults);
+        if (form.isDirty !== newIsDirty) {
+            setFormStateInternal('isDirty', newIsDirty);
+        }
+        const hasErrors = Object.keys(form.errors).length > 0;
+        if (form.hasErrors !== hasErrors) {
+            setFormStateInternal('hasErrors', hasErrors);
+        }
+    });
+    $effect(() => {
+        if (!rememberKey) {
+            return;
+        }
+        const storedData = router.restore(rememberKey);
+        const newData = form.__remember();
+        if (!isEqual(storedData, newData)) {
+            router.remember(newData, rememberKey);
+        }
+    });
+    if (precognitionEndpoint) {
+        form.withPrecognition(precognitionEndpoint);
+    }
+    return {
+        form: form,
+        setDefaults: (newDefaults) => {
+            defaults = newDefaults;
+        },
+        getTransform: () => transform,
+        getPrecognitionEndpoint: () => precognitionEndpoint,
+        setFormState: setFormStateInternal,
+        markAsSuccessful: () => {
+            form.clearErrors();
+            setFormStateInternal('wasSuccessful', true);
+            setFormStateInternal('recentlySuccessful', true);
+            recentlySuccessfulTimeoutId = setTimeout(() => setFormStateInternal('recentlySuccessful', false), config.get('form.recentlySuccessfulDuration'));
+        },
+        wasDefaultsCalledInOnSuccess: () => defaultsCalledInOnSuccess,
+        resetDefaultsCalledInOnSuccess: () => {
+            defaultsCalledInOnSuccess = false;
+        },
+        setRememberExcludeKeys: (keys) => {
+            rememberExcludeKeys = keys;
+        },
+        resetBeforeSubmit: () => {
+            setFormStateInternal('wasSuccessful', false);
+            setFormStateInternal('recentlySuccessful', false);
+            if (recentlySuccessfulTimeoutId) {
+                clearTimeout(recentlySuccessfulTimeoutId);
+            }
+        },
+        finishProcessing: () => {
+            setFormStateInternal('processing', false);
+            setFormStateInternal('progress', null);
+        },
+        withAllErrors: {
+            enabled: withAllErrorsEnabled,
+            enable: () => {
+                withAllErrors = true;
+            },
+        },
+    };
+}

package/dist/useHttp.svelte.d.ts

@@ -0,0 +1,61 @@
+import type { ErrorValue, FormDataErrors, FormDataKeys, FormDataType, FormDataValues, Method, Progress, UrlMethodPair, UseFormTransformCallback, UseFormWithPrecognitionArguments, UseHttpSubmitArguments, UseHttpSubmitOptions } from '@inertiajs/core';
+import type { NamedInputEvent, ValidationConfig, Validator } from 'laravel-precognition';
+export interface UseHttpProps<TForm extends object, TResponse = unknown> {
+    isDirty: boolean;
+    errors: FormDataErrors<TForm>;
+    hasErrors: boolean;
+    progress: Progress | null;
+    wasSuccessful: boolean;
+    recentlySuccessful: boolean;
+    processing: boolean;
+    response: TResponse | null;
+    setStore(data: TForm): void;
+    setStore<T extends FormDataKeys<TForm>>(key: T, value: FormDataValues<TForm, T>): void;
+    data(): TForm;
+    transform(callback: UseFormTransformCallback<TForm>): this;
+    defaults(): this;
+    defaults(fields: Partial<TForm>): this;
+    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: UseHttpSubmitArguments<TResponse, TForm>): Promise<TResponse>;
+    get(url: string, options?: UseHttpSubmitOptions<TResponse, TForm>): Promise<TResponse>;
+    post(url: string, options?: UseHttpSubmitOptions<TResponse, TForm>): Promise<TResponse>;
+    put(url: string, options?: UseHttpSubmitOptions<TResponse, TForm>): Promise<TResponse>;
+    patch(url: string, options?: UseHttpSubmitOptions<TResponse, TForm>): Promise<TResponse>;
+    delete(url: string, options?: UseHttpSubmitOptions<TResponse, TForm>): Promise<TResponse>;
+    cancel(): void;
+    dontRemember<K extends FormDataKeys<TForm>>(...fields: K[]): this;
+    optimistic(callback: (currentData: TForm) => Partial<TForm>): this;
+    withAllErrors(): this;
+    withPrecognition: (...args: UseFormWithPrecognitionArguments) => UseHttpPrecognitiveProps<TForm, TResponse>;
+}
+type PrecognitionValidationConfig<TKeys> = ValidationConfig & {
+    only?: TKeys[] | Iterable<TKeys> | ArrayLike<TKeys>;
+};
+export interface UseHttpValidationProps<TForm extends object> {
+    invalid<K extends FormDataKeys<TForm>>(field: K): boolean;
+    setValidationTimeout(duration: number): this;
+    touch<K extends FormDataKeys<TForm>>(field: K | NamedInputEvent | Array<K>, ...fields: K[]): this;
+    touched<K extends FormDataKeys<TForm>>(field?: K): boolean;
+    valid<K extends FormDataKeys<TForm>>(field: K): boolean;
+    validate<K extends FormDataKeys<TForm>>(field?: K | NamedInputEvent | PrecognitionValidationConfig<K>, config?: PrecognitionValidationConfig<K>): this;
+    validateFiles(): this;
+    validating: boolean;
+    validator: () => Validator;
+    withAllErrors(): this;
+    withoutFileValidation(): this;
+    setErrors(errors: FormDataErrors<TForm> | Record<string, string | string[]>): this;
+    forgetError<K extends FormDataKeys<TForm> | NamedInputEvent>(field: K): this;
+}
+export type UseHttp<TForm extends object, TResponse = unknown> = UseHttpProps<TForm, TResponse> & TForm;
+export type UseHttpPrecognitiveProps<TForm extends object, TResponse = unknown> = UseHttp<TForm, TResponse> & UseHttpValidationProps<TForm>;
+export default function useHttp<TForm extends FormDataType<TForm>, TResponse = unknown>(method: Method | (() => Method), url: string | (() => string), data: TForm | (() => TForm)): UseHttpPrecognitiveProps<TForm, TResponse>;
+export default function useHttp<TForm extends FormDataType<TForm>, TResponse = unknown>(urlMethodPair: UrlMethodPair | (() => UrlMethodPair), data: TForm | (() => TForm)): UseHttpPrecognitiveProps<TForm, TResponse>;
+export default function useHttp<TForm extends FormDataType<TForm>, TResponse = unknown>(rememberKey: string, data: TForm | (() => TForm)): UseHttp<TForm, TResponse>;
+export default function useHttp<TForm extends FormDataType<TForm>, TResponse = unknown>(data: TForm | (() => TForm)): UseHttp<TForm, TResponse>;
+export default function useHttp<TForm extends FormDataType<TForm>, TResponse = unknown>(): UseHttp<TForm, TResponse>;
+export {};