feat(overmind): use mutation rehydration for state hot reloading

Author: christianalfoni

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

@@ -382,6 +382,18 @@ describe('Overmind', () => {
     ).not.toThrow()
     expect(app.state.item.isAwesome).toBe(false)
   })
+  test('should rehydrate mutations on hot reload', () => {
+    expect.assertions(2)
+    const app = createDefaultOvermind()
+    app.actions.changeFoo()
+    expect(app.state.foo).toBe('bar2')
+    app.reconfigure({
+      state: {
+        foo: 'bar'
+      }
+    })
+    expect(app.state.foo).toBe('bar2')
+  })
 })
 
 describe('Overmind mock', () => {

packages/node_modules/overmind/src/index.ts

@@ -59,7 +59,7 @@ import {
   getActionPaths,
   getFunctionName,
   isPromise,
-  mergeState,
+  runMutation,
   processState,
 } from './utils'
 
@@ -189,7 +189,7 @@ export class Overmind<ThisConfig extends IConfiguration>
   private actionReferences: Function[] = []
   private nextExecutionId: number = 0
   private mode: DefaultMode | TestMode | SSRMode
-  private originalConfiguration
+  private reydrateMutationsForHotReloading: IMutation[] = []
   initialized: Promise<any>
   eventHub: EventEmitter<Events>
   devtools: Devtools
@@ -238,8 +238,6 @@ export class Overmind<ThisConfig extends IConfiguration>
       eventHub,
       mode.mode === MODE_SSR ? false : process.env.NODE_ENV === 'development'
     )
-
-    this.originalConfiguration = configuration
     this.state = proxyStateTree.state
     this.effects = configuration.effects || {}
     this.proxyStateTree = proxyStateTree
@@ -324,6 +322,11 @@ export class Overmind<ThisConfig extends IConfiguration>
         nextTick = setTimeout(flushTree, 0)
       })
     } else if (mode.mode === MODE_DEFAULT || mode.mode === MODE_TEST) {
+      if (process.env.NODE_ENV === 'test' || (this.devtools && options.hotReloading !== false)) {
+        eventHub.on(EventType.MUTATIONS, (execution) => {
+          this.reydrateMutationsForHotReloading = this.reydrateMutationsForHotReloading.concat(execution.mutations)
+        })
+      }
       eventHub.on(EventType.OPERATOR_ASYNC, (execution) => {
         const flushData = execution.flush(true)
         if (this.devtools && flushData.mutations.length) {
@@ -942,21 +945,22 @@ export class Overmind<ThisConfig extends IConfiguration>
     return this.proxyStateTree.onFlush(cb)
   }
   reconfigure(configuration: IConfiguration) {
-    const mergedConfiguration = {
-      ...configuration,
-      state: mergeState(
-        this.originalConfiguration.state,
-        this.state,
-        configuration.state
-      ),
-    }
     const proxyStateTree = this.proxyStateTree as any
-    this.originalConfiguration.state = configuration.state
-    this.proxyStateTree.sourceState = this.getState(mergedConfiguration)
+    this.proxyStateTree.sourceState = this.getState(configuration)
     proxyStateTree.createTrackStateProxifier()
     this.state = this.proxyStateTree.state as any
-    this.actions = this.getActions(mergedConfiguration.actions)
-    this.effects = mergedConfiguration.effects || {}
+    this.actions = this.getActions(configuration.actions)
+    this.effects = configuration.effects || {}
+
+    this.reydrateMutationsForHotReloading.forEach((mutation) => {
+      try {
+        runMutation(this.state, mutation)
+      } catch (error) {
+        // No worries, structure changed and we do not want to mutate anyways
+      }
+    })
+
+    this.reydrateMutationsForHotReloading.length = 0
 
     this.proxyStateTree.forceFlush()
 

packages/node_modules/overmind/src/utils.ts

@@ -90,41 +90,24 @@ export function deepCopy(obj) {
   return obj
 }
 
-export function mergeState(originState, oldState, nextState) {
-  function merge(origin, old, next) {
-    if (isPlainObject(old) && isPlainObject(next)) {
-      const newBranch = {}
-      const keys = Object.keys(old).concat(Object.keys(next))
-
-      for (let key of keys) {
-        newBranch[key] = merge(origin[key], old[key], next[key])
-      }
-
-      return newBranch
-    }
-
-    if (typeof next === 'function') {
-      return next
-    }
-
-    // We return the existing array, as arrays are typically
-    // mutated, not set with new values as initial state
-    if (Array.isArray(old) && Array.isArray(next)) {
-      return old
-    }
-
-    // If we have changed a state from origin, keep that
-    // changed state
-    if (next === origin && old !== origin) {
-      return old
-    }
-
-    return next
+export const runMutation = (state: any, mutation: IMutation) => {
+  const pathArray = mutation.path.split(mutation.delimiter)
+  const key = pathArray.pop() as string
+  const target = pathArray.reduce((current, pathKey) => current[pathKey].__CLASS__ ? current[pathKey].value : current[pathKey], state)  
+
+  switch (mutation.method) {
+    case 'set':
+      target[key] = mutation.args[0]
+      break
+    case 'unset':
+      delete target[key]
+      break
+    default:
+      target[key][mutation.method](...mutation.args)
   }
-
-  return merge(originState, oldState, nextState)
 }
 
+
 export function getActionPaths(actions = {}, currentPath: string[] = []) {
   return Object.keys(actions).reduce<string[]>((aggr, key) => {
     if (typeof actions[key] === 'function') {