👯‍♂️ support async defaultValues and form values update

.github/workflows/build-test.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Test
         run: |
           yarn test --ci
-          yarn tsd
+          yarn test:type
 
       - name: Bundle watch
         run: |

package.json

@@ -42,7 +42,7 @@
     "test:web": "TEST_ENV=web yarn test",
     "test:server": "TEST_ENV=server yarn test",
     "test:native": "TEST_ENV=native yarn test",
-    "tsd": "tsd src/__typetest__",
+    "test:type": "tsd src/__typetest__",
     "e2e": "cypress run",
     "e2e:watch": "cypress open",
     "api-extractor": "api-extractor run --local",

reports/api-extractor.md

@@ -54,6 +54,7 @@ export type Control<TFieldValues extends FieldValues = FieldValues, TContext = a
         action: boolean;
         watch: boolean;
     };
+    _reset: UseFormReset<TFieldValues>;
     _options: UseFormProps<TFieldValues, TContext>;
     _getDirty: GetIsDirty;
     _formState: FormState<TFieldValues>;
@@ -74,7 +75,7 @@ export type Control<TFieldValues extends FieldValues = FieldValues, TContext = a
 };
 
 // @public
-export const Controller: <TFieldValues extends FieldValues = FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>(props: ControllerProps<TFieldValues, TName>) => ReactElement<any, string | JSXElementConstructor<any>>;
+export const Controller: <TFieldValues extends FieldValues = FieldValues, TName extends Path<UnPackAsyncDefaultValues<TFieldValues>> = Path<UnPackAsyncDefaultValues<TFieldValues>>>(props: ControllerProps<TFieldValues, TName>) => ReactElement<any, string | JSXElementConstructor<any>>;
 
 // @public (undocumented)
 export type ControllerFieldState = {
@@ -181,10 +182,10 @@ export type FieldArrayMethodProps = {
 };
 
 // @public
-export type FieldArrayPath<TFieldValues extends FieldValues> = ArrayPath<TFieldValues>;
+export type FieldArrayPath<TFieldValues extends FieldValues> = ArrayPath<UnPackAsyncDefaultValues<TFieldValues>>;
 
 // @public
-export type FieldArrayPathValue<TFieldValues extends FieldValues, TFieldArrayPath extends FieldArrayPath<TFieldValues>> = PathValue<TFieldValues, TFieldArrayPath>;
+export type FieldArrayPathValue<TFieldValues extends FieldValues, TFieldArrayPath extends FieldArrayPath<TFieldValues>> = PathValue<UnPackAsyncDefaultValues<TFieldValues>, TFieldArrayPath>;
 
 // @public
 export type FieldArrayWithId<TFieldValues extends FieldValues = FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>, TKeyName extends string = 'id'> = FieldArray<TFieldValues, TFieldArrayName> & Record<TKeyName, string>;
@@ -202,7 +203,7 @@ export type FieldError = {
 };
 
 // @public (undocumented)
-export type FieldErrors<T extends FieldValues = FieldValues> = Partial<FieldValues extends IsAny<FieldValues> ? any : FieldErrorsImpl<DeepRequired<T>>>;
+export type FieldErrors<T extends FieldValues = FieldValues> = Partial<FieldValues extends IsAny<FieldValues> ? any : FieldErrorsImpl<DeepRequired<UnPackAsyncDefaultValues<T>>>>;
 
 // @public (undocumented)
 export type FieldErrorsImpl<T extends FieldValues = FieldValues> = {
@@ -216,15 +217,15 @@ export type FieldName<TFieldValues extends FieldValues> = IsFlatObject<TFieldVal
 export type FieldNamesMarkedBoolean<TFieldValues extends FieldValues> = DeepMap<DeepPartial<TFieldValues>, boolean>;
 
 // @public
-export type FieldPath<TFieldValues extends FieldValues> = Path<TFieldValues>;
+export type FieldPath<TFieldValues extends FieldValues> = Path<UnPackAsyncDefaultValues<TFieldValues>>;
 
 // @public
 export type FieldPathByValue<TFieldValues extends FieldValues, TValue> = {
     [Key in FieldPath<TFieldValues>]: FieldPathValue<TFieldValues, Key> extends TValue ? Key : never;
 }[FieldPath<TFieldValues>];
 
 // @public
-export type FieldPathValue<TFieldValues extends FieldValues, TFieldPath extends FieldPath<TFieldValues>> = PathValue<TFieldValues, TFieldPath>;
+export type FieldPathValue<TFieldValues extends FieldValues, TFieldPath extends FieldPath<TFieldValues>> = PathValue<UnPackAsyncDefaultValues<TFieldValues>, TFieldPath>;
 
 // @public
 export type FieldPathValues<TFieldValues extends FieldValues, TPath extends FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[]> = {} & {
@@ -257,9 +258,9 @@ export type FormState<TFieldValues extends FieldValues> = {
     isValidating: boolean;
     isValid: boolean;
     submitCount: number;
-    defaultValues?: Readonly<DeepPartial<TFieldValues>> | TFieldValues;
-    dirtyFields: Partial<Readonly<FieldNamesMarkedBoolean<TFieldValues>>>;
-    touchedFields: Partial<Readonly<FieldNamesMarkedBoolean<TFieldValues>>>;
+    defaultValues?: UnPackAsyncDefaultValues<TFieldValues> | undefined | Readonly<DeepPartial<TFieldValues>>;
+    dirtyFields: Partial<Readonly<FieldNamesMarkedBoolean<UnPackAsyncDefaultValues<TFieldValues>>>>;
+    touchedFields: Partial<Readonly<FieldNamesMarkedBoolean<UnPackAsyncDefaultValues<TFieldValues>>>>;
     errors: FieldErrors<TFieldValues>;
 };
 
@@ -486,6 +487,9 @@ export type TriggerConfig = Partial<{
     shouldFocus: boolean;
 }>;
 
+// @public (undocumented)
+export type UnPackAsyncDefaultValues<TFieldValues> = TFieldValues extends () => Promise<infer U> ? U : TFieldValues;
+
 // @public @deprecated (undocumented)
 export type UnpackNestedValue<T> = T extends NestedValue<infer U> ? U : T extends Date | FileList | File | Blob ? T : T extends object ? {
     [K in keyof T]: UnpackNestedValue<T[K]>;
@@ -589,10 +593,12 @@ export type UseFormGetValues<TFieldValues extends FieldValues> = {
 export type UseFormHandleSubmit<TFieldValues extends FieldValues> = (onValid: SubmitHandler<TFieldValues>, onInvalid?: SubmitErrorHandler<TFieldValues>) => (e?: React_2.BaseSyntheticEvent) => Promise<void>;
 
 // @public (undocumented)
-export type UseFormProps<TFieldValues extends FieldValues = FieldValues, TContext = any> = Partial<{
+export type UseFormProps<TFieldValues extends UnPackAsyncDefaultValues<FieldValues> = UnPackAsyncDefaultValues<FieldValues>, TContext = any> = Partial<{
     mode: Mode;
     reValidateMode: Exclude<Mode, 'onTouched' | 'all'>;
-    defaultValues: DefaultValues<TFieldValues>;
+    defaultValues: DefaultValues<TFieldValues> | AsyncDefaultValues<TFieldValues>;
+    values: TFieldValues;
+    resetOptions: Parameters<UseFormReset<TFieldValues>>[1];
     resolver: Resolver<TFieldValues, TContext>;
     context: TContext;
     shouldFocusError: boolean;
@@ -771,7 +777,8 @@ export type WatchObserver<TFieldValues extends FieldValues> = (value: DeepPartia
 
 // Warnings were encountered during analysis:
 //
-// src/types/form.ts:418:3 - (ae-forgotten-export) The symbol "Subscription" needs to be exported by the entry point index.d.ts
+// src/types/form.ts:97:3 - (ae-forgotten-export) The symbol "AsyncDefaultValues" needs to be exported by the entry point index.d.ts
+// src/types/form.ts:431:3 - (ae-forgotten-export) The symbol "Subscription" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

src/utils/isPlainObject.test.ts → src/__tests__/isPlainObject.test.ts

@@ -1,4 +1,4 @@
-import isPlainObject from './isPlainObject';
+import isPlainObject from '../utils/isPlainObject';
 
 describe('isPlainObject', function () {
   it('should identify plan object or not', function () {
@@ -12,11 +12,11 @@ describe('isPlainObject', function () {
     expect(isPlainObject(Object.create(Object.prototype))).toBeTruthy();
     expect(isPlainObject({ foo: 'bar' })).toBeTruthy();
     expect(isPlainObject({})).toBeTruthy();
-    expect(isPlainObject(Object.create(null))).toBeTruthy();
-    expect(!isPlainObject(/foo/)).toBeFalsy();
-    expect(!isPlainObject(function () {})).toBeFalsy();
-    expect(!isPlainObject(['foo', 'bar'])).toBeFalsy();
-    expect(!isPlainObject([])).toBeFalsy();
-    expect(!isPlainObject(test)).toBeFalsy();
+    expect(isPlainObject(Object.create(null))).toBeFalsy();
+    expect(!isPlainObject(/foo/)).toBeTruthy();
+    expect(!isPlainObject(function () {})).toBeTruthy();
+    expect(!isPlainObject(['foo', 'bar'])).toBeTruthy();
+    expect(!isPlainObject([])).toBeTruthy();
+    expect(!isPlainObject(test)).toBeTruthy();
   });
 });

src/__tests__/type.test.tsx

@@ -6,10 +6,13 @@ import {
   FieldPath,
   FieldValues,
   Path,
+  PathValue,
   UseFormRegister,
 } from '../types';
+import { useController } from '../useController';
 import { useFieldArray } from '../useFieldArray';
 import { useForm } from '../useForm';
+import { useFormState } from '../useFormState';
 import { useWatch } from '../useWatch';
 
 test('should not throw type error with path name', () => {
@@ -265,13 +268,127 @@ test('should support nullable field errors', () => {
   errors;
 });
 
+test('should work with generic component path assertion', () => {
+  function App<T extends FieldValues>() {
+    const { register } = useForm<T>();
+    const FIELD_DATA_EXTENSION = '__data';
+    const item = {
+      value: 'data',
+    };
+
+    register(`FieldName${FIELD_DATA_EXTENSION}` as FieldPath<T>, {
+      value: item as PathValue<T, Path<T>>,
+    });
+
+    return null;
+  }
+
+  App;
+});
+
+test('should infer async default values', () => {
+  function App() {
+    const {
+      register,
+      control,
+      formState,
+      setValue,
+      reset,
+      watch,
+      getValues,
+      getFieldState,
+      clearErrors,
+      unregister,
+      setFocus,
+      trigger,
+      setError,
+    } = useForm({
+      defaultValues: async () => {
+        return {
+          test: 'test',
+          test1: {
+            nested: 'test',
+          },
+          fieldArray: [{ test: '' }],
+        };
+      },
+    });
+    useFieldArray({
+      name: 'fieldArray' as const,
+      control,
+    });
+    useController({
+      name: 'test1.nested',
+      control,
+    });
+    useWatch({
+      name: 'test1',
+      control,
+    });
+    useFormState({
+      name: 'fieldArray',
+      control,
+    });
+
+    setValue('test', 'data');
+    setValue('test1.nested', 'data');
+    reset({
+      test: 'test',
+      test1: 'test1',
+    });
+
+    watch('test');
+    watch('test1.nested');
+
+    getValues('test');
+    getValues('test1.nested');
+
+    getFieldState('test');
+    getFieldState('test1.nested');
+
+    clearErrors('test');
+    clearErrors('test1.nested');
+
+    unregister('test');
+    unregister('test1.nested');
+
+    setFocus('test');
+    setFocus('test1.nested');
+
+    trigger('test');
+    trigger('test1.nested');
+
+    setError('test', { type: 'test ' });
+    setError('test1.nested', { type: 'test ' });
+
+    return (
+      <form>
+        <input {...register('test')} />
+        <Controller render={() => <input />} name={'test1'} control={control} />
+        <p>{formState.errors?.test?.message}</p>
+        <p>{formState.errors?.test1?.message}</p>
+        <p>{formState.touchedFields.test}</p>
+        <p>{formState.touchedFields.test1?.nested}</p>
+        <p>{formState.dirtyFields.test}</p>
+        <p>{formState.dirtyFields.test1?.nested}</p>
+      </form>
+    );
+  }
+
+  App;
+});
+
 test('should provide correct type for validate function with useFieldArray', () => {
   const App = () => {
     const { control } = useForm<{
       test: {
         first: string;
         last: string;
       }[];
+      test1: {
+        first: string;
+        last: string;
+      }[];
     }>({
       defaultValues: {
         test: [
@@ -291,6 +408,17 @@ test('should provide correct type for validate function with useFieldArray', ()
         },
       },
     });
+    useFieldArray({
+      control,
+      name: 'test1',
+      rules: {
+        validate: {
+          test: (data) => {
+            return !!data.find((test) => test.first && test.last);
+          },
+        },
+      },
+    });
 
     return null;
   };