perf(overmind): pass individual messages to devtools instead

Author: christianalfoni

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

@@ -6,7 +6,6 @@ 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/actions.ts

@@ -1,15 +1,7 @@
-import {
-  Action,
-  pipe,
-  OnInitialize,
-  Operator,
-  forEach,
-  AsyncAction,
-} from 'overmind'
+import { Action, pipe, Operator, AsyncAction } from 'overmind'
 import {
   Message,
   Tab,
-  AppMessageType,
   ExecutionType,
   ActionsListItemType,
   Component,
@@ -20,9 +12,9 @@ import { isValidJson, createApp } from './utils'
 export const onMessage: Operator<Message> = pipe(
   o.ensureCurrentApp(),
   o.ensureApp(),
-  o.addClientMessages(),
-  o.getMessages(),
-  o.forkEachMessage({
+  o.addClientMessage(),
+  o.getMessage(),
+  o.forkMessage({
     [ExecutionType.INIT]: o.addStateAndActions(),
     [ExecutionType.RE_INIT]: o.addStateAndActions(),
     [ExecutionType.FLUSH]: o.addFlush(),

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

@@ -1,4 +1,4 @@
-import { Operator, mutate, forEach, fork, when, map } from 'overmind'
+import { Operator, mutate, forEach, fork, createOperator, map } from 'overmind'
 import {
   Message,
   AppMessage,
@@ -82,7 +82,7 @@ export const ensureApp: () => Operator<Message> = () =>
   mutate(({ state, effects, actions }, message) => {
     if (
       !state.apps[message.appName] ||
-      message.messages[0].type === ExecutionType.INIT
+      message.message.type === ExecutionType.INIT
     ) {
       state.apps[message.appName] = createApp({
         name: message.appName,
@@ -91,18 +91,16 @@ export const ensureApp: () => Operator<Message> = () =>
       // Do not use await, as it will block further execution, this stuff has to be sync
       actions.setAppDataFromStorage({
         appName: message.appName,
-        actions: message.messages[0].data.actions,
+        actions: message.message.data.actions,
       })
     }
   })
 
-export const addClientMessages: () => Operator<Message> = () =>
+export const addClientMessage: () => Operator<Message> = () =>
   mutate(({ state }, message) => {
-    state.apps[message.appName].messages = JSON.parse(
-      JSON.stringify(message.messages)
+    state.apps[message.appName].messages.unshift(
+      JSON.parse(JSON.stringify(message.message))
     )
-      .reverse()
-      .concat(state.apps[message.appName].messages)
   })
 
 export const addComponent: () => Operator<AddComponentMessage> = () =>
@@ -316,17 +314,15 @@ export const updateEffect: () => Operator<EffectMessage> = () =>
     }
   })
 
-export const getMessages: () => Operator<Message, AppMessage<any>[]> = () =>
-  map((_, value) =>
-    value.messages.map((message) => ({ ...message, appName: value.appName }))
-  )
+export const getMessage: () => Operator<Message, AppMessage<any>> = () =>
+  map((_, value) => ({ ...value.message, appName: value.appName }))
 
-export const forkEachMessage: (
+export const forkMessage: (
   paths: {
     [key: string]: Operator<AppMessage<any>, any>
   }
-) => Operator<AppMessage<any>[]> = (paths) =>
-  forEach(fork((_, value) => value.type, paths) as Operator<AppMessage<any>>)
+) => Operator<AppMessage<any>> = (paths) =>
+  fork((_, value) => value.type, paths) as Operator<AppMessage<any>>
 
 export const updateOperatorAsync: () => Operator<AsyncOperatorMessage> = () =>
   mutate(() => {})

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

@@ -354,7 +354,7 @@ export type EffectMessage = AppMessage<{
 
 export type Message = {
   appName: string
-  messages: AppMessage<any>[]
+  message: AppMessage<any>
 }
 
 export enum Tab {

packages/node_modules/overmind/src/Devtools.ts

@@ -122,12 +122,15 @@ export class Devtools {
     this.buffer.push(stringifiedMessage)
     this.sendBuffer()
   }
-  private sendBuffer() {
+  private sendBuffer = () => {
     if (this.isConnected && this.buffer.length) {
       this.ws.send(
-        `{ "appName": "${this.name}", "messages": [${this.buffer.join(',')}] }`
+        `{ "appName": "${this.name}", "message": ${this.buffer.shift()} }`
       )
-      this.buffer.length = 0
+
+      if (this.buffer.length) {
+        setTimeout(this.sendBuffer)
+      }
     }
   }
 }

packages/overmind-website/src/components/Guides/index.tsx

@@ -10,6 +10,8 @@ const Guides: SFC = () => {
     return <Loader />
   }
 
+  console.log(state.guides)
+
   return (
     <div className={styles.wrapper}>
       {state.guides.map((guide) => (