feat(ssr): only return asyncState from server side (#146)

Author: ArrayZoneYour

__test__/SSR/index.spec.ts

@@ -0,0 +1,29 @@
+/// <reference path="../index.d.ts" />
+import '@testing-library/react/cleanup-after-each'
+import { Model } from '../../src'
+import { SSRCounter } from '..'
+
+describe('asyncState', () => {
+  test('return default initial state from asyncState', async () => {
+    const { getInitialState } = Model({
+      WrappedSSRCounter: Model(SSRCounter),
+      SSRCounter
+    })
+    const initialModels = await getInitialState(undefined, { isServer: true })
+    // const state = getState('AsyncCounter')
+    expect(initialModels['SSRCounter'].count).toBe(1)
+    expect(initialModels['SSRCounter'].clientKey).toBe(undefined)
+    expect(initialModels['WrappedSSRCounter'].count).toBe(1)
+    expect(initialModels['WrappedSSRCounter'].clientKey).toBe(undefined)
+
+    // Simulate Client Side
+    const { getState } = Model(
+      { WrappedSSRCounter: Model(SSRCounter), SSRCounter },
+      initialModels
+    )
+    expect(initialModels['SSRCounter'].count).toBe(1)
+    expect(initialModels['WrappedSSRCounter'].count).toBe(1)
+    expect(getState('SSRCounter').clientKey).toBe('unused')
+    expect(getState('WrappedSSRCounter').clientKey).toBe('unused')
+  })
+})

__test__/index.d.ts

@@ -2,6 +2,11 @@ type CounterState = {
   count: number
 }
 
+type SSRCounterState = {
+  count: number
+  clientKey: string
+}
+
 type ExtState = {
   name: string
 }

__test__/index.ts

@@ -113,6 +113,20 @@ export const AsyncCounter: ModelType<CounterState, CounterActionParams> = {
   state: { count: 0 }
 }
 
+export const SSRCounter: ModelType<SSRCounterState, CounterActionParams> = {
+  actions: {
+    increment: params => {
+      return state => {
+        state.count += params
+      }
+    }
+  },
+  asyncState: async (context: { count?: number }) => ({
+    count: context ? context.count || 1 : 1
+  }),
+  state: { count: 0, clientKey: 'unused' }
+}
+
 export const AsyncNull: ModelType<CounterState, CounterActionParams> = {
   actions: {
     increment: params => {

package.json

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

src/helper.ts

@@ -80,7 +80,11 @@ const timeout = <T>(ms: number, data: T): Promise<T> =>
     }, ms)
   )
 
-const getInitialState = async <T extends any>(context?: T) => {
+const getInitialState = async <T extends any>(
+  context?: T,
+  config?: { isServer?: boolean }
+) => {
+  const ServerState: { [name: string]: any } = { __FROM_SERVER__: true }
   await Promise.all(
     Object.keys(Global.State).map(async modelName => {
       if (
@@ -91,14 +95,18 @@ const getInitialState = async <T extends any>(context?: T) => {
       ) {
         const asyncGetter = Global.AsyncState[modelName]
         const asyncState = asyncGetter ? await asyncGetter(context) : {}
-        Global.State[modelName] = {
-          ...Global.State[modelName],
-          ...asyncState
+        if (config && config.isServer) {
+          ServerState[modelName] = asyncState
+        } else {
+          Global.State[modelName] = {
+            ...Global.State[modelName],
+            ...asyncState
+          }
         }
       }
     })
   )
-  return Global.State
+  return config && config.isServer ? ServerState : Global.State
 }
 
 const getCache = (modelName: string, actionName: string) => {

src/index.d.ts

@@ -142,7 +142,8 @@ interface APIs<M extends Models> {
     ? M[K]['actions']
     : unknown
   getInitialState: <T extends any>(
-    context?: T | undefined
+    context?: T | undefined,
+    config?: { isServer: boolean }
   ) => Promise<{
     [modelName: string]: any
   }>

src/index.tsx

@@ -76,7 +76,7 @@ function Model<M extends Models, MT extends ModelType, E>(
         useStore: errorFn([{}, {}])
       } as any
     }
-    if (initialState) {
+    if (initialState && !initialState.__FROM_SERVER__) {
       Global.State = initialState || {}
     }
     extContext && (Global.Context['__global'] = extContext)
@@ -89,7 +89,9 @@ function Model<M extends Models, MT extends ModelType, E>(
         return
       }
       if (!isAPI(model)) {
-        if (!Global.State[name]) {
+        if (initialState && initialState.__FROM_SERVER__) {
+          Global.State[name] = { ...model.state, ...initialState[name] }
+        } else if (!Global.State[name]) {
           Global.State[name] = model.state
         }
         if (model.middlewares) {
@@ -102,6 +104,12 @@ function Model<M extends Models, MT extends ModelType, E>(
         if (!Global.State[name] || !initialState) {
           Global.State[name] = Global.State[model.__id]
         }
+        if (initialState && initialState.__FROM_SERVER__) {
+          Global.State[name] = {
+            ...Global.State[model.__id],
+            ...initialState[name]
+          }
+        }
         Global.Actions[name] = Global.Actions[model.__id]
         Global.AsyncState[name] = Global.AsyncState[model.__id]
         Global.Middlewares[name] = Global.Middlewares[model.__id]