feat(migrate): support old model migration

Author: ArrayZoneYour

README.md

@@ -83,6 +83,7 @@ npm install react-model
   - [Provider](#provider)
   - [connect](#connect)
 - [FAQ](#faq)
+  - [Migrate from 4.0.x to 4.1.x](#migrate-from-40x-to-41x)
   - [Migrate from 3.1.x to 4.x.x](#migrate-from-31x-to-4xx)
   - [How can I disable the console debugger?](#how-can-i-disable-the-console-debugger)
   - [How can I add custom middleware](#how-can-i-add-custom-middleware)
@@ -694,6 +695,77 @@ export default connect(
 
 ## FAQ
 
+### Migrate from 4.0.x to 4.1.x
+
+1. replace Model with createStore
+
+`counter.ts`
+
+```ts
+import { createStore } from 'react-model'
+// Remove typedef below
+// type CounterState = {
+//  count: number
+// }
+
+// type CounterActionParams = {
+//   increment: number
+// }
+
+// v4.0.x model
+const Counter: ModelType<
+  CounterState,
+  CounterActionParams
+> = {
+  actions: {
+    increment: (params) => {
+      return (state) => {
+        state.count += params
+      }
+    }
+  },
+  state: { count: 0 }
+}
+
+// v4.1.x
+const Counter = createStore(() => {
+  const [state, setState] = useModel({ count: 0 })
+  const actions = {
+    increment: (params) => {
+      setState((state) => {
+        state.count += params
+      })
+    }
+  }
+  return [state, actions]
+})
+
+export default Counter
+```
+
+2. Remove Counter from model registry
+
+```ts
+const models = {
+  // Counter
+  Shared
+}
+
+export const { getInitialState, useStore, getState, actions, subscribe, unsubscribe } = Model(models)
+```
+
+3. update useStore calls in components
+
+```tsx
+// import { useStore } from 'models'
+import Counter from 'models/counter'
+
+const Component = () => {
+  // const [state, actions] = useStore('Counter')
+  const [state, actions] = Counter.useStore()
+}
+```
+
 ### Migrate from 3.1.x to 4.x.x
 
 1. remove Model wrapper

__test__/lane/migrate.spec.ts

@@ -0,0 +1,64 @@
+/// <reference path="../index.d.ts" />
+import { renderHook, act } from '@testing-library/react-hooks'
+import { createStore, useModel } from '../../src'
+import { timeout } from '../../src/helper'
+// import { timeout } from '../../src/helper'
+
+describe('migrate test', async () => {
+  test('migrate from v4.0.x', async () => {
+    const store = createStore(() => {
+      const [state, setState] = useModel({ count: 0, otherKey: 'key' })
+      const actions = {
+        add: (params: number) => {
+          return setState({
+            count: state.count + params
+          })
+        },
+        addCaller: () => {
+          actions.add(5)
+        },
+        increment: (params: number) => {
+          return setState((state) => {
+            state.count += params
+          })
+        }
+      }
+      return [state, actions] as const
+    })
+
+    let renderTimes = 0
+
+    const { result } = renderHook(() => {
+      renderTimes += 1
+      const [state, actions] = store.useStore()
+      return { state, renderTimes, actions }
+    })
+
+    act(() => {
+      expect(result.current.renderTimes).toEqual(1)
+      expect(result.current.state.count).toBe(0)
+    })
+
+    act(() => {
+      result.current.actions.addCaller()
+    })
+
+    act(() => {
+      expect(renderTimes).toEqual(2)
+      expect(result.current.state.count).toBe(5)
+      expect(result.current.state.otherKey).toBe('key')
+    })
+
+    act(() => {
+      result.current.actions.increment(5)
+    })
+
+    await timeout(300, {})
+
+    act(() => {
+      // expect(renderTimes).toEqual(3)
+      console.group('expect result.current.state.count')
+      expect(result.current.state.count).toBe(10)
+    })
+  })
+})

src/index.tsx

@@ -26,7 +26,7 @@ const isAPI = (input: any): input is API => {
 // DON'T USE useModel OUTSIDE createStore func
 function useModel<S>(
   state: S | (() => S)
-): [S, (state: S | ((state: S) => S)) => void] {
+): [S, (state: Partial<S> | ((state: S) => S | void)) => void] {
   const storeId = Global.currentStoreId
   const index = Global.mutableState[storeId].count
   Global.mutableState[storeId].count += 1
@@ -39,13 +39,33 @@ function useModel<S>(
     }
   }
 
-  const setter = async (state: S | ((prevState: S) => S)) => {
+  const setter = async (state: Partial<S> | ((prevState: S) => S | void)) => {
+    if (typeof state === 'function') {
+      Global.mutableState[storeId][index] = produce(
+        Global.mutableState[storeId][index],
+        // @ts-ignore
+        state
+      )
+    } else {
+      if (
+        typeof Global.mutableState[storeId][index] === 'object' &&
+        typeof state === 'object'
+      ) {
+        Global.mutableState[storeId][index] = {
+          ...Global.mutableState[storeId][index],
+          ...state
+        }
+      } else {
+        Global.mutableState[storeId][index] = state
+      }
+    }
+
     const context: InnerContext = {
       Global,
       action: () => {
         return typeof state === 'function'
           ? // @ts-ignore
-            state(Global.mutableState[storeId][index])
+            Global.mutableState[storeId][index]
           : state
       },
       actionName: 'setter',
@@ -58,14 +78,6 @@ function useModel<S>(
       type: 'u'
     }
 
-    if (typeof state === 'function') {
-      // @ts-ignore
-      Global.mutableState[storeId][index] = state(
-        Global.mutableState[storeId][index]
-      )
-    } else {
-      Global.mutableState[storeId][index] = state
-    }
     // pass update event to other components subscribe the same store
     return await applyMiddlewares(actionMiddlewares, context)
   }