fix(overmind): use a proxy-state-tree stringifier

Author: christianalfoni

packages/node_modules/overmind-devtools/bin.js

@@ -8,7 +8,7 @@ const serverPath = path.join(__dirname, 'src/main.js')
 
 const args = [serverPath]
   .concat([].concat(process.argv).splice(2))
-  // .concat('--not-packaged=true')
+  .concat('--not-packaged=true')
 
 const env = Object.create(process.env)
 env.NODE_ENV = 'production'

packages/node_modules/overmind/src/Devtools.ts

@@ -1,3 +1,5 @@
+import { stringify } from 'proxy-state-tree'
+
 export type Message = {
   type: string
   data?: object
@@ -69,42 +71,53 @@ export class Devtools {
   send(message: Message) {
     const safeClassNames = this.safeClassNames
     const unsafeClassNames = this.unsafeClassNames
-    const stringifiedMessage = JSON.stringify(message, function (_, value) {
-      if (typeof value === 'function') {
-        return '[Function]'
-      }
-      if (this.__CLASS__) {
-        return value
-      }
-      if (
-        typeof value === 'object' &&
-        value !== null &&
-        !Array.isArray(value) &&
-        value.constructor &&
-        value.constructor.name !== 'Object'
-      ) {
-        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)
-          }
+    const stringifiedMessage = stringify(
+      message,
+      function (_, value) {
+        if (typeof value === 'function') {
+          return '[Function]'
         }
-        
-        if (safeClassNames.has(value.constructor.name)) {
-          return {
-            __CLASS__: true,
-            name: value.constructor.name,
-            value
+        if (this.__CLASS__) {
+          return value
+        }
+        if (
+          typeof value === 'object' &&
+          value !== null &&
+          !Array.isArray(value) &&
+          value.constructor &&
+          value.constructor.name !== 'Object'
+        ) {
+          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)
+            }
+          }
+          
+          if (safeClassNames.has(value.constructor.name)) {
+            return {
+              __CLASS__: true,
+              name: value.constructor.name,
+              value
+            }
+          } else {
+            return `[${value.constructor.name || 'NOT SERIALIZABLE'}]`
           }
-        } else {
-          return `[${value.constructor.name || 'NOT SERIALIZABLE'}]`
         }
-      }
 
-      return value
-    })
+        return value
+      },
+      0,
+      function (value) {
+        return {
+          __CLASS__: true,
+          name: this.constructor.name,
+          value
+        } 
+      }
+    )
     this.buffer.push(stringifiedMessage)
     this.sendBuffer()
   }

packages/node_modules/overmind/src/index.ts

@@ -833,7 +833,7 @@ export class Overmind<ThisConfig extends IConfiguration>
     devtools.send({
       type: 'init',
       data: {
-        state: this.proxyStateTree.state[VALUE],
+        state: this.proxyStateTree.state,
         actions: getActionPaths(actions),
       },
     })

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

@@ -7,6 +7,20 @@ 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',
@@ -298,7 +312,7 @@ export class Proxifier {
         const currentTree = trackingTree || proxifier.tree
 
         if (typeof targetValue === 'function' && isClass(target)) {
-          return (...args) => targetValue.call(proxy, ...args)
+          return (...args) => prop === 'toJSON' && JSONReplacer ? JSONReplacer.call(proxy, targetValue.call(proxy, ...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,6 +29,8 @@ export {
   MutationTree,
 }
 
+export { stringify } from './Proxyfier'
+
 export * from './types'
 
 export class ProxyStateTree<T extends object> implements IProxyStateTree<T> {

packages/overmind-website/src/overmind/state.ts

@@ -38,6 +38,11 @@ type State = {
 
 class User {
   name = 'Bob'
+  toJSON() {
+    return {
+      name: 'ARNE',
+    }
+  }
 }
 
 const state: State = {