feat: 🎸 add Watch component to subscribe to fields (#21)

Author: SSHari

.changeset/cool-gorillas-work.md

@@ -0,0 +1,5 @@
+---
+'@deep-state/react-form': patch
+---
+
+Add Watch component to subscribe to fields

.changeset/fast-cycles-train.md

@@ -0,0 +1,5 @@
+---
+'@deep-state/react-form': patch
+---
+
+Add custom render prop for Field component

packages/deep-state-react-form/demo/index.tsx

@@ -186,11 +186,17 @@ function App() {
               cond: (data) => parseInt(data.fieldB.value as string) === 100,
               effects: { value: 'disable D', disabled: true },
             }),
+            build({
+              keys: ['_meta'],
+              cond: (data) =>
+                !data._meta.isValid && data._meta.errors.fieldA === '',
+              effects: {},
+            }),
           ],
         },
       }}
     >
-      {({ Field, Show }) => (
+      {({ Field, Show, Watch }) => (
         <>
           <Field field="randomizer" />
           <Field field="reset" />
@@ -212,6 +218,16 @@ function App() {
               </div>
             )}
           </Field>
+          <Watch keys={['fieldA', 'fieldB', '_meta']}>
+            {(props) => (
+              <>
+                <div>Watcher!</div>
+                <div>{props.fieldA.value}</div>
+                <div>{props.fieldB.value}</div>
+                <div>Is Valid: {props._meta.isValid.toString()}</div>
+              </>
+            )}
+          </Watch>
         </>
       )}
     </Form>

packages/deep-state-react-form/src/__tests__/DeepState.tsx

@@ -211,7 +211,69 @@ describe('Show', () => {
         </Form>,
       ),
     ).toThrowErrorMatchingInlineSnapshot(
-      '"To use the Show component. the Field key fake-field must be set in the <FormProvider> fields prop."',
+      '"To use the Show component, the field key `fake-field` must be set in the <FormProvider> fields prop."',
+    );
+  });
+});
+
+describe('Watch', () => {
+  it('should provide the child elements with access to the props for all keys', async () => {
+    render(
+      <Form
+        fields={{ name: { type: 'input', props: { value: 'I am an input!' } } }}
+      >
+        {({ Watch }) => (
+          <Watch keys={['name']}>{(props) => <>{props.name.value}</>}</Watch>
+        )}
+      </Form>,
+    );
+
+    expect(await screen.findByText(/i am an input!/i)).toBeInTheDocument();
+  });
+
+  it('should provide the child elements with access to the _meta key', async () => {
+    const { user } = render(
+      <Form
+        validateOnChange
+        validate={() => ({
+          isValid: false,
+          errors: { name: 'Name has an error!' },
+        })}
+        fields={{ name: { type: 'input', props: { label: 'Name' } } }}
+      >
+        {({ Field, Watch }) => (
+          <>
+            <Field field="name" />
+            <Watch keys={['_meta']}>
+              {(props) => (
+                <>{!props._meta.isValid && props._meta.errors.name}</>
+              )}
+            </Watch>
+          </>
+        )}
+      </Form>,
+    );
+
+    // Change input to trigger validation
+    await user.type(await screen.findByLabelText(/name/i), 'change');
+    expect(await screen.findByText(/name has an error!/i)).toBeInTheDocument();
+  });
+
+  it("should throw if a key that's not listed in the fields is used", () => {
+    Logger.suppressLogging();
+
+    expect(() =>
+      render(
+        <Form fields={{}}>
+          {({ Watch }) => (
+            // Disabled to test the error state
+            // @ts-expect-error
+            <Watch keys={['fake-field']}>{() => <></>}</Watch>
+          )}
+        </Form>,
+      ),
+    ).toThrowErrorMatchingInlineSnapshot(
+      '"To use the Watch component, the field key `fake-field` must be set in the <FormProvider> fields prop."',
     );
   });
 });

packages/deep-state-react-form/src/components.tsx

@@ -29,18 +29,67 @@ export type DeepStateShowComponent<
   ) => boolean;
 }) => React.ReactElement<any, any> | null;
 
+export type DeepStateWatchComponent<
+  FormFieldTypes extends InferForm<Form<any>> = InferForm<Form<any>>,
+  GraphTypes extends Record<keyof GraphTypes, keyof FormFieldTypes> = Record<
+    string,
+    keyof FormFieldTypes
+  >,
+> = <DependencyKeys extends Array<keyof GraphTypes | '_meta'>>(props: {
+  keys: DependencyKeys;
+  children: (
+    data: DependencyData<FormFieldTypes, GraphTypes, DependencyKeys>,
+  ) => React.ReactElement<any, any> | null;
+}) => React.ReactElement<any, any> | null;
+
 export const buildComponents = <Config extends Form<Record<string, any>>>(
   formConfig: Config,
 ) => {
+  const validateKeys = (
+    type: 'Field' | 'Show' | 'Watch',
+    keys: Array<string>,
+    keyToTypeMap: Record<string, string>,
+  ) => {
+    for (const key of keys) {
+      if (key === '_meta') continue;
+
+      if (!keyToTypeMap[key]) {
+        throw new Error(
+          `To use the ${type} component, the field key \`${key}\` must be set in the <FormProvider> fields prop.`,
+        );
+      }
+    }
+  };
+
+  const useWatchFields = <Keys extends Array<string | number | symbol>>(
+    keys: Keys,
+  ) => {
+    const selector = useDeepStateSelector(
+      ...keys.map<DeepStateSelector>((key) => {
+        return (state) => state[key as keyof typeof state];
+      }),
+    );
+
+    const { data, config } = useDeepState({ selector });
+
+    type DataMap = DependencyData<
+      InferForm<Form<any>>,
+      Record<string, keyof InferForm<Form<any>>>,
+      Keys
+    >;
+
+    const dataMap = keys.reduce<DataMap>(
+      (acc, key, index) => ({ ...acc, [key]: data[index] }),
+      {} as DataMap,
+    );
+
+    return { dataMap, config };
+  };
+
   const DeepStateField: DeepStateFieldComponent = ({ field, children }) => {
-    const {
-      data: props,
-      config: { keyToTypeMap },
-    } = useDeepState({
-      selector: (state) => state[field],
-    });
-
-    const fieldType = keyToTypeMap[field];
+    const { dataMap, config } = useWatchFields([field]);
+
+    const fieldType = config.keyToTypeMap[field];
     if (!fieldType) {
       throw new Error(
         `Field key ${field} must be set in the <FormProvider> fields prop.`,
@@ -50,42 +99,25 @@ export const buildComponents = <Config extends Form<Record<string, any>>>(
     const Component = formConfig._fields[fieldType]._component;
 
     return typeof children === 'function' ? (
-      children(props)
+      children(dataMap[field as keyof typeof dataMap])
     ) : (
       // TODO: Fix the type for Fields/BaseConfigs
       // StoreSnapshot is wrong
-      <Component {...(props as any)} />
+      <Component {...dataMap[field as keyof typeof dataMap]} />
     );
   };
 
   const DeepStateShow: DeepStateShowComponent = ({ children, keys, when }) => {
-    const selector = useDeepStateSelector(
-      ...keys.map<DeepStateSelector>((key) => {
-        return (state) => state[key as keyof typeof state];
-      }),
-    );
-
-    const {
-      data,
-      config: { keyToTypeMap },
-    } = useDeepState({ selector });
-
-    for (const key of keys) {
-      if (key === '_meta') continue;
-
-      if (!keyToTypeMap[key]) {
-        throw new Error(
-          `To use the Show component. the Field key ${key} must be set in the <FormProvider> fields prop.`,
-        );
-      }
-    }
-
-    const dataMap = keys.reduce<
-      DependencyData<Record<string, any>, Record<string, any>, Array<any>>
-    >((acc, key, index) => ({ ...acc, [key]: data[index] }), {});
-
+    const { dataMap, config } = useWatchFields(keys);
+    validateKeys('Show', keys, config.keyToTypeMap);
     return when(dataMap) ? children : null;
   };
 
-  return { Field: DeepStateField, Show: DeepStateShow };
+  const DeepStateWatch: DeepStateWatchComponent = ({ children, keys }) => {
+    const { dataMap, config } = useWatchFields(keys);
+    validateKeys('Watch', keys, config.keyToTypeMap);
+    return children(dataMap);
+  };
+
+  return { Field: DeepStateField, Show: DeepStateShow, Watch: DeepStateWatch };
 };

packages/deep-state-react-form/src/index.tsx

@@ -293,6 +293,7 @@ export const Builder = {
                 GraphTypes
               >,
               Show: components.Show,
+              Watch: components.Watch,
             })}
           </FormWrapper>
         </DeepStateContext.Provider>