feat(overmind-devtools): add re_init to update devtools with state on HMR

Author: christianalfoni

packages/node_modules/overmind-devtools/src/overmind/actions.ts

@@ -48,6 +48,7 @@ const handleClientMessage: Operator<Message, any> = pipe(
   forkEachMessage({
     [AppMessageType.PORT_EXISTS]: setPortExists,
     [ExecutionType.INIT]: addState,
+    [ExecutionType.RE_INIT]: addState,
     [ExecutionType.FLUSH]: addFlushAndRunMutations,
     [ExecutionType.DERIVED]: updateDerived,
     [ExecutionType.MUTATIONS]: addMutations,

packages/node_modules/overmind-devtools/src/overmind/types.ts

@@ -148,6 +148,7 @@ export type Apps = {
 
 export enum ExecutionType {
   INIT = 'init',
+  RE_INIT = 're_init',
   FLUSH = 'flush',
   DERIVED = 'derived',
   MUTATIONS = 'mutations',

packages/node_modules/overmind/src/index.ts

@@ -37,6 +37,7 @@ import {
   deepCopy,
   MockedEventEmitter,
   makeStringifySafeMutations,
+  mergeState,
 } from './utils'
 
 export * from './types'
@@ -169,6 +170,7 @@ export class Overmind<ThisConfig extends IConfiguration>
   private nextExecutionId: number = 0
   private options: Options
   private mode: DefaultMode | TestMode | SSRMode
+  private originalConfiguration
   initialized: Promise<any>
   eventHub: EventEmitter<Events>
   devtools: Devtools
@@ -206,6 +208,7 @@ export class Overmind<ThisConfig extends IConfiguration>
     */
     const proxyStateTree = this.createProxyStateTree(configuration, eventHub)
 
+    this.originalConfiguration = configuration
     this.state = proxyStateTree.state
     this.effects = configuration.effects || {}
     this.proxyStateTree = proxyStateTree
@@ -731,15 +734,32 @@ export class Overmind<ThisConfig extends IConfiguration>
     })
   }
   reconfigure(configuration: IConfiguration) {
+    const mergedConfiguration = {
+      ...configuration,
+      state: mergeState(
+        this.originalConfiguration.state,
+        this.state,
+        configuration.state
+      ),
+    }
     const proxyStateTree = this.proxyStateTree as any
-    this.proxyStateTree.sourceState = this.getState(configuration)
+    this.proxyStateTree.sourceState = this.getState(mergedConfiguration)
     proxyStateTree.createTrackStateProxifier()
     this.state = this.proxyStateTree.state as any
-    this.actions = this.getActions(configuration)
-    this.effects = configuration.effects || {}
+    this.actions = this.getActions(mergedConfiguration)
+    this.effects = mergedConfiguration.effects || {}
 
     this.proxyStateTree.forceFlush()
 
+    if (this.devtools) {
+      this.devtools.send({
+        type: 're_init',
+        data: {
+          state: proxyStateTree.sourceState,
+        },
+      })
+    }
+
     return this
   }
 }

packages/node_modules/overmind/src/utils.ts

@@ -30,3 +30,37 @@ export function deepCopy(obj) {
 
   return obj
 }
+
+export function mergeState(originState, oldState, nextState) {
+  function merge(origin, old, next) {
+    if (isPlainObject(old) && isPlainObject(next)) {
+      const newBranch = {}
+
+      for (let key in next) {
+        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
+  }
+
+  return merge(originState, oldState, nextState)
+}