fix(overmind): change to new hot reloading strategy

Author: christianalfoni

packages/node_modules/overmind/src/index.ts

@@ -61,6 +61,7 @@ import {
   getFunctionName,
   isPromise,
   processState,
+  getChangeMutations
 } from './utils'
 
 export * from './types'
@@ -190,6 +191,7 @@ export class Overmind<ThisConfig extends IConfiguration>
   private nextExecutionId: number = 0
   private mode: DefaultMode | TestMode | SSRMode
   private reydrateMutationsForHotReloading: IMutation[] = []
+  private originalConfiguration
   initialized: Promise<any>
   eventHub: EventEmitter<Events>
   devtools: Devtools
@@ -238,6 +240,7 @@ 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
@@ -945,12 +948,16 @@ export class Overmind<ThisConfig extends IConfiguration>
     return this.proxyStateTree.onFlush(cb)
   }
   reconfigure(configuration: IConfiguration) {
-    this.proxyStateTree.reset(configuration.state || {})
-    this.state = this.proxyStateTree.state as any
+    const changeMutations = getChangeMutations(this.originalConfiguration.state, configuration.state || {})
     this.actions = this.getActions(configuration.actions)
     this.effects = configuration.effects || {}
 
-    // We do one at a time as they might error due to changed state structure
+    // We change the state to match the new structure
+    rehydrate(this.state as any, changeMutations)
+
+    // We run any mutations ran during the session, it might fail though
+    // as the state structure might have changed, but no worries we just
+    // ignore that
     this.reydrateMutationsForHotReloading.forEach((mutation) => {
       try {
         rehydrate(this.state as any, [mutation])

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

@@ -1,4 +1,4 @@
-import { deepCopy } from './utils'
+import { deepCopy, getChangeMutations } from './utils'
 
 describe('deepCopy', () => {
   test('should be able to preserve getters', () => {
@@ -11,4 +11,58 @@ describe('deepCopy', () => {
     copy.value = 15
     expect(copy.valuePlusTwo).toBe(17)
   })
+})
+
+describe('getChangeMutations', () => {
+  test('should be able to create a set mutation when value has changed', () => {
+    const stateA = {
+      foo: 'bar'
+    }
+    const stateB = {
+      foo: 'bar2',
+    }
+    const mutations = getChangeMutations(stateA, stateB)
+    expect(mutations[0].path).toBe('foo')
+    expect(mutations[0].args[0]).toBe('bar2')
+  })
+  test('should be able to create a set mutation when nested value has changed', () => {
+    const stateA = {
+      foo: {
+        bar: {
+          baz: 'mip'
+        }
+      }
+    }
+    const stateB = {
+      foo: {
+        bar: {
+          baz: 'mip2'
+        }
+      }
+    }
+    const mutations = getChangeMutations(stateA, stateB)
+    expect(mutations.length).toBe(1)
+    expect(mutations[0].path).toBe('foo.bar.baz')
+    expect(mutations[0].args[0]).toBe('mip2')
+  })
+  test('should be able to create an unset mutation when key is not there anymore', () => {
+    const stateA = {
+      foo: {
+        bar: {
+          baz: 'mip'
+        }
+      }
+    }
+    const stateB = {
+      foo: {
+        bar: {
+          
+        }
+      }
+    }
+    const mutations = getChangeMutations(stateA, stateB)
+    expect(mutations.length).toBe(1)
+    expect(mutations[0].path).toBe('foo.bar.baz')
+    expect(mutations[0].method).toBe('unset')
+  })
 })

packages/node_modules/overmind/src/utils.ts

@@ -1,9 +1,6 @@
 import isPlainObject from 'is-plain-obj'
 import { IMutation, IS_PROXY, VALUE } from 'proxy-state-tree'
 
-import { Derived } from './derived'
-import { IState } from './types'
-
 export const IS_TEST = process.env.NODE_ENV === 'test'
 export const IS_OPERATOR = Symbol('operator')
 export const ORIGINAL_ACTIONS = Symbol('origina_actions')
@@ -90,6 +87,42 @@ export function deepCopy(obj) {
   return obj
 }
 
+const getChangeMutationsDelimiter = '.'
+const getChangeMutationsRevert = () => {}
+export function getChangeMutations(stateA: object, stateB: object, path: string[] = [], mutations: IMutation[] = []): IMutation[] {
+  const stateAKeys = Object.keys(stateA)
+  const stateBKeys = Object.keys(stateB)
+
+  stateAKeys.forEach((key) => {
+    if (!stateBKeys.includes(key)) {
+      mutations.push({
+        delimiter: getChangeMutationsDelimiter,
+        args: [],
+        path: path.concat(key).join('.'),
+        hasChangedValue: false,
+        method: 'unset',
+        revert: getChangeMutationsRevert
+      })
+    }
+  })
+
+  stateBKeys.forEach((key) => {
+    if (isPlainObject(stateA[key]) && isPlainObject(stateB[key])) {
+      getChangeMutations(stateA[key], stateB[key], path.concat(key), mutations)
+    } else if (stateA[key] !== stateB[key]) {
+      mutations.push({
+        delimiter: getChangeMutationsDelimiter,
+        args: [stateB[key]],
+        path: path.concat(key).join('.'),
+        hasChangedValue: false,
+        method: 'set',
+        revert: getChangeMutationsRevert
+      })
+    }
+  })
+
+  return mutations
+}
 
 
 export function getActionPaths(actions = {}, currentPath: string[] = []) {

packages/node_modules/proxy-state-tree/src/MutationTree.ts

@@ -9,7 +9,6 @@ import {
 
 export class MutationTree<T extends object> implements IMutationTree<T> {
   private mutationCallbacks: IMutationCallback[] = []
-  private disposeOnReset: Function
   master: IProxyStateTree<T>
   state: T
   proxifier: IProxifier<T>
@@ -23,9 +22,6 @@ export class MutationTree<T extends object> implements IMutationTree<T> {
     this.master = master
     this.proxifier = proxifier || new Proxifier(this)
     this.state = this.proxifier.proxify(master.sourceState, '')
-    this.disposeOnReset = master.onReset(() => {
-      this.state = this.proxifier.proxify(master.sourceState, '')
-    })
   }
   trackPaths() {
     const paths = new Set<string>()
@@ -105,7 +101,6 @@ export class MutationTree<T extends object> implements IMutationTree<T> {
     this.isBlocking = false
   }
   dispose() {
-    this.disposeOnReset()
     this.isTracking = false
     this.mutationCallbacks.length = 0
     this.proxifier = this.master.proxifier

packages/node_modules/proxy-state-tree/src/TrackStateTree.ts

@@ -19,9 +19,6 @@ export class TrackStateTree<T extends object> implements ITrackStateTree<T> {
     this.master = master
     this.proxifier = master.proxifier
     this.state = master.state
-    this.disposeOnReset = this.master.onReset(() => {
-      this.state = master.state
-    })
   }
   trackPaths() {
     const paths = new Set<string>()
@@ -97,7 +94,6 @@ export class TrackStateTree<T extends object> implements ITrackStateTree<T> {
     return result
   }
   dispose() {
-    this.disposeOnReset()
     if (!this.callback) {
       this.pathDependencies.clear()
 

packages/node_modules/proxy-state-tree/src/index.ts

@@ -36,7 +36,6 @@ export class ProxyStateTree<T extends object> implements IProxyStateTree<T> {
     mutationTree: [] as IMutationTree<T>[],
     trackStateTree: [] as ITrackStateTree<T>[],
   }
-  private onResetCallbacks: Function[] = []
   flushCallbacks: IFlushCallback[] = []
   mutationCallbacks: IMutationCallback[] = []
   currentFlushId: number = 0
@@ -86,13 +85,6 @@ export class ProxyStateTree<T extends object> implements IProxyStateTree<T> {
       ''
     )
   }
-  onReset(cb: Function) {
-    this.onResetCallbacks.push(cb)
-
-    return () => {
-      this.onResetCallbacks.splice(this.onResetCallbacks.indexOf(cb), 1)
-    }
-  }
   getMutationTree(): IMutationTree<T> {
     if (!this.options.devmode) {
       return (this.mutationTree =
@@ -249,11 +241,6 @@ export class ProxyStateTree<T extends object> implements IProxyStateTree<T> {
       delete this.pathDependencies[path]
     }
   }
-  reset(state: T) {
-    this.sourceState = state
-    this.createTrackStateProxifier()
-    this.onResetCallbacks.forEach((cb) => cb())
-  }
   toJSON() {
     return this.sourceState
   }

packages/node_modules/proxy-state-tree/src/types.ts

@@ -94,7 +94,6 @@ export interface IRemoveProxyCallback {
 }
 
 export interface IProxyStateTree<T extends object> {
-  onReset(cb: Function): () => void
   addPathDependency(path: string, callback: ITrackCallback): void
   removePathDependency(path: string, callback: ITrackCallback): void
   getTrackStateTree(): ITrackStateTree<T>