feat: add flattenObjectKeys, serialize stores, sids

Author: darianstlex

README.md

@@ -119,6 +119,10 @@ interface Form {
   // Keep form data on unmount
   // Default: false
   keepOnUnmount: boolean;
+  // PROPERTY - serialize - serialize stores
+  // not reactive, initialized only once on form creation
+  // Default: false
+  serialize?: boolean;
   // Set fields validation behavior onBlur
   // Default: true
   validateOnBlur?: boolean;
@@ -501,6 +505,7 @@ import {
   shapeFy,
   truthyFyStore,
   shapeFyStore,
+  flattenObjectKeys,
 } from 'efx-forms/utils';
 
 /**
@@ -528,6 +533,13 @@ const $truthyStore = truthyFyStore($values);
  * @type ($values: Store): Store => $shapedValues
  */
 const $shapedStore = shapeFyStore($values);
+
+/**
+ * Return flatten one level object keys/values
+ * helper for the nested initial values
+ * @type (values: Record<string, any>): Record<string, any> => ({})
+ */
+const initialValues = flattenObjectKeys(values);
 ```
 
 # Validators

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "efx-forms",
-  "version": "2.0.26",
+  "version": "2.0.27",
   "description": "Effector JS Forms",
   "main": "index.js",
   "types": "index.d.ts",

package.json

@@ -1,6 +1,5 @@
 import type { FormEvent } from 'react';
-import { useEffect } from 'react';
-import React, { useMemo } from 'react';
+import React, { useMemo, useEffect } from 'react';
 import { useUnit } from 'effector-react';
 import pickBy from 'lodash/pickBy';
 import isEmpty from 'lodash/isEmpty';
@@ -24,6 +23,7 @@ export const Form = ({
   validateOnChange,
   validators,
   disableFieldsReinit,
+  serialize,
   ...props
 }: IRFormProps) => {
   const form: IForm = useMemo(() => {
@@ -36,6 +36,7 @@ export const Form = ({
         validateOnChange,
         validators,
         disableFieldsReinit,
+        serialize,
       },
       (val) => val !== undefined,
     );
@@ -54,6 +55,7 @@ export const Form = ({
   useEffect(() => {
     const config = pickBy(
       {
+        serialize,
         validators,
         initialValues,
         keepOnUnmount,
@@ -73,6 +75,7 @@ export const Form = ({
     initialValues,
     keepOnUnmount,
     validators,
+    serialize,
     name,
     form,
   ]);

src/FormComponent.tsx

@@ -11,6 +11,7 @@ export const FORM_CONFIG: IFormConfig = {
   validateOnChange: false,
   disableFieldsReinit: false,
   validators: {},
+  serialize: false,
 };
 
 export const FIELD_CONFIG: IFieldConfig = {
@@ -26,4 +27,4 @@ export const FIELD_CONFIG: IFieldConfig = {
 export const ARR_0 = Object.freeze([]);
 export const OBJ_0 = Object.freeze({});
 
-export const $null = domain.store<any>(null, { name: '$null' });
+export const $null = domain.store<any>(null, { name: '$null', sid: '$efx-forms-null' });

src/constants.ts

@@ -59,7 +59,11 @@ export const createFormHandler = (formConfig: IFormConfig): IForm => {
    * Fields status store - keeps fields active / mounted status
    */
   const $active = dm
-    .store<Record<string, boolean>>({}, { name: '$active' })
+    .store<Record<string, boolean>>({}, {
+      name: '$active',
+      serialize: formConfig.serialize ? undefined : 'ignore',
+      sid: `efx-forms-${formConfig.name}-$active`,
+    })
     .on(setActive, (state, { name, value }) =>
       state[name] !== value ? Object.assign({}, state, { [name]: value }) : state,
     )
@@ -69,7 +73,11 @@ export const createFormHandler = (formConfig: IFormConfig): IForm => {
    * Values store - fields values
    */
   const $values = dm
-    .store<Record<string, any>>({}, { name: '$values' })
+    .store<Record<string, any>>({}, {
+      name: '$values',
+      serialize: formConfig.serialize ? undefined : 'ignore',
+      sid: `efx-forms-${formConfig.name}-$values`,
+    })
     .on(setValues, (state, values) => Object.assign({}, state, values))
     .on(onChange, (state, { name, value }) => {
       const parse = data.configs[name]?.parse || FIELD_CONFIG.parse!;
@@ -109,7 +117,11 @@ export const createFormHandler = (formConfig: IFormConfig): IForm => {
    * Validations store - keeps all fields validation errors
    */
   const $errors = dm
-    .store<Record<string, string[] | null>>({}, { name: '$errors' })
+    .store<Record<string, string[] | null>>({}, {
+      name: '$errors',
+      serialize: formConfig.serialize ? undefined : 'ignore',
+      sid: `efx-forms-${formConfig.name}-$errors`,
+    })
     .on(setError, (state, { name, errors }) =>
       Object.assign({}, state, { [name]: errors }),
     )
@@ -198,7 +210,11 @@ export const createFormHandler = (formConfig: IFormConfig): IForm => {
    * Touches store - keeps all fields touch state
    */
   const $touches = dm
-    .store<Record<string, boolean>>({}, { name: '$touches' })
+    .store<Record<string, boolean>>({}, {
+      name: '$touches',
+      serialize: formConfig.serialize ? undefined : 'ignore',
+      sid: `efx-forms-${formConfig.name}-$touches`,
+    })
     .on(onChange, (state, { name }) =>
       state[name] ? state : Object.assign({}, state, { [name]: true }),
     )
@@ -225,7 +241,11 @@ export const createFormHandler = (formConfig: IFormConfig): IForm => {
    * Dirties store - keeps all fields dirty state
    */
   const $dirties = dm
-    .store<Record<string, boolean>>({}, { name: '$dirties' })
+    .store<Record<string, boolean>>({}, {
+      name: '$dirties',
+      serialize: formConfig.serialize ? undefined : 'ignore',
+      sid: `efx-forms-${formConfig.name}-$dirties`,
+    })
     .on(onChange, (state, { name, value }) => {
       const dirty = value !== getFieldInitVal(data, name);
       return state[name] === dirty ? state : Object.assign({}, state, { [name]: dirty });

src/form.ts

@@ -47,6 +47,7 @@ test('Form Update', async ({ mount }) => {
     keepOnUnmount: false,
     name: 'formUpdate',
     onSubmit: undefined,
+    serialize: false,
     skipClientValidation: false,
     validateOnBlur: true,
     validateOnChange: false,
@@ -100,6 +101,7 @@ test('Form Update', async ({ mount }) => {
     keepOnUnmount: true,
     name: 'formUpdate',
     onSubmit: undefined,
+    serialize: false,
     skipClientValidation: true,
     validateOnBlur: false,
     validateOnChange: true,
@@ -153,6 +155,7 @@ test('Form Update', async ({ mount }) => {
     keepOnUnmount: false,
     name: 'formUpdate',
     onSubmit: undefined,
+    serialize: false,
     skipClientValidation: false,
     validateOnBlur: true,
     validateOnChange: false,

src/tests/Update.spec.tsx

@@ -84,6 +84,8 @@ export interface IFormConfig {
   validateOnChange?: boolean;
   /** PROPERTY - keepOnUnmount - keep form data on form unmount */
   keepOnUnmount?: boolean;
+  /** PROPERTY - serialize forms stores, default false */
+  serialize?: boolean;
   /** PROPERTY - skipClientValidation - if true will skip validation on submit */
   skipClientValidation?: boolean;
   /**

src/types.ts

@@ -3,6 +3,9 @@ import type { Domain, Store } from 'effector';
 import reduce from 'lodash/reduce';
 import set from 'lodash/set';
 import pickBy from 'lodash/pickBy';
+import forEach from 'lodash/forEach';
+import isArray from 'lodash/isArray';
+import isPlainObject from 'lodash/isPlainObject';
 
 export const domain: Domain = createDomain('@fx-forms');
 
@@ -34,3 +37,28 @@ export const shapeFyStore = ($store: Store<TObject>) => $store.map(shapeFy);
  */
 export const hasTruthy = (obj: Record<string, any>) =>
   Object.values(obj).some(Boolean);
+
+/**
+ * Transform object to flat, one level, object
+ */
+export const flattenObjectKeys = (obj = {}) => {
+  const result = {};
+
+  const flatten = (collection: Record<string, any>, prefix = '', suffix = '') => {
+    forEach(collection, (value, key) => {
+      const path = `${prefix}${key}${suffix}`;
+
+      if (isArray(value)) {
+        flatten(value, `${path}[`, ']');
+      } else if (isPlainObject(value)) {
+        flatten(value, `${path}.`);
+      } else {
+        result[path] = value;
+      }
+    });
+  };
+
+  flatten(obj);
+
+  return result;
+};