fix(overmind): use json for class serialization support

Author: christianalfoni

packages/node_modules/overmind/src/Devtools.ts

@@ -1,4 +1,4 @@
-import { stringify } from 'proxy-state-tree'
+import { IS_JSON } from './utils'
 
 export type Message = {
   type: string
@@ -71,15 +71,25 @@ export class Devtools {
   send(message: Message) {
     const safeClassNames = this.safeClassNames
     const unsafeClassNames = this.unsafeClassNames
-    const stringifiedMessage = stringify(
+    const stringifiedMessage = JSON.stringify(
       message,
       function (_, value) {
         if (typeof value === 'function') {
           return '[Function]'
         }
+
         if (this.__CLASS__) {
           return value
         }
+
+        if (value && value[IS_JSON] && value.constructor.name !== 'Object') {
+          return {
+            __CLASS__: true,
+            name: value.constructor.name,
+            value   
+          }
+        }
+
         if (
           typeof value === 'object' &&
           value !== null &&
@@ -89,7 +99,6 @@ export class Devtools {
         ) {
           if (!safeClassNames.has(value.constructor.name) && !unsafeClassNames.has(value.constructor.name)) {
             try {
-              JSON.stringify(value)
               safeClassNames.add(value.constructor.name)
             } catch {
               unsafeClassNames.add(value.constructor.name)
@@ -109,14 +118,7 @@ export class Devtools {
 
         return value
       },
-      0,
-      function (value) {
-        return {
-          __CLASS__: true,
-          name: this.constructor.name,
-          value
-        } 
-      }
+      0
     )
     this.buffer.push(stringifiedMessage)
     this.sendBuffer()

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

@@ -25,7 +25,7 @@ function createDefaultOvermind() {
     item: {
       isAwesome: true,
     },
-    value: [] as StateValue[]
+    value: null as unknown as StateValue
   }
   const changeFoo: Action<void, string> = (context) => {
     context.state.foo = 'bar2'
@@ -392,15 +392,15 @@ describe('Overmind', () => {
       item: {
         isAwesome: false
       },
-      value: [{
+      value: {
         value: 'bar'
-      }]
+      }
     })
     expect(app.state.foo).toEqual('bar2')
     expect(app.state.item).toEqual({
       isAwesome: false
     })
-    expect(app.state.value[0].toJSON()).toEqual({
+    expect(app.state.value.toJSON()).toEqual({
       value: 'bar'
     })
   })

packages/node_modules/overmind/src/index.ts

@@ -91,8 +91,7 @@ export interface OnInitialize extends IOnInitialize<Config> {}
 
 export interface Reaction extends IReaction<Config> {}
 
-export const json = (obj: any) =>
-  deepCopy(obj && obj[IS_PROXY] ? obj[VALUE] : obj)
+export { json } from './utils'
 
 export const rehydrate = <T extends IState>(state: T, source: IMutation[] | IState, classes: RehydrateClasses<T> = {} as RehydrateClasses<T>) => {
   if (Array.isArray(source)) {

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

@@ -1,12 +1,14 @@
+import { IMutation } from 'proxy-state-tree'
+
 import {
-  createOvermindSSR,
-  Overmind,
-  IOnInitialize,
   IConfig,
-  rehydrate,
+  IOnInitialize,
+  Overmind,
+  createOvermindSSR,
   json,
+  rehydrate,
 } from './'
-import { IMutation } from 'proxy-state-tree'
+import { IS_JSON } from './utils'
 
 describe('Mock', () => {
   test('should allow changing the state', () => {
@@ -81,6 +83,7 @@ describe('Mock', () => {
 
     expect(json(overmind.state)).toEqual({
       foo: 'bar2',
+      [IS_JSON]: overmind.state
     })
   })
 })

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

@@ -11,4 +11,4 @@ describe('deepCopy', () => {
     copy.value = 15
     expect(copy.valuePlusTwo).toBe(17)
   })
-})
+})

packages/node_modules/overmind/src/utils.ts

@@ -1,4 +1,5 @@
 import isPlainObject from 'is-plain-obj'
+import { IS_PROXY, VALUE } from 'proxy-state-tree'
 
 import { Derived } from './derived'
 import { RehydrateClasses } from './internalTypes'
@@ -12,6 +13,7 @@ export const EXECUTION = Symbol('execution')
 export const MODE_DEFAULT = Symbol('MODE_DEFAULT')
 export const MODE_TEST = Symbol('MODE_TEST')
 export const MODE_SSR = Symbol('MODE_SSR')
+export const IS_JSON = Symbol('IS_JSON')
 
 export class MockedEventEmitter {
   emit() {}
@@ -21,6 +23,13 @@ export class MockedEventEmitter {
   addListener() {}
 }
 
+export const json = (obj: any) => {
+  const result = deepCopy(obj && obj[IS_PROXY] ? obj[VALUE] : obj)
+  result[IS_JSON] = obj
+  return result
+}
+  
+
 export function isPromise(maybePromise: any) {
   return (
     maybePromise instanceof Promise ||
@@ -164,15 +173,16 @@ export function rehydrateState<T extends IState>(target: T, source: IState, clas
   Object.keys(source).forEach((key) => {
     const value = source[key]
     const classInstance = classes[key]
-    if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
-      if (!target[key]) target[key] = {}
-      rehydrateState(target[key] as IState, source[key] as IState, classes[key])
-    } else if (classInstance && Array.isArray(source[key])) {
+    
+    if (typeof classInstance === 'function' && Array.isArray(source[key])) {
       target[key] = (source[key] as any[]).map(value => classInstance(value))
-    } else if (classInstance) {
+    } else if (typeof classInstance === 'function') {
       target[key] = classInstance(source[key])
+    } else if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
+      if (!target[key]) target[key] = {}
+      rehydrateState(target[key] as IState, source[key] as IState, classes[key])
     } else {
       target[key] = source[key]
     }
   })
-}
+}

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

@@ -7,20 +7,6 @@ export const PATH = Symbol('PATH')
 export const VALUE = Symbol('VALUE')
 export const PROXY_TREE = Symbol('PROXY_TREE')
 
-let JSONReplacer = null
-
-export const stringify = (
-  value: any,
-  replacer?: (this: any, key: string, value: any) => any,
-  space?: string | number,
-  toJSONReplacer?: (value: any) => any
-) => {
-  JSONReplacer = toJSONReplacer
-  const result = JSON.stringify(value, replacer, space)
-  JSONReplacer = null
-  return result
-}
-
 const arrayMutations = new Set([
   'push',
   'shift',
@@ -312,7 +298,7 @@ export class Proxifier {
         const currentTree = trackingTree || proxifier.tree
 
         if (typeof targetValue === 'function' && isClass(target)) {
-          return (...args) => prop === 'toJSON' && JSONReplacer ? JSONReplacer.call(proxy, targetValue.call(proxy, ...args)) : targetValue.call(proxy, ...args)
+          return (...args) => targetValue.call(proxy, ...args)
         } else if (typeof targetValue === 'function') {
           return proxifier.tree.master.options.dynamicWrapper
             ? proxifier.tree.master.options.dynamicWrapper(

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

@@ -29,8 +29,6 @@ export {
   MutationTree,
 }
 
-export { stringify } from './Proxyfier'
-
 export * from './types'
 
 export class ProxyStateTree<T extends object> implements IProxyStateTree<T> {