feat(manager): prepare API for rendering based on state changes

Author: rvsia

packages/form-state-manager/src/tests/performance/field-render-cycle.test.js

@@ -13,8 +13,8 @@ const Field = ({ fieldSpy, ...props }) => {
   return <input id={id} {...input} {...rest} />;
 };
 
-const TestSubject = ({ fieldSpy }) => (
-  <FormStateManager onSubmit={jest.fn()}>
+const TestSubject = ({ fieldSpy, subscription }) => (
+  <FormStateManager onSubmit={jest.fn()} subscription={subscription}>
     {() => {
       return (
         <form onSubmit={jest.fn()}>
@@ -30,7 +30,7 @@ const TestSubject = ({ fieldSpy }) => (
 describe('useField rendering cycle', () => {
   it('should render first field twice and second once', () => {
     const fieldSpy = jest.fn();
-    const wrapper = mount(<TestSubject fieldSpy={fieldSpy} />);
+    const wrapper = mount(<TestSubject fieldSpy={fieldSpy} subscription={{}} />);
     /**
      * Initial mount render of both fields
      */
@@ -52,4 +52,22 @@ describe('useField rendering cycle', () => {
     expect(fieldSpy.mock.calls[0][0]).toEqual('one');
     expect(fieldSpy.mock.calls[1][0]).toEqual('one');
   });
+
+  it('should render both fields when subscription {values: true} on change', () => {
+    const fieldSpy = jest.fn();
+    const wrapper = mount(<TestSubject fieldSpy={fieldSpy} subscription={{ values: true }} />);
+
+    expect(fieldSpy).toHaveBeenCalledTimes(2);
+    expect(fieldSpy.mock.calls[0][0]).toEqual('one');
+    expect(fieldSpy.mock.calls[1][0]).toEqual('two');
+    fieldSpy.mockReset();
+
+    act(() => {
+      wrapper.find('input#one').prop('onChange')({ target: { value: 'foo', type: 'text' } });
+    });
+
+    expect(fieldSpy).toHaveBeenCalledTimes(2);
+    expect(fieldSpy.mock.calls[0][0]).toEqual('one');
+    expect(fieldSpy.mock.calls[1][0]).toEqual('two');
+  });
 });

packages/form-state-manager/src/tests/utils/find-difference.test.js

@@ -0,0 +1,58 @@
+import findDifference from '../../utils/find-difference';
+
+describe('findDifference', () => {
+  let oldState;
+  let newState;
+
+  it('should skip functions', () => {
+    oldState = {
+      pristine: false,
+      function: () => 'bbb'
+    };
+
+    newState = {
+      pristine: true,
+      function: () => 'aaa'
+    };
+
+    expect(findDifference(oldState, newState)).toEqual(['pristine']);
+  });
+
+  it('should skip keys from denyList', () => {
+    oldState = {
+      fieldListeners: { name: 'pepa' }
+    };
+
+    newState = {
+      fieldListeners: { name: 'john' }
+    };
+
+    expect(findDifference(oldState, newState)).toEqual([]);
+  });
+
+  it('should find different keys', () => {
+    oldState = {
+      pristine: true,
+      dirty: false,
+      values: {
+        nested: 'a'
+      },
+      initialValues: {
+        nested: 'b'
+      }
+    };
+
+    newState = {
+      pristine: false,
+      dirty: false,
+      values: {
+        nested: 'aa'
+      },
+      initialValues: {
+        nested: 'b'
+      }
+    };
+
+    expect(findDifference(oldState, newState)).toEqual(['pristine', 'values']);
+  });
+});

packages/form-state-manager/src/utils/find-difference.ts

@@ -0,0 +1,22 @@
+import { ManagerState } from '../types/manager-api';
+import isEqual from 'lodash/isEqual';
+
+const denyList = ['fieldListeners'];
+
+function findDifference(oldState: ManagerState, newState: ManagerState): Array<keyof ManagerState> {
+  const changed: Array<keyof ManagerState> = [];
+
+  const keys = Object.keys(oldState)
+    .map((key) => (typeof oldState[key as keyof ManagerState] !== 'function' && !denyList.includes(key) ? key : undefined))
+    .filter(Boolean);
+
+  keys.forEach((key) => {
+    if (key && !isEqual(oldState[key as keyof ManagerState], newState[key as keyof ManagerState])) {
+      changed.push(key as keyof ManagerState);
+    }
+  });
+
+  return changed;
+}
+
+export default findDifference;

packages/form-state-manager/src/utils/manager-api.ts

@@ -26,6 +26,7 @@ import FieldConfig, { IsEqual } from '../types/field-config';
 import { Meta } from '../types/use-field';
 import { formLevelValidator, isPromise } from './validate';
 import { FormValidator, FormLevelError, Validator } from '../types/validate';
+import findDifference from './find-difference';
 
 export const defaultIsEqual = (a: any, b: any) => a === b;
 
@@ -418,17 +419,24 @@ const createManagerApi: CreateManagerApi = ({
     });
   }
 
-  function change(name: string, value?: any): void {
-    set(state.values, name, value);
-    state.visited[name] = true;
-    state.modified[name] = true;
-    state.modifiedSinceLastSubmit = true;
-    state.dirtySinceLastSubmit = true;
-    state.dirtyFields[name] = true;
-    state.dirtyFieldsSinceLastSubmit[name] = true;
+  function prepareRerender() {
+    const snapshot = cloneDeep(state);
+
+    return (subscribeTo: Array<string> = []) => rerender([...findDifference(snapshot, state), ...subscribeTo]);
+  }
 
+  function change(name: string, value?: any): void {
     // TODO modify all affected field state variables
     batch(() => {
+      const render = prepareRerender();
+      set(state.values, name, value);
+      state.visited[name] = true;
+      state.modified[name] = true;
+      state.modifiedSinceLastSubmit = true;
+      state.dirtySinceLastSubmit = true;
+      state.dirtyFields[name] = true;
+      state.dirtyFieldsSinceLastSubmit[name] = true;
+
       const allIsEqual: Array<IsEqual> = state.fieldListeners[name]
         ? Object.values(state.fieldListeners[name].fields)
             .map(({ isEqual }) => isEqual as IsEqual, [])
@@ -457,11 +465,14 @@ const createManagerApi: CreateManagerApi = ({
       if (config.validate) {
         validateForm(config.validate);
       }
+
+      render();
     });
   }
 
   function focus(name: string): void {
     state.active = name;
+    state.visited[name] = true;
     setFieldState(name, (prevState) => ({ ...prevState, meta: { ...prevState.meta, active: true } }));
   }