Merge pull request #126 from byte-fe/develop

feat(model): remove v2 warning and support v3 schema as model

Author: kyleslight

README.md

@@ -822,11 +822,14 @@ actions: {
 
 ### How can I customize each model's middlewares?
 
-If you are using NextModel, you can customize each model's middlewares.
+You can customize each model's middlewares.
 
 ```typescript
 import { actionMiddlewares, Model } from 'react-model'
-import { delayMiddleware } from './middlewares'
+const delayMiddleware: Middleware = async (context, restMiddlewares) => {
+  await timeout(1000, {})
+  context.next(restMiddlewares)
+}
 
 const nextCounterModel: NextModelType<CounterState, NextCounterActionParams> = {
   actions: {

__test__/Model/mixed.spec.ts

@@ -5,14 +5,18 @@ import { Model } from '../../src'
 
 describe('useStore', () => {
   test('create by single model definition', async () => {
-    let state: any
-    let actions: any
+    let state: any, nextState: any
+    let actions: any, nextActions: any
     let count = 0
+    let nextCount = 0
     const Home = Model(NextCounter)
-    const { useStore, subscribe, unsubscribe } = Model({ Home })
+    const { useStore, subscribe, unsubscribe } = Model({ Home, NextCounter })
     renderHook(() => {
       ;[state, actions] = useStore('Home')
+      ;[nextState, nextActions] = useStore('NextCounter')
     })
+
+    // Home
     expect(state).toEqual({ count: 0 })
     await actions.increment(3)
     expect(state).toEqual({ count: 3 })
@@ -26,5 +30,20 @@ describe('useStore', () => {
     await actions.increment(3)
     expect(state.count).toBe(10)
     expect(count).toBe(1)
+
+    // NextCounter
+    expect(nextState).toEqual({ count: 0 })
+    await nextActions.increment(3)
+    expect(nextState).toEqual({ count: 3 })
+    // test subscribe
+    subscribe('NextCounter', 'increment', () => (nextCount += 1))
+    await nextActions.increment(4)
+    expect(nextCount).toBe(1)
+    expect(nextState.count).toBe(7)
+    // test unsubscribe
+    unsubscribe('NextCounter', 'increment')
+    await nextActions.increment(3)
+    expect(nextState.count).toBe(10)
+    expect(nextCount).toBe(1)
   })
 })

__test__/index.ts

@@ -124,7 +124,7 @@ export const AsyncNull: ModelType<CounterState, CounterActionParams> = {
   state: { count: 0 }
 }
 
-export const TimeoutCounter: ModelType<CounterState, CounterActionParams> = {
+const timeoutCounter: ModelType<CounterState, CounterActionParams> = {
   actions: {
     increment: async (params, { state: _ }) => {
       await timeout(4000, {})
@@ -139,6 +139,8 @@ export const TimeoutCounter: ModelType<CounterState, CounterActionParams> = {
   state: { count: 0 }
 }
 
+export const TimeoutCounter = Model(timeoutCounter)
+
 export const ErrorCounter: ModelType<CounterState, CounterActionParams> = {
   actions: {
     increment: async () => {
@@ -149,11 +151,14 @@ export const ErrorCounter: ModelType<CounterState, CounterActionParams> = {
 }
 
 const delayMiddleware: Middleware = async (context, restMiddlewares) => {
-  await timeout(2000, {})
+  await timeout(1000, {})
   context.next(restMiddlewares)
 }
 
-const nextCounterModel: ModelType<CounterState, NextCounterActionParams> = {
+export const NextCounterModel: ModelType<
+  CounterState,
+  NextCounterActionParams
+> = {
   actions: {
     add: num => {
       return state => {
@@ -170,5 +175,3 @@ const nextCounterModel: ModelType<CounterState, NextCounterActionParams> = {
     count: 0
   }
 }
-
-export const NextCounterModel = Model(nextCounterModel)

__test__/middlewares/model.spec.ts

@@ -7,16 +7,21 @@ 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 })
+    let actions: any, nextActions: any
+    let state: any, nextState: any
+    const WrapperModel = Model(NextCounterModel)
+    const { useStore, getActions } = Model({ NextCounterModel, WrapperModel })
     const beginTime = Date.now()
     renderHook(() => {
       ;[state, actions] = useStore('NextCounterModel')
+      ;[nextState, nextActions] = useStore('WrapperModel')
     })
     await actions.increment(2)
     await getActions('NextCounterModel').increment(1)
     expect(Date.now() - beginTime > 300)
     expect(state.count).toBe(3)
+    await nextActions.increment(2)
+    await getActions('WrapperModel').increment(1)
+    expect(nextState.count).toBe(3)
   })
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-model",
-  "version": "3.0.0-alpha.4",
+  "version": "3.0.0",
   "description": "The State management library for React",
   "main": "./dist/react-model.js",
   "umd:main": "./dist/react-model.umd.js",

src/index.tsx

@@ -65,12 +65,12 @@ function Model<M extends Models, MT extends ModelType, E>(
     extContext && (Global.Context['__global'] = extContext)
     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
         }
+        if (model.middlewares) {
+          Global.Middlewares[name] = model.middlewares
+        }
         Global.Actions[name] = model.actions
         Global.AsyncState[name] = model.asyncState
       } else {