Merge pull request #41 from x0k/structure-change

Implement array and object fields revalidation

.changeset/quick-coins-think.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": minor
+---
+
+Implement array and object fields revalidation

.changeset/twenty-mirrors-clap.md

@@ -0,0 +1,5 @@
+---
+"playground": minor
+---
+
+Allow to customize validation events and modifiers

apps/docs/src/content/docs/api-reference/fields-validation-mode.mdx

@@ -0,0 +1,26 @@
+---
+title: Fields validation mode
+sidebar:
+  order: 11
+---
+
+```typescript
+type FieldsValidationMode = number;
+
+/** Validation is triggered on input event */
+export const ON_INPUT = 1;
+/** Validation is triggered on change event */
+export const ON_CHANGE = ON_INPUT << 1;
+/** Validation is triggered on blur event */
+export const ON_BLUR = ON_CHANGE << 1;
+/** Validation is triggered on add/remove item in array */
+export const ON_ARRAY_CHANGE = ON_BLUR << 1;
+/** Validation is triggered on add/remove/rename property in object */
+export const ON_OBJECT_CHANGE = ON_ARRAY_CHANGE << 1;
+
+/** Validation is not triggered before first change event */
+export const AFTER_CHANGED = ON_OBJECT_CHANGE << 1;
+/** Validation is not triggered before first blur event */
+export const AFTER_TOUCHED = AFTER_CHANGED << 1;
+/** Validation is not triggered before first form submission */
+export const AFTER_SUBMITTED = AFTER_TOUCHED << 1;

apps/docs/src/content/docs/api-reference/handlers.mdx

@@ -49,7 +49,7 @@ interface FormProps<T> {
   /**
    * Field validation error handler
    */
-  onFieldValidationFailure?: (
+  onFieldsValidationFailure?: (
     state: FailedMutation<unknown>,
     config: Config,
     value: SchemaValue | undefined

apps/docs/src/content/docs/guides/_async-validation.svelte

@@ -36,7 +36,7 @@
     validator: createAsyncValidator({ ajv }),
     handleValidationProcessError,
     schema: schema,
-    inputsValidationMode: ON_INPUT,
+    fieldsValidationMode: ON_INPUT,
     onSubmit: console.log,
   });
 
@@ -48,7 +48,7 @@
   };
 </script>
 
-form validation: {statusNames[form.validation.status]}, inputs validation: {statusNames[form.fieldValidation.status]}
+form validation: {statusNames[form.validation.status]}, fields validation: {statusNames[form.fieldsValidation.status]}
 <SimpleForm
   {form}
   novalidate

apps/docs/src/content/docs/guides/_fields-validation.astro

@@ -0,0 +1,9 @@
+---
+import { ShadowHost } from "@/components/shadow";
+
+import Form from "./_fields-validation.svelte";
+---
+
+<ShadowHost client:only="svelte">
+  <Form client:only="svelte" />
+</ShadowHost>

apps/docs/src/content/docs/guides/_inputs-validation.svelte → apps/docs/src/content/docs/guides/_fields-validation.svelte

@@ -7,7 +7,7 @@
 
   const form = useCustomForm({
     schema: objectSchema,
-    inputsValidationMode: ON_INPUT | ON_CHANGE | AFTER_SUBMITTED,
+    fieldsValidationMode: ON_INPUT | ON_CHANGE | AFTER_SUBMITTED,
     onSubmit: console.log,
   });
 </script>

apps/docs/src/content/docs/guides/validation.mdx

@@ -6,13 +6,13 @@ sidebar:
 
 import { Code, Card, LinkCard } from '@astrojs/starlight/components';
 
-import { DEFAULT_FIELD_VALIDATION_DEBOUNCE_MS } from '@sjsf/form';
+import { DEFAULT_FIELDS_VALIDATION_DEBOUNCE_MS } from '@sjsf/form';
 
 import LiveValidation from './_live-validation.astro'
 import liveValidationCode from './_live-validation.svelte?raw'
 
-import InputsValidation from './_inputs-validation.astro'
-import inputsValidationCode from './_inputs-validation.svelte?raw'
+import FieldsValidation from './_fields-validation.astro'
+import fieldsValidationCode from './_fields-validation.svelte?raw'
 
 import AsyncValidation from './_async-validation.astro'
 import asyncValidationCode from './_async-validation.svelte?raw'
@@ -44,27 +44,28 @@ By utilizing Svelte 5 reactivity, we can easily implement live validation.
 While it is possible, this approach has low efficiency, because usually
 revalidation of the whole form when changing one field does not make sense.
 
-## Inputs validation
+## Fields validation
 
-Instead of full form revalidation, we propose to perform revalidation of only the input field and full validation of the form when submitting.
+Instead of full form revalidation, we propose to perform revalidation of only the changing field and
+full validation of the form when submitting.
 
 :::note
 
-By default, inputs validation is performed with a debounce of {DEFAULT_FIELD_VALIDATION_DEBOUNCE_MS}ms.
+By default, fields validation is performed with a debounce of {DEFAULT_FIELDS_VALIDATION_DEBOUNCE_MS}ms.
 
-This can be changed by passing the `validationDebounceMs` option.
+This can be changed by passing the `fieldsValidationDebounceMs` option.
 
 :::
 
-<Code code={inputsValidationCode} lang="svelte" />
+<Code code={fieldsValidationCode} lang="svelte" />
 
 <Card>
-  <InputsValidation />
+  <FieldsValidation />
 </Card>
 
 The form in this example will only revalidate input fields on the `input` and `change` events after the first submission of the form.
 
-<LinkCard title="Inputs validation mode API reference" href="../../api-reference/inputs-validation-mode/" />
+<LinkCard title="Fields validation mode API reference" href="../../api-reference/fields-validation-mode/" />
 
 ## Async validation
 
@@ -75,7 +76,7 @@ The form supports asynchronous validation, please see your validator page for mo
 By default, a new form validation process can only be started after the previous one is completed;
 a new input validation process aborts the previous one.
 
-You can change this behavior by passing the `validationCombinator` and `fieldValidationCombinator` options.
+You can change this behavior by passing the `validationCombinator` and `fieldsValidationCombinator` options.
 
 :::
 

apps/docs/src/content/docs/validators/_ajv.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
   import { SimpleForm, ON_INPUT } from "@sjsf/form";
-  import { createValidator } from "@sjsf/ajv8-validator";
+  import { createValidator2 } from "@sjsf/ajv8-validator";
 
   import { useCustomForm } from "@/components/custom-form";
 
   import { schema, uiSchema } from './_shared';
 
-  const validator = createValidator();
+  const validator = createValidator2();
 
   const form = useCustomForm({
     schema,
     uiSchema,
     validator,
-    inputsValidationMode: ON_INPUT,
+    fieldsValidationMode: ON_INPUT,
     initialValue: {
       id: "Invalid",
       skills: ["karate", "budo", "aikido"],

apps/docs/src/content/docs/validators/_cfworker.svelte

@@ -12,7 +12,7 @@
     schema,
     uiSchema,
     validator,
-    inputsValidationMode: ON_INPUT,
+    fieldsValidationMode: ON_INPUT,
     initialValue: {
       id: "Invalid",
       skills: ["karate", "budo", "aikido"],

apps/docs/src/content/docs/validators/_zod.svelte

@@ -24,13 +24,13 @@
 
   type Value = z.infer<typeof schema>;
 
-  const validator = createValidator({ schema, uiSchema });
+  const validator = createValidator({ schema });
 
   const form = useCustomForm({
     schema: zodToJsonSchema(schema, { errorMessages: true }) as Schema,
     uiSchema,
     validator,
-    inputsValidationMode: ON_INPUT,
+    fieldsValidationMode: ON_INPUT,
     initialValue: initialValue as Value,
   });
 </script>

apps/docs/src/content/docs/validators/cfworker.mdx

@@ -16,7 +16,10 @@ import sharedCode from './_shared.ts?raw';
 
 This validator is experimental.
 
-At least `data-url` and `color` formats are ignored. 
+- `data-url` and `color` formats are ignored.
+- By itself this validator does not support `undefined` values. And we don't
+have any additional logic to handle it in this adapter. So you should provide
+custom `merger` instance and/or use `emptyValue` options in your UI schema.
 
 :::
 

apps/docs/src/content/docs/validators/zod.mdx

@@ -50,11 +50,11 @@ References:
 
 ## Caveats
 
-If you using this library only for full form validation (without inputs validation mode)
+If you using this library only for full form validation (without fields validation mode)
 and your form does not have and `oneOf`, `anyOf`, `dependencies` `if` keywords or recursive references,
 you can use this library pretty safely.
 
-If you are using inputs validation mode then starting from this point
+If you are using fields validation mode then starting from this point
 internally we start to use `json-schema-to-zod`.
 So first of all, please read this warning [about using this library at runtime](https://github.com/StefanTerdell/json-schema-to-zod?tab=readme-ov-file#use-at-runtime).
 However, I believe you are still safe as only small leafy bits of the circuit are transformed with this approach.