perf(overmind-devtools-client): push messages, though animation frame updates

Author: christianalfoni

packages/node_modules/overmind-devtools-client/src/BackendConnector.ts

@@ -1,5 +1,4 @@
 import { AppMessage } from './overmind/types'
-import * as throttle from 'lodash.throttle'
 
 type Message = {
   appName: string
@@ -16,7 +15,6 @@ 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
@@ -87,25 +85,30 @@ 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,
+  buffer = []
+  onMessageCallback: MessageCallback
+  constructor() {
+    super()
+    requestAnimationFrame(this.loopBufferOnFrame)
+  }
+  private loopBufferOnFrame = () => {
+    if (this.buffer.length) {
+      const messages = this.buffer.splice(0, 10)
+      this.onMessageCallback(messages)
     }
-  )
+    requestAnimationFrame(this.loopBufferOnFrame)
+  }
   onMessage = (onMessage: MessageCallback) => {
+    this.onMessageCallback = onMessage
     this.on('message', (message) => {
       this.buffer.push(message)
-      this.throttledOnMessage(onMessage)
     })
   }
   onDisconnect = (onDisconnect: (name: string) => void) => {
-    this.on('disconnect', (name) => onDisconnect(name))
+    this.on('disconnect', (name) => {
+      this.buffer.length = 0
+      onDisconnect(name)
+    })
   }
   sendMessage(appName: string, eventName: string, payload: object = null) {
     this.send('message', {

packages/node_modules/overmind-devtools-client/src/components/Console/index.tsx

@@ -6,6 +6,7 @@ import * as styles from './styles'
 const Console: FunctionComponent = () => {
   const { state } = useOvermind()
 
+  console.log(state.currentApp.messages)
   return (
     <div className={styles.wrapper}>
       {state.currentApp.messages.map((message, index) => (

packages/node_modules/overmind-devtools-client/src/overmind/operators.ts

@@ -79,33 +79,32 @@ export const addFlush: () => Operator<FlushMessage> = () =>
   })
 
 export const ensureApp: () => Operator<Message> = () =>
-  mutate(async ({ state, effects }, message) => {
+  mutate(({ state, effects }, message) => {
     if (
       !state.apps[message.appName] ||
       message.messages[0].type === ExecutionType.INIT
     ) {
-      const selectedActionQuery: string = await effects.storage.get(
-        `${message.appName}.selectedActionQuery`
-      )
-      const actionQueryPayload: string = await effects.storage.get(
-        `${message.appName}.actionQueryPayload`
-      )
-      const tab = await effects.storage.get<Tab>(
-        `${message.appName}.currentTab`
-      )
-
-      const actionQuery =
-        selectedActionQuery &&
-        message.messages[0].data.actions.includes(selectedActionQuery)
-          ? selectedActionQuery
-          : ''
-
       state.apps[message.appName] = createApp({
         name: message.appName,
-        selectedActionQuery: actionQuery,
-        actionQueryPayload: actionQuery ? actionQueryPayload : '',
       })
-      state.currentTab = tab || state.currentTab
+
+      // Do not use await, as it will block further execution, this stuff has to be sync
+      Promise.all([
+        effects.storage.get<string>(`${message.appName}.selectedActionQuery`),
+        effects.storage.get<string>(`${message.appName}.actionQueryPayload`),
+        effects.storage.get<Tab>(`${message.appName}.currentTab`),
+      ]).then(([selectedActionQuery, actionQueryPayload, tab]) => {
+        const actionQuery =
+          selectedActionQuery &&
+          message.messages[0].data.actions.includes(selectedActionQuery)
+            ? selectedActionQuery
+            : ''
+        state.apps[message.appName].selectedActionQuery = actionQuery
+        state.apps[message.appName].actionQueryPayload = actionQuery
+          ? actionQueryPayload
+          : ''
+        state.currentTab = tab || state.currentTab
+      })
     }
   })
 

packages/node_modules/overmind/src/Devtools.ts

@@ -144,17 +144,15 @@ export class Devtools {
   }
   send(message: Message) {
     const stringifiedMessage = JSON.stringify(message)
-    ;(window['__zone_symbol__setTimeout'] || setTimeout)(() => {
-      this.buffer.push(stringifiedMessage)
-      this.sendBuffer()
-    })
+    this.buffer.push(stringifiedMessage)
+    this.sendBuffer()
   }
-  private sendBuffer = throttle(function() {
+  private sendBuffer() {
     if (this.isConnected && this.buffer.length) {
       this.ws.send(
         `{ "appName": "${this.name}", "messages": [${this.buffer.join(',')}] }`
       )
       this.buffer.length = 0
     }
-  }, 50)
+  }
 }