@formisch/svelte 0.3.0 → 0.4.1

package/dist/runes/createForm/createForm.svelte.js

@@ -1,69 +1,39 @@
 import { createFormStore, getFieldBool, INTERNAL, validateFormInput, } from '../../core/index.svelte';
 import { onMount } from 'svelte';
 import * as v from 'valibot';
+// @__NO_SIDE_EFFECTS__
 export function createForm(config) {
-    var _a;
-    var internalFormStore = createFormStore(config, function (input) {
-        return v.safeParseAsync(config.schema, input);
-    });
-    onMount(function () {
+    const internalFormStore = createFormStore(config, (input) => v.safeParseAsync(config.schema, input));
+    onMount(() => {
         if (config.validate === 'initial') {
             validateFormInput(internalFormStore);
         }
     });
-    var isTouched = $derived(getFieldBool(internalFormStore, 'isTouched'));
-    var isDirty = $derived(getFieldBool(internalFormStore, 'isDirty'));
-    var isValid = $derived(!getFieldBool(internalFormStore, 'errors'));
-    return _a = {},
-        _a[INTERNAL] = internalFormStore,
-        Object.defineProperty(_a, "isSubmitting", {
-            get: function () {
-                return internalFormStore.isSubmitting.value;
-            },
-            enumerable: false,
-            configurable: true
-        }),
-        Object.defineProperty(_a, "isSubmitted", {
-            get: function () {
-                return internalFormStore.isSubmitted.value;
-            },
-            enumerable: false,
-            configurable: true
-        }),
-        Object.defineProperty(_a, "isValidating", {
-            get: function () {
-                return internalFormStore.isValidating.value;
-            },
-            enumerable: false,
-            configurable: true
-        }),
-        Object.defineProperty(_a, "isTouched", {
-            get: function () {
-                return isTouched;
-            },
-            enumerable: false,
-            configurable: true
-        }),
-        Object.defineProperty(_a, "isDirty", {
-            get: function () {
-                return isDirty;
-            },
-            enumerable: false,
-            configurable: true
-        }),
-        Object.defineProperty(_a, "isValid", {
-            get: function () {
-                return isValid;
-            },
-            enumerable: false,
-            configurable: true
-        }),
-        Object.defineProperty(_a, "errors", {
-            get: function () {
-                return internalFormStore.errors.value;
-            },
-            enumerable: false,
-            configurable: true
-        }),
-        _a;
+    const isTouched = $derived(getFieldBool(internalFormStore, 'isTouched'));
+    const isDirty = $derived(getFieldBool(internalFormStore, 'isDirty'));
+    const isValid = $derived(!getFieldBool(internalFormStore, 'errors'));
+    return {
+        [INTERNAL]: internalFormStore,
+        get isSubmitting() {
+            return internalFormStore.isSubmitting.value;
+        },
+        get isSubmitted() {
+            return internalFormStore.isSubmitted.value;
+        },
+        get isValidating() {
+            return internalFormStore.isValidating.value;
+        },
+        get isTouched() {
+            return isTouched;
+        },
+        get isDirty() {
+            return isDirty;
+        },
+        get isValid() {
+            return isValid;
+        },
+        get errors() {
+            return internalFormStore.errors.value;
+        },
+    };
 }

package/dist/runes/useField/useField.svelte.d.ts

@@ -1,7 +1,21 @@
 import { type RequiredPath, type Schema, type ValidPath } from '../../core/index.svelte';
 import type * as v from 'valibot';
 import type { FieldStore, FormStore, MaybeGetter } from '../../types/index.ts';
+/**
+ * Use field config interface.
+ */
 export interface UseFieldConfig<TSchema extends Schema = Schema, TFieldPath extends RequiredPath = RequiredPath> {
+    /**
+     * The path to the field within the form schema.
+     */
     readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
 }
+/**
+ * Creates a reactive field store of a specific field within a form store.
+ *
+ * @param form The form store instance or getter function.
+ * @param config The field configuration or getter function.
+ *
+ * @returns The field store with reactive properties and element props.
+ */
 export declare function useField<TSchema extends Schema, TFieldPath extends RequiredPath>(form: MaybeGetter<FormStore<TSchema>>, config: MaybeGetter<UseFieldConfig<TSchema, TFieldPath>>): FieldStore<TSchema, TFieldPath>;

package/dist/runes/useField/useField.svelte.js

@@ -1,15 +1,15 @@
 import { getElementInput, getFieldBool, getFieldInput, getFieldStore, INTERNAL, setFieldBool, setFieldInput, validateIfRequired, } from '../../core/index.svelte';
 import { createAttachmentKey } from 'svelte/attachments';
 import { unwrap } from '../../utils/index';
+// @__NO_SIDE_EFFECTS__
 export function useField(form, config) {
-    var _a;
-    var path = $derived(unwrap(config).path);
-    var internalFormStore = $derived(unwrap(form)[INTERNAL]);
-    var internalFieldStore = $derived(getFieldStore(internalFormStore, path));
-    var input = $derived(getFieldInput(internalFieldStore));
-    var isTouched = $derived(getFieldBool(internalFieldStore, 'isTouched'));
-    var isDirty = $derived(getFieldBool(internalFieldStore, 'isDirty'));
-    var isValid = $derived(!getFieldBool(internalFieldStore, 'errors'));
+    const path = $derived(unwrap(config).path);
+    const internalFormStore = $derived(unwrap(form)[INTERNAL]);
+    const internalFieldStore = $derived(getFieldStore(internalFormStore, path));
+    const input = $derived(getFieldInput(internalFieldStore));
+    const isTouched = $derived(getFieldBool(internalFieldStore, 'isTouched'));
+    const isDirty = $derived(getFieldBool(internalFieldStore, 'isDirty'));
+    const isValid = $derived(!getFieldBool(internalFieldStore, 'errors'));
     return {
         get path() {
             return path;
@@ -29,32 +29,31 @@ export function useField(form, config) {
         get isValid() {
             return isValid;
         },
-        props: (_a = {
-                get name() {
-                    return internalFieldStore.name;
-                },
-                autofocus: !!internalFieldStore.errors.value
+        props: {
+            get name() {
+                return internalFieldStore.name;
             },
-            _a[createAttachmentKey()] = function (element) {
+            autofocus: !!internalFieldStore.errors.value,
+            [createAttachmentKey()](element) {
                 internalFieldStore.elements.push(element);
-                return function () {
-                    internalFieldStore.elements = internalFieldStore.elements.filter(function (el) { return el !== element; });
+                return () => {
+                    internalFieldStore.elements = internalFieldStore.elements.filter((el) => el !== element);
                 };
             },
-            _a.onfocus = function () {
+            onfocus() {
                 setFieldBool(internalFieldStore, 'isTouched', true);
                 validateIfRequired(internalFormStore, internalFieldStore, 'touch');
             },
-            _a.oninput = function (event) {
+            oninput(event) {
                 setFieldInput(internalFormStore, path, getElementInput(event.currentTarget, internalFieldStore));
                 validateIfRequired(internalFormStore, internalFieldStore, 'input');
             },
-            _a.onchange = function () {
+            onchange() {
                 validateIfRequired(internalFormStore, internalFieldStore, 'change');
             },
-            _a.onblur = function () {
+            onblur() {
                 validateIfRequired(internalFormStore, internalFieldStore, 'blur');
             },
-            _a),
+        },
     };
 }

package/dist/runes/useFieldArray/useFieldArray.svelte.d.ts

@@ -1,7 +1,21 @@
 import { type RequiredPath, type Schema, type ValidArrayPath } from '../../core/index.svelte';
 import type * as v from 'valibot';
 import type { FieldArrayStore, FormStore, MaybeGetter } from '../../types/index.ts';
+/**
+ * Use field array config interface.
+ */
 export interface UseFieldArrayConfig<TSchema extends Schema = Schema, TFieldArrayPath extends RequiredPath = RequiredPath> {
+    /**
+     * The path to the field array within the form schema.
+     */
     readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
 }
+/**
+ * Creates a reactive field array store of a specific field array within a form store.
+ *
+ * @param form The form store instance or getter function.
+ * @param config The field array configuration or getter function.
+ *
+ * @returns The field array store with reactive properties for array management.
+ */
 export declare function useFieldArray<TSchema extends Schema, TFieldArrayPath extends RequiredPath>(form: MaybeGetter<FormStore<TSchema>>, config: MaybeGetter<UseFieldArrayConfig<TSchema, TFieldArrayPath>>): FieldArrayStore<TSchema, TFieldArrayPath>;

package/dist/runes/useFieldArray/useFieldArray.svelte.js

@@ -1,11 +1,12 @@
 import { getFieldBool, getFieldStore, INTERNAL, } from '../../core/index.svelte';
 import { unwrap } from '../../utils/index';
+// @__NO_SIDE_EFFECTS__
 export function useFieldArray(form, config) {
-    var path = $derived(unwrap(config).path);
-    var internalFieldStore = $derived(getFieldStore(unwrap(form)[INTERNAL], path));
-    var isTouched = $derived(getFieldBool(internalFieldStore, 'isTouched'));
-    var isDirty = $derived(getFieldBool(internalFieldStore, 'isDirty'));
-    var isValid = $derived(!getFieldBool(internalFieldStore, 'errors'));
+    const path = $derived(unwrap(config).path);
+    const internalFieldStore = $derived(getFieldStore(unwrap(form)[INTERNAL], path));
+    const isTouched = $derived(getFieldBool(internalFieldStore, 'isTouched'));
+    const isDirty = $derived(getFieldBool(internalFieldStore, 'isDirty'));
+    const isValid = $derived(!getFieldBool(internalFieldStore, 'errors'));
     return {
         get path() {
             return path;

package/dist/types/field.d.ts

@@ -2,37 +2,97 @@ import type { FieldElement, PartialValues, PathValue, RequiredPath, Schema, Vali
 import type { FocusEventHandler, FormEventHandler } from 'svelte/elements';
 import type * as v from 'valibot';
 /**
- * Value type of the field element props.
+ * Field element props interface.
  */
 export interface FieldElementProps {
+    /**
+     * The name of the field.
+     */
     readonly name: string;
+    /**
+     * Whether the field should autofocus.
+     */
     readonly autofocus: boolean;
+    /**
+     * The element reference callback with cleanup.
+     */
     readonly [ref: symbol]: (element: FieldElement) => () => void;
+    /**
+     * The focus event handler of the field element.
+     */
     readonly onfocus: FocusEventHandler<FieldElement>;
+    /**
+     * The input event handler of the field element.
+     */
     readonly oninput: FormEventHandler<FieldElement>;
+    /**
+     * The change event handler of the field element.
+     */
     readonly onchange: FormEventHandler<FieldElement>;
+    /**
+     * The blur event handler of the field element.
+     */
     readonly onblur: FocusEventHandler<FieldElement>;
 }
 /**
- * Value type of the field store.
+ * Field store interface.
  */
 export interface FieldStore<TSchema extends Schema = Schema, TFieldPath extends RequiredPath = RequiredPath> {
+    /**
+     * The path to the field within the form.
+     */
     readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
+    /**
+     * The current input value of the field.
+     */
     readonly input: PartialValues<PathValue<v.InferInput<TSchema>, TFieldPath>>;
+    /**
+     * The current error messages of the field.
+     */
     readonly errors: [string, ...string[]] | null;
+    /**
+     * Whether the field has been touched.
+     */
     readonly isTouched: boolean;
+    /**
+     * Whether the field input differs from its initial value.
+     */
     readonly isDirty: boolean;
+    /**
+     * Whether the field is valid according to the schema.
+     */
     readonly isValid: boolean;
+    /**
+     * The props for the field element.
+     */
     readonly props: FieldElementProps;
 }
 /**
- * Value type of the field array store.
+ * Field array store interface.
  */
 export interface FieldArrayStore<TSchema extends Schema = Schema, TFieldArrayPath extends RequiredPath = RequiredPath> {
+    /**
+     * The path to the array field within the form.
+     */
     readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
+    /**
+     * The item IDs of the array field.
+     */
     readonly items: string[];
+    /**
+     * The current error messages of the field array.
+     */
     readonly errors: [string, ...string[]] | null;
+    /**
+     * Whether the field array has been touched.
+     */
     readonly isTouched: boolean;
+    /**
+     * Whether the field array input differs from its initial value.
+     */
     readonly isDirty: boolean;
+    /**
+     * Whether the field array is valid according to the schema.
+     */
     readonly isValid: boolean;
 }

package/dist/types/form.d.ts

@@ -1,10 +1,37 @@
 import type { BaseFormStore, Schema } from '../core/index.svelte';
+/**
+ * Form store interface.
+ */
 export interface FormStore<TSchema extends Schema = Schema> extends BaseFormStore<TSchema> {
+    /**
+     * Whether the form is currently submitting.
+     */
     readonly isSubmitting: boolean;
+    /**
+     * Whether the form has been submitted.
+     */
     readonly isSubmitted: boolean;
+    /**
+     * Whether the form is currently validating.
+     */
     readonly isValidating: boolean;
+    /**
+     * Whether any field in the form has been touched.
+     */
     readonly isTouched: boolean;
+    /**
+     * Whether any field in the form differs from its initial value.
+     */
     readonly isDirty: boolean;
+    /**
+     * Whether the form is valid according to the schema.
+     */
     readonly isValid: boolean;
+    /**
+     * The current error messages of the form.
+     *
+     * Hint: This property only contains validation errors at the root level
+     * of the form. To get all errors from all fields, use `getAllErrors`.
+     */
     readonly errors: [string, ...string[]] | null;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formisch/svelte",
   "description": "The modular and type-safe form library for Svelte",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "license": "MIT",
   "author": "Fabian Hiller",
   "homepage": "https://formisch.dev",
@@ -51,8 +51,8 @@
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.43.0",
     "vite": "^7.1.5",
-    "@formisch/core": "0.4.0",
-    "@formisch/methods": "0.3.0"
+    "@formisch/core": "0.4.1",
+    "@formisch/methods": "0.4.1"
   },
   "peerDependencies": {
     "svelte": "^5.29.0",