feat(overmind): safely stringify non plain objects

Author: christianalfoni

packages/node_modules/overmind/package.json

@@ -32,9 +32,10 @@
     "es"
   ],
   "dependencies": {
-    "proxy-state-tree": "next",
-    "action-chain": "next",
     "@types/node": "^10.5.1",
+    "action-chain": "next",
+    "is-plain-object": "^2.0.4",
+    "proxy-state-tree": "next",
     "tslib": "^1.9.3"
   },
   "devDependencies": {

packages/node_modules/overmind/src/Devtools.ts

@@ -1,8 +1,27 @@
+import * as isPlainObject from 'is-plain-object'
+
 export type Message = {
   type: string
   data?: object
 }
 
+export function safeValue(value) {
+  if (
+    typeof value === 'object' &&
+    !Array.isArray(value) &&
+    value !== null &&
+    !isPlainObject(value)
+  ) {
+    return `[${value.constructor.name || 'NOT SERIALIZABLE'}]`
+  }
+
+  return value
+}
+
+export function safeValues(values) {
+  return values.map(safeValue)
+}
+
 function debounce(func, wait) {
   let timeout
   return function() {
@@ -20,7 +39,7 @@ function debounce(func, wait) {
 }
 
 export default class Devtools {
-  buffer: Message[]
+  buffer: string[]
   ws: WebSocket
   isConnected: boolean
   doReconnect: boolean
@@ -68,12 +87,12 @@ export default class Devtools {
     )
   }
   send(message: Message) {
-    this.buffer.push(message)
+    this.buffer.push(JSON.stringify(message))
     this.sendBuffer()
   }
   private sendBuffer = debounce(function() {
     if (this.isConnected) {
-      this.ws.send(JSON.stringify(this.buffer))
+      this.ws.send('[' + this.buffer.join(',') + ']')
       this.buffer.length = 0
     }
   }, 50)

packages/node_modules/overmind/src/index.ts

@@ -1,6 +1,6 @@
 import { actionChainFactory } from 'action-chain'
 import ProxyStateTree from 'proxy-state-tree'
-import Devtools, { Message } from './Devtools'
+import Devtools, { Message, safeValue } from './Devtools'
 import createActionFactory, {
   Action,
   NoValueAction,
@@ -77,10 +77,22 @@ export default class App<
     }
 
     actionChain.on('operator:async', () => {
-      proxyStateTree.flush()
+      const mutations = proxyStateTree.flush()
+      if (this.devtools) {
+        this.devtools.send({
+          type: 'flush',
+          data: { mutations },
+        })
+      }
     })
     actionChain.on('action:end', () => {
-      proxyStateTree.flush()
+      const mutations = proxyStateTree.flush()
+      if (this.devtools) {
+        this.devtools.send({
+          type: 'flush',
+          data: { mutations },
+        })
+      }
     })
 
     this.state = proxyStateTree.get()
@@ -134,7 +146,10 @@ export default class App<
     actionChain.on('operator:end', (data) =>
       devtools.send({
         type: 'operator:end',
-        data,
+        data: {
+          ...data,
+          result: safeValue(data.result),
+        },
       })
     )
     actionChain.on('action:end', (data) =>