@formisch/qwik 0.9.5 → 0.10.0

package/README.md

@@ -28,9 +28,9 @@ const LoginSchema = v.object({
 });
 
 export default component$(() => {
-  const loginForm = useForm$({
+  const loginForm = useForm$(() => ({
     schema: LoginSchema,
-  });
+  }));
 
   return (
     <Form of={loginForm} onSubmit$={(output, event) => console.log(output)}>

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_internal1 from "@qwik.dev/core/internal";
+import * as _qwik_dev_core_internal0 from "@qwik.dev/core/internal";
 
 //#region ../../packages/core/dist/index.qwik.d.ts
 
@@ -989,7 +989,7 @@ interface FieldProps<TSchema extends Schema = Schema, TFieldPath extends Require
  *
  * @returns The UI of the field to be rendered.
  */
-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;
+declare const Field: <TSchema extends Schema, TFieldPath extends RequiredPath>(props: _qwik_dev_core_internal0.PublicProps<FieldProps<TSchema, TFieldPath>>, key: string | null, flags: number, dev?: _qwik_dev_core_internal0.DevJSX) => JSXOutput;
 //#endregion
 //#region src/components/FieldArray/FieldArray.d.ts
 /**
@@ -1017,7 +1017,7 @@ interface FieldArrayProps<TSchema extends Schema = Schema, TFieldArrayPath exten
  *
  * @returns The UI of the field array to be rendered.
  */
-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;
+declare const FieldArray: <TSchema extends Schema, TFieldArrayPath extends RequiredPath>(props: _qwik_dev_core_internal0.PublicProps<FieldArrayProps<TSchema, TFieldArrayPath>>, key: string | null, flags: number, dev?: _qwik_dev_core_internal0.DevJSX) => JSXOutput;
 //#endregion
 //#region src/components/Form/Form.d.ts
 /**
@@ -1031,7 +1031,7 @@ type FormProps<TSchema extends Schema = Schema> = Omit<PropsOf<'form'>, 'onSubmi
   /**
    * The submit handler called when the form is submitted and validation succeeds.
    */
-  readonly onSubmit$: QRL<SubmitHandler<TSchema>> | QRL<SubmitEventHandler<TSchema>>;
+  readonly onSubmit$: QRL<SubmitEventHandler<TSchema>>;
 };
 /**
  * Form component that manages form submission and applies internal state.
@@ -1039,7 +1039,7 @@ type FormProps<TSchema extends Schema = Schema> = Omit<PropsOf<'form'>, 'onSubmi
  *
  * @returns The a native form element.
  */
-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;
+declare const Form: <TSchema extends Schema>(props: _qwik_dev_core_internal0.PublicProps<FormProps<TSchema>>, key: string | null, flags: number, dev?: _qwik_dev_core_internal0.DevJSX) => JSXOutput;
 //#endregion
 //#region src/hooks/useField/useField.d.ts
 /**
@@ -1086,17 +1086,19 @@ declare function useFieldArray<TSchema extends Schema, TFieldArrayPath extends R
  * Creates a reactive form store from a form configuration. The form store
  * manages form state and provides reactive properties.
  *
- * @param configQrl The QRL containing the form configuration.
+ * @param configQrl The QRL containing a function that returns the form configuration.
  *
  * @returns The form store with reactive properties.
  */
-declare function useFormQrl<TSchema extends Schema>(configQrl: QRL<FormConfig<TSchema>>): FormStore<TSchema>;
+declare function useFormQrl<TSchema extends Schema>(configQrl: QRL<() => FormConfig<TSchema>>): FormStore<TSchema>;
 /**
  * Creates a reactive form store from a form configuration. The form store
  * manages form state and provides reactive properties.
  *
+ * @param configFn A function that returns the form configuration.
+ *
  * @returns The form store with reactive properties.
  */
-declare const useForm$: <TSchema extends Schema>(qrl: FormConfig<TSchema>) => FormStore<TSchema>;
+declare const useForm$: <TSchema extends Schema>(qrl: () => FormConfig<TSchema>) => FormStore<TSchema>;
 //#endregion
 export { type DeepPartial, Field, FieldArray, FieldArrayProps, FieldArrayStore, type FieldElement, FieldElementProps, FieldProps, FieldStore, FocusFieldConfig, Form, type FormConfig, FormProps, FormStore, GetFieldErrorsConfig, GetFieldInputConfig, GetFormErrorsConfig, GetFormInputConfig, InsertConfig, MoveConfig, type PartialValues, type PathValue, RemoveConfig, ReplaceConfig, type RequiredPath, ResetFieldConfig, ResetFormConfig, type Schema, SetFieldErrorsConfig, SetFieldInputConfig, SetFormErrorsConfig, SetFormInputConfig, type SubmitEventHandler, type SubmitHandler, SwapConfig, UseFieldArrayConfig, UseFieldConfig, type ValidArrayPath, type ValidPath, ValidateFormConfig, type ValidationMode, focus, getAllErrors, getErrors, getInput, handleSubmit, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, useForm$, useFormQrl, validate };

package/dist/index.qwik.js

@@ -568,6 +568,7 @@ function focus(form, config) {
 function getAllErrors(form) {
 	let allErrors = null;
 	walkFieldStore(form[INTERNAL], (internalFieldStore) => {
+		if (internalFieldStore.kind === "array") internalFieldStore.items.value;
 		const errors = internalFieldStore.errors.value;
 		if (errors) if (allErrors) allErrors.push(...errors);
 		else allErrors = [...errors];
@@ -620,7 +621,15 @@ function insert(form, config) {
 		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]);
+		for (let index = items.length; index > insertIndex; index--) {
+			if (!internalArrayStore.children[index]) {
+				const path = JSON.parse(internalArrayStore.name);
+				internalArrayStore.children[index] = {};
+				path.push(index);
+				initializeFieldStore(internalArrayStore.children[index], internalArrayStore.schema.item, void 0, path);
+			}
+			copyItemState(internalArrayStore.children[index - 1], internalArrayStore.children[index]);
+		}
 		if (!internalArrayStore.children[insertIndex]) {
 			const path = JSON.parse(internalArrayStore.name);
 			internalArrayStore.children[insertIndex] = {};
@@ -899,12 +908,13 @@ function useResolvedQrl(qrl) {
 //#region src/hooks/useForm$/useForm$.ts
 /* @__NO_SIDE_EFFECTS__ */
 function useFormQrl(configQrl) {
-	const config = useResolvedQrl(configQrl);
+	const configFn = useResolvedQrl(configQrl);
+	const config = configFn();
 	const form = useConstant(() => {
 		const internalFormStore = createFormStore({
 			...config,
 			schema: JSON.parse(JSON.stringify(config.schema))
-		}, $(async (input) => v.safeParseAsync((await configQrl.resolve()).schema, input)));
+		}, $(async (input) => v.safeParseAsync((await configQrl.resolve())().schema, input)));
 		return {
 			[INTERNAL]: internalFormStore,
 			isSubmitting: internalFormStore.isSubmitting,
@@ -926,6 +936,8 @@ function useFormQrl(configQrl) {
 * Creates a reactive form store from a form configuration. The form store
 * manages form state and provides reactive properties.
 *
+* @param configFn A function that returns the form configuration.
+*
 * @returns The form store with reactive properties.
 */
 const useForm$ = implicit$FirstArg(useFormQrl);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formisch/qwik",
   "description": "The modular and type-safe form library for Qwik",
-  "version": "0.9.5",
+  "version": "0.10.0",
   "license": "MIT",
   "author": "Fabian Hiller",
   "homepage": "https://formisch.dev",
@@ -35,7 +35,18 @@
   "engines": {
     "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
   },
+  "scripts": {
+    "build": "tsdown",
+    "lint": "eslint \"src/**/*.ts*\" && tsc --noEmit",
+    "lint.fix": "eslint \"src/**/*.ts*\" --fix",
+    "format": "prettier --write ./src",
+    "format.check": "prettier --check ./src",
+    "qwik": "qwik"
+  },
   "devDependencies": {
+    "@formisch/core": "workspace:*",
+    "@formisch/eslint-config": "workspace:*",
+    "@formisch/methods": "workspace:*",
     "@qwik.dev/core": "2.0.0-beta.5",
     "@types/node": "24.0.13",
     "eslint": "9.31.0",
@@ -46,10 +57,7 @@
     "typescript": "5.8.3",
     "valibot": "^1.2.0",
     "vite": "7.0.4",
-    "vite-tsconfig-paths": "^5.1.4",
-    "@formisch/eslint-config": "0.1.0",
-    "@formisch/core": "0.6.3",
-    "@formisch/methods": "0.7.0"
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
     "@qwik.dev/core": ">=2",
@@ -60,13 +68,5 @@
     "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",
-    "qwik": "qwik"
   }
-}
+}