Merge pull request #3 from byte-fe/develop

v1.0.0-alpha

Author: ArrayZoneYour

dist/index.js

@@ -70,19 +70,9 @@ var Setter = {
     classSetter: undefined,
     functionSetter: {}
 };
-// If get the Hooks Api from
-// import {useState, useEffect, ...} from 'react'
-// will throw Error Hooks can only be called inside the body of a function component
-var hooksApi = {};
-var registerModel = function (models, hooks) {
-    if (hooks === void 0) { hooks = {
-        useCallback: react_1.useCallback,
-        useContext: react_1.useContext,
-        useEffect: react_1.useEffect,
-        useState: react_1.useState
-    }; }
+var uid = Math.random(); // The unique id of hooks
+var registerModel = function (models) {
     GlobalState = __assign({}, models);
-    hooksApi = __assign({}, hooks);
 };
 exports.registerModel = registerModel;
 var Provider = /** @class */ (function (_super) {
@@ -106,17 +96,17 @@ var setPartialState = function (name, partialState) {
         actions: GlobalState[name].actions,
         state: __assign({}, GlobalState[name].state, partialState)
     }, _a));
-    console.log(Object.keys(Setter.functionSetter['Home']).length, Object.keys(Setter.functionSetter['Shared']).length);
     return GlobalState;
 };
 var useStore = function (modelName) {
     // const _state = useContext(GlobalContext)
-    var _a = hooksApi.useState(GlobalState[modelName].state), state = _a[0], setState = _a[1];
-    var _hash = new Date().toISOString() + Math.random();
+    var _a = react_1.useState(GlobalState[modelName].state), state = _a[0], setState = _a[1];
+    uid += 1;
+    var _hash = '' + uid;
     if (!Setter.functionSetter[modelName])
         Setter.functionSetter[modelName] = [];
     Setter.functionSetter[modelName][_hash] = { setState: setState };
-    hooksApi.useEffect(function () {
+    react_1.useEffect(function () {
         return function cleanup() {
             delete Setter.functionSetter[modelName][_hash];
         };
@@ -154,7 +144,7 @@ var useStore = function (modelName) {
         return ret;
     };
     Object.keys(GlobalState[modelName].actions).map(function (key) {
-        return (updaters[key] = hooksApi.useCallback(function (params) { return __awaiter(_this, void 0, void 0, function () {
+        return (updaters[key] = react_1.useCallback(function (params) { return __awaiter(_this, void 0, void 0, function () {
             var newState;
             return __generator(this, function (_a) {
                 switch (_a.label) {
@@ -170,10 +160,9 @@ var useStore = function (modelName) {
                         return [2 /*return*/];
                 }
             });
-        }); }, [GlobalState]));
+        }); }, [GlobalState[modelName]]));
     });
     return [state, updaters];
-    // return [state, setState]
 };
 exports.useStore = useStore;
 var connect = function (modelName, mapProps) { return function (Component) {

example/package-lock.json

@@ -2,13 +2,11 @@
   "name": "react-model",
   "version": "1.0.0-alpha",
   "description": "The State management library for React",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./src/index.d.ts",
+  "main": "./dist/index",
+  "module": "./dist/index",
+  "types": "./src/index",
   "scripts": {
-    "dev": "next",
-    "build": "tsc src/index.tsx",
-    "start": "next start"
+    "build": "tsc src/index.tsx"
   },
   "keywords": [
     "react",

package.json

@@ -3,7 +3,7 @@ import * as React from 'react'
 import {
   PureComponent,
   useCallback,
-  useContext,
+  // useContext,
   useEffect,
   useState
 } from 'react'
@@ -15,24 +15,12 @@ let Setter = {
   functionSetter: {} as any
 }
 
-// If get the Hooks Api from
-// import {useState, useEffect, ...} from 'react'
-// will throw Error Hooks can only be called inside the body of a function component
-let hooksApi: any = {}
+let uid = Math.random() // The unique id of hooks
 
-const registerModel = (
-  models: any,
-  hooks: any = {
-    useCallback,
-    useContext,
-    useEffect,
-    useState
-  }
-) => {
+const registerModel = (models: any) => {
   GlobalState = {
     ...models
   }
-  hooksApi = { ...hooks }
 }
 
 class Provider extends PureComponent<{}, ProviderProps> {
@@ -61,20 +49,17 @@ const setPartialState = (name: keyof typeof GlobalState, partialState: any) => {
       }
     }
   }
-  console.log(
-    Object.keys(Setter.functionSetter['Home']).length,
-    Object.keys(Setter.functionSetter['Shared']).length
-  )
   return GlobalState
 }
 
 const useStore = (modelName: keyof typeof GlobalState) => {
   // const _state = useContext(GlobalContext)
-  const [state, setState] = hooksApi.useState(GlobalState[modelName].state)
-  const _hash = new Date().toISOString() + Math.random()
+  const [state, setState] = useState(GlobalState[modelName].state)
+  uid += 1
+  const _hash = '' + uid
   if (!Setter.functionSetter[modelName]) Setter.functionSetter[modelName] = []
   Setter.functionSetter[modelName][_hash] = { setState }
-  hooksApi.useEffect(() => {
+  useEffect(() => {
     return function cleanup() {
       delete Setter.functionSetter[modelName][_hash]
     }
@@ -104,7 +89,7 @@ const useStore = (modelName: keyof typeof GlobalState) => {
   }
   Object.keys(GlobalState[modelName].actions).map(
     key =>
-      (updaters[key] = hooksApi.useCallback(
+      (updaters[key] = useCallback(
         async (params: any) => {
           const newState = await GlobalState[modelName].actions[key](
             GlobalState[modelName].state,
@@ -120,11 +105,10 @@ const useStore = (modelName: keyof typeof GlobalState) => {
             )
           )
         },
-        [GlobalState]
+        [GlobalState[modelName]]
       ))
   )
   return [state, updaters]
-  // return [state, setState]
 }
 
 const connect = (modelName: string, mapProps: Function) => (