mobx-react-use-autorun 3.1.3 → 3.1.9

package/README.md

@@ -6,7 +6,7 @@ Provide concise usage for mobx in react<br/>
 
 # `Usage`
 
-### Notes - Define state and props with useMobxState
+### Define state and props with useMobxState
 
     import { useMobxState, observer } from 'mobx-react-use-autorun';
     import { useRef } from 'react';
@@ -110,7 +110,7 @@ The second:
 
 Provide a method to generate state, the state is executed only once, and the performance is better.<br/>
 
-### Notes - Subscription property changes with useMobxEffect
+### Subscription property changes with useMobxEffect
 
     import { useMobxState, observer } from 'mobx-react-use-autorun';
     import { useMobxEffect, toJS } from 'mobx-react-use-autorun'
@@ -128,7 +128,37 @@ Provide a method to generate state, the state is executed only once, and the per
         </div>
     })
 
-### Notes - Get the real data of the proxy object with toJS
+### Lifecycle hooks
+
+useMount is executed when the component loaded.<br/>
+useUnmount is executed when the component is unmount.<br/>
+
+    import { Subscription, of, tap } from 'rxjs'
+    import { useMobxState, observer } from 'mobx-react-use-autorun'
+    import { useMount, useUnmount } from 'mobx-react-use-autorun'
+
+    export default observer(() => {
+
+        const state = useMobxState({
+            subscription: new Subscription()
+        })
+
+        useMount(() => {
+            state.subscription.add(of(null).pipe(
+                tap(() => {
+                    console.log('component is loaded')
+                })
+            ).subscribe())
+        })
+
+        useUnmount(() => {
+            state.subscription.unsubscribe()
+        })
+
+        return null;
+    })
+
+### Get the real data of the proxy object with toJS
 
 toJS will cause data to be used, please do not execute toJS(state) in component rendering code, it may cause repeated rendering.<br/>
 Wrong Usage Demonstration:<br/>
@@ -169,7 +199,7 @@ Correct Example:<br/>
         return <button onClick={() => console.log(toJS(state))}>{'Click Me'}</button>;
     })
 
-### Notes - Define global mutable data with observable
+### Define global mutable data with observable
 
     import { observable } from 'mobx-react-use-autorun';
 
@@ -195,36 +225,6 @@ Correct Example:<br/>
         </div>;
     })
 
-## Notes - Lifecycle hooks
-
-useMount is executed when the component loaded.<br/>
-useUnmount is executed when the component is unmount.<br/>
-
-    import { Subscription, of, tap } from 'rxjs'
-    import { useMobxState, observer } from 'mobx-react-use-autorun'
-    import { useMount, useUnmount } from 'mobx-react-use-autorun'
-
-    export default observer(() => {
-
-        const state = useMobxState({
-            subscription: new Subscription()
-        })
-
-        useMount(() => {
-            state.subscription.add(of(null).pipe(
-                tap(() => {
-                    console.log('component is loaded')
-                })
-            ).subscribe())
-        })
-
-        useUnmount(() => {
-            state.subscription.unsubscribe()
-        })
-
-        return null;
-    })
-
 # Learn More
 
 1. React UI framework (https://reactjs.org)<br/>

package/dist/js/mobx_config.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobx_config.js","sourceRoot":"","sources":["../../lib/js/mobx_config.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAEjC,SAAS,CAAC;IACN,cAAc,EAAE,OAAO;CAC1B,CAAC,CAAA"}
+{"version":3,"file":"mobx_config.js","sourceRoot":"","sources":["../../lib/js/mobx_config.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAEjC,SAAS,CAAC;IACR,cAAc,EAAE,OAAO;CACxB,CAAC,CAAA"}

package/dist/js/useMobxEffect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMobxEffect.js","sourceRoot":"","sources":["../../lib/js/useMobxEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,QAAoB,EAAE,cAAsB;IAEtE,IAAM,KAAK,GAAG,YAAY,CAAC;QACvB,YAAY,EAAE,IAAI,YAAY,EAAE;KACnC,EAAE,EAAE,QAAQ,UAAA,EAAE,CAAC,CAAA;IAEhB,IAAM,MAAM,GAAG,YAAY,CAAC,EAAE,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC;IAEnE,SAAS,CAAC;QACN,IAAI,CAAC,cAAc,EAAE;YACjB,QAAQ,EAAE,CAAA;SACb;IACL,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC;QACL,IAAI,cAAc,EAAE;YAChB,IAAM,UAAQ,GAAG,QAAQ,CAAC,cAAM,OAAA,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAd,CAAc,EAAE,cAAM,OAAA,KAAK,CAAC,QAAQ,EAAE,EAAhB,CAAgB,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;YAE7G,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC;gBACpC,UAAQ,EAAE,CAAC;YACf,CAAC,CAAC,CAAC,CAAC;SACP;IACL,CAAC,CAAC,CAAA;IAEF,UAAU,CAAC;QACP,KAAK,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC;IACrC,CAAC,CAAC,CAAA;AACN,CAAC,CAAA"}
+{"version":3,"file":"useMobxEffect.js","sourceRoot":"","sources":["../../lib/js/useMobxEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,QAAoB,EAAE,cAAsB;IAExE,IAAM,KAAK,GAAG,YAAY,CAAC;QACzB,YAAY,EAAE,IAAI,YAAY,EAAE;KACjC,EAAE,EAAE,QAAQ,UAAA,EAAE,CAAC,CAAA;IAEhB,IAAM,MAAM,GAAG,YAAY,CAAC,EAAE,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC;IAEnE,SAAS,CAAC;QACR,IAAI,CAAC,cAAc,EAAE;YACnB,QAAQ,EAAE,CAAA;SACX;IACH,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC;QACP,IAAI,cAAc,EAAE;YAClB,IAAM,UAAQ,GAAG,QAAQ,CAAC,cAAM,OAAA,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAd,CAAc,EAAE,cAAM,OAAA,KAAK,CAAC,QAAQ,EAAE,EAAhB,CAAgB,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;YAE7G,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC;gBACtC,UAAQ,EAAE,CAAC;YACb,CAAC,CAAC,CAAC,CAAC;SACL;IACH,CAAC,CAAC,CAAA;IAEF,UAAU,CAAC;QACT,KAAK,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC;IACnC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/dist/js/useMobxState.js

@@ -1,11 +1,19 @@
 import { extendObservable, remove, isObservable, runInAction } from 'mobx';
 import { useLocalObservable } from 'mobx-react-lite';
+import { useRef } from 'react';
 export function useMobxState(state, props) {
     var mobxState = useLocalObservable(typeof state === "function" ? state : function () { return state; });
+    var keyListOfState = useRef([]);
     runInAction(function () {
         var _a, _b;
         var _c;
         if (props) {
+            for (var _i = 0, _d = keyListOfState.current; _i < _d.length; _i++) {
+                var key = _d[_i];
+                if (!Object.keys(props).includes(key)) {
+                    remove(mobxState, key);
+                }
+            }
             for (var key in props) {
                 if (isObservable(props[key]) || ((_c = Object.getOwnPropertyDescriptor(props, key)) === null || _c === void 0 ? void 0 : _c.get)) {
                     Object.defineProperty(mobxState, key, Object.getOwnPropertyDescriptor(props, key));
@@ -17,6 +25,10 @@ export function useMobxState(state, props) {
                     }
                 }
             }
+            keyListOfState.current.splice(0, keyListOfState.current.length);
+            for (var key in props) {
+                keyListOfState.current.push(key);
+            }
         }
     });
     return mobxState;

package/dist/js/useMobxState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMobxState.js","sourceRoot":"","sources":["../../lib/js/useMobxState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAKrD,MAAM,UAAU,YAAY,CAAyD,KAAoB,EAAE,KAAS;IAChH,IAAM,SAAS,GAAG,kBAAkB,CAAC,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAE,KAAa,CAAC,CAAC,CAAC,cAAM,OAAA,KAAK,EAAL,CAAK,CAAC,CAAC;IAEjG,WAAW,CAAC;;;QAER,IAAI,KAAK,EAAE;YACP,KAAK,IAAM,GAAG,IAAI,KAAK,EAAE;gBACrB,IAAI,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAI,MAAA,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,GAAG,CAAC,0CAAE,GAAG,CAAA,EAAE;oBAC9E,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,GAAG,EAAE,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,GAAG,CAAQ,CAAC,CAAA;iBAC5F;qBAAM;oBACH,IAAI,KAAK,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC,GAAG,CAAC,EAAE;wBAC/B,MAAM,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;wBACvB,gBAAgB,CAAC,SAAS,YAAI,GAAC,GAAG,IAAG,KAAK,CAAC,GAAG,CAAC,iBAAM,GAAC,GAAG,IAAG,KAAK,MAAG,CAAA;qBACvE;iBACJ;aACJ;SACJ;IACL,CAAC,CAAC,CAAA;IAEF,OAAO,SAAgB,CAAC;AAC5B,CAAC"}
+{"version":3,"file":"useMobxState.js","sourceRoot":"","sources":["../../lib/js/useMobxState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAK/B,MAAM,UAAU,YAAY,CAAyD,KAAoB,EAAE,KAAS;IAClH,IAAM,SAAS,GAAG,kBAAkB,CAAC,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAE,KAAa,CAAC,CAAC,CAAC,cAAM,OAAA,KAAK,EAAL,CAAK,CAAC,CAAC;IAEjG,IAAM,cAAc,GAAG,MAAM,CAAW,EAAE,CAAC,CAAC;IAE5C,WAAW,CAAC;;;QAEV,IAAI,KAAK,EAAE;YAET,KAAkB,UAAsB,EAAtB,KAAA,cAAc,CAAC,OAAO,EAAtB,cAAsB,EAAtB,IAAsB,EAAE;gBAArC,IAAM,GAAG,SAAA;gBACZ,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;oBACrC,MAAM,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;iBACxB;aACF;YAED,KAAK,IAAM,GAAG,IAAI,KAAK,EAAE;gBACvB,IAAI,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAI,MAAA,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,GAAG,CAAC,0CAAE,GAAG,CAAA,EAAE;oBAChF,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,GAAG,EAAE,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,GAAG,CAAQ,CAAC,CAAA;iBAC1F;qBAAM;oBACL,IAAI,KAAK,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC,GAAG,CAAC,EAAE;wBACjC,MAAM,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;wBACvB,gBAAgB,CAAC,SAAS,YAAI,GAAC,GAAG,IAAG,KAAK,CAAC,GAAG,CAAC,iBAAM,GAAC,GAAG,IAAG,KAAK,MAAG,CAAA;qBACrE;iBACF;aACF;YAED,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YAChE,KAAK,IAAM,GAAG,IAAI,KAAK,EAAE;gBACvB,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aAClC;SACF;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,SAAgB,CAAC;AAC1B,CAAC"}

package/lib/js/mobx_config.tsx

@@ -1,5 +1,5 @@
 import { configure } from 'mobx';
 
 configure({
-    enforceActions: 'never'
+  enforceActions: 'never'
 })

package/lib/js/useMobxEffect.tsx

@@ -6,29 +6,29 @@ import { useEffect } from 'react';
 
 export const useMobxEffect = (callback: () => void, dependencyList?: any[]): void => {
 
-    const state = useMobxState({
-        subscription: new Subscription(),
-    }, { callback })
+  const state = useMobxState({
+    subscription: new Subscription(),
+  }, { callback })
 
-    const source = useMobxState({}, Object.assign({}, dependencyList));
+  const source = useMobxState({}, Object.assign({}, dependencyList));
 
-    useEffect(() => {
-        if (!dependencyList) {
-            callback()
-        }
-    })
+  useEffect(() => {
+    if (!dependencyList) {
+      callback()
+    }
+  })
 
-    useMount(() => {
-        if (dependencyList) {
-            const disposer = reaction(() => [toJS(source)], () => state.callback(), { fireImmediately: true, delay: 1 });
+  useMount(() => {
+    if (dependencyList) {
+      const disposer = reaction(() => [toJS(source)], () => state.callback(), { fireImmediately: true, delay: 1 });
 
-            state.subscription.add(new Subscription(() => {
-                disposer();
-            }));
-        }
-    })
+      state.subscription.add(new Subscription(() => {
+        disposer();
+      }));
+    }
+  })
 
-    useUnmount(() => {
-        state.subscription.unsubscribe();
-    })
+  useUnmount(() => {
+    state.subscription.unsubscribe();
+  })
 }

package/lib/js/useMobxState.tsx

@@ -1,27 +1,42 @@
 import { extendObservable, remove, isObservable, runInAction } from 'mobx';
 import { useLocalObservable } from 'mobx-react-lite';
+import { useRef } from 'react';
 
 export function useMobxState<T extends Record<any, any>>(state: T | (() => T)): T;
 export function useMobxState<T extends Record<any, any>, P extends Record<any, any>>(state: T | (() => T), props: P): T & P;
 
 export function useMobxState<T extends Record<any, any>, P extends Record<any, any>>(state: T | (() => T), props?: P): T & P {
-    const mobxState = useLocalObservable(typeof state === "function" ? (state as any) : () => state);
-
-    runInAction(() => {
-
-        if (props) {
-            for (const key in props) {
-                if (isObservable(props[key]) || Object.getOwnPropertyDescriptor(props, key)?.get) {
-                    Object.defineProperty(mobxState, key, Object.getOwnPropertyDescriptor(props, key) as any)
-                } else {
-                    if (props[key] !== mobxState[key]) {
-                        remove(mobxState, key);
-                        extendObservable(mobxState, { [key]: props[key] }, { [key]: false })
-                    }
-                }
-            }
+  const mobxState = useLocalObservable(typeof state === "function" ? (state as any) : () => state);
+
+  const keyListOfState = useRef<string[]>([]);
+
+  runInAction(() => {
+
+    if (props) {
+
+      for (const key of keyListOfState.current) {
+        if (!Object.keys(props).includes(key)) {
+          remove(mobxState, key);
         }
-    })
+      }
+
+      for (const key in props) {
+        if (isObservable(props[key]) || Object.getOwnPropertyDescriptor(props, key)?.get) {
+          Object.defineProperty(mobxState, key, Object.getOwnPropertyDescriptor(props, key) as any)
+        } else {
+          if (props[key] !== mobxState[key]) {
+            remove(mobxState, key);
+            extendObservable(mobxState, { [key]: props[key] }, { [key]: false })
+          }
+        }
+      }
+
+      keyListOfState.current.splice(0, keyListOfState.current.length);
+      for (const key in props) {
+        keyListOfState.current.push(key);
+      }
+    }
+  })
 
-    return mobxState as any;
+  return mobxState as any;
 }

package/package.json

@@ -1 +1 @@
-{"name":"mobx-react-use-autorun","version":"3.1.3","description":"React Hook for mobx","scripts":{"test":"npx -y -p typescript -p ts-node ts-node --skipProject bin/mobx_react_test.ts","build":"npx -y -p typescript -p ts-node ts-node --skipProject bin/mobx_react_build.ts","make":"npx -y -p typescript -p ts-node ts-node --skipProject bin/mobx_react_make.ts"},"dependencies":{"mobx":"6.8.0","mobx-react-lite":"3.4.0","react-use":"17.4.0","rxjs":"7.8.0"},"peerDependencies":{"react":">=16.8.0"},"license":"MIT","keywords":["react","mobx","typescript"],"main":"./dist/index.js","types":"./dist/index.d.ts","eslintConfig":{"extends":["react-app","react-app/jest"]},"homepage":"https://github.com/zdu-strong/mobx-react-use-autorun#readme","repository":{"type":"git","url":"git+https://github.com/zdu-strong/mobx-react-use-autorun.git"},"files":["lib","dist"],"bugs":{"url":"https://github.com/zdu-strong/mobx-react-use-autorun/issues"},"publishConfig":{"registry":"https://registry.npmjs.org/"}}
+{"name":"mobx-react-use-autorun","version":"3.1.9","description":"React Hook for mobx","scripts":{"test":"npx -y -p typescript -p ts-node ts-node --skipProject bin/mobx_react_test.ts","build":"npx -y -p typescript -p ts-node ts-node --skipProject bin/mobx_react_build.ts","make":"npx -y -p typescript -p ts-node ts-node --skipProject bin/mobx_react_make.ts"},"dependencies":{"mobx":"6.8.0","mobx-react-lite":"3.4.0","react-use":"17.4.0","rxjs":"7.8.0"},"peerDependencies":{"react":">=16.8.0"},"license":"MIT","keywords":["react","mobx","typescript"],"main":"./dist/index.js","types":"./dist/index.d.ts","eslintConfig":{"extends":["react-app","react-app/jest"]},"homepage":"https://github.com/zdu-strong/mobx-react-use-autorun#readme","repository":{"type":"git","url":"git+https://github.com/zdu-strong/mobx-react-use-autorun.git"},"files":["lib","dist"],"bugs":{"url":"https://github.com/zdu-strong/mobx-react-use-autorun/issues"},"publishConfig":{"registry":"https://registry.npmjs.org/"}}