@formisch/svelte 0.1.0

package/dist/methods/index.svelte.js

@@ -0,0 +1,211 @@
+import { INTERNAL, batch, copyItemState, createId, getFieldInput, getFieldStore, initializeFieldStore, resetItemState, setFieldInput, setInitialFieldInput, swapItemState, untrack, validateFormInput, validateIfRequired, walkFieldStore } from "../core/index.svelte";
+
+//#region src/focus/focus.ts
+function focus(config) {
+	getFieldStore(config.form[INTERNAL], config.path).elements[0]?.focus();
+}
+
+//#endregion
+//#region src/getAllErrors/getAllErrors.ts
+function getAllErrors(form) {
+	let allErrors = null;
+	walkFieldStore(form[INTERNAL], (internalFieldStore) => {
+		const errors = internalFieldStore.errors.value;
+		if (errors) if (allErrors) allErrors.push(...errors);
+		else allErrors = [...errors];
+	});
+	return allErrors;
+}
+
+//#endregion
+//#region src/getErrors/getErrors.ts
+function getErrors(form, config) {
+	return (config?.path ? getFieldStore(form[INTERNAL], config.path) : form[INTERNAL]).errors.value;
+}
+
+//#endregion
+//#region src/getInput/getInput.ts
+function getInput(form, config) {
+	return getFieldInput(config?.path ? getFieldStore(form[INTERNAL], config.path) : form[INTERNAL]);
+}
+
+//#endregion
+//#region src/handleSubmit/handleSubmit.ts
+function handleSubmit(form, handler) {
+	return async (event) => {
+		event.preventDefault();
+		const internalFormStore = form[INTERNAL];
+		internalFormStore.isSubmitted.value = true;
+		internalFormStore.isSubmitting.value = true;
+		try {
+			const result = await validateFormInput(internalFormStore, { shouldFocus: true });
+			if (result.success) await handler(result.output, event);
+		} catch (error) {
+			internalFormStore.errors.value = [error instanceof Error ? error.message : "An unknown error has occurred."];
+		} finally {
+			internalFormStore.isSubmitting.value = false;
+		}
+	};
+}
+
+//#endregion
+//#region src/insert/insert.ts
+function insert(form, config) {
+	const internalFormStore = form[INTERNAL];
+	const internalArrayStore = getFieldStore(internalFormStore, config.path);
+	const items = untrack(() => internalArrayStore.items.value);
+	const insertIndex = config.at === void 0 ? items.length : config.at;
+	if (insertIndex >= 0 && insertIndex <= items.length) batch(() => {
+		const newItems = [...items];
+		newItems.splice(insertIndex, 0, createId());
+		internalArrayStore.items.value = newItems;
+		for (let index = items.length; index > insertIndex; index--) copyItemState(internalArrayStore.children[index - 1], internalArrayStore.children[index]);
+		if (!internalArrayStore.children[insertIndex]) {
+			const path = JSON.parse(internalArrayStore.name);
+			internalArrayStore.children[insertIndex] = {};
+			path.push(insertIndex);
+			initializeFieldStore(internalArrayStore.children[insertIndex], internalArrayStore.schema.item, config.initialInput, path);
+		} else resetItemState(internalArrayStore.children[insertIndex], config.initialInput);
+		internalArrayStore.isTouched.value = true;
+		internalArrayStore.isDirty.value = true;
+		validateIfRequired(internalFormStore, internalArrayStore, "input");
+	});
+}
+
+//#endregion
+//#region src/move/move.ts
+function move(form, config) {
+	const internalFormStore = form[INTERNAL];
+	const internalArrayStore = getFieldStore(internalFormStore, config.path);
+	const items = untrack(() => internalArrayStore.items.value);
+	if (config.from >= 0 && config.from <= items.length - 1 && config.to >= 0 && config.to <= items.length - 1 && config.from !== config.to) batch(() => {
+		const newItems = [...items];
+		newItems.splice(config.to, 0, newItems.splice(config.from, 1)[0]);
+		internalArrayStore.items.value = newItems;
+		const tempInternalFieldStore = {};
+		initializeFieldStore(tempInternalFieldStore, internalArrayStore.schema.item, void 0, []);
+		copyItemState(internalArrayStore.children[config.from < config.to ? config.from : config.to], tempInternalFieldStore);
+		if (config.from < config.to) for (let index = config.from; index < config.to; index++) copyItemState(internalArrayStore.children[index + 1], internalArrayStore.children[index]);
+		else for (let index = config.from; index > config.to; index--) copyItemState(internalArrayStore.children[index - 1], internalArrayStore.children[index]);
+		copyItemState(tempInternalFieldStore, internalArrayStore.children[config.from < config.to ? config.to : config.from]);
+		internalArrayStore.isTouched.value = true;
+		internalArrayStore.isDirty.value = internalArrayStore.startItems.value.join() !== newItems.join();
+		validateIfRequired(internalFormStore, internalArrayStore, "input");
+	});
+}
+
+//#endregion
+//#region src/remove/remove.ts
+function remove(form, config) {
+	const internalFormStore = form[INTERNAL];
+	const internalArrayStore = getFieldStore(internalFormStore, config.path);
+	const items = untrack(() => internalArrayStore.items.value);
+	if (config.at >= 0 && config.at <= items.length - 1) batch(() => {
+		const newItems = [...items];
+		newItems.splice(config.at, 1);
+		internalArrayStore.items.value = newItems;
+		for (let index = config.at; index < items.length - 1; index++) copyItemState(internalArrayStore.children[index + 1], internalArrayStore.children[index]);
+		internalArrayStore.isTouched.value = true;
+		internalArrayStore.isDirty.value = internalArrayStore.startItems.value.join() !== newItems.join();
+		validateIfRequired(internalFormStore, internalArrayStore, "input");
+	});
+}
+
+//#endregion
+//#region src/replace/replace.ts
+function replace(form, config) {
+	const internalFormStore = form[INTERNAL];
+	const internalArrayStore = getFieldStore(internalFormStore, config.path);
+	const items = untrack(() => internalArrayStore.items.value);
+	if (config.at >= 0 && config.at <= items.length - 1) batch(() => {
+		const newItems = [...items];
+		newItems[config.at] = createId();
+		internalArrayStore.items.value = newItems;
+		resetItemState(internalArrayStore.children[config.at], config.initialInput);
+		internalArrayStore.isTouched.value = true;
+		internalArrayStore.isDirty.value = true;
+		validateIfRequired(internalFormStore, internalArrayStore, "input");
+	});
+}
+
+//#endregion
+//#region src/reset/reset.ts
+function reset(form, config) {
+	batch(() => {
+		untrack(() => {
+			const internalFormStore = form[INTERNAL];
+			const internalFieldStore = config?.path ? getFieldStore(internalFormStore, config.path) : internalFormStore;
+			if (config?.initialInput) setInitialFieldInput(internalFieldStore, config.initialInput);
+			walkFieldStore(internalFieldStore, (internalFieldStore$1) => {
+				if (!config?.keepErrors) internalFieldStore$1.errors.value = null;
+				if (internalFieldStore$1.kind === "array") {
+					internalFieldStore$1.startItems.value = internalFieldStore$1.initialItems.value;
+					if (!config?.keepInput || internalFieldStore$1.startItems.value.length === internalFieldStore$1.items.value.length) internalFieldStore$1.items.value = internalFieldStore$1.initialItems.value;
+					if (!config?.keepTouched) internalFieldStore$1.isTouched.value = false;
+					internalFieldStore$1.isDirty.value = internalFieldStore$1.startItems.value !== internalFieldStore$1.items.value;
+				} else if (internalFieldStore$1.kind === "value") {
+					internalFieldStore$1.startInput.value = internalFieldStore$1.initialInput.value;
+					if (!config?.keepInput) internalFieldStore$1.input.value = internalFieldStore$1.initialInput.value;
+					if (!config?.keepTouched) internalFieldStore$1.isTouched.value = false;
+					internalFieldStore$1.isDirty.value = internalFieldStore$1.startInput.value !== internalFieldStore$1.input.value;
+					for (const element of internalFieldStore$1.elements) if (element.type === "file") element.value = "";
+				}
+			});
+			if (!config?.path) {
+				if (!config?.keepSubmitted) internalFormStore.isSubmitted.value = false;
+				if (internalFormStore.validate === "initial") validateFormInput(internalFormStore);
+			}
+		});
+	});
+}
+
+//#endregion
+//#region src/setErrors/setErrors.ts
+function setErrors(form, config) {
+	(config.path ? getFieldStore(form[INTERNAL], config.path) : form[INTERNAL]).errors.value = config.errors;
+}
+
+//#endregion
+//#region src/setInput/setInput.ts
+function setInput(form, config) {
+	batch(() => {
+		const internalFormStore = form[INTERNAL];
+		const internalFieldStore = config.path ? getFieldStore(internalFormStore, config.path) : internalFormStore;
+		setFieldInput(internalFieldStore, config.input);
+		validateIfRequired(internalFormStore, internalFieldStore, "input");
+	});
+}
+
+//#endregion
+//#region src/submit/submit.ts
+function submit(form) {
+	form[INTERNAL].element?.requestSubmit();
+}
+
+//#endregion
+//#region src/swap/swap.ts
+function swap(form, config) {
+	const internalFormStore = form[INTERNAL];
+	const internalArrayStore = getFieldStore(internalFormStore, config.path);
+	const items = untrack(() => internalArrayStore.items.value);
+	if (config.at >= 0 && config.at <= items.length - 1 && config.and >= 0 && config.and <= items.length - 1 && config.at !== config.and) batch(() => {
+		const newItems = [...items];
+		const tempItemId = newItems[config.at];
+		newItems[config.at] = newItems[config.and];
+		newItems[config.and] = tempItemId;
+		internalArrayStore.items.value = newItems;
+		swapItemState(internalArrayStore.children[config.at], internalArrayStore.children[config.and]);
+		internalArrayStore.isTouched.value = true;
+		internalArrayStore.isDirty.value = internalArrayStore.startItems.value.join() !== newItems.join();
+		validateIfRequired(internalFormStore, internalArrayStore, "input");
+	});
+}
+
+//#endregion
+//#region src/validate/validate.ts
+function validate(form, config) {
+	return validateFormInput(form[INTERNAL], config);
+}
+
+//#endregion
+export { focus, getAllErrors, getErrors, getInput, handleSubmit, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, validate };

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

@@ -0,0 +1,3 @@
+import { type FormConfig, type Schema } from '../../core/index.svelte';
+import type { FormStore } from '../../types/index.ts';
+export declare function createForm<TSchema extends Schema>(config: FormConfig<TSchema>): FormStore<TSchema>;

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

@@ -0,0 +1,38 @@
+import { createFormStore, getFieldBool, INTERNAL, validateFormInput, } from '../../core/index.svelte';
+import { onMount } from 'svelte';
+import * as v from 'valibot';
+export function createForm(config) {
+    const internalFormStore = createFormStore(config, (input) => v.safeParseAsync(config.schema, input));
+    onMount(() => {
+        if (config.validate === 'initial') {
+            validateFormInput(internalFormStore);
+        }
+    });
+    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/createForm/index.d.ts

@@ -0,0 +1 @@
+export * from './createForm.svelte.ts';

package/dist/runes/createForm/index.js

@@ -0,0 +1 @@
+export * from './createForm.svelte';

package/dist/runes/index.d.ts

@@ -0,0 +1,3 @@
+export * from './createForm/index.ts';
+export * from './useField/index.ts';
+export * from './useFieldArray/index.ts';

package/dist/runes/index.js

@@ -0,0 +1,3 @@
+export * from './createForm/index';
+export * from './useField/index';
+export * from './useFieldArray/index';

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

@@ -0,0 +1 @@
+export * from './useField.svelte.ts';

package/dist/runes/useField/index.js

@@ -0,0 +1 @@
+export * from './useField.svelte';

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

@@ -0,0 +1,7 @@
+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';
+export interface UseFieldConfig<TSchema extends Schema = Schema, TFieldPath extends RequiredPath = RequiredPath> {
+    readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
+}
+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

@@ -0,0 +1,58 @@
+import { getElementInput, getFieldBool, getFieldInput, getFieldStore, INTERNAL, setFieldBool, setFieldInput, validateIfRequired, } from '../../core/index.svelte';
+import { createAttachmentKey } from 'svelte/attachments';
+import { unwrap } from '../../utils/index';
+export function useField(form, config) {
+    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;
+        },
+        get input() {
+            return input;
+        },
+        get errors() {
+            return internalFieldStore.errors.value;
+        },
+        get isTouched() {
+            return isTouched;
+        },
+        get isDirty() {
+            return isDirty;
+        },
+        get isValid() {
+            return isValid;
+        },
+        props: {
+            get name() {
+                return internalFieldStore.name;
+            },
+            autofocus: !!internalFieldStore.errors.value,
+            [createAttachmentKey()](element) {
+                internalFieldStore.elements.push(element);
+                return () => {
+                    internalFieldStore.elements = internalFieldStore.elements.filter((el) => el !== element);
+                };
+            },
+            onfocus() {
+                setFieldBool(internalFieldStore, 'isTouched', true);
+                validateIfRequired(internalFormStore, internalFieldStore, 'touch');
+            },
+            oninput(event) {
+                setFieldInput(internalFieldStore, getElementInput(event.currentTarget, internalFieldStore));
+                validateIfRequired(internalFormStore, internalFieldStore, 'input');
+            },
+            onchange() {
+                validateIfRequired(internalFormStore, internalFieldStore, 'change');
+            },
+            onblur() {
+                validateIfRequired(internalFormStore, internalFieldStore, 'blur');
+            },
+        },
+    };
+}

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

@@ -0,0 +1 @@
+export * from './useFieldArray.svelte.ts';

package/dist/runes/useFieldArray/index.js

@@ -0,0 +1 @@
+export * from './useFieldArray.svelte';

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

@@ -0,0 +1,7 @@
+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';
+export interface UseFieldArrayConfig<TSchema extends Schema = Schema, TFieldArrayPath extends RequiredPath = RequiredPath> {
+    readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
+}
+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

@@ -0,0 +1,29 @@
+import { getFieldBool, getFieldStore, INTERNAL, } from '../../core/index.svelte';
+import { unwrap } from '../../utils/index';
+export function useFieldArray(form, config) {
+    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;
+        },
+        get items() {
+            return internalFieldStore.items.value;
+        },
+        get errors() {
+            return internalFieldStore.errors.value;
+        },
+        get isTouched() {
+            return isTouched;
+        },
+        get isDirty() {
+            return isDirty;
+        },
+        get isValid() {
+            return isValid;
+        },
+    };
+}

package/dist/types/field.d.ts

@@ -0,0 +1,38 @@
+import type { FieldElement, PartialValues, PathValue, RequiredPath, Schema, ValidArrayPath, ValidPath } from '../core/index.svelte';
+import type { FocusEventHandler, FormEventHandler } from 'svelte/elements';
+import type * as v from 'valibot';
+/**
+ * Value type of the field element props.
+ */
+export interface FieldElementProps {
+    readonly name: string;
+    readonly autofocus: boolean;
+    readonly [ref: symbol]: (element: FieldElement) => () => void;
+    readonly onfocus: FocusEventHandler<FieldElement>;
+    readonly oninput: FormEventHandler<FieldElement>;
+    readonly onchange: FormEventHandler<FieldElement>;
+    readonly onblur: FocusEventHandler<FieldElement>;
+}
+/**
+ * Value type of the field store.
+ */
+export interface FieldStore<TSchema extends Schema = Schema, TFieldPath extends RequiredPath = RequiredPath> {
+    readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
+    readonly input: PartialValues<PathValue<v.InferInput<TSchema>, TFieldPath>>;
+    readonly errors: [string, ...string[]] | null;
+    readonly isTouched: boolean;
+    readonly isDirty: boolean;
+    readonly isValid: boolean;
+    readonly props: FieldElementProps;
+}
+/**
+ * Value type of the field array store.
+ */
+export interface FieldArrayStore<TSchema extends Schema = Schema, TFieldArrayPath extends RequiredPath = RequiredPath> {
+    readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
+    readonly items: string[];
+    readonly errors: [string, ...string[]] | null;
+    readonly isTouched: boolean;
+    readonly isDirty: boolean;
+    readonly isValid: boolean;
+}

package/dist/types/field.js

@@ -0,0 +1 @@
+export {};

package/dist/types/form.d.ts

@@ -0,0 +1,10 @@
+import type { BaseFormStore, Schema } from '../core/index.svelte';
+export interface FormStore<TSchema extends Schema = Schema> extends BaseFormStore<TSchema> {
+    readonly isSubmitting: boolean;
+    readonly isSubmitted: boolean;
+    readonly isValidating: boolean;
+    readonly isTouched: boolean;
+    readonly isDirty: boolean;
+    readonly isValid: boolean;
+    readonly errors: [string, ...string[]] | null;
+}

package/dist/types/form.js

@@ -0,0 +1 @@
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './field.ts';
+export * from './form.ts';
+export * from './utils.ts';

package/dist/types/index.js

@@ -0,0 +1,3 @@
+export * from './field';
+export * from './form';
+export * from './utils';

package/dist/types/utils.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Constructs a type that is maybe a getter function.
+ */
+export type MaybeGetter<TValue> = TValue | (() => TValue);

package/dist/types/utils.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './unwrap/index.ts';

package/dist/utils/index.js

@@ -0,0 +1 @@
+export * from './unwrap/index';

package/dist/utils/unwrap/index.d.ts

@@ -0,0 +1 @@
+export * from './unwrap.ts';

package/dist/utils/unwrap/index.js

@@ -0,0 +1 @@
+export * from './unwrap';

package/dist/utils/unwrap/unwrap.d.ts

@@ -0,0 +1,2 @@
+import type { MaybeGetter } from '../../types/index.ts';
+export declare function unwrap<T>(value: MaybeGetter<T>): T;

package/dist/utils/unwrap/unwrap.js

@@ -0,0 +1,6 @@
+export function unwrap(value) {
+    if (typeof value === 'function') {
+        return value();
+    }
+    return value;
+}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@formisch/svelte",
+  "description": "The modular and type-safe form library for Svelte",
+  "version": "0.1.0",
+  "license": "MIT",
+  "author": "Fabian Hiller",
+  "homepage": "https://formisch.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fabian-hiller/formisch"
+  },
+  "keywords": [
+    "vue",
+    "form",
+    "typescript",
+    "schema",
+    "validation"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.3.2",
+    "@eslint/js": "^9.35.0",
+    "@sveltejs/adapter-auto": "^6.1.0",
+    "@sveltejs/kit": "^2.37.1",
+    "@sveltejs/package": "^2.5.0",
+    "@sveltejs/vite-plugin-svelte": "^6.2.0",
+    "eslint": "^9.35.0",
+    "eslint-plugin-svelte": "^3.12.2",
+    "globals": "^16.4.0",
+    "publint": "^0.3.12",
+    "svelte": "^5.38.8",
+    "svelte-check": "^4.3.1",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.43.0",
+    "vite": "^7.1.5",
+    "@formisch/core": "0.2.0",
+    "@formisch/methods": "0.2.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.29.0",
+    "typescript": ">=5",
+    "valibot": "^1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "svelte-package --input src && node ./scripts/rewrite-imports.js",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "lint": "eslint \"src/**/*.ts*\" && tsc --noEmit",
+    "lint.fix": "eslint \"src/**/*.ts*\" --fix",
+    "format": "prettier --write ./src",
+    "format.check": "prettier --check ./src"
+  }
+}