mobx-react-use-autorun 3.1.2 → 3.1.8

package/README.md

@@ -6,7 +6,7 @@ Provide concise usage for mobx in react<br/>
 
 # `Usage`
 
-### Notes - Define state and props with useMobxState
+### Usage - 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
+### Usage - Subscription property changes with useMobxEffect
 
     import { useMobxState, observer } from 'mobx-react-use-autorun';
     import { useMobxEffect, toJS } from 'mobx-react-use-autorun'
@@ -128,7 +128,7 @@ 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
+### Usage - 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 +169,7 @@ Correct Example:<br/>
         return <button onClick={() => console.log(toJS(state))}>{'Click Me'}</button>;
     })
 
-### Notes - Define global mutable data with observable
+### Usage - Define global mutable data with observable
 
     import { observable } from 'mobx-react-use-autorun';
 
@@ -195,7 +195,7 @@ Correct Example:<br/>
         </div>;
     })
 
-## Notes - Lifecycle hooks
+### Usage - Lifecycle hooks
 
 useMount is executed when the component loaded.<br/>
 useUnmount is executed when the component is unmount.<br/>
@@ -225,6 +225,12 @@ useUnmount is executed when the component is unmount.<br/>
         return null;
     })
 
+# Learn More
+
+1. React UI framework (https://reactjs.org)<br/>
+2. Reactive Extensions Library for JavaScript (https://www.npmjs.com/package/rxjs)
+3. Material UI is a library of React UI components that implements Google's Material Design (https://mui.com)
+
 # Getting Started
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). If you have any questions, please contact zdu.strong@gmail.com.<br/>
@@ -249,16 +255,10 @@ Builds the files for production to the `dist` folder.<br/>
 
 Publish to npm repository<br/>
 
-Pre-step, please run
+Pre-step, please run<br/>
 
     npm login --location=global
 
-# Learn More
-
-1. React UI framework (https://reactjs.org)<br/>
-2. Reactive Extensions Library for JavaScript (https://www.npmjs.com/package/rxjs)
-3. Material UI is a library of React UI components that implements Google's Material Design (https://mui.com)
-
 # License
 
 This project is licensed under the terms of the [MIT license](./LICENSE).

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.2","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.8","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/"}}