perf(overmind-devtools-client): throttle messages to avoid unnecessary flushes and refactor inspecto

Author: christianalfoni

package-lock.json

@@ -32,11 +32,14 @@
     "color-hash": "1.0.3",
     "electron": "2.0.8",
     "electron-json-storage": "4.1.0",
+    "electron-prompt": "1.3.1",
     "emotion": "9.2.12",
     "express": "4.16.3",
     "install": "0.12.1",
     "is-plain-obj": "1.1.0",
+    "lodash.throttle": "4.1.1",
     "marksy": "6.1.0",
+    "npm": "6.3.0",
     "page": "1.8.6",
     "petit-dom": "0.2.2",
     "preact": "8.3.1",
@@ -53,9 +56,7 @@
     "vue": "2.5.16",
     "vue-hot-reload-api": "2.3.0",
     "vue-styled-components": "1.3.0",
-    "ws": "7.0.0",
-    "electron-prompt": "1.3.1",
-    "npm": "6.3.0"
+    "ws": "7.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.4.5",

package.json

@@ -24,7 +24,8 @@
 		"react-dom": "16.8.1",
     "overmind-themes": "next",
     "ws": "^7.0.0",
-		"emotion": "^9.2.12"
+    "emotion": "^9.2.12",
+    "lodash.throttle": "^4.1.1"
 	},
 	"devDependencies": {
     "@types/node": "^10.12.21",

packages/node_modules/overmind-devtools-client/package.json

@@ -1,11 +1,12 @@
-import { AppMessage, AppMessageType } from './overmind/types'
+import { AppMessage } from './overmind/types'
+import * as throttle from 'lodash.throttle'
 
 type Message = {
   appName: string
   messages: AppMessage<any>[]
 }
 
-type MessageCallback = (message: Message) => void
+type MessageCallback = (message: Message[]) => void
 
 class WebsocketConnector {
   private nextEvaluationId = 0
@@ -15,6 +16,7 @@ class WebsocketConnector {
   private socket: WebSocket
   private messagesBeforeConnected: Array<[string, any, any]> = []
   private isOpen = false
+  buffer = []
 
   public connect(
     port: string | number // TODO: return Promise so we can wait for it
@@ -85,8 +87,22 @@ class WebsocketConnector {
 }
 
 export class BackendConnector extends WebsocketConnector {
+  private throttledOnMessage = throttle(
+    (onMessage: MessageCallback) => {
+      const messages = this.buffer.slice()
+      this.buffer.length = 0
+      onMessage(messages)
+    },
+    500,
+    {
+      leading: false,
+    }
+  )
   onMessage = (onMessage: MessageCallback) => {
-    this.on('message', (message) => onMessage(message))
+    this.on('message', (message) => {
+      this.buffer.push(message)
+      this.throttledOnMessage(onMessage)
+    })
   }
   onDisconnect = (onDisconnect: (name: string) => void) => {
     this.on('disconnect', (name) => onDisconnect(name))