react-form-manage 1.0.8-beta.14 → 1.0.8-beta.16

package/dist/hooks/useFormItemControl.js

@@ -295,6 +295,14 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
         onReset
       });
     }
+    return () => {
+      if (listener) {
+        setCleanUpStack({
+          name: listener.name,
+          itemKey: listener.formItemId
+        });
+      }
+    };
   }, []);
   useEffect(() => {
     if (listener) {
@@ -317,13 +325,6 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
         onChange(getNewDataFromCache);
     }
   }, [name, formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)]);
-  useEffect(() => {
-    return () => {
-      setCleanUpStack({
-        itemKey: formItemId
-      });
-    };
-  }, []);
   useEffect(() => {
   }, [submitState]);
   return {

package/dist/providers/Form.d.ts

@@ -22,9 +22,6 @@ declare namespace Form {
     var useSubmitDataWatch: typeof import("./Form").useSubmitDataWatch;
     var useFormStateWatch: <T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) => any;
     var useFormItemStateWatch: <T = any>(nameOrFormItemId: string, formNameOrFormInstance?: string | PublicFormInstance<T>) => UseFormItemStateWatchReturn;
-    var useWatchFormListeners: <T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) => {
-        listeners: import("../stores/formStore").ListenerItem[];
-    };
 }
 export default Form;
 export declare function useFormContext(): any;
@@ -37,6 +34,3 @@ export declare function useSubmitDataWatch<T = any>({ formNameOrFormInstance, tr
 }): T | undefined;
 export declare const useFormStateWatch: <T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) => any;
 export declare const useFormItemStateWatch: <T = any>(nameOrFormItemId: string, formNameOrFormInstance?: string | PublicFormInstance<T>) => UseFormItemStateWatchReturn;
-export declare const useWatchFormListeners: <T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) => {
-    listeners: import("../stores/formStore").ListenerItem[];
-};

package/dist/providers/Form.js

@@ -311,22 +311,11 @@ const useFormItemStateWatch = (nameOrFormItemId, formNameOrFormInstance) => {
     errors: (listener == null ? void 0 : listener.internalErrors) || []
   };
 };
-const useWatchFormListeners = (formNameOrFormInstance) => {
-  const [formInstance] = useForm(formNameOrFormInstance);
-  const listeners = useFormStore(useShallow((state) => {
-    const allListeners = state.listeners;
-    return {
-      listeners: allListeners.filter((l) => !isNil(formNameOrFormInstance) ? true : l.formName === (formInstance == null ? void 0 : formInstance.formName))
-    };
-  }));
-  return listeners;
-};
 Form.useForm = useForm;
 Form.useWatch = useWatch;
 Form.useSubmitDataWatch = useSubmitDataWatch;
 Form.useFormStateWatch = useFormStateWatch;
 Form.useFormItemStateWatch = useFormItemStateWatch;
-Form.useWatchFormListeners = useWatchFormListeners;
 export {
   FormContext,
   Form as default,
@@ -335,6 +324,5 @@ export {
   useFormItemStateWatch,
   useFormStateWatch,
   useSubmitDataWatch,
-  useWatch,
-  useWatchFormListeners
+  useWatch
 };

package/dist/stores/formStore.js

@@ -237,17 +237,19 @@ const createListenersSlice = (storeSet, storeGet, api) => ({
         }
         return;
       }
-      storeListeners.push({
-        name,
-        formName,
-        isTouched: Boolean(isTouched),
-        isDirty: Boolean(isDirty),
-        formItemId,
-        internalErrors,
-        onChange,
-        onReset,
-        isInitied: Boolean(isInitied)
-      });
+      if (name && formName) {
+        storeListeners.push({
+          name,
+          formName,
+          isTouched: Boolean(isTouched),
+          isDirty: Boolean(isDirty),
+          formItemId,
+          internalErrors,
+          onChange,
+          onReset,
+          isInitied: Boolean(isInitied)
+        });
+      }
     }));
   },
   revokeListener(formItemId, onAfterRevoke) {

package/dist/test/TestListener.d.ts

@@ -0,0 +1,3 @@
+type Props = {};
+declare function TestListener({}: Props): import("react/jsx-runtime").JSX.Element;
+export default TestListener;

package/dist/test/TestListener.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneDeep } from "lodash";
+import { useEffect } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { useFormStore } from "../stores/formStore";
+function TestListener({}) {
+  const { listeners } = useFormStore(useShallow((state) => ({
+    listeners: state.listeners
+  })));
+  useEffect(() => {
+  }, [listeners]);
+  return _jsx("div", { children: "TestListener" });
+}
+var stdin_default = TestListener;
+export {
+  stdin_default as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-manage",
-  "version": "1.0.8-beta.14",
+  "version": "1.0.8-beta.16",
   "description": "Lightweight React form management with list and listener support.",
   "license": "MIT",
   "type": "module",

package/src/App.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, Dialog, DialogContent, TextField } from "@mui/material";
+import { Checkbox } from "@mui/material";
 import { Button, Input } from "antd";
 import { motion } from "framer-motion";
 import { useEffect } from "react";
@@ -8,7 +8,6 @@ import InputWrapper from "./components/Form/InputWrapper";
 import Form, { useForm } from "./providers/Form";
 
 import { Form as AntdForm } from "antd";
-import { useToggle } from "minh-custom-hooks-release";
 
 function TestFormWatch() {
   const watchValue = Form.useWatch("numericCode");
@@ -16,37 +15,9 @@ function TestFormWatch() {
   return <div>TestFormWatch</div>;
 }
 
-function TestMuiDialog({
-  open,
-  onClose,
-}: {
-  open: boolean;
-  onClose: () => void;
-}) {
-  return (
-    <Dialog open={open} onClose={onClose}>
-      <DialogContent>
-        {" "}
-        <Form
-          onFinish={(values) => {
-            console.log("Mui Dialog Form Values: ", values);
-          }}
-          formName="ADD_FORM"
-        >
-          <FormItem name="oooo">
-            <TextField />
-          </FormItem>
-
-          <Button htmlType="submit">Submit</Button>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
 const App = () => {
   const [form] = useForm("form1");
-  const { state: open, toggle } = useToggle(false);
+
   const watchCheckBox = Form.useWatch("checkControlledAfterInit", "form1");
 
   useEffect(() => {
@@ -209,9 +180,6 @@ const App = () => {
           Reset
         </Button>
       </Form>
-
-      <Button onClick={toggle}>Toggle Dialog</Button>
-      <TestMuiDialog onClose={toggle} open={open} />
     </div>
   );
 };

package/src/components/Form/FormItem.tsx

@@ -64,7 +64,6 @@ export default function FormItem({
   //     controlAfterInit,
   //   });
   // }, [isInitied]);
-
   return (
     <Fragment
       key={`control-after-init-${Boolean(controlAfterInit && isInitied) ? "1" : "0"}-${formItemId}`}

package/src/hooks/useFormItemControl.ts

@@ -561,6 +561,15 @@ export default function useFormItemControl<T = any>({
       });
     }
 
+    return () => {
+      if (listener) {
+        setCleanUpStack({
+          name: listener.name,
+          itemKey: listener.formItemId,
+        });
+      }
+    };
+
     // return () => {
     //   console.log("Revoke listener", listener);
 
@@ -596,14 +605,6 @@ export default function useFormItemControl<T = any>({
     }
   }, [name, formName || form?.formName || contextForm?.formName]);
 
-  useEffect(() => {
-    return () => {
-      setCleanUpStack({
-        itemKey: formItemId,
-      });
-    };
-  }, []);
-
   useEffect(() => {
     console.log("Submit state changed in useFormItemControl: ", submitState);
   }, [submitState]);

package/src/index.ts

@@ -18,12 +18,11 @@ import InputWrapper, { type InputWrapperProps } from "./components/Form/InputWra
 
 import useFormItemControl from "./hooks/useFormItemControl";
 import useFormListControl from "./hooks/useFormListControl";
-
-import { 
-  useFormStore, 
-  type FormInstance, 
-  type ListenerItem, 
-  type CleanUpItem 
+import {
+  useFormStore,
+  type FormInstance,
+  type ListenerItem,
+  type CleanUpItem,
 } from "./stores/formStore";
 
 export {

package/src/providers/Form.tsx

@@ -509,30 +509,8 @@ export const useFormItemStateWatch = <T = any,>(
   };
 };
 
-export const useWatchFormListeners = <T = any,>(
-  formNameOrFormInstance?: string | PublicFormInstance<T>,
-) => {
-  const [formInstance] = useForm<T>(formNameOrFormInstance as any);
-
-  const listeners = useFormStore(
-    useShallow((state) => {
-      const allListeners = state.listeners;
-      return {
-        listeners: allListeners.filter((l) =>
-          !isNil(formNameOrFormInstance)
-            ? true
-            : l.formName === formInstance?.formName,
-        ),
-      };
-    }),
-  );
-
-  return listeners;
-};
-
 Form.useForm = useForm;
 Form.useWatch = useWatch;
 Form.useSubmitDataWatch = useSubmitDataWatch;
 Form.useFormStateWatch = useFormStateWatch;
 Form.useFormItemStateWatch = useFormItemStateWatch;
-Form.useWatchFormListeners = useWatchFormListeners;

package/src/stores/formStore.ts

@@ -51,8 +51,6 @@ interface FormStoreState {
   // methods (loose typed for incremental migration)
   [key: string]: any;
 }
-
-// Combined store containing all form-related state
 // Form Store Slice
 const createFormStoreSlice = (storeSet: any, storeGet: any, api: any) => ({
   forms: {},
@@ -61,310 +59,310 @@ const createFormStoreSlice = (storeSet: any, storeGet: any, api: any) => ({
   cacheData: {},
   formInstances: [],
   submitHistory: {},
-    setData(formName, name, value) {
-      return storeSet(
-        produce<any>((state: any) => {
-          const oldValues = state.forms;
-          set(oldValues, `${formName}.${name}`, value);
-        }),
-      );
-    },
-
-    getCacheData(formName) {
-      return get(storeGet(), `cacheData.${formName}`);
-    },
-
-    setCacheData(formName, name, value) {
-      return storeSet(
-        produce<any>((state: any) => {
-          const oldValues = state.cacheData;
-          set(oldValues, `${formName}.${name}`, value);
-        }),
-      );
-    },
-
-    clearCacheData(formName) {
-      return storeSet(
-        produce<any>((state: any) => {
-          const oldValues = state.cacheData;
-
-          if (formName) {
-            set(oldValues, formName, {});
-          } else {
-            set(oldValues, "", {});
-          }
-        }),
-      );
-    },
+  setData(formName, name, value) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.forms;
+        set(oldValues, `${formName}.${name}`, value);
+      }),
+    );
+  },
+
+  getCacheData(formName) {
+    return get(storeGet(), `cacheData.${formName}`);
+  },
+
+  setCacheData(formName, name, value) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.cacheData;
+        set(oldValues, `${formName}.${name}`, value);
+      }),
+    );
+  },
+
+  clearCacheData(formName) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.cacheData;
 
-    getFormItemValue(formName, name) {
-      return get(storeGet().forms?.[formName], name);
-    },
+        if (formName) {
+          set(oldValues, formName, {});
+        } else {
+          set(oldValues, "", {});
+        }
+      }),
+    );
+  },
 
-    getFormValues(formName) {
-      return storeGet().forms?.[formName];
-    },
+  getFormItemValue(formName, name) {
+    return get(storeGet().forms?.[formName], name);
+  },
 
-    clearFormValues(formName) {
-      return storeSet(
-        produce<any>((state: any) => {
-          const oldValues = state.forms;
+  getFormValues(formName) {
+    return storeGet().forms?.[formName];
+  },
 
-          // console.log("Clear form values", formName);
+  clearFormValues(formName) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.forms;
+
+        // console.log("Clear form values", formName);
+
+        unset(oldValues, formName);
+
+        // console.log(JSON.parse(JSON.stringify(oldValues)));
+      }),
+    );
+  },
+
+  clearFormInitialValues(formName) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.initialValues;
 
-          unset(oldValues, formName);
+        // console.log("Clear form initial values", formName);
 
-          // console.log(JSON.parse(JSON.stringify(oldValues)));
-        }),
-      );
-    },
+        unset(oldValues, formName);
 
-    clearFormInitialValues(formName) {
-      return storeSet(
-        produce<any>((state: any) => {
-          const oldValues = state.initialValues;
+        // console.log(JSON.parse(JSON.stringify(oldValues)));
+      }),
+    );
+  },
 
-          // console.log("Clear form initial values", formName);
+  clearObjKeyItem(formName, name) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.forms;
 
-          unset(oldValues, formName);
+        // console.log("Clear item value", formName, name);
 
-          // console.log(JSON.parse(JSON.stringify(oldValues)));
-        }),
-      );
-    },
+        unset(oldValues, `${formName}.${name}`);
 
-    clearObjKeyItem(formName, name) {
-      return storeSet(
-        produce<any>((state: any) => {
-          const oldValues = state.forms;
+        // console.log(JSON.parse(JSON.stringify(oldValues)));
+      }),
+    );
+  },
+  clearArrItem(formName, name) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.forms;
 
-          // console.log("Clear item value", formName, name);
+        console.log("Clear item array value", formName, name);
 
-          unset(oldValues, `${formName}.${name}`);
+        const arrPath = name.split(".").slice(0, -1).join(".");
 
-          // console.log(JSON.parse(JSON.stringify(oldValues)));
-        }),
-      );
-    },
-    clearArrItem(formName, name) {
-      return storeSet(
-        produce<any>((state: any) => {
-          const oldValues = state.forms;
+        const elPath = Number(name.split(".").slice(-1).join(""));
 
-          console.log("Clear item array value", formName, name);
+        const getArrItem = get(oldValues, `${formName}.${arrPath}`);
 
-          const arrPath = name.split(".").slice(0, -1).join(".");
+        if (isNumber(elPath)) {
+          getArrItem.splice(elPath, 1);
+        }
 
-          const elPath = Number(name.split(".").slice(-1).join(""));
+        // console.log(JSON.parse(JSON.stringify(oldValues)));
+      }),
+    );
+  },
 
-          const getArrItem = get(oldValues, `${formName}.${arrPath}`);
+  setFormState({ formName, isInitied, submitState }) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.formStates;
+        const getFormState = get(storeGet().formStates, formName);
 
-          if (isNumber(elPath)) {
-            getArrItem.splice(elPath, 1);
+        if (isNil(getFormState)) {
+          set(oldValues, formName, { isInitied, submitState });
+        } else {
+          if (!isNil(isInitied)) {
+            set(oldValues, `${formName}.isInitied`, isInitied);
           }
 
-          // console.log(JSON.parse(JSON.stringify(oldValues)));
-        }),
-      );
-    },
-
-    setFormState({ formName, isInitied, submitState }) {
-      return storeSet(
-        produce<any>((state: any) => {
-          const oldValues = state.formStates;
-          const getFormState = get(storeGet().formStates, formName);
-
-          if (isNil(getFormState)) {
-            set(oldValues, formName, { isInitied, submitState });
-          } else {
-            if (!isNil(isInitied)) {
-              set(oldValues, `${formName}.isInitied`, isInitied);
-            }
-
-            if (!isNil(submitState)) {
-              set(oldValues, `${formName}.submitState`, submitState);
-            }
+          if (!isNil(submitState)) {
+            set(oldValues, `${formName}.submitState`, submitState);
           }
-        }),
-      );
-    },
+        }
+      }),
+    );
+  },
 
-    clearFormState(formName) {
-      return storeSet(
-        produce<any>((state: any) => {
-          const oldValues = state.formStates;
+  clearFormState(formName) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.formStates;
 
-          // console.log("Clear form state", formName);
+        // console.log("Clear form state", formName);
 
-          unset(oldValues, formName);
+        unset(oldValues, formName);
 
-          // console.log(JSON.parse(JSON.stringify(oldValues)));
-        }),
-      );
-    },
+        // console.log(JSON.parse(JSON.stringify(oldValues)));
+      }),
+    );
+  },
 
-    getFormState(formName) {
-      return get(storeGet(), `formStates.${formName}`);
-    },
+  getFormState(formName) {
+    return get(storeGet(), `formStates.${formName}`);
+  },
 
-    setFormInitData(formName, initValues) {
-      return storeSet(
-        produce<any>((state: any) => {
-          const oldValues = state.initialValues;
-          const listInitPath = getAllNoneObjStringPath(initValues);
+  setFormInitData(formName, initValues) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.initialValues;
+        const listInitPath = getAllNoneObjStringPath(initValues);
 
-          // console.log({ listInitPath, initValues });
+        // console.log({ listInitPath, initValues });
 
-          listInitPath.forEach((k) => {
-            if (get(initValues, k)) {
-              // console.log("init form data values: ", k, get(initValues, k));
-              set(oldValues, `${formName}.${k}`, get(initValues, k));
-            }
-          });
-        }),
-      );
-    },
-
-    getInitData(formName, name) {
-      return get(storeGet().initialValues, `${formName}.${name}`);
-    },
-
-    setInitData(formName, name, value) {
-      return storeSet(
-        produce<any>((state: any) => {
-          const oldValues = state.initialValues;
-          console.log("Inner init: ", `${formName}.${name}`, value);
-          set(oldValues, `${formName}.${name}`, value);
-        }),
-      );
-    },
-
-    setFormInstance({
-      formName,
-      resetFields,
-      submit,
-      submitAsync,
-      setFieldValue,
-      setFieldValues,
-      getFieldValue,
-      getFieldValues,
-      getFieldErrors,
-      setFieldFocus,
-    }) {
-      return storeSet(
-        produce<any>((state: any) => {
-          const storeListeners = state.formInstances;
-          const findListenerIndex = storeListeners.findIndex(
-            (l) => l.formName === formName,
-          );
-          if (findListenerIndex > -1) {
-            if (!isNil(resetFields)) {
-              storeListeners[findListenerIndex].resetFields = resetFields;
-            }
-            if (!isNil(submit)) {
-              storeListeners[findListenerIndex].submit = submit;
-            }
-            if (!isNil(setFieldFocus)) {
-              storeListeners[findListenerIndex].setFieldFocus = setFieldFocus;
-            }
-            if (!isNil(submitAsync)) {
-              storeListeners[findListenerIndex].submitAsync = submitAsync;
-            }
-
-            if (!isNil(setFieldValue)) {
-              storeListeners[findListenerIndex].setFieldValue = setFieldValue;
-            }
-
-            if (!isNil(setFieldValues)) {
-              storeListeners[findListenerIndex].setFieldValues = setFieldValues;
-            }
-
-            if (!isNil(getFieldValue)) {
-              storeListeners[findListenerIndex].getFieldValue = getFieldValue;
-            }
-
-            if (!isNil(getFieldValues)) {
-              storeListeners[findListenerIndex].getFieldValues = getFieldValues;
-            }
-
-            if (!isNil(getFieldErrors)) {
-              storeListeners[findListenerIndex].getFieldErrors = getFieldErrors;
-            }
-
-            return;
+        listInitPath.forEach((k) => {
+          if (get(initValues, k)) {
+            // console.log("init form data values: ", k, get(initValues, k));
+            set(oldValues, `${formName}.${k}`, get(initValues, k));
+          }
+        });
+      }),
+    );
+  },
+
+  getInitData(formName, name) {
+    return get(storeGet().initialValues, `${formName}.${name}`);
+  },
+
+  setInitData(formName, name, value) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.initialValues;
+        console.log("Inner init: ", `${formName}.${name}`, value);
+        set(oldValues, `${formName}.${name}`, value);
+      }),
+    );
+  },
+
+  setFormInstance({
+    formName,
+    resetFields,
+    submit,
+    submitAsync,
+    setFieldValue,
+    setFieldValues,
+    getFieldValue,
+    getFieldValues,
+    getFieldErrors,
+    setFieldFocus,
+  }) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const storeListeners = state.formInstances;
+        const findListenerIndex = storeListeners.findIndex(
+          (l) => l.formName === formName,
+        );
+        if (findListenerIndex > -1) {
+          if (!isNil(resetFields)) {
+            storeListeners[findListenerIndex].resetFields = resetFields;
+          }
+          if (!isNil(submit)) {
+            storeListeners[findListenerIndex].submit = submit;
+          }
+          if (!isNil(setFieldFocus)) {
+            storeListeners[findListenerIndex].setFieldFocus = setFieldFocus;
+          }
+          if (!isNil(submitAsync)) {
+            storeListeners[findListenerIndex].submitAsync = submitAsync;
           }
-          storeListeners.push({
-            formName,
-            resetFields,
-            submit,
-            submitAsync,
-            setFieldValue,
-            setFieldValues,
-            getFieldValue,
-            getFieldValues,
-            getFieldErrors,
-            setFieldFocus,
-          });
-        }),
-      );
-    },
-    revokeFormInstance({ formName }) {
-      return storeSet(
-        produce<any>((state: any) => {
-          const instances = state.formInstances;
-
-          const findInstanceIndex = instances.findIndex(
-            (l) => l.formName == formName,
-          );
 
-          // console.log("Find item for revoke: ", findListenerIndex, formItemId);
+          if (!isNil(setFieldValue)) {
+            storeListeners[findListenerIndex].setFieldValue = setFieldValue;
+          }
 
-          if (findInstanceIndex > -1) {
-            // const listenersInfo = cloneDeep(instances[findInstanceIndex]);
+          if (!isNil(setFieldValues)) {
+            storeListeners[findListenerIndex].setFieldValues = setFieldValues;
+          }
 
-            instances.splice(findInstanceIndex, 1);
+          if (!isNil(getFieldValue)) {
+            storeListeners[findListenerIndex].getFieldValue = getFieldValue;
+          }
 
-            // onAfterRevoke(
-            //   listenersInfo,
-            //   instances.filter(
-            //     (l) =>
-            //       l.name === listenersInfo.name &&
-            //       l.formName === listenersInfo.formName &&
-            //       l.formItemId !== listenersInfo.formItemId
-            //   )
-            // );
+          if (!isNil(getFieldValues)) {
+            storeListeners[findListenerIndex].getFieldValues = getFieldValues;
           }
-        }),
-      );
-    },
-
-    getCurrentSubmit(formName) {
-      return last(get(storeGet().submitHistory, formName)) || null;
-    },
-    getSubmitHistory(formName) {
-      return get(storeGet().submitHistory, formName);
-    },
-    setSubmitHistory(formName, submitData) {
-      return storeSet(
-        produce<any>((state: any) => {
-          const oldValues = get(state.submitHistory, formName);
-          if (oldValues) {
-            oldValues.push(submitData);
-            oldValues.splice(0, oldValues.length - 3);
-          } else {
-            set(state.submitHistory, formName, [submitData]);
+
+          if (!isNil(getFieldErrors)) {
+            storeListeners[findListenerIndex].getFieldErrors = getFieldErrors;
           }
-          console.log("Submit history: ", formName);
-        }),
-      );
-    },
+
+          return;
+        }
+        storeListeners.push({
+          formName,
+          resetFields,
+          submit,
+          submitAsync,
+          setFieldValue,
+          setFieldValues,
+          getFieldValue,
+          getFieldValues,
+          getFieldErrors,
+          setFieldFocus,
+        });
+      }),
+    );
+  },
+  revokeFormInstance({ formName }) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const instances = state.formInstances;
+
+        const findInstanceIndex = instances.findIndex(
+          (l) => l.formName == formName,
+        );
+
+        // console.log("Find item for revoke: ", findListenerIndex, formItemId);
+
+        if (findInstanceIndex > -1) {
+          // const listenersInfo = cloneDeep(instances[findInstanceIndex]);
+
+          instances.splice(findInstanceIndex, 1);
+
+          // onAfterRevoke(
+          //   listenersInfo,
+          //   instances.filter(
+          //     (l) =>
+          //       l.name === listenersInfo.name &&
+          //       l.formName === listenersInfo.formName &&
+          //       l.formItemId !== listenersInfo.formItemId
+          //   )
+          // );
+        }
+      }),
+    );
+  },
+
+  getCurrentSubmit(formName) {
+    return last(get(storeGet().submitHistory, formName)) || null;
+  },
+  getSubmitHistory(formName) {
+    return get(storeGet().submitHistory, formName);
+  },
+  setSubmitHistory(formName, submitData) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = get(state.submitHistory, formName);
+        if (oldValues) {
+          oldValues.push(submitData);
+          oldValues.splice(0, oldValues.length - 3);
+        } else {
+          set(state.submitHistory, formName, [submitData]);
+        }
+        console.log("Submit history: ", formName);
+      }),
+    );
+  },
 });
 
 // Listeners Slice
 const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
   listeners: [],
-  getListener(formItemId: string) {
-    return storeGet().listeners.find((l: any) => l.formItemId === formItemId);
+  getListener(formItemId) {
+    return storeGet().listeners.find((l) => l.formItemId === formItemId);
   },
   getListeners() {
     return storeGet().listeners;
@@ -381,7 +379,7 @@ const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
     onFocus,
     emitFocus,
     isInitied,
-  }: any) {
+  }) {
     return storeSet(
       produce<any>((state: any) => {
         const storeListeners = state.listeners;
@@ -424,21 +422,23 @@ const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
 
           return;
         }
-        storeListeners.push({
-          name,
-          formName,
-          isTouched: Boolean(isTouched),
-          isDirty: Boolean(isDirty),
-          formItemId,
-          internalErrors,
-          onChange,
-          onReset,
-          isInitied: Boolean(isInitied),
-        });
+        if (name && formName) {
+          storeListeners.push({
+            name,
+            formName,
+            isTouched: Boolean(isTouched),
+            isDirty: Boolean(isDirty),
+            formItemId,
+            internalErrors,
+            onChange,
+            onReset,
+            isInitied: Boolean(isInitied),
+          });
+        }
       }),
     );
   },
-  revokeListener(formItemId: string, onAfterRevoke: any) {
+  revokeListener(formItemId, onAfterRevoke) {
     return storeSet(
       produce<any>((state: any) => {
         const storeListeners = state.listeners;
@@ -447,6 +447,8 @@ const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
           (l: any) => l.formItemId == formItemId,
         );
 
+        // console.log("Find item for revoke: ", findListenerIndex, formItemId);
+
         if (findListenerIndex > -1) {
           const listenersInfo = cloneDeep(storeListeners[findListenerIndex]);
 
@@ -470,7 +472,7 @@ const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
 // CleanUp Slice
 const createCleanUpSlice = (storeSet: any, storeGet: any, api: any) => ({
   cleanUpStack: [],
-  setCleanUpStack({ name, type, itemKey, formName }: any) {
+  setCleanUpStack({ name, type, itemKey, formName }) {
     return storeSet(
       produce<any>((state: any) => {
         const oldValues = state.cleanUpStack;

package/src/test/TestListener.tsx

@@ -0,0 +1,21 @@
+import { cloneDeep } from "lodash";
+import { useEffect } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { useFormStore } from "../stores/formStore";
+
+type Props = {};
+
+function TestListener({}: Props) {
+  const { listeners } = useFormStore(
+    useShallow((state) => ({
+      listeners: state.listeners,
+    })),
+  );
+
+  useEffect(() => {
+    console.log("Listeners updated: ", cloneDeep(listeners));
+  }, [listeners]);
+  return <div>TestListener</div>;
+}
+
+export default TestListener;