feat(overmind): allow rehydrate of state object as well

Author: christianalfoni

packages/node_modules/overmind/src/index.test.ts

@@ -1,4 +1,4 @@
-import { EventType, IAction, Overmind, createOvermindMock } from './'
+import { EventType, IAction, Overmind, createOvermindMock, rehydrate } from './'
 import { namespaced } from './config'
 
 function toJSON(obj) {
@@ -40,13 +40,17 @@ function createDefaultOvermind() {
     const { form, key, value } = payload
     form[key] = value
   }
+  const rehydrateAction: Action<any> = ({ state }, newState) => {
+    rehydrate(state, newState)
+  }
   const actions = {
     asyncChangeFoo,
     changeFormValue,
     changeFoo,
     changeFooWithEffect,
     changeValue,
     waitAndChangeFoo,
+    rehydrateAction
   }
   const effects = {
     hello() {
@@ -357,6 +361,28 @@ describe('Overmind', () => {
     ).not.toThrow()
     expect(app.state.item.isAwesome).toBe(false)
   })
+  test('should allow rehydration', () => {
+    expect.assertions(2)
+    const app = createDefaultOvermind()
+    const mutation = {
+      method: 'set',
+      path: 'foo',
+      args: ['bar2']
+    }
+    app.actions.rehydrateAction([mutation])
+    expect(app.state.foo).toBe('bar2')
+    app.actions.rehydrateAction({
+      item: {
+        isAwesome: false
+      }
+    })
+    expect(app.state).toEqual({
+      foo: 'bar2',
+      item: {
+        isAwesome: false
+      }
+    })
+  })
 })
 
 describe('Overmind mock', () => {

packages/node_modules/overmind/src/index.ts

@@ -61,6 +61,7 @@ import {
   makeStringifySafeMutations,
   mergeState,
   processState,
+  rehydrateState
 } from './utils'
 
 export * from './types'
@@ -93,20 +94,25 @@ export interface Reaction extends IReaction<Config> {}
 export const json = (obj: any) =>
   deepCopy(obj && obj[IS_PROXY] ? obj[VALUE] : obj)
 
-export const rehydrate = (state: object, mutations: IMutation[]) => {
-  mutations.forEach((mutation) => {
-    const pathArray = mutation.path.split('.')
-    const key = pathArray.pop()
-    const target = pathArray.reduce((aggr, key) => aggr[key], state)
-
-    if (mutation.method === 'set') {
-      target[key] = mutation.args[0]
-    } else if (mutation.method === 'unset') {
-      delete target[key]
-    } else {
-      target[key][mutation.method](...mutation.args)
-    }
-  })
+export const rehydrate = (state: IState, source: IMutation[] | IState) => {
+  if (Array.isArray(source)) {
+    const mutations = source as IMutation[]
+    mutations.forEach((mutation) => {
+      const pathArray = mutation.path.split('.')
+      const key = pathArray.pop() as string
+      const target = pathArray.reduce((aggr, key) => aggr[key], state as any)
+  
+      if (mutation.method === 'set') {
+        target[key] = mutation.args[0]
+      } else if (mutation.method === 'unset') {
+        delete target[key]
+      } else {
+        target[key][mutation.method](...mutation.args)
+      }
+    })
+  } else {
+    rehydrateState(state, source)
+  } 
 }
 
 export interface OvermindSSR<Config extends IConfiguration>

packages/node_modules/overmind/src/utils.ts

@@ -3,6 +3,7 @@ import { IMutation } from 'proxy-state-tree'
 
 import { Derived } from './derived'
 import { safeValues } from './Devtools'
+import { IState } from './types'
 
 export const IS_TEST = process.env.NODE_ENV === 'test'
 export const IS_OPERATOR = Symbol('operator')
@@ -162,3 +163,19 @@ export function createActionsProxy(actions, cb) {
     },
   })
 }
+
+export function rehydrateState(target: IState, source: IState) {
+  if (!target || !source) {
+    throw new Error(`You have to pass a "target" and "source" object to rehydrate`)
+  }
+
+  Object.keys(source).forEach((key) => {
+    const value = source[key]
+    if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
+      if (!target[key]) target[key] = {}
+      rehydrateState(target[key] as IState, source[key] as IState)
+    } else {
+      target[key] = source[key]
+    }
+  })
+}

packages/overmind-website/api/rehydrate.md

@@ -0,0 +1,9 @@
+# rehydrate
+
+It is possible to update the complete state of Overmind using the **rehydrate** tool. It allows you to update the state either with a state object or an array of mutations, typically collected from server side rendering.
+
+```marksy
+h(Example, { name: "api/rehydrate" })
+```
+
+The function takes into acount the state structure of Overmind which is based on objects where functions are derived state. That means it will leave derived state alone, resulting in them rather updating if any of their dependecies where updated by rehydration.

packages/overmind-website/examples/api/rehydrate.ts

@@ -0,0 +1,40 @@
+export default (ts) =>
+  ts
+    ? [
+        {
+          fileName: 'overmind/onInitialize.ts',
+          code: `
+import { OnInitialize, rehydrate } from 'overmind'
+
+export const onInitialize: OnInitialize = ({ state, effects }) => {
+  // Grab mutations from a server rendered version
+  const mutations = window.__OVERMIND_MUTATIONS
+
+  rehydrate(state, mutations)
+
+  // Grab a previous copy of the state, for example stored in
+  // localstorage
+  rehydrate(state, effects.storage.get('previousState') || {})
+}
+`,
+        },
+      ]
+    : [
+        {
+          fileName: 'overmind/onInitialize.js',
+          code: `
+import { rehydrate } from 'overmind'
+
+export const onInitialize = ({ state, effects }) => {
+  // Grab mutations from a server rendered version
+  const mutations = window.__OVERMIND_MUTATIONS
+
+  rehydrate(state, mutations)
+
+  // Grab a previous copy of the state, for example stored in
+  // localstorage
+  rehydrate(state, effects.storage.get('previousState') || {})
+}
+`,
+        },
+      ]