@formisch/qwik 0.1.1 → 0.2.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as v from "valibot";
 import { JSXOutput, NoSerialize, PropsOf, QRL, ReadonlySignal } from "@qwik.dev/core";
-import * as _qwik_dev_core_internal3 from "@qwik.dev/core/internal";
+import * as _qwik_dev_core_internal1 from "@qwik.dev/core/internal";
 
 //#region ../../packages/core/dist/index.qwik.d.ts
 //#region src/types/schema.d.ts
@@ -84,15 +84,15 @@ type SubmitHandler<TSchema extends Schema> = (output: v.InferOutput<TSchema>, ev
 interface FormConfig<TSchema extends Schema = Schema> {
   readonly schema: TSchema;
   readonly initialInput?: DeepPartial<v.InferInput<TSchema>> | undefined;
-  readonly validateOn?: ValidationMode | undefined;
-  readonly revalidateOn?: Exclude<ValidationMode, "initial"> | undefined;
+  readonly validate?: ValidationMode | undefined;
+  readonly revalidate?: Exclude<ValidationMode, "initial"> | undefined;
 }
 interface InternalFormStore<TSchema extends Schema = Schema> extends InternalObjectStore {
   element?: HTMLFormElement;
   validators: number;
-  validateOn: ValidationMode;
-  revalidateOn: Exclude<ValidationMode, "initial">;
-  validate: QRL<(input: unknown) => Promise<v.SafeParseResult<TSchema>>>;
+  validate: ValidationMode;
+  revalidate: Exclude<ValidationMode, "initial">;
+  parse: QRL<(input: unknown) => Promise<v.SafeParseResult<TSchema>>>;
   isSubmitting: Signal<boolean>;
   isSubmitted: Signal<boolean>;
   isValidating: Signal<boolean>;
@@ -199,6 +199,9 @@ interface GetFieldInputConfig<TSchema extends Schema, TFieldPath extends Require
 declare function getInput<TSchema extends Schema>(form: BaseFormStore<TSchema>): PartialValues<v.InferInput<TSchema>>;
 declare function getInput<TSchema extends Schema, TFieldPath extends RequiredPath | undefined = undefined>(form: BaseFormStore<TSchema>, config: TFieldPath extends RequiredPath ? GetFieldInputConfig<TSchema, TFieldPath> : GetFormInputConfig): PartialValues<TFieldPath extends RequiredPath ? PathValue<v.InferInput<TSchema>, TFieldPath> : v.InferInput<TSchema>>;
 //#endregion
+//#region src/handleSubmit/handleSubmit.d.ts
+declare function handleSubmit<TSchema extends Schema>(form: BaseFormStore<TSchema>, handler: SubmitHandler<TSchema>): (event: SubmitEvent) => void;
+//#endregion
 //#region src/insert/insert.d.ts
 interface InsertConfig<TSchema extends Schema, TFieldArrayPath extends RequiredPath> {
   readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
@@ -350,7 +353,7 @@ interface FieldProps<TSchema extends Schema = Schema, TFieldPath extends Require
 /**
  * Headless form field that provides reactive properties and state.
  */
-declare const Field: <TSchema extends Schema, TFieldPath extends RequiredPath>(props: _qwik_dev_core_internal3.PublicProps<FieldProps<TSchema, TFieldPath>>, key: string | null, flags: number, dev?: _qwik_dev_core_internal3.DevJSX) => JSXOutput;
+declare const Field: <TSchema extends Schema, TFieldPath extends RequiredPath>(props: _qwik_dev_core_internal1.PublicProps<FieldProps<TSchema, TFieldPath>>, key: string | null, flags: number, dev?: _qwik_dev_core_internal1.DevJSX) => JSXOutput;
 //#endregion
 //#region src/components/FieldArray/FieldArray.d.ts
 /**
@@ -364,14 +367,14 @@ interface FieldArrayProps<TSchema extends Schema = Schema, TFieldArrayPath exten
 /**
  * Headless field array that provides reactive properties and state.
  */
-declare const FieldArray: <TSchema extends Schema, TFieldArrayPath extends RequiredPath>(props: _qwik_dev_core_internal3.PublicProps<FieldArrayProps<TSchema, TFieldArrayPath>>, key: string | null, flags: number, dev?: _qwik_dev_core_internal3.DevJSX) => JSXOutput;
+declare const FieldArray: <TSchema extends Schema, TFieldArrayPath extends RequiredPath>(props: _qwik_dev_core_internal1.PublicProps<FieldArrayProps<TSchema, TFieldArrayPath>>, key: string | null, flags: number, dev?: _qwik_dev_core_internal1.DevJSX) => JSXOutput;
 //#endregion
 //#region src/components/Form/Form.d.ts
 type FormProps<TSchema extends Schema = Schema> = Omit<PropsOf<'form'>, 'onSubmit$'> & {
   of: FormStore<TSchema>;
   onSubmit$: QRL<SubmitHandler<TSchema>>;
 };
-declare const Form: <TSchema extends Schema>(props: _qwik_dev_core_internal3.PublicProps<FormProps<TSchema>>, key: string | null, flags: number, dev?: _qwik_dev_core_internal3.DevJSX) => JSXOutput;
+declare const Form: <TSchema extends Schema>(props: _qwik_dev_core_internal1.PublicProps<FormProps<TSchema>>, key: string | null, flags: number, dev?: _qwik_dev_core_internal1.DevJSX) => JSXOutput;
 //#endregion
 //#region src/hooks/useField/useField.d.ts
 interface UseFieldConfig<TSchema extends Schema = Schema, TFieldPath extends RequiredPath = RequiredPath> {
@@ -389,4 +392,4 @@ declare function useFieldArray<TSchema extends Schema, TFieldArrayPath extends R
 declare function useFormQrl<TSchema extends Schema>(configQrl: QRL<FormConfig<TSchema>>): FormStore<TSchema>;
 declare const useForm$: <TSchema extends Schema>(qrl: FormConfig<TSchema>) => FormStore<TSchema>;
 //#endregion
-export { Field, FieldArray, FieldArrayProps, FieldArrayStore, FieldElementProps, FieldProps, FieldStore, FocusFieldConfig, Form, FormProps, FormStore, GetFieldErrorsConfig, GetFieldInputConfig, GetFormErrorsConfig, GetFormInputConfig, InsertConfig, MoveConfig, RemoveConfig, ReplaceConfig, ResetFieldConfig, ResetFormConfig, SetFieldErrorsConfig, SetFieldInputConfig, SetFormErrorsConfig, SetFormInputConfig, SwapConfig, UseFieldArrayConfig, UseFieldConfig, ValidateFormConfig, focus, getAllErrors, getErrors, getInput, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, useForm$, useFormQrl, validate };
+export { Field, FieldArray, FieldArrayProps, FieldArrayStore, FieldElementProps, FieldProps, FieldStore, FocusFieldConfig, Form, FormProps, FormStore, GetFieldErrorsConfig, GetFieldInputConfig, GetFormErrorsConfig, GetFormInputConfig, InsertConfig, MoveConfig, RemoveConfig, ReplaceConfig, ResetFieldConfig, ResetFormConfig, SetFieldErrorsConfig, SetFieldInputConfig, SetFormErrorsConfig, SetFormInputConfig, type SubmitHandler, SwapConfig, UseFieldArrayConfig, UseFieldConfig, ValidateFormConfig, focus, getAllErrors, getErrors, getInput, handleSubmit, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, useForm$, useFormQrl, validate };

package/dist/index.qwik.js

@@ -123,6 +123,7 @@ function copyItemState(fromInternalFieldStore, toInternalFieldStore) {
 */
 function resetItemState(internalFieldStore, initialInput) {
 	batch(() => {
+		internalFieldStore.errors.value = null;
 		if (internalFieldStore.kind === "array") {
 			internalFieldStore.isTouched.value = false;
 			internalFieldStore.isDirty.value = false;
@@ -323,12 +324,12 @@ function walkFieldStore(internalFieldStore, callback) {
 	if (internalFieldStore.kind === "array") for (let index = 0; index < untrack(() => internalFieldStore.items.value).length; index++) walkFieldStore(internalFieldStore.children[index], callback);
 	else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) walkFieldStore(internalFieldStore.children[key], callback);
 }
-function createFormStore(config, validate$1) {
+function createFormStore(config, parse) {
 	const store = {};
 	initializeFieldStore(store, config.schema, config.initialInput, []);
-	store.validateOn = config.validateOn ?? "submit";
-	store.revalidateOn = config.revalidateOn ?? "input";
-	store.validate = validate$1;
+	store.validate = config.validate ?? "submit";
+	store.revalidate = config.revalidate ?? "input";
+	store.parse = parse;
 	store.isSubmitting = createSignal(false);
 	store.isSubmitted = createSignal(false);
 	store.isValidating = createSignal(false);
@@ -337,7 +338,7 @@ function createFormStore(config, validate$1) {
 async function validateFormInput(internalFormStore, config) {
 	internalFormStore.validators++;
 	internalFormStore.isValidating.value = true;
-	const result = await internalFormStore.validate(untrack(() => getFieldInput(internalFormStore)));
+	const result = await internalFormStore.parse(untrack(() => getFieldInput(internalFormStore)));
 	let rootErrors;
 	let nestedErrors;
 	if (result.issues) {
@@ -377,7 +378,7 @@ async function validateFormInput(internalFormStore, config) {
 	return result;
 }
 function validateIfRequired(internalFormStore, internalFieldStore, validationModes) {
-	if (validationModes === (internalFormStore.validateOn === "initial" || (internalFormStore.validateOn === "submit" ? untrack(() => internalFormStore.isSubmitted.value) : untrack(() => getFieldBool(internalFieldStore, "errors"))) ? internalFormStore.revalidateOn : internalFormStore.validateOn)) validateFormInput(internalFormStore);
+	if (validationModes === (internalFormStore.validate === "initial" || (internalFormStore.validate === "submit" ? untrack(() => internalFormStore.isSubmitted.value) : untrack(() => getFieldBool(internalFieldStore, "errors"))) ? internalFormStore.revalidate : internalFormStore.validate)) validateFormInput(internalFormStore);
 }
 const INTERNAL = "~internal";
 
@@ -401,6 +402,22 @@ function getErrors(form, config) {
 function getInput(form, config) {
 	return getFieldInput(config?.path ? getFieldStore(form[INTERNAL], config.path) : form[INTERNAL]);
 }
+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;
+		}
+	};
+}
 function insert(form, config) {
 	const internalFormStore = form[INTERNAL];
 	const internalArrayStore = getFieldStore(internalFormStore, config.path);
@@ -492,7 +509,7 @@ function reset(form, config) {
 			});
 			if (!config?.path) {
 				if (!config?.keepSubmitted) internalFormStore.isSubmitted.value = false;
-				if (internalFormStore.validateOn === "initial") validateFormInput(internalFormStore);
+				if (internalFormStore.validate === "initial") validateFormInput(internalFormStore);
 			}
 		});
 	});
@@ -576,8 +593,7 @@ function useField(form, config) {
 				validateIfRequired(form[INTERNAL], internalFieldStore.value, "touch");
 			}),
 			onInput$: $((_, element) => {
-				const nextValue = getElementInput(element, internalFieldStore.value);
-				setFieldInput(internalFieldStore.value, nextValue);
+				setFieldInput(internalFieldStore.value, getElementInput(element, internalFieldStore.value));
 				validateIfRequired(form[INTERNAL], internalFieldStore.value, "input");
 			}),
 			onChange$: $(() => {
@@ -636,9 +652,9 @@ function useFormQrl(configQrl) {
 			errors: internalFormStore.errors
 		};
 	});
-	const validateOn = config.validateOn;
+	const validate$1 = config.validate;
 	useTask$(async () => {
-		if (validateOn === "initial") await validateFormInput(form[INTERNAL]);
+		if (validate$1 === "initial") await validateFormInput(form[INTERNAL]);
 	});
 	return form;
 }
@@ -676,22 +692,10 @@ const Form = component$(({ of, onSubmit$,...other }) => {
 		ref: (element) => {
 			of[INTERNAL].element = element;
 		},
-		onSubmit$: async (event) => {
-			const internalFormStore = of[INTERNAL];
-			internalFormStore.isSubmitted.value = true;
-			internalFormStore.isSubmitting.value = true;
-			try {
-				const result = await validateFormInput(internalFormStore, { shouldFocus: true });
-				if (result.success) await onSubmit$(result.output, event);
-			} catch (error) {
-				internalFormStore.errors.value = [error instanceof Error ? error.message : "An unknown error has occurred."];
-			} finally {
-				internalFormStore.isSubmitting.value = false;
-			}
-		},
+		onSubmit$: (event) => handleSubmit(of, onSubmit$)(event),
 		children: /* @__PURE__ */ jsx(Slot, {})
 	});
 });
 
 //#endregion
-export { Field, FieldArray, Form, focus, getAllErrors, getErrors, getInput, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, useForm$, useFormQrl, validate };
+export { Field, FieldArray, Form, focus, getAllErrors, getErrors, getInput, handleSubmit, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, useForm$, useFormQrl, validate };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formisch/qwik",
   "description": "The modular and type-safe form library for Qwik",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "license": "MIT",
   "author": "Fabian Hiller",
   "homepage": "https://formisch.dev",
@@ -11,13 +11,10 @@
   },
   "keywords": [
     "qwik",
-    "modular",
+    "form",
     "typescript",
     "schema",
-    "validation",
-    "parsing",
-    "bundle-size",
-    "type-safe"
+    "validation"
   ],
   "type": "module",
   "main": "./dist/index.qwik.js",
@@ -40,9 +37,10 @@
   },
   "scripts": {
     "build": "tsdown",
-    "fmt": "prettier --write .",
-    "fmt.check": "prettier --check .",
-    "lint": "eslint \"src/**/*.ts*\"",
+    "lint": "eslint \"src/**/*.ts*\" && tsc --noEmit",
+    "lint.fix": "eslint \"src/**/*.ts*\" --fix",
+    "format": "prettier --write ./src",
+    "format.check": "prettier --check ./src",
     "qwik": "qwik"
   },
   "devDependencies": {