@formisch/vue 0.1.0 → 0.2.1

package/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) Fabian Hiller
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -2,6 +2,8 @@
 
 Formisch is a schema-based, headless form library for Vue. It manages form state and validation. It is type-safe, fast by default and its bundle size is small due to its modular design. Try it out in our [playground](https://stackblitz.com/edit/formisch-playground-vue)!
 
+Formisch is also available for [Preact][formisch-preact], [Qwik][formisch-qwik], [SolidJS][formisch-solid] and [Svelte][formisch-svelte].
+
 ## Highlights
 
 - Small bundle size starting at 2.5 kB
@@ -17,7 +19,7 @@ Every form starts with the `useForm` composable. It initializes your form's stor
 
 ```vue
 <script setup lang="ts">
-import { Field, Form, type SubmitHandler, useForm } from '@formisch/vue';
+import { Field, Form, useForm } from '@formisch/vue';
 import * as v from 'valibot';
 
 const LoginSchema = v.object({
@@ -49,6 +51,16 @@ const loginForm = useForm({ schema: LoginSchema });
 
 In addition, Formisch offers several functions (we call them "methods") that can be used to read and manipulate the form state. These include `focus`, `getErrors`, `getAllErrors`, `getInput`, `insert`, `move`, `remove`, `replace`, `reset`, `setErrors`, `setInput`, `submit`, `swap` and `validate`. These methods allow you to control the form programmatically.
 
+## Comparison
+
+What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built. The result is a small bundle size and native performance for any UI update. This feature, along with a few others, distinguishes Formisch from other form libraries. My vision for Formisch is to create a framework-agnostic platform similar to [Vite](https://vite.dev/), but for forms.
+
+## Partners
+
+Thanks to our partners who support the development! [Join them](https://github.com/sponsors/fabian-hiller) and contribute to the sustainability of open source software!
+
+![Partners of Formisch](https://github.com/fabian-hiller/formisch/blob/main/partners.webp?raw=true)
+
 ## Feedback
 
 Find a bug or have an idea how to improve the library? Please fill out an [issue](https://github.com/fabian-hiller/formisch/issues/new). Together we can make forms even better!
@@ -56,3 +68,8 @@ Find a bug or have an idea how to improve the library? Please fill out an [issue
 ## License
 
 This project is available free of charge and licensed under the [MIT license](https://github.com/fabian-hiller/formisch/blob/main/LICENSE.md).
+
+[formisch-preact]: https://github.com/fabian-hiller/formisch/tree/main/frameworks/preact
+[formisch-qwik]: https://github.com/fabian-hiller/formisch/tree/main/frameworks/qwik
+[formisch-solid]: https://github.com/fabian-hiller/formisch/tree/main/frameworks/solid
+[formisch-svelte]: https://github.com/fabian-hiller/formisch/tree/main/frameworks/svelte

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as v from "valibot";
-import * as vue0 from "vue";
+import * as vue5 from "vue";
 import { ComponentPublicInstance, MaybeRefOrGetter, ShallowRef as Signal } from "vue";
 
 //#region ../../packages/core/dist/index.vue.d.ts
@@ -93,7 +93,7 @@ interface InternalFormStore<TSchema extends Schema = Schema> extends InternalObj
 interface BaseFormStore<TSchema extends Schema = Schema> {
   [INTERNAL]: InternalFormStore<TSchema>;
 }
-type SubmitHandler<TSchema extends Schema> = (output: v.InferOutput<TSchema>, event: SubmitEvent) => MaybePromise<void>;
+type SubmitHandler<TSchema extends Schema> = (output: v.InferOutput<TSchema>, event: SubmitEvent) => MaybePromise<unknown>;
 //#endregion
 //#region src/types/path.d.ts
 /**
@@ -123,16 +123,16 @@ type MergeUnion<T> = { [K in KeyOf<T>]: T extends Record<K, infer V> ? V : never
 /**
 * Lazily evaluate only the first valid path segment based on the given value.
 */
-type LazyPath<TValue, TPathToCheck extends Path, TValidPath extends Path = readonly []> = TPathToCheck extends readonly [] ? TValidPath : TPathToCheck extends readonly [infer TFirstKey extends KeyOf<TValue>, ...infer TPathRest extends Path] ? LazyPath<MergeUnion<TValue>[TFirstKey], TPathRest, readonly [...TValidPath, TFirstKey]> : IsNever<KeyOf<TValue>> extends false ? readonly [...TValidPath, KeyOf<TValue>] : TValidPath;
+type LazyPath<TValue, TPathToCheck extends Path, TValidPath extends Path = readonly []> = TPathToCheck extends readonly [] ? TValidPath : TPathToCheck extends readonly [infer TFirstKey extends KeyOf<TValue>, ...infer TPathRest extends Path] ? LazyPath<Required<MergeUnion<TValue>[TFirstKey]>, TPathRest, readonly [...TValidPath, TFirstKey]> : IsNever<KeyOf<TValue>> extends false ? readonly [...TValidPath, KeyOf<TValue>] : TValidPath;
 /**
 * Returns the path if valid, otherwise the first possible valid path based on
 * the given value.
 */
-type ValidPath<TValue, TPath extends RequiredPath> = TPath extends LazyPath<TValue, TPath> ? TPath : LazyPath<TValue, TPath>;
+type ValidPath<TValue, TPath extends RequiredPath> = TPath extends LazyPath<Required<TValue>, TPath> ? TPath : LazyPath<Required<TValue>, TPath>;
 /**
 * Extracts the value type at the given path.
 */
-type PathValue<TValue, TPath extends Path> = TPath extends readonly [infer TKey, ...infer TRest extends Path] ? TKey extends KeyOf<TValue> ? PathValue<MergeUnion<TValue>[TKey], TRest> : unknown : TValue;
+type PathValue<TValue, TPath extends Path> = TPath extends readonly [infer TKey, ...infer TRest extends Path] ? TKey extends KeyOf<Required<TValue>> ? PathValue<MergeUnion<Required<TValue>>[TKey], TRest> : unknown : TValue;
 /**
 * Checks if a value is an array or contains one.
 */
@@ -140,16 +140,16 @@ type IsOrHasArray<TValue> = IsAny<TValue> extends true ? false : TValue extends
 /**
 * Extracts the exact keys of a tuple, array or object that contain arrays.
 */
-type KeyOfArrayPath<TValue> = IsAny<TValue> extends true ? never : TValue extends readonly (infer TItem)[] ? number extends TValue["length"] ? IsOrHasArray<TItem> extends true ? number : never : { [TKey in keyof TValue]: TKey extends `${infer TIndex extends number}` ? IsOrHasArray<TValue[TKey]> extends true ? TIndex : never : never }[number] : TValue extends Record<string, unknown> ? { [TKey in keyof TValue]: IsOrHasArray<TValue[TKey]> extends true ? TKey : never }[keyof TValue] & PathKey : never;
+type KeyOfArrayPath<TValue> = IsAny<TValue> extends true ? never : TValue extends readonly (infer TItem)[] ? number extends TValue["length"] ? IsOrHasArray<TItem> extends true ? number : never : { [TKey in keyof TValue]: TKey extends `${infer TIndex extends number}` ? IsOrHasArray<NonNullable<TValue[TKey]>> extends true ? TIndex : never : never }[number] : TValue extends Record<string, unknown> ? { [TKey in keyof TValue]: IsOrHasArray<NonNullable<TValue[TKey]>> extends true ? TKey : never }[keyof TValue] & PathKey : never;
 /**
 * Lazily evaluate only the first valid array path segment based on the given value.
 */
-type LazyArrayPath<TValue, TPathToCheck extends Path, TValidPath extends Path = readonly []> = TPathToCheck extends readonly [] ? TValue extends readonly unknown[] ? TValidPath : readonly [...TValidPath, KeyOfArrayPath<TValue>] : TPathToCheck extends readonly [infer TFirstKey extends KeyOfArrayPath<TValue>, ...infer TPathRest extends Path] ? LazyArrayPath<MergeUnion<TValue>[TFirstKey], TPathRest, readonly [...TValidPath, TFirstKey]> : IsNever<KeyOfArrayPath<TValue>> extends false ? readonly [...TValidPath, KeyOfArrayPath<TValue>] : never;
+type LazyArrayPath<TValue, TPathToCheck extends Path, TValidPath extends Path = readonly []> = TPathToCheck extends readonly [] ? TValue extends readonly unknown[] ? TValidPath : readonly [...TValidPath, KeyOfArrayPath<TValue>] : TPathToCheck extends readonly [infer TFirstKey extends KeyOfArrayPath<TValue>, ...infer TPathRest extends Path] ? LazyArrayPath<Required<MergeUnion<TValue>[TFirstKey]>, TPathRest, readonly [...TValidPath, TFirstKey]> : IsNever<KeyOfArrayPath<TValue>> extends false ? readonly [...TValidPath, KeyOfArrayPath<TValue>] : never;
 /**
 * Returns the path if valid, otherwise the first possible valid array path based on
 * the given value.
 */
-type ValidArrayPath<TValue, TPath extends RequiredPath> = TPath extends LazyArrayPath<TValue, TPath> ? TPath : LazyArrayPath<TValue, TPath>;
+type ValidArrayPath<TValue, TPath extends RequiredPath> = TPath extends LazyArrayPath<Required<TValue>, TPath> ? TPath : LazyArrayPath<Required<TValue>, TPath>;
 //#endregion
 //#region src/array/copyItemState/copyItemState.d.ts
 /**
@@ -289,8 +289,8 @@ declare function validate<TSchema extends Schema>(form: BaseFormStore<TSchema>,
 //#endregion
 //#region src/types/field.d.ts
 /**
-* Value type of the field element props.
-*/
+ * Value type of the field element props.
+ */
 interface FieldElementProps {
   readonly name: string;
   readonly autofocus: boolean;
@@ -300,8 +300,8 @@ interface FieldElementProps {
   readonly onBlur: (event: FocusEvent) => void;
 }
 /**
-* Value type of the field store.
-*/
+ * Value type of the field store.
+ */
 interface FieldStore<TSchema extends Schema = Schema, TFieldPath extends RequiredPath = RequiredPath> {
   readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
   get input(): PartialValues<PathValue<v.InferInput<TSchema>, TFieldPath>>;
@@ -313,8 +313,8 @@ interface FieldStore<TSchema extends Schema = Schema, TFieldPath extends Require
   readonly props: FieldElementProps;
 }
 /**
-* Value type of the field array store.
-*/
+ * Value type of the field array store.
+ */
 interface FieldArrayStore<TSchema extends Schema = Schema, TFieldArrayPath extends RequiredPath = RequiredPath> {
   readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
   readonly items: string[];
@@ -344,14 +344,14 @@ interface FieldProps<TSchema extends Schema = Schema, TFieldPath extends Require
   readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
 }
 declare const _default: <TSchema extends Schema, TFieldPath extends RequiredPath>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$2<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: __VLS_PrettifyLocal$2<Pick<Partial<{}> & Omit<{} & vue0.VNodeProps & vue0.AllowedComponentProps & vue0.ComponentCustomProps, never>, never> & FieldProps<TSchema, TFieldPath> & Partial<{}>> & vue0.PublicProps;
-  expose(exposed: vue0.ShallowUnwrapRef<{}>): void;
+  props: __VLS_PrettifyLocal$2<Pick<Partial<{}> & Omit<{} & vue5.VNodeProps & vue5.AllowedComponentProps & vue5.ComponentCustomProps, never>, never> & FieldProps<TSchema, TFieldPath> & {}> & vue5.PublicProps;
+  expose(exposed: vue5.ShallowUnwrapRef<{}>): void;
   attrs: any;
   slots: {
     default(props: FieldStore<TSchema, TFieldPath>): any;
   };
   emit: {};
-}>) => vue0.VNode & {
+}>) => vue5.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 type __VLS_PrettifyLocal$2<T> = { [K in keyof T as K]: T[K] } & {};
@@ -365,32 +365,32 @@ interface FieldArrayProps<TSchema extends Schema = Schema, TFieldArrayPath exten
   readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
 }
 declare const _default$1: <TSchema extends Schema, TFieldArrayPath extends RequiredPath>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$1<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: __VLS_PrettifyLocal$1<Pick<Partial<{}> & Omit<{} & vue0.VNodeProps & vue0.AllowedComponentProps & vue0.ComponentCustomProps, never>, never> & FieldArrayProps<TSchema, TFieldArrayPath> & Partial<{}>> & vue0.PublicProps;
-  expose(exposed: vue0.ShallowUnwrapRef<{}>): void;
+  props: __VLS_PrettifyLocal$1<Pick<Partial<{}> & Omit<{} & vue5.VNodeProps & vue5.AllowedComponentProps & vue5.ComponentCustomProps, never>, never> & FieldArrayProps<TSchema, TFieldArrayPath> & {}> & vue5.PublicProps;
+  expose(exposed: vue5.ShallowUnwrapRef<{}>): void;
   attrs: any;
   slots: {
     default(props: FieldArrayStore<TSchema, TFieldArrayPath>): any;
   };
   emit: {};
-}>) => vue0.VNode & {
+}>) => vue5.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 type __VLS_PrettifyLocal$1<T> = { [K in keyof T as K]: T[K] } & {};
 //#endregion
 //#region src/components/Form/Form.vue.d.ts
-type FormProps<TSchema extends Schema = Schema> = {
+interface FormProps<TSchema extends Schema = Schema> {
   of: FormStore<TSchema>;
   onSubmit: SubmitHandler<TSchema>;
-};
+}
 declare const _default$2: <TSchema extends Schema = Schema>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & vue0.VNodeProps & vue0.AllowedComponentProps & vue0.ComponentCustomProps, never>, never> & FormProps<TSchema> & Partial<{}>> & vue0.PublicProps;
-  expose(exposed: vue0.ShallowUnwrapRef<{}>): void;
+  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & vue5.VNodeProps & vue5.AllowedComponentProps & vue5.ComponentCustomProps, never>, never> & FormProps<TSchema> & {}> & vue5.PublicProps;
+  expose(exposed: vue5.ShallowUnwrapRef<{}>): void;
   attrs: any;
   slots: {
     default?: (props: {}) => any;
   };
   emit: {};
-}>) => vue0.VNode & {
+}>) => vue5.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 type __VLS_PrettifyLocal<T> = { [K in keyof T as K]: T[K] } & {};

package/dist/index.js

@@ -41,7 +41,7 @@ function initializeFieldStore(internalFieldStore, schema, initialInput, path) {
 				} else for (let index = 0; index < schema.items; index++) {
 					internalFieldStore.children[index] = {};
 					path.push(index);
-					initializeFieldStore(internalFieldStore.children[index], schema.items[index], initialInput && initialInput[index], path);
+					initializeFieldStore(internalFieldStore.children[index], schema.items[index], initialInput?.[index], path);
 					path.pop();
 				}
 				const initialItems = internalFieldStore.children.map(createId);
@@ -59,7 +59,7 @@ function initializeFieldStore(internalFieldStore, schema, initialInput, path) {
 				for (const key in schema.entries) {
 					internalFieldStore.children[key] = {};
 					path.push(key);
-					initializeFieldStore(internalFieldStore.children[key], schema.entries[key], initialInput && initialInput[key], path);
+					initializeFieldStore(internalFieldStore.children[key], schema.entries[key], initialInput?.[key], path);
 					path.pop();
 				}
 			}
@@ -253,23 +253,24 @@ function setFieldBool(internalFieldStore, type, bool) {
 function setFieldInput(internalFieldStore, input) {
 	batch(() => {
 		if (internalFieldStore.kind === "array") {
+			const arrayInput = input ?? [];
 			const items = untrack(() => internalFieldStore.items.value);
-			if (input.length < items.length) internalFieldStore.items.value = items.slice(0, input.length);
-			else if (input.length > items.length) {
-				if (input.length > internalFieldStore.children.length) {
+			if (arrayInput.length < items.length) internalFieldStore.items.value = items.slice(0, arrayInput.length);
+			else if (arrayInput.length > items.length) {
+				if (arrayInput.length > internalFieldStore.children.length) {
 					const path = JSON.parse(internalFieldStore.name);
-					for (let index = internalFieldStore.children.length; index < input.length; index++) {
+					for (let index = internalFieldStore.children.length; index < arrayInput.length; index++) {
 						internalFieldStore.children[index] = {};
 						path.push(index);
-						initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, input[index], path);
+						initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, arrayInput[index], path);
 						path.pop();
 					}
 				}
-				internalFieldStore.items.value = [...items, ...input.slice(items.length).map(createId)];
+				internalFieldStore.items.value = [...items, ...arrayInput.slice(items.length).map(createId)];
 			}
-			for (let index = 0; index < items.length; index++) setFieldInput(internalFieldStore.children[index], input[index]);
+			for (let index = 0; index < items.length; index++) setFieldInput(internalFieldStore.children[index], arrayInput[index]);
 			internalFieldStore.isDirty.value = untrack(() => internalFieldStore.startItems.value).length !== items.length;
-		} else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) setFieldInput(internalFieldStore.children[key], input[key]);
+		} else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) setFieldInput(internalFieldStore.children[key], input?.[key]);
 		else {
 			internalFieldStore.input.value = input;
 			internalFieldStore.isTouched.value = true;
@@ -281,17 +282,18 @@ function setFieldInput(internalFieldStore, input) {
 function setInitialFieldInput(internalFieldStore, initialInput) {
 	batch(() => {
 		if (internalFieldStore.kind === "array") {
-			if (initialInput.length > internalFieldStore.children.length) {
+			const initialArrayInput = initialInput ?? [];
+			if (initialArrayInput.length > internalFieldStore.children.length) {
 				const path = JSON.parse(internalFieldStore.name);
-				for (let index = internalFieldStore.children.length; index < initialInput.length; index++) {
+				for (let index = internalFieldStore.children.length; index < initialArrayInput.length; index++) {
 					internalFieldStore.children[index] = {};
 					path.push(index);
-					initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, initialInput[index], path);
+					initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, initialArrayInput[index], path);
 					path.pop();
 				}
 			}
-			internalFieldStore.initialItems.value = initialInput.map(createId);
-			for (let index = 0; index < internalFieldStore.children.length; index++) setInitialFieldInput(internalFieldStore.children[index], initialInput?.[index]);
+			internalFieldStore.initialItems.value = initialArrayInput.map(createId);
+			for (let index = 0; index < internalFieldStore.children.length; index++) setInitialFieldInput(internalFieldStore.children[index], initialArrayInput[index]);
 		} else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) setInitialFieldInput(internalFieldStore.children[key], initialInput?.[key]);
 		else internalFieldStore.initialInput.value = initialInput;
 	});
@@ -613,7 +615,7 @@ function useFieldArray(form, config) {
 //#endregion
 //#region src/composables/useForm/useForm.ts
 function useForm(config) {
-	const internalFormStore = createFormStore(config, async (input) => v.safeParseAsync(config.schema, input));
+	const internalFormStore = createFormStore(config, (input) => v.safeParseAsync(config.schema, input));
 	onBeforeMount(async () => {
 		if (config.validate === "initial") await validateFormInput(internalFormStore);
 	});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formisch/vue",
   "description": "The modular and type-safe form library for Vue",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "license": "MIT",
   "author": "Fabian Hiller",
   "homepage": "https://formisch.dev",
@@ -32,17 +32,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "tsdown",
-    "lint": "eslint \"src/**/*.ts*\" && tsc --noEmit",
-    "lint.fix": "eslint \"src/**/*.ts*\" --fix",
-    "format": "prettier --write ./src",
-    "format.check": "prettier --check ./src",
-    "vite": "vite"
-  },
   "devDependencies": {
-    "@formisch/core": "workspace:*",
-    "@formisch/methods": "workspace:*",
     "@types/node": "^24.1.0",
     "@vue/eslint-config-typescript": "^14.6.0",
     "eslint": "^9.32.0",
@@ -52,7 +42,9 @@
     "unplugin-vue": "^7.0.0",
     "valibot": "^1.1.0",
     "vue": "^3.5.18",
-    "vue-tsc": "^3.0.4"
+    "vue-tsc": "^3.0.4",
+    "@formisch/core": "0.3.1",
+    "@formisch/methods": "0.2.0"
   },
   "peerDependencies": {
     "typescript": ">=5",
@@ -63,5 +55,13 @@
     "typescript": {
       "optional": true
     }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "lint": "eslint \"src/**/*.ts*\" && tsc --noEmit",
+    "lint.fix": "eslint \"src/**/*.ts*\" --fix",
+    "format": "prettier --write ./src",
+    "format.check": "prettier --check ./src",
+    "vite": "vite"
   }
-}
+}