From 3d103af9049194c9866b52b130ec29b70740e571 Mon Sep 17 00:00:00 2001
From: Abdelrahman Awad <logaretm1@gmail.com>
Date: Fri, 16 Aug 2024 01:27:26 +0300
Subject: [PATCH] feat: added support for output merging

---
 eslint.config.js                              |  1 +
 packages/core/src/types/forms.ts              | 24 ++++-
 packages/core/src/useForm/useForm.ts          |  8 +-
 packages/core/src/useForm/useFormActions.ts   | 11 +--
 .../core/src/useFormField/useFormField.ts     | 21 +++-
 .../core/src/useFormGroup/useFormGroup.ts     | 28 ++++--
 .../core/src/validation/useInputValidity.ts   |  7 +-
 .../src/validation/useValidationProvider.ts   | 99 +++++++++++++++----
 packages/playground/src/App.vue               | 37 ++++---
 9 files changed, 174 insertions(+), 62 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index af97e02c..aa971ba5 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -18,6 +18,7 @@ export default tseslint.config(
       '@typescript-eslint/no-use-before-define': 'off',
       '@typescript-eslint/explicit-module-boundary-types': 'off',
       '@typescript-eslint/no-explicit-any': 'warn',
+      'no-console': 'error',
     },
   },
   {
diff --git a/packages/core/src/types/forms.ts b/packages/core/src/types/forms.ts
index 52f9c60b..86cb6402 100644
--- a/packages/core/src/types/forms.ts
+++ b/packages/core/src/types/forms.ts
@@ -2,6 +2,7 @@ import { Schema, Simplify } from 'type-fest';
 import { FormObject } from './common';
 import { Path } from './paths';
 import { TypedSchemaError } from './typedSchema';
+import { FormValidationMode } from '@core/useForm/formContext';
 
 export type TouchedSchema<TForm extends FormObject> = Simplify<Schema<TForm, boolean>>;
 
@@ -9,7 +10,28 @@ export type DisabledSchema<TForm extends FormObject> = Partial<Record<Path<TForm
 
 export type ErrorsSchema<TForm extends FormObject> = Partial<Record<Path<TForm>, string[]>>;
 
-export type ValidationResult = {
+type BaseValidationResult = {
   isValid: boolean;
   errors: TypedSchemaError[];
 };
+
+export interface ValidationResult<TValue = unknown> extends BaseValidationResult {
+  type: 'FIELD';
+  output: TValue;
+  path: string;
+}
+
+export interface GroupValidationResult<TOutput extends FormObject = FormObject> extends BaseValidationResult {
+  type: 'GROUP';
+  path: string;
+  output: TOutput;
+  mode: FormValidationMode;
+}
+
+export interface FormValidationResult<TOutput extends FormObject = FormObject> extends BaseValidationResult {
+  type: 'FORM';
+  output: TOutput;
+  mode: FormValidationMode;
+}
+
+export type AnyValidationResult = GroupValidationResult | ValidationResult;
diff --git a/packages/core/src/useForm/useForm.ts b/packages/core/src/useForm/useForm.ts
index 1ba4cd2a..1bcbdc46 100644
--- a/packages/core/src/useForm/useForm.ts
+++ b/packages/core/src/useForm/useForm.ts
@@ -10,10 +10,12 @@ import {
   Path,
   TypedSchema,
   ValidationResult,
+  FormValidationResult,
+  GroupValidationResult,
 } from '../types';
 import { createFormContext, BaseFormContext } from './formContext';
 import { FormTransactionManager, useFormTransactions } from './useFormTransactions';
-import { FormValidationResult, useFormActions } from './useFormActions';
+import { useFormActions } from './useFormActions';
 import { useFormSnapshots } from './formSnapshot';
 import { findLeaf } from '../utils/path';
 
@@ -29,7 +31,9 @@ export interface FormContext<TForm extends FormObject = FormObject, TOutput exte
     FormTransactionManager<TForm> {
   requestValidation(): Promise<FormValidationResult<TOutput>>;
   onSubmitAttempt(cb: () => void): void;
-  onValidationDispatch(cb: (enqueue: (promise: Promise<ValidationResult>) => void) => void): void;
+  onValidationDispatch(
+    cb: (enqueue: (promise: Promise<ValidationResult | GroupValidationResult>) => void) => void,
+  ): void;
 }
 
 export const FormKey: InjectionKey<FormContext<any>> = Symbol('Formwerk FormKey');
diff --git a/packages/core/src/useForm/useFormActions.ts b/packages/core/src/useForm/useFormActions.ts
index 80f9f6bb..ffe42d2e 100644
--- a/packages/core/src/useForm/useFormActions.ts
+++ b/packages/core/src/useForm/useFormActions.ts
@@ -2,15 +2,15 @@ import { shallowRef } from 'vue';
 import {
   DisabledSchema,
   FormObject,
+  FormValidationResult,
   MaybeAsync,
   Path,
   TouchedSchema,
   TypedSchema,
   TypedSchemaError,
-  ValidationResult,
 } from '../types';
 import { createEventDispatcher } from '../utils/events';
-import { BaseFormContext, FormValidationMode, SetValueOptions } from './formContext';
+import { BaseFormContext, SetValueOptions } from './formContext';
 import { unsetPath } from '../utils/path';
 import { useValidationProvider } from '../validation/useValidationProvider';
 
@@ -25,11 +25,6 @@ export interface FormActionsOptions<TForm extends FormObject = FormObject, TOutp
   disabled: DisabledSchema<TForm>;
 }
 
-export interface FormValidationResult<TOutput extends FormObject = FormObject> extends ValidationResult {
-  output: TOutput;
-  mode: FormValidationMode;
-}
-
 export function useFormActions<TForm extends FormObject = FormObject, TOutput extends FormObject = TForm>(
   form: BaseFormContext<TForm>,
   { disabled, schema }: FormActionsOptions<TForm, TOutput>,
@@ -40,7 +35,7 @@ export function useFormActions<TForm extends FormObject = FormObject, TOutput ex
     validate: _validate,
     onValidationDispatch,
     defineValidationRequest,
-  } = useValidationProvider({ schema, getValues: () => form.getValues() });
+  } = useValidationProvider({ schema, getValues: () => form.getValues(), type: 'FORM' });
   const requestValidation = defineValidationRequest(updateValidationStateFromResult);
 
   function handleSubmit<TReturns>(onSuccess: (values: TOutput) => MaybeAsync<TReturns>) {
diff --git a/packages/core/src/useFormField/useFormField.ts b/packages/core/src/useFormField/useFormField.ts
index c50a7384..91e962b4 100644
--- a/packages/core/src/useFormField/useFormField.ts
+++ b/packages/core/src/useFormField/useFormField.ts
@@ -75,21 +75,32 @@ export function useFormField<TValue = unknown>(opts?: Partial<FormFieldOptions<T
     });
   }
 
-  async function validate(mutate?: boolean) {
+  function createValidationResult(result: Omit<ValidationResult, 'type' | 'path'>): ValidationResult {
+    return {
+      type: 'FIELD',
+      path: getPath() || '',
+      ...result,
+    };
+  }
+
+  async function validate(mutate?: boolean): Promise<ValidationResult> {
     const schema = opts?.schema;
     if (!schema) {
-      return Promise.resolve({ isValid: true, errors: [] });
+      return Promise.resolve(
+        createValidationResult({ isValid: true, errors: [], output: cloneDeep(fieldValue.value) }),
+      );
     }
 
-    const { errors } = await schema.parse(fieldValue.value as TValue);
+    const { errors, output } = await schema.parse(fieldValue.value as TValue);
     if (mutate) {
       setErrors(errors.map(e => e.messages).flat());
     }
 
-    return {
+    return createValidationResult({
       isValid: errors.length === 0,
+      output,
       errors: errors.map(e => ({ messages: e.messages, path: getPath() || e.path })),
-    };
+    });
   }
 
   const field: FormField<TValue> = {
diff --git a/packages/core/src/useFormGroup/useFormGroup.ts b/packages/core/src/useFormGroup/useFormGroup.ts
index e4930075..c8d9c9b6 100644
--- a/packages/core/src/useFormGroup/useFormGroup.ts
+++ b/packages/core/src/useFormGroup/useFormGroup.ts
@@ -14,11 +14,18 @@ import {
 } from 'vue';
 import { useLabel } from '../a11y/useLabel';
 import { FieldTypePrefixes } from '../constants';
-import { AriaLabelableProps, AriaLabelProps, FormObject, Reactivify, TypedSchema, ValidationResult } from '../types';
+import {
+  AriaLabelableProps,
+  AriaLabelProps,
+  FormObject,
+  GroupValidationResult,
+  Reactivify,
+  TypedSchema,
+  ValidationResult,
+} from '../types';
 import { isEqual, normalizeProps, useUniqId, warn, withRefCapture } from '../utils/common';
 import { FormKey } from '../useForm';
 import { useValidationProvider } from '../validation/useValidationProvider';
-import { FormValidationResult } from '../useForm/useFormActions';
 
 export interface FormGroupProps<TInput extends FormObject = FormObject, TOutput extends FormObject = TInput> {
   name: string;
@@ -34,7 +41,7 @@ interface GroupProps extends AriaLabelableProps {
 interface FormGroupContext<TOutput extends FormObject = FormObject> {
   prefixPath: (path: string | undefined) => string | undefined;
   onValidationDispatch(cb: (enqueue: (promise: Promise<ValidationResult>) => void) => void): void;
-  requestValidation(): Promise<FormValidationResult<TOutput>>;
+  requestValidation(): Promise<GroupValidationResult<TOutput>>;
 }
 
 export const FormGroupKey: InjectionKey<FormGroupContext> = Symbol('FormGroup');
@@ -45,11 +52,14 @@ export function useFormGroup<TInput extends FormObject = FormObject, TOutput ext
 ) {
   const id = useUniqId(FieldTypePrefixes.FormGroup);
   const props = normalizeProps(_props, ['schema']);
+  const getPath = () => toValue(props.name);
   const groupRef = elementRef || shallowRef<HTMLInputElement>();
   const form = inject(FormKey, null);
   const { validate, onValidationDispatch, defineValidationRequest } = useValidationProvider({
-    schema: props.schema,
     getValues,
+    getPath,
+    schema: props.schema,
+    type: 'GROUP',
   });
 
   const requestValidation = defineValidationRequest(({ errors }) => {
@@ -87,20 +97,20 @@ export function useFormGroup<TInput extends FormObject = FormObject, TOutput ext
   const FormGroup = createInlineFormGroupComponent({ groupProps, labelProps });
 
   function getValues() {
-    return form?.getFieldValue(toValue(props.name)) ?? {};
+    return form?.getFieldValue(getPath()) ?? {};
   }
 
   function getErrors() {
-    const path = toValue(props.name);
+    const path = getPath();
     const allErrors = form?.getErrors() || [];
 
     return allErrors.filter(e => e.path.startsWith(path));
   }
 
   const isValid = computed(() => getErrors().length === 0);
-  const isTouched = computed(() => form?.isFieldTouched(toValue(props.name)) ?? false);
+  const isTouched = computed(() => form?.isFieldTouched(getPath()) ?? false);
   const isDirty = computed(() => {
-    const path = toValue(props.name);
+    const path = getPath();
 
     return !isEqual(getValues(), form?.getFieldOriginalValue(path) ?? {});
   });
@@ -117,7 +127,7 @@ export function useFormGroup<TInput extends FormObject = FormObject, TOutput ext
   }
 
   function prefixPath(path: string | undefined) {
-    return prefixGroupPath(toValue(props.name), path);
+    return prefixGroupPath(getPath(), path);
   }
 
   const ctx: FormGroupContext = {
diff --git a/packages/core/src/validation/useInputValidity.ts b/packages/core/src/validation/useInputValidity.ts
index a9fb0b97..a793b335 100644
--- a/packages/core/src/validation/useInputValidity.ts
+++ b/packages/core/src/validation/useInputValidity.ts
@@ -3,7 +3,7 @@ import { useEventListener } from '../helpers/useEventListener';
 import { FormKey } from '../useForm';
 import { Maybe, ValidationResult } from '../types';
 import { FormField } from '../useFormField';
-import { normalizeArrayable } from '../utils/common';
+import { cloneDeep, normalizeArrayable } from '../utils/common';
 import { FormGroupKey } from '../useFormGroup';
 
 interface InputValidityOptions {
@@ -15,7 +15,7 @@ interface InputValidityOptions {
 export function useInputValidity(opts: InputValidityOptions) {
   const form = inject(FormKey, null);
   const formGroup = inject(FormGroupKey, null);
-  const { setErrors, errorMessage, schema, validate: validateField, getPath } = opts.field;
+  const { setErrors, errorMessage, schema, validate: validateField, getPath, fieldValue } = opts.field;
   const validityDetails = shallowRef<ValidityState>();
   const validationMode = form?.getValidationMode() ?? 'native';
   useMessageCustomValiditySync(errorMessage, opts.inputRef);
@@ -28,6 +28,9 @@ export function useInputValidity(opts: InputValidityOptions) {
     }
 
     return {
+      type: 'FIELD',
+      path: getPath() || '',
+      output: cloneDeep(fieldValue.value),
       isValid: !messages.length,
       errors: [{ messages, path: getPath() || '' }],
     };
diff --git a/packages/core/src/validation/useValidationProvider.ts b/packages/core/src/validation/useValidationProvider.ts
index 5686b275..ce36d47e 100644
--- a/packages/core/src/validation/useValidationProvider.ts
+++ b/packages/core/src/validation/useValidationProvider.ts
@@ -1,27 +1,44 @@
-import { FormObject, TypedSchema, ValidationResult } from '../types';
-import { FormValidationResult } from '../useForm/useFormActions';
+import {
+  AnyValidationResult,
+  FormObject,
+  FormValidationResult,
+  GroupValidationResult,
+  TypedSchema,
+  ValidationResult,
+} from '../types';
 import { batchAsync, cloneDeep, withLatestCall } from '../utils/common';
 import { createEventDispatcher } from '../utils/events';
 import { SCHEMA_BATCH_MS } from '../constants';
+import { setInPath } from '@core/utils/path';
 
-interface ValidationProviderOptions<TInput extends FormObject, TOutput extends FormObject = TInput> {
+type AggregatorResult<TOutput extends FormObject> = FormValidationResult<TOutput> | GroupValidationResult<TOutput>;
+
+interface ValidationProviderOptions<
+  TInput extends FormObject,
+  TOutput extends FormObject,
+  TType extends AggregatorResult<TOutput>['type'],
+> {
+  type: TType;
   schema?: TypedSchema<TInput, TOutput>;
   getValues: () => TInput;
+  getPath?: () => string;
 }
 
-export function useValidationProvider<TInput extends FormObject, TOutput extends FormObject = TInput>({
-  schema,
-  getValues,
-}: ValidationProviderOptions<TInput, TOutput>) {
+export function useValidationProvider<
+  TInput extends FormObject,
+  TOutput extends FormObject,
+  TType extends AggregatorResult<TOutput>['type'],
+  TResult extends AggregatorResult<TOutput> & { type: TType },
+>({ schema, getValues, type, getPath }: ValidationProviderOptions<TInput, TOutput, TType>) {
   const [dispatchValidate, onValidationDispatch] =
     createEventDispatcher<(pending: Promise<ValidationResult>) => void>('validate');
 
   /**
    * Validates but tries to not mutate anything if possible.
    */
-  async function validate(): Promise<FormValidationResult<TOutput>> {
-    const validationQueue: Promise<ValidationResult>[] = [];
-    const enqueue = (promise: Promise<ValidationResult>) => validationQueue.push(promise);
+  async function validate(): Promise<TResult> {
+    const validationQueue: Promise<AnyValidationResult>[] = [];
+    const enqueue = (promise: Promise<AnyValidationResult>) => validationQueue.push(promise);
     // This is meant to trigger a signal for all fields that can validate themselves to do so.
     // Native validation is sync so no need to wait for pending validators.
     // But field-level and group-level validations are async, so we need to wait for them.
@@ -32,26 +49,24 @@ export function useValidationProvider<TInput extends FormObject, TOutput extends
     // If we are using native validation, then we don't stop the state mutation
     // Because it already has happened, since validations are sourced from the fields.
     if (!schema) {
-      return {
-        mode: 'native',
+      return createValidationResult({
         isValid: !fieldErrors.length,
         errors: fieldErrors,
-        output: cloneDeep(getValues() as unknown as TOutput),
-      };
+        output: mergeOutputs(getValues() as unknown as TOutput, results),
+      });
     }
 
     const { errors, output } = await schema.parse(getValues());
     const allErrors = [...errors, ...fieldErrors];
 
-    return {
-      mode: 'schema',
+    return createValidationResult({
       isValid: !allErrors.length,
       errors: allErrors,
-      output: cloneDeep(output ?? (getValues() as unknown as TOutput)),
-    };
+      output: mergeOutputs(output ?? (getValues() as unknown as TOutput), results),
+    });
   }
 
-  function defineValidationRequest(mutator: (result: FormValidationResult<TOutput>) => void) {
+  function defineValidationRequest(mutator: (result: TResult) => void) {
     const requestValidation = withLatestCall(batchAsync(validate, SCHEMA_BATCH_MS), result => {
       mutator(result);
 
@@ -61,6 +76,52 @@ export function useValidationProvider<TInput extends FormObject, TOutput extends
     return requestValidation;
   }
 
+  function createValidationResult(result: Omit<AggregatorResult<TOutput>, 'mode' | 'type'>): TResult {
+    const base = {
+      output: result.output,
+      errors: result.errors,
+      isValid: result.isValid,
+    };
+
+    if (type === 'FORM') {
+      return {
+        type,
+        mode: schema ? 'schema' : 'native',
+        ...base,
+      } as TResult;
+    }
+
+    return {
+      type: 'GROUP',
+      path: getPath?.() || '',
+      mode: schema ? 'schema' : 'native',
+      ...base,
+    } as TResult;
+  }
+
+  function mergeOutputs(base: TOutput, results: (ValidationResult | GroupValidationResult)[]): TOutput {
+    const all = cloneDeep(base);
+    // Make sure we start with groups first since it may override indivdual fields
+    const sorted = [...results].sort((a, b) => {
+      if (a.type === b.type) {
+        return 0;
+      }
+
+      return a.type === 'FIELD' ? -1 : 1;
+    });
+
+    for (const result of sorted) {
+      // Pathless fields will be dropped
+      if (!result.path) {
+        continue;
+      }
+
+      setInPath(all, result.path, result.output);
+    }
+
+    return all;
+  }
+
   return {
     validate,
     onValidationDispatch,
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index 4fee262c..8783d373 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -3,17 +3,17 @@
     <InputText label="Email" name="email" type="email" :schema="defineSchema(z.string().email())" />
     <InputText label="Full Name" name="fullName" />
 
-  <FormGroup name="address" label="Shipping Address" :schema="groupSchema">
-    <InputText label="Address Line 1" name="street" />
+    <FormGroup name="address" label="Shipping Address" :schema="groupSchema">
+      <InputText label="Address Line 1" name="street" />
 
-    <div class="grid grid-cols-3 gap-4">
-      <InputText label="City" name="city" />
-      <InputText label="State" name="state" />
-    <InputText label="Zip" name="zip" />
-    </div>
-  </FormGroup>
+      <div class="grid grid-cols-3 gap-4">
+        <InputText label="City" name="city" />
+        <InputText label="State" name="state" />
+        <InputText label="Zip" name="zip" />
+      </div>
+    </FormGroup>
 
-    {{values }}
+    {{ values }}
 
     <button @click="onSubmit">Submit</button>
   </div>
@@ -26,13 +26,18 @@ import { useForm } from '@formwerk/core';
 import { defineSchema } from '@formwerk/schema-zod';
 import { z } from 'zod';
 
-const groupSchema = defineSchema(z.object({
-  street: z.string().min(1),
-  city: z.string().min(1),
-  state: z.string().min(1),
-
-  zip: z.preprocess((v) => Number(v), z.number().lte(1000).gte(100)),
-}));
+const groupSchema = defineSchema(
+  z.object({
+    street: z
+      .string()
+      .min(1)
+      .transform(v => `${v} St.`),
+    city: z.string().min(1),
+    state: z.string().min(1),
+
+    zip: z.preprocess(v => Number(v), z.number().lte(1000).gte(100)),
+  }),
+);
 
 const { getErrors, values, handleSubmit } = useForm({
   schema: defineSchema(