fix(overmind-devtools): derived and computed notification, styling and flushes

christianalfoni · christianalfoni · commit 9af67bb13e28 · 2018-07-27T12:44:20.000+02:00
diff --git a/packages/node_modules/overmind-devtools/src/app/actions.ts b/packages/node_modules/overmind-devtools/src/app/actions.ts
@@ -5,8 +5,8 @@ import { Message, Tab } from './state'
 
 export default (action: Action) => {
   const onMessage = action<Message>()
-    .mutation(mutations.addMessagesFromClient)
     .mutation(mutations.performMutationsByMessageType)
+    .mutation(mutations.addMessagesFromClient)
 
   const loadDevtools = action()
     // .do(({ storage }) => storage.clear())
diff --git a/packages/node_modules/overmind-devtools/src/app/mutations.ts b/packages/node_modules/overmind-devtools/src/app/mutations.ts
@@ -51,9 +51,9 @@ export function resetNewPortValue(state: State) {
 }
 
 export function addMessagesFromClient(state: State, message: Message) {
-  state.apps[message.port].messages = state.apps[message.port].messages.concat(
-    message.message
-  )
+  state.apps[message.port].messages = message.message
+    .reverse()
+    .concat(state.apps[message.port].messages)
 }
 
 export function changeTab(state: State, tab: Tab) {
@@ -161,15 +161,16 @@ export function performMutationsByMessageType(state: State, message: Message) {
         state.apps[message.port].derived[clientMessage.data.path] =
           clientMessage.data
 
-        if (typeof clientMessage.data.flushId === 'number') {
-          ensureFlushExists(
-            state.apps[message.port].flushes,
-            clientMessage.data.flushId
-          )
-          state.apps[message.port].flushes[
-            clientMessage.data.flushId
-          ].derived.push(clientMessage.data.path)
-        }
+        break
+      }
+      case 'derived:dirty': {
+        ensureFlushExists(
+          state.apps[message.port].flushes,
+          clientMessage.data.flushId
+        )
+        state.apps[message.port].flushes[
+          clientMessage.data.flushId
+        ].derived.push(clientMessage.data.path)
         break
       }
       case 'computed': {
@@ -181,16 +182,16 @@ export function performMutationsByMessageType(state: State, message: Message) {
 
         state.apps[message.port].computed[clientMessage.data.path] =
           clientMessage.data
-
-        if (typeof clientMessage.data.flushId === 'number') {
-          ensureFlushExists(
-            state.apps[message.port].flushes,
-            clientMessage.data.flushId
-          )
-          state.apps[message.port].flushes[
-            clientMessage.data.flushId
-          ].computed.push(clientMessage.data.path)
-        }
+        break
+      }
+      case 'computed:dirty': {
+        ensureFlushExists(
+          state.apps[message.port].flushes,
+          clientMessage.data.flushId
+        )
+        state.apps[message.port].flushes[
+          clientMessage.data.flushId
+        ].computed.push(clientMessage.data.path)
         break
       }
       case 'action:start': {
diff --git a/packages/node_modules/overmind-devtools/src/components/Components/index.tsx b/packages/node_modules/overmind-devtools/src/components/Components/index.tsx
@@ -35,7 +35,13 @@ const Components: React.SFC<Connect> = ({ app }) => (
         </Panel>
       </Panels>
     </div>
-    <Table headers={['name', 'updates', 'values']}>
+    <Table
+      headers={[
+        { title: 'name', width: '150px' },
+        { title: 'updates', width: '100px' },
+        { title: 'paths', width: 'calc(100% - 250px)' },
+      ]}
+    >
       {app.state.componentsMounted.map((component) => {
         return (
           <Row key={component.id}>
@@ -45,9 +51,7 @@ const Components: React.SFC<Connect> = ({ app }) => (
                 {component.updateCount}
               </Text>
             </Cell>
-            <Cell>
-              {component.paths.map((path) => <Pill key={path}>{path}</Pill>)}
-            </Cell>
+            <Cell wordwrap="break-word">{component.paths.join(', ')}</Cell>
           </Row>
         )
       })}
diff --git a/packages/node_modules/overmind-devtools/src/components/Console/index.tsx b/packages/node_modules/overmind-devtools/src/components/Console/index.tsx
@@ -6,11 +6,10 @@ import { Wrapper } from './elements'
 class Console extends React.Component<Connect> {
   render() {
     const { app } = this.props
-    const messagesReversed = app.state.currentApp.messages.slice().reverse()
 
     return (
       <Wrapper>
-        {messagesReversed.map((message, index) => (
+        {app.state.currentApp.messages.map((message, index) => (
           <ConsoleRow key={'_' + index} message={message} />
         ))}
       </Wrapper>
diff --git a/packages/node_modules/overmind-devtools/src/components/common/Table/elements.tsx b/packages/node_modules/overmind-devtools/src/components/common/Table/elements.tsx
@@ -3,17 +3,32 @@ import styled from '../../../styled-components'
 export const TableComponent = styled.table`
   width: 100%;
   margin-top: ${({ theme }) => theme.padding.large};
+  table-layout: fixed;
+  border-collapse: collapse;
 `
 
 export const Headers = styled.thead``
 
-export const Header = styled.th`
+export const Header = styled<
+  {
+    width: string
+  },
+  'th'
+>('th')`
   text-align: left;
+  width: ${({ width }) => width};
   font-size: ${({ theme }) => theme.fontSize.small};
 `
 
 export const Body = styled.tbody``
 
 export const RowComponent = styled.tr``
 
-export const CellComponent = styled.td``
+export const CellComponent = styled<
+  {
+    wordwrap?: string
+  },
+  'td'
+>('td')`
+  word-wrap: ${({ wordwrap }) => wordwrap || 'normal'};
+`
diff --git a/packages/node_modules/overmind-devtools/src/components/common/Table/index.tsx b/packages/node_modules/overmind-devtools/src/components/common/Table/index.tsx
@@ -8,15 +8,24 @@ import {
   CellComponent,
 } from './elements'
 
+type Header = {
+  title: string
+  width: string
+}
+
 type TableProps = {
-  headers: string[]
+  headers: Header[]
 }
 
 const Table: React.SFC<TableProps> = ({ headers, children }) => (
   <TableComponent>
     <Headers>
       <Row>
-        {headers.map((header) => <Header key={header}>{header}</Header>)}
+        {headers.map((header) => (
+          <Header key={header.title} width={header.width}>
+            {header.title}
+          </Header>
+        ))}
       </Row>
     </Headers>
     <Body>{children}</Body>
@@ -27,8 +36,12 @@ export const Row: React.SFC = ({ children }) => (
   <RowComponent>{children}</RowComponent>
 )
 
-export const Cell: React.SFC = ({ children }) => (
-  <CellComponent>{children}</CellComponent>
+type CellProps = {
+  wordwrap?: string
+}
+
+export const Cell: React.SFC<CellProps> = ({ wordwrap, children }) => (
+  <CellComponent wordwrap={wordwrap}>{children}</CellComponent>
 )
 
 export default Table
diff --git a/packages/node_modules/overmind/src/computed.ts b/packages/node_modules/overmind/src/computed.ts
@@ -57,26 +57,11 @@ export class Computed {
         if (cache.proxyStateTreeListener) {
           cache.proxyStateTreeListener.update(cache.paths)
         } else {
-          eventHub.emit('computed', {
-            path,
-            paths: Array.from(cache.paths),
-            updateCount: cache.updateCount,
-            value: cache.value,
-            limit: this.cacheLimit,
-            cacheKeysCount: this.cacheKeys.length,
-            cacheKeyIndex: this.cacheKeys.indexOf(config),
-          })
           cache.proxyStateTreeListener = proxyStateTree.addMutationListener(
             cache.paths,
             (flushId) => {
-              eventHub.emit('computed', {
+              eventHub.emit('computed:dirty', {
                 path,
-                paths: Array.from(cache.paths),
-                updateCount: cache.updateCount,
-                value: cache.value,
-                limit: this.cacheLimit,
-                cacheKeysCount: this.cacheKeys.length,
-                cacheKeyIndex: this.cacheKeys.indexOf(config),
                 flushId,
               })
               cache.isDirty = true
@@ -90,6 +75,16 @@ export class Computed {
           proxyStateTree.addTrackingPath(path)
         }
 
+        eventHub.emit('computed', {
+          path,
+          paths: Array.from(cache.paths),
+          updateCount: cache.updateCount,
+          value: cache.value,
+          limit: this.cacheLimit,
+          cacheKeysCount: this.cacheKeys.length,
+          cacheKeyIndex: this.cacheKeys.indexOf(config),
+        })
+
         return cache.value
       } else if (cache) {
         return cache.value
diff --git a/packages/node_modules/overmind/src/derived.ts b/packages/node_modules/overmind/src/derived.ts
@@ -30,20 +30,11 @@ class Derived {
       if (this.proxyStateTreeListener) {
         this.proxyStateTreeListener.update(this.paths)
       } else {
-        eventHub.emit('derived', {
-          path,
-          paths: Array.from(this.paths),
-          updateCount: this.updateCount,
-          value: this.value,
-        })
         this.proxyStateTreeListener = proxyStateTree.addMutationListener(
           this.paths,
           (flushId) => {
-            eventHub.emit('derived', {
+            eventHub.emit('derived:dirty', {
               path,
-              paths: Array.from(this.paths),
-              updateCount: this.updateCount,
-              value: this.value,
               flushId,
             })
             this.isDirty = true
@@ -58,6 +49,13 @@ class Derived {
       proxyStateTree.addTrackingPath(path)
     }
 
+    eventHub.emit('derived', {
+      path,
+      paths: Array.from(this.paths),
+      updateCount: this.updateCount,
+      value: this.value,
+    })
+
     return this.value
   }
 }
diff --git a/packages/node_modules/overmind/src/index.ts b/packages/node_modules/overmind/src/index.ts
@@ -25,7 +25,10 @@ export interface Events {
     paths: string[]
     updateCount: number
     value: any
-    flushId?: number
+  }
+  'derived:dirty': {
+    path: string
+    flushId: number
   }
   computed: {
     path: string
@@ -35,7 +38,10 @@ export interface Events {
     limit: number
     cacheKeysCount: number
     cacheKeyIndex: number
-    flushId?: number
+  }
+  'computed:dirty': {
+    path: string
+    flushId: number
   }
   'reaction:add': {
     path: string
@@ -161,7 +167,7 @@ export default class App<
     */
     actionChain.on('operator:async', (data) => {
       const flushData = proxyStateTree.flush()
-      if (this.devtools) {
+      if (this.devtools && flushData.mutations.length) {
         this.devtools.send({
           type: 'flush',
           data: {
@@ -173,7 +179,7 @@ export default class App<
     })
     actionChain.on('action:end', (data) => {
       const flushData = proxyStateTree.flush()
-      if (this.devtools) {
+      if (this.devtools && flushData.mutations.length) {
         this.devtools.send({
           type: 'flush',
           data: {
@@ -255,12 +261,24 @@ export default class App<
         data,
       })
     )
+    eventHub.on('derived:dirty', (data) =>
+      devtools.send({
+        type: 'derived:dirty',
+        data,
+      })
+    )
     eventHub.on('computed', (data) =>
       devtools.send({
         type: 'computed',
         data,
       })
     )
+    eventHub.on('computed:dirty', (data) =>
+      devtools.send({
+        type: 'computed:dirty',
+        data,
+      })
+    )
     eventHub.on('reaction:add', (data) =>
       devtools.send({
         type: 'reaction:add',
