@reactables/forms 0.5.4-alpha.0 → 0.6.0-alpha.0

package/dist/Models/Controls.d.ts

@@ -1,4 +1,3 @@
-import { Action } from '@reactables/core';
 import { AbstractControlConfig } from './Configs';
 import { FormErrors } from './FormErrors';
 import { ControlRef } from './ControlRef';
@@ -30,7 +29,12 @@ export interface FormControl<T> extends BaseControl<T>, Hub2Fields {
 }
 export interface BaseFormState<T> {
     form: BaseForm<T>;
-    action: Action<unknown>;
+    changedControls?: {
+        [key: string]: BaseControl<unknown>;
+    };
+    removedControls?: {
+        [key: string]: BaseControl<unknown>;
+    };
 }
 export interface BaseForm<T> {
     root?: BaseControl<T>;

package/dist/Reducers/Hub1/addControl.d.ts

@@ -1,4 +1,4 @@
 import { Action } from '@reactables/core';
 import { BaseFormState } from '../../Models/Controls';
 import { AddControl } from '../../Models/Payloads';
-export declare const addControl: <T>(state: BaseFormState<T>, action: Action<AddControl>) => BaseFormState<T>;
+export declare const addControl: <T>(state: BaseFormState<T>, action: Action<AddControl>, mergeChanges?: boolean) => BaseFormState<T>;

package/dist/Reducers/Hub1/markControlAsPristine.d.ts

@@ -1,4 +1,4 @@
 import { Action } from '@reactables/core';
 import { BaseFormState } from '../../Models/Controls';
 import { ControlRef } from '../../Models/ControlRef';
-export declare const markControlAsPristine: <T>({ form }: BaseFormState<T>, action: Action<ControlRef>) => BaseFormState<T>;
+export declare const markControlAsPristine: <T>(state: BaseFormState<T>, action: Action<ControlRef>, mergeChanges?: boolean) => BaseFormState<T>;

package/dist/Reducers/Hub1/markControlAsTouched.d.ts

@@ -1,4 +1,4 @@
 import { Action } from '@reactables/core';
 import { BaseFormState } from '../../Models/Controls';
 import { MarkTouched } from '../../Models/Payloads';
-export declare const markControlAsTouched: <T>({ form }: BaseFormState<T>, action: Action<MarkTouched>) => BaseFormState<T>;
+export declare const markControlAsTouched: <T>(state: BaseFormState<T>, action: Action<MarkTouched>, mergeChanges?: boolean) => BaseFormState<T>;

package/dist/Reducers/Hub1/markControlAsUntouched.d.ts

@@ -1,4 +1,4 @@
 import { Action } from '@reactables/core';
 import { BaseFormState } from '../../Models/Controls';
 import { ControlRef } from '../../Models/ControlRef';
-export declare const markControlAsUntouched: <T>({ form }: BaseFormState<T>, action: Action<ControlRef>) => BaseFormState<T>;
+export declare const markControlAsUntouched: <T>(state: BaseFormState<T>, action: Action<ControlRef>, mergeChanges?: boolean) => BaseFormState<T>;

package/dist/Reducers/Hub1/pushControl.d.ts

@@ -1,4 +1,4 @@
 import { Action } from '@reactables/core';
 import { BaseFormState } from '../../Models/Controls';
 import { AddControl } from '../../Models/Payloads';
-export declare const pushControl: <T>(state: BaseFormState<T>, action: Action<AddControl>) => BaseFormState<T>;
+export declare const pushControl: <T>(state: BaseFormState<T>, action: Action<AddControl>, mergeChanges?: boolean) => BaseFormState<T>;

package/dist/Reducers/Hub1/removeControl.d.ts

@@ -1,4 +1,4 @@
 import { Action } from '@reactables/core';
 import { BaseFormState } from '../../Models/Controls';
 import { ControlRef } from '../../Models/ControlRef';
-export declare const removeControl: <T>({ form }: BaseFormState<T>, action: Action<ControlRef>) => BaseFormState<T>;
+export declare const removeControl: <T>(state: BaseFormState<T>, action: Action<ControlRef>, mergeChanges?: boolean) => BaseFormState<T>;

package/dist/Reducers/Hub1/resetControl.d.ts

@@ -1,4 +1,4 @@
 import { Action } from '@reactables/core';
 import { BaseFormState } from '../../Models/Controls';
 import { ControlRef } from '../../Models/ControlRef';
-export declare const resetControl: <T>({ form }: BaseFormState<T>, action: Action<ControlRef>) => BaseFormState<T>;
+export declare const resetControl: <T>(state: BaseFormState<T>, action: Action<ControlRef>, mergeChanges?: boolean) => BaseFormState<T>;

package/dist/Reducers/Hub1/updateValues.d.ts

@@ -1,4 +1,4 @@
 import { Action } from '@reactables/core';
 import { BaseFormState } from '../../Models/Controls';
 import { ControlChange } from '../../Models/Payloads';
-export declare const updateValues: <T>({ form }: BaseFormState<T>, action: Action<ControlChange<unknown>>) => BaseFormState<T>;
+export declare const updateValues: <T>({ form, changedControls, removedControls }: BaseFormState<T>, action: Action<ControlChange<unknown>>, mergeChanges?: boolean) => BaseFormState<T>;

package/dist/Reducers/Hub2/{mergePushControl.d.ts → mergeControls.d.ts}

@@ -1,15 +1,14 @@
-import { Form, BaseForm } from '../../Models/Controls';
-import { ControlRef } from '../../Models/ControlRef';
+import { Form, FormControl, BaseFormState } from '../../Models/Controls';
 import { FormErrors } from '../../Models/FormErrors';
-export declare const mergePushControl: <T>(state: Form<T>, form: BaseForm<T>, controlRef: ControlRef) => {
-    [x: string]: import("../../Models/Controls").FormControl<unknown> | {
+export declare const mergeControls: <T>(state: Form<T>, { form, changedControls, removedControls }: BaseFormState<unknown>) => {
+    [x: string]: FormControl<unknown> | {
         errors: {
             [x: string]: boolean;
         };
         valid: boolean;
         childrenValid: boolean;
         pristineValue: unknown;
-        controlRef: ControlRef;
+        controlRef: import("../..").ControlRef;
         value: unknown;
         dirty: boolean;
         touched: boolean;
@@ -23,5 +22,5 @@ export declare const mergePushControl: <T>(state: Form<T>, form: BaseForm<T>, co
         };
         pending?: boolean;
     };
-    root?: import("../../Models/Controls").FormControl<unknown>;
+    root?: FormControl<unknown>;
 };

package/dist/RxForm/RxForm.d.ts

@@ -1,9 +1,9 @@
-import { Reactable, EffectsAndSources } from '@reactables/core';
+import { Reactable, EffectsAndSources, Action } from '@reactables/core';
 import { ControlChange, AddControl, MarkTouched, PushControl } from '../Models/Payloads';
 import { ControlRef } from '../Models';
 import { FormControlConfig, FormArrayConfig, FormGroupConfig, AbstractControlConfig } from '../Models/Configs';
 import { ValidatorFn, ValidatorAsyncFn } from '../Models/Validators';
-import { Form } from '../Models/Controls';
+import { Form, BaseFormState } from '../Models/Controls';
 type FbControl<T> = [T, (ValidatorFn | ValidatorFn[])?, (ValidatorAsyncFn | ValidatorAsyncFn[])?];
 export declare const control: <T>(config: FormControlConfig<T> | FbControl<T>) => FormControlConfig<T>;
 export declare const array: (config: FormArrayConfig) => FormArrayConfig;
@@ -18,5 +18,21 @@ export type RxFormActions = {
     markControlAsUntouched: (payload: ControlRef) => void;
     resetControl: (payload: ControlRef) => void;
 };
-export declare const build: (config: AbstractControlConfig, options?: EffectsAndSources) => Reactable<Form<unknown>, RxFormActions>;
+export interface FormReducers {
+    updateValues: <T>(state: BaseFormState<T>, action: Action<ControlChange<unknown>>) => BaseFormState<T>;
+    removeControl: <T>(state: BaseFormState<T>, action: Action<ControlRef>) => BaseFormState<T>;
+    pushControl: <T>(state: BaseFormState<T>, action: Action<PushControl>) => BaseFormState<T>;
+    addControl: <T>(state: BaseFormState<T>, action: Action<AddControl>) => BaseFormState<T>;
+    markControlAsPristine: <T>(state: BaseFormState<T>, action: Action<ControlRef>) => BaseFormState<T>;
+    markControlAsTouched: <T>(state: BaseFormState<T>, action: Action<MarkTouched>) => BaseFormState<T>;
+    markControlAsUntouched: <T>(state: BaseFormState<T>, action: Action<ControlRef>) => BaseFormState<T>;
+    resetControl: <T>(state: BaseFormState<T>, action: Action<ControlRef>) => BaseFormState<T>;
+}
+export interface CustomReducers {
+    [key: string]: (reducers: FormReducers, state: BaseFormState<unknown>, action: Action<unknown>) => BaseFormState<unknown>;
+}
+export interface RxFormOptions<T extends CustomReducers> extends EffectsAndSources {
+    reducers?: T;
+}
+export declare const build: <T extends CustomReducers>(config: AbstractControlConfig, options?: RxFormOptions<T>) => Reactable<Form<unknown>, { [K in keyof T]: (payload?: any) => void; } & RxFormActions>;
 export {};

package/dist/RxForm/index.d.ts

@@ -1 +1 @@
-export { build, group, array, control, RxFormActions } from './RxForm';
+export { build, group, array, control, RxFormActions, FormReducers } from './RxForm';

package/dist/index.js

@@ -79,6 +79,18 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __spreadArray(to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -171,71 +183,10 @@ var buildFormState = function (config, form, controlRef) {
     if (form === void 0) { form = { root: null }; }
     if (controlRef === void 0) { controlRef = []; }
     return {
-        form: buildState(config, form, controlRef),
-        action: null
+        form: buildState(config, form, controlRef)
     };
 };
 
-var getControl = function (controlRef, form) {
-    return form[getFormKey(controlRef)];
-};
-
-// Includes the original control of interest unless excludeSelf === true
-var getAncestorControls = function (controlRef, form, excludeSelf) {
-    if (excludeSelf === void 0) { excludeSelf = false; }
-    var formControls = controlRef.reduce(function (acc, key) {
-        var currentRef = acc.currentRef.concat(key);
-        var formControls = acc.formControls.concat(getControl(currentRef, form));
-        return {
-            currentRef: currentRef,
-            formControls: formControls
-        };
-    }, {
-        currentRef: [],
-        formControls: []
-    }).formControls;
-    var root = form['root'];
-    var result = [root].concat(formControls);
-    return result.filter(function (control) {
-        return excludeSelf ? getFormKey(control.controlRef) !== getFormKey(controlRef) : true;
-    });
-};
-
-// Includes the original control of interest unless excludeSelf === true
-var getDescendantControls = function (controlRef, form, excludeSelf) {
-    if (excludeSelf === void 0) { excludeSelf = false; }
-    if (!controlRef.length) {
-        return Object.values(form).filter(function (_a) {
-            var controlRef = _a.controlRef;
-            return excludeSelf ? controlRef.length !== 0 : true;
-        });
-    }
-    var control = getControl(controlRef, form);
-    var value = control.value, config = control.config;
-    var descendants;
-    if (Array.isArray(config.controls)) {
-        // If control is a Form Array
-        descendants = value.reduce(function (acc, item, index) {
-            return acc.concat(getDescendantControls(controlRef.concat(index), form));
-        }, []);
-    }
-    else if (config.controls) {
-        // If control is a Form Group
-        descendants = Object.keys(value).reduce(function (acc, key) {
-            return acc.concat(getDescendantControls(controlRef.concat(key), form));
-        }, []);
-    }
-    if (excludeSelf)
-        return descendants;
-    return [control].concat(descendants || []);
-};
-
-var getControlBranch = function (controlRef, form) {
-    var ancestors = getAncestorControls(controlRef, form);
-    var childControls = getDescendantControls(controlRef, form).slice(1);
-    return ancestors.concat(childControls).sort(function (a, b) { return a.controlRef.length - b.controlRef.length; });
-};
-
 var getScopedEffectsForControl = function (formControl) {
     var config = formControl.config, key = formControl.key;
     var asyncValidators = config.asyncValidators;
@@ -273,41 +224,18 @@ var getAsyncValidationActions = function (formControls) {
 var buildHub2Source = function (rx) {
     var hub1StateMapped$ = rx.state$.pipe(operators.map(function (payload) { return ({ type: 'formChange', payload: payload }); }));
     var sourceForHub2$ = hub1StateMapped$.pipe(operators.mergeMap(function (formChangeAction) {
-        var _a = formChangeAction.payload, form = _a.form, action = _a.action;
-        var newForm = form;
-        var controlsToCheck;
-        switch (action === null || action === void 0 ? void 0 : action.type) {
-            case 'updateValues':
-                controlsToCheck = getControlBranch(action.payload.controlRef, newForm);
-                break;
-            case 'pushControl':
-            case 'addControl':
-                var changedControl = getControl(action.payload.controlRef, newForm);
-                if (Array.isArray(changedControl.config.controls)) {
-                    var index = changedControl.value.length - 1;
-                    var ref = action.payload.controlRef.concat(index);
-                    controlsToCheck = getControlBranch(ref, newForm);
-                    break;
-                }
-                else {
-                    controlsToCheck = getControlBranch(action.payload.controlRef, newForm);
-                    break;
-                }
-            case 'removeControl':
-                controlsToCheck = getAncestorControls(action.payload.slice(0, -1), newForm);
-                break;
-            case 'resetControl':
-                controlsToCheck = getControlBranch(action.payload, newForm);
-                break;
-            default:
-                controlsToCheck = [];
-        }
+        var changedControls = formChangeAction.payload.changedControls;
+        var controlsToCheck = changedControls ? Object.values(changedControls) : [];
         var asyncValidationActions = getAsyncValidationActions(controlsToCheck);
         return rxjs.of.apply(void 0, __spreadArray([formChangeAction], asyncValidationActions, false));
     }));
     return sourceForHub2$;
 };
 
+var getControl = function (controlRef, form) {
+    return form[getFormKey(controlRef)];
+};
+
 var UPDATE_ANCESTOR_VALUES = 'UPDATE_ANCESTOR_VALUES';
 var updateAncestorValues = function (form, _a) {
     var _b, _c;
@@ -342,17 +270,71 @@ var isChildRef = function (controlRef, parentRef) {
         controlRef.length === parentRef.length + 1);
 };
 
+// Includes the original control of interest unless excludeSelf === true
+var getDescendantControls = function (controlRef, form, excludeSelf) {
+    if (excludeSelf === void 0) { excludeSelf = false; }
+    if (!controlRef.length) {
+        return Object.values(form).filter(function (_a) {
+            var controlRef = _a.controlRef;
+            return excludeSelf ? controlRef.length !== 0 : true;
+        });
+    }
+    var control = getControl(controlRef, form);
+    var value = control.value, config = control.config;
+    var descendants;
+    if (Array.isArray(config.controls)) {
+        // If control is a Form Array
+        descendants = value.reduce(function (acc, item, index) {
+            return acc.concat(getDescendantControls(controlRef.concat(index), form));
+        }, []);
+    }
+    else if (config.controls) {
+        // If control is a Form Group
+        descendants = Object.keys(value).reduce(function (acc, key) {
+            return acc.concat(getDescendantControls(controlRef.concat(key), form));
+        }, []);
+    }
+    if (excludeSelf)
+        return descendants;
+    return [control].concat(descendants || []);
+};
+
+// Includes the original control of interest unless excludeSelf === true
+var getAncestorControls = function (controlRef, form, excludeSelf) {
+    if (excludeSelf === void 0) { excludeSelf = false; }
+    var formControls = controlRef.reduce(function (acc, key) {
+        var currentRef = acc.currentRef.concat(key);
+        var formControls = acc.formControls.concat(getControl(currentRef, form));
+        return {
+            currentRef: currentRef,
+            formControls: formControls
+        };
+    }, {
+        currentRef: [],
+        formControls: []
+    }).formControls;
+    var root = form['root'];
+    var result = [root].concat(formControls);
+    return result.filter(function (control) {
+        return excludeSelf ? getFormKey(control.controlRef) !== getFormKey(controlRef) : true;
+    });
+};
+
 var UPDATE_DESCENDANT_VALUES = 'UPDATE_DESCENDANT_VALUES';
-var updateDescendants = function (form, _a) {
+var updateDescendants = function (state, _a) {
     var _b = _a.payload, controlRef = _b.controlRef, value = _b.value;
-    var descendants = getDescendantControls(controlRef, form, true).map(function (control) { return [getFormKey(control.controlRef), control]; });
+    var descendants = getDescendantControls(controlRef, state.form, true).map(function (control) { return [getFormKey(control.controlRef), control]; });
     var result = descendants.reduce(function (acc, _a) {
-        var _b;
+        var _b, _c;
         var key = _a[0], control = _a[1];
         if (isChildRef(control.controlRef, controlRef)) {
             var childValue = value[control.controlRef.at(-1)];
             var validatorErrors = getErrors(control, value);
-            acc = __assign(__assign({}, acc), (_b = {}, _b[key] = __assign(__assign({}, control), { value: childValue, validatorErrors: validatorErrors, dirty: !isEqual__default["default"](childValue, control.pristineValue) }), _b));
+            var newControl = __assign(__assign({}, control), { value: childValue, validatorErrors: validatorErrors, dirty: !isEqual__default["default"](childValue, control.pristineValue) });
+            acc = {
+                form: __assign(__assign({}, acc.form), (_b = {}, _b[key] = newControl, _b)),
+                changedControls: __assign(__assign({}, acc.changedControls), (_c = {}, _c[newControl.key] = newControl, _c))
+            };
             var configControls = control.config.controls;
             if (configControls) {
                 acc = updateDescendants(acc, {
@@ -362,19 +344,27 @@ var updateDescendants = function (form, _a) {
             }
         }
         return acc;
-    }, form);
-    return result;
+    }, { form: {}, changedControls: {} });
+    return {
+        form: __assign(__assign({}, state.form), result.form),
+        changedControls: __assign({}, result.changedControls)
+    };
 };
 // Will only update child controls that are present.
 // Use AddControl/RemoveControl action reducers to add/remove control
-var updateValues = function (_a, action) {
-    var _b;
-    var form = _a.form;
-    var _c = action.payload, controlRef = _c.controlRef, value = _c.value;
+var updateValues = function (_a, action, mergeChanges) {
+    var _b, _c;
+    var form = _a.form, _d = _a.changedControls, changedControls = _d === void 0 ? {} : _d, _e = _a.removedControls, removedControls = _e === void 0 ? {} : _e;
+    if (mergeChanges === void 0) { mergeChanges = false; }
+    var _f = action.payload, controlRef = _f.controlRef, value = _f.value;
     // Update its own value
     var ctrlKey = getFormKey(controlRef);
     var validatorErrors = getErrors(form[ctrlKey], value);
-    var result = __assign(__assign({}, form), (_b = {}, _b[ctrlKey] = __assign(__assign({}, form[ctrlKey]), { validatorErrors: validatorErrors, dirty: !isEqual__default["default"](value, form[ctrlKey].pristineValue), value: value }), _b));
+    var newControl = __assign(__assign({}, form[ctrlKey]), { validatorErrors: validatorErrors, dirty: !isEqual__default["default"](value, form[ctrlKey].pristineValue), value: value });
+    var result = {
+        form: __assign(__assign({}, form), (_b = {}, _b[ctrlKey] = newControl, _b)),
+        changedControls: (_c = {}, _c[newControl.key] = newControl, _c)
+    };
     var configControls = form[ctrlKey].config.controls;
     // Update its children
     if (configControls) {
@@ -388,12 +378,17 @@ var updateValues = function (_a, action) {
     }
     // Update its Ancestors
     if (controlRef.length) {
-        result = updateAncestorValues(result, {
-            type: UPDATE_ANCESTOR_VALUES,
-            payload: { controlRef: controlRef, value: value }
-        });
+        result = __assign(__assign({}, result), { form: updateAncestorValues(result.form, {
+                type: UPDATE_ANCESTOR_VALUES,
+                payload: { controlRef: controlRef, value: value }
+            }) });
     }
-    return { form: result, action: action };
+    var changedAncestorControls = getAncestorControls(controlRef, result.form).reduce(function (acc, control) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
+    }, {});
+    var mergedResult = __assign(__assign({}, result), { changedControls: __assign(__assign(__assign({}, (mergeChanges ? changedControls : undefined)), changedAncestorControls), result.changedControls), removedControls: mergeChanges ? removedControls : undefined });
+    return mergedResult;
 };
 
 var UPDATE_ANCESTOR_VALUES_REMOVE_CONTROL = 'UPDATE_ANCESTOR_VALUES_REMOVE_CONTROL';
@@ -424,18 +419,22 @@ var updateAncestorValuesRemoveControl = function (form, _a) {
     return form;
 };
 
-var removeControl = function (_a, action) {
-    var form = _a.form;
+var removeControl = function (state, action, mergeChanges) {
+    var _a;
+    if (mergeChanges === void 0) { mergeChanges = false; }
+    var form = state.form;
     var controlRef = action.payload;
-    if (!getControl(controlRef, form)) {
+    var controlToRemove = getControl(controlRef, form);
+    if (!controlToRemove) {
         throw 'Control not found';
     }
     // Can't remove the root of the form
     if (!controlRef.length)
-        return { form: form, action: action };
+        return { form: form };
     var parentRef = controlRef.slice(0, -1);
     var parentIsFormArray = Array.isArray(getControl(parentRef, form).config.controls);
-    var descendantkeys = getDescendantControls(controlRef, form).map(function (_a) {
+    var descendants = getDescendantControls(controlRef, form);
+    var descendantkeys = descendants.map(function (_a) {
         var controlRef = _a.controlRef;
         return getFormKey(controlRef);
     });
@@ -466,12 +465,50 @@ var removeControl = function (_a, action) {
         }
         return __assign(__assign({}, acc), (_c = {}, _c[key] = control, _c));
     }, {});
+    var result = updateAncestorValuesRemoveControl(controlRemoved, {
+        type: UPDATE_ANCESTOR_VALUES_REMOVE_CONTROL,
+        payload: controlRef
+    });
+    var changedControls = __assign(__assign({}, (mergeChanges ? state.changedControls || {} : undefined)), getAncestorControls(controlRef.slice(0, -1), result).reduce(function (acc, control) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
+    }, {}));
+    // Check for reindexing for changed controls
+    if (parentIsFormArray) {
+        changedControls = Object.entries(changedControls).reduce(function (acc, _a) {
+            var _b, _c;
+            var key = _a[0], control = _a[1];
+            var oldIndex = control.controlRef.at(parentRef.length);
+            if (
+            // If control is descendant.
+            parentRef.every(function (ref, index) { return control.controlRef[index] === ref; }) &&
+                control.controlRef.length > parentRef.length &&
+                // If the array item index was greater than the index of item removed
+                // we need to decrement its index by 1.
+                oldIndex > controlRef.at(-1)) {
+                var newRef = parentRef
+                    .concat(oldIndex - 1)
+                    .concat(control.controlRef.slice(parentRef.length + 1));
+                return __assign(__assign({}, acc), (_b = {}, _b[getFormKey(newRef)] = __assign(__assign({}, control), { controlRef: newRef }), _b));
+            }
+            else {
+                return __assign(__assign({}, acc), (_c = {}, _c[key] = control, _c));
+            }
+        }, {});
+    }
+    var removedControls = __assign(__assign({}, (mergeChanges ? state.removedControls || {} : undefined)), (_a = {}, _a[controlToRemove.key] = controlToRemove, _a));
+    descendants
+        .map(function (_a) {
+        var key = _a.key;
+        return key;
+    })
+        .forEach(function (key) {
+        delete changedControls[key];
+    });
     return {
-        form: updateAncestorValuesRemoveControl(controlRemoved, {
-            type: UPDATE_ANCESTOR_VALUES_REMOVE_CONTROL,
-            payload: controlRef
-        }),
-        action: action
+        form: result,
+        changedControls: changedControls,
+        removedControls: removedControls
     };
 };
 
@@ -502,31 +539,38 @@ var updateAncestorValuesAddControl = function (form, _a) {
     return form;
 };
 
-var addControl = function (state, action) {
-    var newControlRef;
+var getControlBranch = function (controlRef, form) {
+    var ancestors = getAncestorControls(controlRef, form);
+    var childControls = getDescendantControls(controlRef, form).slice(1);
+    return ancestors.concat(childControls).sort(function (a, b) { return a.controlRef.length - b.controlRef.length; });
+};
+
+var addControl = function (state, action, mergeChanges) {
+    if (mergeChanges === void 0) { mergeChanges = false; }
     var _a = action.payload, config = _a.config, controlRef = _a.controlRef;
-    var existingControl = getControl(controlRef, state.form);
-    // If controlRef exists we are adding control to a Form Array
-    if (existingControl && Array.isArray(existingControl.config.controls)) {
-        newControlRef = controlRef.concat(existingControl.value.length);
+    // If controlRef does not exist we are adding control to a Form Group
+    if (!getControl(controlRef.slice(0, -1), state.form)) {
+        throw 'You are attempting to add a control to a non-existent form group';
     }
-    else {
-        // If controlRef does not exist we are adding control to a Form Group
-        if (!getControl(controlRef.slice(0, -1), state.form)) {
-            throw 'You are attempting to add a control to a non-existent form group';
-        }
-        newControlRef = controlRef;
-    }
-    var newForm = buildState(config, state.form, newControlRef);
-    var newValue = getControl(newControlRef, newForm).value;
+    var newForm = buildState(config, state.form, controlRef);
+    var newValue = getControl(controlRef, newForm).value;
     var ancestorsUpdated = updateAncestorValuesAddControl(newForm, {
         type: UPDATE_ANCESTOR_VALUES_ADD_CONTROL,
-        payload: { controlRef: newControlRef, value: newValue }
+        payload: { controlRef: controlRef, value: newValue }
     });
-    return { form: ancestorsUpdated, action: action };
+    var changedControls = getControlBranch(controlRef, ancestorsUpdated).reduce(function (acc, control) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
+    }, {});
+    return {
+        form: ancestorsUpdated,
+        changedControls: __assign(__assign({}, (mergeChanges ? state.changedControls || {} : undefined)), changedControls),
+        removedControls: mergeChanges ? state.removedControls || {} : undefined
+    };
 };
 
-var pushControl = function (state, action) {
+var pushControl = function (state, action, mergeChanges) {
+    if (mergeChanges === void 0) { mergeChanges = false; }
     var newControlRef;
     var _a = action.payload, config = _a.config, controlRef = _a.controlRef;
     var existingControl = getControl(controlRef, state.form);
@@ -545,7 +589,15 @@ var pushControl = function (state, action) {
         type: UPDATE_ANCESTOR_VALUES_ADD_CONTROL,
         payload: { controlRef: newControlRef, value: newValue }
     });
-    return { form: ancestorsUpdated, action: action };
+    var changedControls = getControlBranch(newControlRef, ancestorsUpdated).reduce(function (acc, control) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
+    }, {});
+    return {
+        form: ancestorsUpdated,
+        changedControls: __assign(__assign({}, (mergeChanges ? state.changedControls || {} : undefined)), changedControls),
+        removedControls: mergeChanges ? state.removedControls || {} : undefined
+    };
 };
 
 // Same implementation as updateAncestor values except updating pristine values
@@ -584,8 +636,9 @@ var updateAncestorPristineValues = function (form, _a) {
     return form;
 };
 
-var markControlAsPristine = function (_a, action) {
-    var form = _a.form;
+var markControlAsPristine = function (state, action, mergeChanges) {
+    if (mergeChanges === void 0) { mergeChanges = false; }
+    var form = state.form;
     var controlRef = action.payload;
     var descendants = getDescendantControls(controlRef, form).reduce(function (acc, control) {
         var _a;
@@ -598,25 +651,44 @@ var markControlAsPristine = function (_a, action) {
             payload: controlRef
         });
     }
-    return { form: result, action: action };
+    var changedControls = getControlBranch(controlRef, result).reduce(function (acc, control) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
+    }, {});
+    return {
+        form: result,
+        changedControls: __assign(__assign({}, (mergeChanges ? state.changedControls || {} : undefined)), changedControls),
+        removedControls: mergeChanges ? state.removedControls || {} : undefined
+    };
 };
 
-var markControlAsTouched = function (_a, action) {
-    var form = _a.form;
-    var _b = action.payload, controlRef = _b.controlRef, markAll = _b.markAll;
+var markControlAsTouched = function (state, action, mergeChanges) {
+    if (mergeChanges === void 0) { mergeChanges = false; }
+    var form = state.form;
+    var _a = action.payload, controlRef = _a.controlRef, markAll = _a.markAll;
     var controls = (markAll ? getControlBranch(controlRef, form) : getAncestorControls(controlRef, form)).reduce(function (acc, control) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[getFormKey(control.controlRef)] = __assign(__assign({}, control), { touched: true }), _a)));
     }, {});
-    return {
+    var result = {
         form: __assign(__assign({}, form), controls),
         action: action
     };
+    var changedControls = getControlBranch(controlRef, result.form).reduce(function (acc, control) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
+    }, {});
+    return {
+        form: __assign(__assign({}, form), controls),
+        changedControls: __assign(__assign({}, (mergeChanges ? state.changedControls || {} : undefined)), changedControls),
+        removedControls: mergeChanges ? state.removedControls || {} : undefined
+    };
 };
 
-var markControlAsUntouched = function (_a, action) {
-    var _b;
-    var form = _a.form;
+var markControlAsUntouched = function (state, action, mergeChanges) {
+    var _a;
+    if (mergeChanges === void 0) { mergeChanges = false; }
+    var form = state.form;
     var controlRef = action.payload;
     var result = getDescendantControls(controlRef, form).reduce(function (acc, control) {
         var _a;
@@ -629,32 +701,59 @@ var markControlAsUntouched = function (_a, action) {
     while (currentRef.length > 0) {
         currentRef = currentRef.slice(0, -1);
         key = getFormKey(currentRef);
-        result = __assign(__assign({}, result), (_b = {}, _b[key] = __assign(__assign({}, result[key]), { touched: getDescendantControls(currentRef, result, true).some(function (control) { return control.touched; }) }), _b));
+        result = __assign(__assign({}, result), (_a = {}, _a[key] = __assign(__assign({}, result[key]), { touched: getDescendantControls(currentRef, result, true).some(function (control) { return control.touched; }) }), _a));
     }
-    return { form: result, action: action };
+    var changedControls = getControlBranch(controlRef, result).reduce(function (acc, control) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
+    }, {});
+    return {
+        form: result,
+        changedControls: __assign(__assign({}, (mergeChanges ? state.changedControls || {} : undefined)), changedControls),
+        removedControls: mergeChanges ? state.removedControls || {} : undefined
+    };
 };
 
-var resetControl = function (_a, action) {
-    var form = _a.form;
+var resetControl = function (state, action, mergeChanges) {
+    var _a;
+    if (mergeChanges === void 0) { mergeChanges = false; }
+    var form = state.form;
     var controlRef = action.payload;
     var controlToReset = getControl(controlRef, form);
+    var descendantsRemoved = __assign({}, form);
     var descendants = getDescendantControls(controlRef, form);
+    var descendantKeys = descendants.map(function (_a) {
+        var controlRef = _a.controlRef;
+        return getFormKey(controlRef);
+    });
+    descendantKeys.forEach(function (key) {
+        delete descendantsRemoved[key];
+    });
     // Remove all descendants
-    var descendantsRemoved = Object.entries(form).reduce(function (acc, _a) {
-        var _b;
-        var key = _a[0], control = _a[1];
-        if (descendants.includes(control))
-            return acc;
-        return __assign(__assign({}, acc), (_b = {}, _b[key] = control, _b));
-    }, {});
     var restoredControls = buildState(controlToReset.config, descendantsRemoved, controlToReset.controlRef);
     var restoredControlValue = getControl(controlRef, restoredControls).value;
+    var result = updateAncestorValues(restoredControls, {
+        type: UPDATE_ANCESTOR_VALUES,
+        payload: { controlRef: controlRef, value: restoredControlValue }
+    });
+    var changedControls = __assign(__assign({}, (mergeChanges ? state.changedControls || {} : undefined)), getControlBranch(controlRef, result).reduce(function (acc, control) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[control.key] = control, _a)));
+    }, {}));
+    var removedControls = __assign(__assign({}, (mergeChanges ? state.removedControls || {} : undefined)), (_a = {}, _a[controlToReset.key] = controlToReset, _a));
+    // If control is removed, we can delete it from the changedControls check
+    descendants
+        .map(function (_a) {
+        var key = _a.key;
+        return key;
+    })
+        .forEach(function (key) {
+        delete changedControls[key];
+    });
     return {
-        form: updateAncestorValues(restoredControls, {
-            type: UPDATE_ANCESTOR_VALUES,
-            payload: { controlRef: controlRef, value: restoredControlValue }
-        }),
-        action: action
+        form: result,
+        changedControls: changedControls,
+        removedControls: removedControls
     };
 };
 
@@ -672,7 +771,7 @@ var asyncValidation = function (form, _a) {
     return __assign(__assign({}, form), updatedSelfAndAncestors);
 };
 
-var hasErrors$4 = function (errors) {
+var hasErrors$3 = function (errors) {
     return Object.values(errors).some(function (hasError) { return hasError; });
 };
 var mergeBranchErrors = function (form, controlRef) {
@@ -686,7 +785,7 @@ var mergeBranchErrors = function (form, controlRef) {
         var _b;
         var key = _a[0], control = _a[1];
         var errors = __assign(__assign({}, control.validatorErrors), control.asyncValidatorErrors);
-        var selfValid = !hasErrors$4(errors);
+        var selfValid = !hasErrors$3(errors);
         var childrenValid = true;
         if (Array.isArray(control.config.controls)) {
             // If control is a FormArray
@@ -738,7 +837,7 @@ var asyncValidationResponseSuccess = function (form, _a) {
     return mergeBranchErrors(ancestorsUpdated, control.controlRef);
 };
 
-var hasErrors$3 = function (errors) {
+var hasErrors$2 = function (errors) {
     return Object.values(errors).some(function (hasError) { return hasError; });
 };
 // TODO: update merge errors to not do the entire form but just a subset of it
@@ -750,7 +849,7 @@ var mergeErrors = function (form) {
         var _b;
         var key = _a[0], control = _a[1];
         var errors = __assign(__assign({}, control.validatorErrors), control.asyncValidatorErrors);
-        var selfValid = !hasErrors$3(errors);
+        var selfValid = !hasErrors$2(errors);
         var childrenValid = true;
         if (Array.isArray(control.config.controls)) {
             // If control is a FormArray
@@ -771,40 +870,6 @@ var mergeErrors = function (form) {
     return restoredOrder;
 };
 
-var hasErrors$2 = function (errors) {
-    return Object.values(errors).some(function (hasError) { return hasError; });
-};
-var mergeValueUpdated = function (state, form, controlRef) {
-    var controlBranch = getControlBranch(controlRef, form)
-        .reverse()
-        .reduce(function (acc, control) {
-        var _a;
-        var key = getFormKey(control.controlRef);
-        var existingControl = state[key] || structuredClone(DEFAULT_HUB2_FIELDS);
-        var errors = __assign(__assign({}, control.validatorErrors), existingControl.asyncValidatorErrors);
-        var selfValid = !hasErrors$2(errors);
-        var childrenValid = true;
-        if (Array.isArray(control.config.controls)) {
-            // If control is a FormArray
-            childrenValid = control.value.every(function (item, index) {
-                var formKey = getFormKey(control.controlRef.concat(index));
-                var valid = acc[formKey] === undefined ? state[formKey].valid : acc[formKey].valid;
-                return valid;
-            });
-        }
-        else if (control.config.controls) {
-            // If control is a FormGroup
-            childrenValid = Object.keys(control.value).every(function (childKey) {
-                var formKey = getFormKey(control.controlRef.concat(childKey));
-                var valid = acc[formKey] === undefined ? state[formKey].valid : acc[formKey].valid;
-                return valid;
-            });
-        }
-        return __assign(__assign({}, acc), (_a = {}, _a[key] = __assign(__assign(__assign({}, existingControl), control), { errors: errors, valid: selfValid && childrenValid, childrenValid: childrenValid }), _a));
-    }, {});
-    return __assign(__assign({}, state), controlBranch);
-};
-
 var hasErrors$1 = function (errors) {
     return Object.values(errors).some(function (hasError) { return hasError; });
 };
@@ -848,70 +913,55 @@ var mergeRemoveControl = function (state, form, controlRef) {
     return __assign(__assign({}, removedControls), updatedControlBranch);
 };
 
-var mergeTouchUpdated = function (state, form, controlRef) {
-    var controlBranch = getControlBranch(controlRef, form).reduce(function (acc, control) {
-        var _a;
-        var key = getFormKey(control.controlRef);
-        return __assign(__assign({}, acc), (_a = {}, _a[key] = __assign(__assign({}, state[key]), control), _a));
-    }, {});
-    return __assign(__assign({}, state), controlBranch);
-};
-
 var hasErrors = function (errors) {
     return Object.values(errors).some(function (hasError) { return hasError; });
 };
-var mergePushControl = function (state, form, controlRef) {
-    var baseFormArray = getControl(controlRef, form);
-    //If Form Array
-    // use the added control  (last index)
-    // merge descendants with default stuff
-    var newItemIndex = baseFormArray.value.length - 1;
-    var descendants = getDescendantControls(controlRef.concat(newItemIndex), form);
-    var mergedDescendants = mergeErrors(descendants.reduce(function (acc, control) {
-        var _a;
-        var formKey = getFormKey(control.controlRef);
-        return __assign(__assign({}, acc), (_a = {}, _a[formKey] = __assign(__assign({}, control), structuredClone(DEFAULT_HUB2_FIELDS)), _a));
-    }, {}));
-    var ancestors = getAncestorControls(controlRef, state)
+var mergeControls = function (state, _a) {
+    var form = _a.form, _b = _a.changedControls, changedControls = _b === void 0 ? {} : _b, removedControls = _a.removedControls;
+    var controlsRemoved = removedControls
+        ? Object.values(removedControls).reduce(function (acc, _a) {
+            var controlRef = _a.controlRef;
+            return mergeRemoveControl(acc, form, controlRef);
+        }, state)
+        : state;
+    var updatedBranch = Object.values(changedControls)
         .reverse()
-        .reduce(function (acc, control, index, arr) {
+        .reduce(function (acc, control) {
         var _a;
         var formKey = getFormKey(control.controlRef);
-        var errors = __assign(__assign({}, form[formKey].validatorErrors), control.asyncValidatorErrors);
+        var existingControl = controlsRemoved && controlsRemoved[formKey];
+        var newControl = __assign(__assign({}, (existingControl
+            ? existingControl
+            : structuredClone(DEFAULT_HUB2_FIELDS))), control);
+        var errors = __assign(__assign({}, newControl.validatorErrors), newControl.asyncValidatorErrors);
         var selfValid = !hasErrors(errors);
         var childrenValid = true;
-        if (index === 0) {
-            childrenValid =
-                control.childrenValid &&
-                    mergedDescendants[getFormKey(controlRef.concat(newItemIndex))].valid;
+        if (Array.isArray(control.config.controls)) {
+            // If control is a FormArray
+            childrenValid = control.value.every(function (item, index) {
+                var formKey = getFormKey(control.controlRef.concat(index));
+                var valid = acc[formKey] === undefined ? controlsRemoved[formKey].valid : acc[formKey].valid;
+                return valid;
+            });
         }
-        else {
-            if (Array.isArray(control.config.controls)) {
-                // If control is a FormArray
-                childrenValid = control.value.every(function (item, index) {
-                    var formKey = getFormKey(control.controlRef.concat(index));
-                    var valid = acc[formKey] === undefined ? state[formKey].valid : acc[formKey].valid;
-                    return valid;
-                });
-            }
-            else if (control.config.controls) {
-                // If control is a FormGroup
-                childrenValid = Object.keys(control.value).every(function (childKey) {
-                    var formKey = getFormKey(control.controlRef.concat(childKey));
-                    var valid = acc[formKey] === undefined ? state[formKey].valid : acc[formKey].valid;
-                    return valid;
-                });
-            }
+        else if (control.config.controls) {
+            // If control is a FormGroup
+            childrenValid = Object.keys(control.value).every(function (childKey) {
+                var formKey = getFormKey(control.controlRef.concat(childKey));
+                var valid = acc[formKey] === undefined ? controlsRemoved[formKey].valid : acc[formKey].valid;
+                return valid;
+            });
         }
-        return __assign(__assign({}, acc), (_a = {}, _a[formKey] = __assign(__assign(__assign({}, control), form[formKey]), { errors: errors, valid: selfValid && childrenValid, childrenValid: childrenValid }), _a));
+        return __assign(__assign({}, acc), (_a = {}, _a[formKey] = __assign(__assign({}, newControl), { errors: errors, valid: selfValid && childrenValid, childrenValid: childrenValid }), _a));
     }, {});
-    var controlBranchUpdated = __assign(__assign({}, ancestors), mergedDescendants);
-    return __assign(__assign({}, state), controlBranchUpdated);
+    var result = __assign(__assign({}, controlsRemoved), updatedBranch);
+    return result;
 };
 
 var formChange = function (state, _a) {
     if (state === void 0) { state = null; }
-    var _b = _a.payload, form = _b.form, action = _b.action;
+    var payload = _a.payload;
+    var form = payload.form;
     if (state === null) {
         return mergeErrors(Object.entries(form).reduce(function (acc, _a) {
             var _b;
@@ -919,30 +969,7 @@ var formChange = function (state, _a) {
             return __assign(__assign({}, acc), (_b = {}, _b[dictKey] = __assign(__assign({}, structuredClone(DEFAULT_HUB2_FIELDS)), baseControl), _b));
         }, {}));
     }
-    switch (action === null || action === void 0 ? void 0 : action.type) {
-        case 'pushControl':
-            return mergePushControl(state, form, action.payload.controlRef);
-        case 'addControl':
-        case 'updateValues':
-            return mergeValueUpdated(state, form, action.payload.controlRef);
-        case 'resetControl':
-        case 'removeControl':
-            return mergeRemoveControl(state, form, action.payload);
-        case 'markControlAsPristine':
-        case 'markControlAsUntouched':
-            return mergeTouchUpdated(state, form, action.payload);
-        case 'markControlAsTouched':
-            return mergeTouchUpdated(state, form, action.payload.controlRef);
-        default:
-            return mergeErrors(Object.entries(form).reduce(function (acc, _a) {
-                var _b;
-                var dictKey = _a[0], baseControl = _a[1];
-                var existingControl = state && state[dictKey];
-                return __assign(__assign({}, acc), (_b = {}, _b[dictKey] = __assign(__assign({}, (existingControl
-                    ? existingControl
-                    : structuredClone(DEFAULT_HUB2_FIELDS))), baseControl), _b));
-            }, {}));
-    }
+    return mergeControls(state, payload);
 };
 
 var control = function (config) {
@@ -961,18 +988,45 @@ var control = function (config) {
 };
 var array = function (config) { return config; };
 var group = function (config) { return config; };
+var reducerTools = {
+    updateValues: function (state, action) {
+        return updateValues(state, action, true);
+    },
+    removeControl: function (state, action) {
+        return removeControl(state, action, true);
+    },
+    pushControl: function (state, action) {
+        return pushControl(state, action, true);
+    },
+    addControl: function (state, action) {
+        return addControl(state, action, true);
+    },
+    markControlAsPristine: function (state, action) {
+        return markControlAsPristine(state, action, true);
+    },
+    markControlAsTouched: function (state, action) {
+        return markControlAsTouched(state, action, true);
+    },
+    markControlAsUntouched: function (state, action) {
+        return markControlAsUntouched(state, action, true);
+    },
+    resetControl: function (state, action) {
+        return resetControl(state, action, true);
+    }
+};
 var build = function (config, options) {
+    if (options === void 0) { options = {}; }
     var initialState = buildFormState(config);
-    var rxHub1 = core.RxBuilder(__assign({ initialState: initialState, reducers: {
-            updateValues: updateValues,
-            removeControl: removeControl,
-            addControl: addControl,
-            pushControl: pushControl,
-            markControlAsPristine: markControlAsPristine,
-            markControlAsTouched: markControlAsTouched,
-            markControlAsUntouched: markControlAsUntouched,
-            resetControl: resetControl
-        } }, options));
+    var reducers = options.reducers, otherOptions = __rest(options, ["reducers"]);
+    var customReducers = Object.entries(reducers || {}).reduce(function (acc, _a) {
+        var _b;
+        var key = _a[0], reducer = _a[1];
+        return (__assign(__assign({}, acc), (_b = {}, _b[key] = function (_a, action) {
+            var form = _a.form;
+            return reducer(reducerTools, { form: form }, action);
+        }, _b)));
+    }, {});
+    var rxHub1 = core.RxBuilder(__assign({ initialState: initialState, reducers: __assign({ updateValues: updateValues, removeControl: removeControl, addControl: addControl, pushControl: pushControl, markControlAsPristine: markControlAsPristine, markControlAsTouched: markControlAsTouched, markControlAsUntouched: markControlAsUntouched, resetControl: resetControl }, customReducers) }, otherOptions));
     var rxHub2 = core.RxBuilder({
         sources: [buildHub2Source(rxHub1)],
         initialState: null,

package/package.json

@@ -14,7 +14,7 @@
   "author": "David Lai",
   "license": "ISC",
   "dependencies": {
-    "@reactables/core": "^0.5.4-alpha.0",
+    "@reactables/core": "^0.6.0-alpha.0",
     "lodash.isequal": "^4.5.0"
   },
   "peerDependencies": {
@@ -23,5 +23,5 @@
   "devDependencies": {
     "lodash.clonedeep": "^4.5.0"
   },
-  "version": "0.5.4-alpha.0"
+  "version": "0.6.0-alpha.0"
 }

package/dist/Reducers/Hub2/mergeTouchUpdated.d.ts

@@ -1,6 +0,0 @@
-import { Form, BaseForm, FormControl } from '../../Models/Controls';
-import { ControlRef } from '../../Models/ControlRef';
-export declare const mergeTouchUpdated: <T>(state: Form<T>, form: BaseForm<T>, controlRef: ControlRef) => {
-    [x: string]: FormControl<unknown>;
-    root?: FormControl<T>;
-};

package/dist/Reducers/Hub2/mergeValueUpdated.d.ts

@@ -1,6 +0,0 @@
-import { Form, BaseForm, FormControl } from '../../Models/Controls';
-import { ControlRef } from '../../Models/ControlRef';
-export declare const mergeValueUpdated: <T>(state: Form<T>, form: BaseForm<T>, controlRef: ControlRef) => {
-    [x: string]: FormControl<unknown>;
-    root?: FormControl<T>;
-};