mobx-react-use-autorun 3.0.22 → 3.0.25

package/README.md

@@ -4,7 +4,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 ## Development environment setup
 1. From https://code.visualstudio.com install Visual Studio Code.<br/>
-2. From https://nodejs.org/en/ install nodejs v16.<br/>
+2. From https://nodejs.org install nodejs v16.<br/>
 
 ## Available Scripts
 
@@ -44,7 +44,7 @@ Form validation<br/>
 
     export default observer(() => {
 
-        const state = useMobxState({
+        const state = useMobxState(() => ({
             name: "",
             submit: false,
             errors: {
@@ -52,10 +52,10 @@ Form validation<br/>
                     return state.submit && !state.name && "请填写名称";
                 },
                 get hasError() {
-                    return state.errors.name;
+                    return Object.keys(state.errors).filter(s => s !== "hasError").some(s => (state.errors as any)[s]);
                 }
             }
-        });
+        }));
 
         const ok = async () => {
             state.submit = true;
@@ -72,6 +72,19 @@ Form validation<br/>
         </div>)
     })
 
+useMobxState provides two usages.<br/>
+
+useMobxState({},{}) is easy to use, you can define state and third-party hooks.<br/>
+
+
+useMobxState(()=>({
+    get (){
+        return state.name
+    }
+}),(props: {name: string})=>({
+    ...props
+})) provides advanced usage, the state is executed only once, and the performance is better. At the same time, you can use the get computed property to recalculate when the computed value changes.<br/>
+
 ## Notes - Subscription property changes with useMobxEffect
 
     import { useMobxState, observer, useMobxEffect, toJS } from 'mobx-react-use-autorun';
@@ -82,25 +95,80 @@ Form validation<br/>
 
         useMobxEffect(() => {
             console.log(toJS(state))
-        }, [state]);
+        }, [state.randomNumber])
 
         return <div onClick={() => state.randomNumber = Math.random()}>
             {state.randomNumber}
         </div>
     })
 
+## Notes - 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. Wrong Usage Demonstration:
+
+    import { toJS, observer, useMobxState } from 'mobx-react-use-autorun'
+    import { v1 } from 'uuid'
+
+    export default observer(() => {
+
+        const state = useMobxState({}, {
+            id: v1()
+        })
+
+        toJS(state)
+
+        return null;
+    })
+
+Other than that, all usages are correct. Example:
+
+    import { toJS, useMobxEffect, observer, useMobxState } from 'mobx-react-use-autorun';
+    import { v1 } from 'uuid'
+
+    export default observer(() => {
+
+        const state = useMobxState({}, {
+            name: v1()
+        });
+
+        useMobxEffect(() => {
+            console.log(toJS(state))
+        })
+
+        console.log(toJS(state.name))
+
+        return <button onClick={() => console.log(toJS(state))}>{'Click Me'}</button>;
+    })
+
 ## Notes - Define global mutable data
 
     import { observable } from 'mobx-react-use-autorun';
 
     const state = observable({});
 
-## Notes - Get the real data of the proxy object with toJS
+## Introduction to third-party hooks
 
-    import { observable, toJS } from 'mobx-react-use-autorun';
+useMount is executed when the component loaded.
+useUnmount is executed when the component is unmount.
 
-    const state = observable({});
-    console.log(toJS(state));
+    import { useMount, useUnmount } from 'react-use'
+    import { Subscription, of, tap } from 'rxjs'
+
+    const state = useMobxState({
+        subscription: new Subscription()
+    })
+
+    useMount(() => {
+        state.subscription.add(of(null).pipe(
+            tap(() => {
+                console.log('component is loaded')
+            })
+        ).subscribe())
+    })
+
+    useUnmount(() => {
+        state.subscription.unsubscribe()
+    })
 
 ## Learn More
 

package/dist/lib/useMobxEffect.d.ts

@@ -1 +1 @@
-export declare const useMobxEffect: (callback: () => void, dependencyList?: any[] | undefined) => void;
+export declare const useMobxEffect: (callback: () => void, dependencyList?: any[]) => void;

package/package.json

@@ -1,61 +1 @@
-{
-  "name": "mobx-react-use-autorun",
-  "version": "3.0.22",
-  "description": "React Hook for mobx",
-  "scripts": {
-    "test": "npm install -g typescript@latest @types/node@latest ts-node@latest cross-env@latest && cross-env TS_NODE_SKIP_PROJECT=true ts-node bin/mobx_react_test.ts",
-    "build": "npm install -g typescript@latest @types/node@latest ts-node@latest cross-env@latest && cross-env TS_NODE_SKIP_PROJECT=true ts-node bin/mobx_react_build.ts",
-    "make": "npm install -g typescript@latest @types/node@latest ts-node@latest cross-env@latest && cross-env TS_NODE_SKIP_PROJECT=true ts-node bin/mobx_react_make.ts"
-  },
-  "dependencies": {
-    "mobx": ">=6.5.0",
-    "mobx-react-lite": ">=3.3.0",
-    "react-use": ">=17.3.2",
-    "rxjs": ">=6.0.0"
-  },
-  "peerDependencies": {
-    "react": ">=16.8.0"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "13.4.0",
-    "@testing-library/user-event": "14.4.3",
-    "@types/jest": "27.5.0",
-    "@types/node": "18.7.15",
-    "@types/react": "18.0.18",
-    "@types/react-dom": "18.0.6",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-scripts": "5.0.1",
-    "typescript": "4.6.4"
-  },
-  "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.0.25","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.5.0","mobx-react-lite":">=3.3.0","react-use":">=17.3.2","rxjs":">=6.0.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/"}}