Merge pull request #96 from byte-fe/develop

fix(types): correct the type of actions returned by next model

Author: leecade

__test__/index.d.ts

@@ -15,6 +15,11 @@ type CounterActionParams = {
   increment: number
 }
 
+type NextCounterActionParams = {
+  increment: number
+  add: number
+}
+
 type ExtraActionParams = {
   add: number
 }

__test__/index.ts

@@ -1,6 +1,8 @@
 /// <reference path="./index.d.ts" />
 /// <reference path="../src/index.d.ts" />
+import { Model } from '../src'
 import { timeout } from '../src/helper'
+import { actionMiddlewares } from '../src/middlewares'
 
 export const ActionsTester: ModelType<ActionTesterState, ActionTesterParams> = {
   state: {
@@ -124,3 +126,28 @@ export const ErrorCounter: ModelType<CounterState, CounterActionParams> = {
     }
   }
 }
+
+const delayMiddleware: Middleware = async (context, restMiddlewares) => {
+  await timeout(2000, {})
+  context.next(restMiddlewares)
+}
+
+const nextCounterModel: NextModelType<CounterState, NextCounterActionParams> = {
+  actions: {
+    add: num => {
+      return state => {
+        state.count += num
+      }
+    },
+    increment: async (num, { actions }) => {
+      actions.add(num)
+      await timeout(300, {})
+    }
+  },
+  middlewares: [delayMiddleware, ...actionMiddlewares],
+  state: {
+    count: 0
+  }
+}
+
+export const NextCounterModel = Model(nextCounterModel)

__test__/middlewares/model.spec.ts

@@ -0,0 +1,22 @@
+/// <reference path="../index.d.ts" />
+import 'react-testing-library/cleanup-after-each'
+process.env.NODE_ENV = 'production'
+import { testHook } from 'react-hooks-testing-library'
+import { NextCounterModel } from '..'
+import { Model } from '../../src'
+
+describe('NextModel', () => {
+  test("allows you to customize model's middleware", async () => {
+    let actions: any
+    let state: any
+    const { useStore, getActions } = Model({ NextCounterModel })
+    const beginTime = Date.now()
+    testHook(() => {
+      ;[state, actions] = useStore('NextCounterModel')
+    })
+    await actions.increment(2)
+    await getActions('NextCounterModel').increment(1)
+    expect(Date.now() - beginTime > 300)
+    expect(state.count).toBe(3)
+  })
+})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-model",
-  "version": "2.7.0",
+  "version": "2.7.1-alpha.2",
   "description": "The State management library for React",
   "main": "./dist/react-model.js",
   "umd:main": "./dist/react-model.umd.js",
@@ -13,7 +13,12 @@
     "test": "jest --silent",
     "test:coverage": "jest --collect-coverage --silent"
   },
-  "keywords": ["react", "model", "state-management", "react-hooks"],
+  "keywords": [
+    "react",
+    "model",
+    "state-management",
+    "react-hooks"
+  ],
   "author": "ArrayZoneYour <hustliyidong@gmail.com>",
   "license": "MIT",
   "dependencies": {
@@ -44,7 +49,7 @@
     "remark-preset-lint-recommended": "^3.0.2",
     "ts-jest": "^24.0.0",
     "tslint": "^5.14.0",
-    "typescript": "^3.3.4000"
+    "typescript": "^3.4.5"
   },
   "husky": {
     "hooks": {

src/global.ts

@@ -1,6 +1,7 @@
 const State = {}
 const Actions = {}
 const AsyncState = {}
+const Middlewares = {}
 // Communicate between Provider-Consumer and Hooks
 const Setter: Setter = {
   // classSetter stores the setState from Provider
@@ -21,6 +22,7 @@ let uid = Math.random() // The unique id of hooks
 export default {
   Actions,
   AsyncState,
+  Middlewares,
   Setter,
   State,
   devTools,

src/index.d.ts

@@ -24,6 +24,9 @@ interface Global {
   AsyncState: {
     [modelName: string]: undefined | ((context?: any) => Promise<Partial<any>>)
   }
+  Middlewares: {
+    [modelName: string]: Middleware[]
+  }
   subscriptions: Subscriptions
   Setter: Setter
   devTools: any
@@ -48,12 +51,12 @@ type Action<S = {}, P = any, ActionKeys = {}> = (
   | Promise<void>
 
 // v3.0 Action
-type NextAction<S = {}, P = any, ActionKeys = {}> = (
+type NextAction<S = {}, P = any, ActionKeys = {}, ExtContext = {}> = (
   params: P,
   context: {
     state: S
     actions: getConsumerNextActionsType<NextActions<S, ActionKeys>>
-  }
+  } & ExtContext
 ) =>
   | Partial<S>
   | Promise<Partial<S>>
@@ -103,6 +106,7 @@ interface InnerContext<S = {}> extends BaseContext<S> {
 
 type Context<S = {}> = (InnerContext<S>) & {
   next: Function
+  modelMiddlewares?: Middleware[]
 }
 
 type Middleware<S = {}> = (C: Context<S>, M: Middleware<S>[]) => void
@@ -150,7 +154,9 @@ interface APIs<M extends Models> {
     modelName: K
   ) => M[K] extends ModelType
     ? Readonly<getConsumerActionsType<Get<M[K], 'actions'>>>
-    : undefined
+    : M[K] extends API
+    ? M[K]['actions']
+    : unknown
   getInitialState: <T extends any>(
     context?: T | undefined
   ) => Promise<{
@@ -166,7 +172,11 @@ interface APIs<M extends Models> {
     actionName: keyof Get<M[K], 'actions'> | Array<keyof Get<M[K], 'actions'>>
   ) => void
   actions: {
-    [K in keyof M]: Readonly<getConsumerActionsType<Get<M[K], 'actions'>>>
+    [K in keyof M]: M[K] extends ModelType
+      ? Readonly<getConsumerActionsType<Get<M[K], 'actions'>>>
+      : M[K] extends API
+      ? M[K]['actions']
+      : unknown
   }
 }
 
@@ -179,14 +189,16 @@ type ModelType<InitStateType = any, ActionKeys = any> = {
 }
 
 // v3.0
-type NextModelType<InitStateType = any, ActionKeys = any> = {
+type NextModelType<InitStateType = any, ActionKeys = any, ExtContext = {}> = {
   actions: {
     [P in keyof ActionKeys]: NextAction<
       InitStateType,
       ActionKeys[P],
-      ActionKeys
+      ActionKeys,
+      ExtContext
     >
   }
+  middlewares?: Middleware[]
   state: InitStateType
   asyncState?: (context?: any) => Promise<Partial<InitStateType>>
 }

src/index.tsx

@@ -31,6 +31,9 @@ function Model<M extends Models, MT extends NextModelType>(
     Global.uid += 1
     const hash = '__' + Global.uid
     Global.State[hash] = models.state
+    if (models.middlewares) {
+      Global.Middlewares[hash] = models.middlewares
+    }
     const nextActions: Actions = Object.entries(models.actions).reduce(
       (o: { [name: string]: Action }, [name, action]) => {
         o[name] = async (state, actions, params) => {
@@ -63,6 +66,9 @@ function Model<M extends Models, MT extends NextModelType>(
     }
     Object.entries(models).forEach(([name, model]) => {
       if (!isAPI(model)) {
+        console.warn(
+          'we recommend you to use NextModel now, document link: https://github.com/byte-fe/react-model#model'
+        )
         if (!Global.State[name]) {
           Global.State[name] = model.state
         }
@@ -74,6 +80,7 @@ function Model<M extends Models, MT extends NextModelType>(
         }
         Global.Actions[name] = Global.Actions[model.__id]
         Global.AsyncState[name] = Global.AsyncState[model.__id]
+        Global.Middlewares[name] = Global.Middlewares[model.__id]
       }
     })
 
@@ -156,7 +163,11 @@ const getActions = (
           ...baseContext,
           Global
         }
-        await applyMiddlewares(actionMiddlewares, context)
+        if (Global.Middlewares[modelName]) {
+          await applyMiddlewares(Global.Middlewares[modelName], context)
+        } else {
+          await applyMiddlewares(actionMiddlewares, context)
+        }
       })
   )
   return updaters

tsconfig.json

@@ -15,6 +15,6 @@
     "sourceMap": false,
     "strict": true
   },
-  "include": ["src/**/*"],
+  "include": ["./src/*"],
   "exclude": ["node_modules"]
 }