mobx-react-use-autorun 3.0.22 → 3.0.24

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,18 @@ Form validation<br/>
         </div>)
     })
 
+useMobxState提供两种用法.
+
+useMobxState({},{})使用简单, 可以定义state和第三方hooks. 
+
+useMobxState(()=>({
+    get (){
+        return state.name
+    }
+}),(props: {name: string})=>({
+    ...props
+})) 提供高级用法, state只执行一次, 性能更好, 同时可以使用get计算属性, 在计算值变化时, 重新计算.
+
 ## Notes - Subscription property changes with useMobxEffect
 
     import { useMobxState, observer, useMobxEffect, toJS } from 'mobx-react-use-autorun';
@@ -82,25 +94,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.24","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/"}}