Merge pull request cerebral#104 from cerebral/removeComputedAndFixDerived

feat(overmind): make derived work as plain function and remove computed

Author: christianalfoni

packages/demos/react-typescript-todomvc/src/app/derived.ts

@@ -1,5 +1,4 @@
-import { derive } from 'overmind'
-import * as derived from './derived'
+import { Derive } from 'overmind'
 
 export type Todo = {
   id: string
@@ -11,4 +10,4 @@ export const todos: Todo[] = []
 
 export let newTodoTitle: string = ''
 
-export const count: number = derive(derived.count)
+export const count: Derive<number> = (state) => state.todos.length

packages/demos/react-typescript-todomvc/src/app/state.ts

@@ -176,11 +176,7 @@ export const performMutationsByMessageType: Mutate<Message> = (
         const path = clientMessage.data.path.split('.')
         const key = path.pop()
         const target = path.reduce((aggr, pathKey) => aggr[pathKey], appState)
-        target[key] = {
-          paths: clientMessage.data.paths,
-          updateCount: clientMessage.data.updateCount,
-          value: clientMessage.data.value,
-        }
+        target[key] = clientMessage.data.value
 
         state.apps[message.port].derived[clientMessage.data.path] =
           clientMessage.data
@@ -197,31 +193,6 @@ export const performMutationsByMessageType: Mutate<Message> = (
         ].derived.push(clientMessage.data.path)
         break
       }
-      case 'computed': {
-        const appState = state.apps[message.port].state
-        const path = clientMessage.data.path.split('.')
-        const key = path.pop()
-        const target = path.reduce((aggr, pathKey) => aggr[pathKey], appState)
-        target[key] = {
-          cache: clientMessage.data.cache,
-          limit: clientMessage.data.limit,
-          updateCount: clientMessage.data.updateCount,
-        }
-
-        state.apps[message.port].computed[clientMessage.data.path] =
-          clientMessage.data
-        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 'reaction:update': {
         ensureFlushExists(
           state.apps[message.port].flushes,

packages/node_modules/overmind-devtools/src/app/derived.ts

@@ -1,6 +1,5 @@
-import { derive } from 'overmind'
-import * as derived from './derived'
 import { Apps, Tab, App, Component, Flush, Action } from './types'
+import { Derive } from 'overmind'
 
 export let isConnecting: boolean = true
 
@@ -20,28 +19,54 @@ export let currentTab: Tab = Tab.State
 
 export let expandedStatePaths: string[] = ['']
 
-export const currentApp: App = derive(derived.currentApp)
-
-export const componentsMounted: Component[] = derive(derived.componentsMounted)
-
-export const componentsUpdateCount: number = derive(
-  derived.componentsUpdateCount
-)
-
-export const componentsStatePathCount: number = derive(
-  derived.componentsStatePathCount
-)
-
-export const flushes: Flush[] = derive(derived.flushes)
-
-export const flushesMutationsCount: number = derive(
-  derived.flushesMutationsCount
-)
-
-export const flushesStatePathCount: number = derive(
-  derived.flushesStatePathCount
-)
-
-export const currentAction: Action = derive(derived.currentAction)
+export const currentApp: Derive<App> = (state) => state.apps[state.currentPort]
+
+export const componentsMounted: Derive<Component[]> = (state) =>
+  Object.keys(state.currentApp.components).reduce(
+    (aggr, key) => {
+      if (state.currentApp.components[key].isMounted) {
+        return aggr.concat(state.currentApp.components[key])
+      }
+
+      return aggr
+    },
+    [] as Component[]
+  )
+
+export const componentsUpdateCount: Derive<number> = (state) =>
+  state.componentsMounted.reduce(
+    (aggr, component) => aggr + component.updateCount,
+    0
+  )
+
+export const componentsStatePathCount: Derive<number> = (state) =>
+  state.componentsMounted.reduce(
+    (aggr, component) => aggr + component.paths.length,
+    0
+  )
+
+export const flushes: Derive<Flush[]> = (state) =>
+  Object.keys(state.currentApp.flushes)
+    .sort(
+      (idA, idB) =>
+        state.currentApp.flushes[idB].flushId -
+        state.currentApp.flushes[idA].flushId
+    )
+    .map((id) => state.currentApp.flushes[id])
+
+export const flushesMutationsCount: Derive<number> = (state) =>
+  state.flushes.reduce((aggr, flush) => aggr + flush.mutations.length, 0)
+
+export const flushesStatePathCount: Derive<number> = (state) =>
+  state.flushes.reduce((aggr, flush) => {
+    return flush.mutations.reduce(
+      (aggr, mutation) =>
+        aggr.includes(mutation.path) ? aggr : aggr.concat(mutation.path),
+      aggr
+    )
+  }, []).length
+
+export const currentAction: Derive<Action> = (state) =>
+  state.currentApp.actions[state.currentApp.currentActionId]
 
 export let expandAllActionDetails: boolean = false

packages/node_modules/overmind-devtools/src/app/mutations.ts

@@ -65,7 +65,6 @@ export type Flush = {
   mutations: Mutation[]
   components: string[]
   derived: string[]
-  computed: string[]
   reactions: string[]
 }
 
@@ -94,17 +93,6 @@ export type Derived = {
   value: any
 }
 
-export type Computed = {
-  cacheKeyIndex: number
-  cacheKeysCount: number
-  flushId: number
-  limit: number
-  path: string
-  paths: string[]
-  updateCount: number
-  value: number
-}
-
 export type Components = {
   [id: string]: Component
 }
@@ -113,18 +101,13 @@ export type DerivedMap = {
   [path: string]: Derived
 }
 
-export type ComputedMap = {
-  [path: string]: Computed
-}
-
 export type App = {
   name: string
   port: string
   messages: AppMessage[]
   state: object
   components: Components
   derived: Derived
-  computed: Computed
   flushes: Flushes
   flushByActionId: {
     [id: string]: FlushReference

packages/node_modules/overmind-devtools/src/app/state.ts

@@ -38,7 +38,6 @@ export const createApp = (data: Partial<App>): App =>
       state: {},
       components: {},
       derived: {},
-      computed: {},
       flushes: {},
       actions: {},
       actionsList: [],
@@ -65,7 +64,6 @@ export const ensureFlushExists = (flushes, flushId) => {
       mutations: [],
       components: [],
       derived: [],
-      computed: [],
       reactions: [],
     }
     flushes[flushId] = flush

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

@@ -16,9 +16,7 @@ const ActionFlush: React.SFC<Props> = ({ flush, flushReference, app }) => {
   const isExpanded =
     app.state.expandAllActionDetails || !flushReference.isCollapsed
 
-  return flush.components.length ||
-    flush.computed.length ||
-    flush.derived.length ? (
+  return flush.components.length || flush.derived.length ? (
     <Pipe>
       <Path />
       <Flush>
@@ -31,9 +29,6 @@ const ActionFlush: React.SFC<Props> = ({ flush, flushReference, app }) => {
           <Text variant="hint">
             <Icon>chain</Icon> {flush.derived.length}
           </Text>
-          <Text variant="hint">
-            <Icon>calculator</Icon> {flush.computed.length}
-          </Text>
           <Text variant="hint">
             <Icon>flask</Icon> {flush.reactions.length}
           </Text>
@@ -58,13 +53,6 @@ const ActionFlush: React.SFC<Props> = ({ flush, flushReference, app }) => {
                 </Text>
               </div>
             ))}
-            {flush.computed.map((computedPath) => (
-              <div key={computedPath}>
-                <Text variant="hint">
-                  <Icon>calculator</Icon> {computedPath}
-                </Text>
-              </div>
-            ))}
             {flush.reactions.map((reactionPath) => (
               <div key={reactionPath}>
                 <Text variant="hint">

packages/node_modules/overmind-devtools/src/app/utils.ts

@@ -16,14 +16,6 @@ export const LabelWrapper = styled.div`
   align-items: center;
 `
 
-export const ComputedLabel = styled.div`
-  margin-right: 5px;
-  background-color: ${({ theme }) => theme.color.primary};
-  padding: ${({ theme }) => `0 ${theme.padding.smallerer}`};
-  border-radius: ${({ theme }) => theme.borderRadius.normal};
-  color: ${({ theme }) => theme.color.white};
-`
-
 export const DerivedLabel = styled.div`
   margin-right: 5px;
   background-color: ${({ theme }) => theme.color.primary};

packages/node_modules/overmind-devtools/src/components/ActionFlush/index.tsx

@@ -1,12 +1,6 @@
 import * as React from 'react'
 import { connect, Connect } from '../../app'
-import {
-  Wrapper,
-  Label,
-  LabelWrapper,
-  ComputedLabel,
-  DerivedLabel,
-} from './elements'
+import { Wrapper, Label, LabelWrapper, DerivedLabel } from './elements'
 import Inspector, { RenderPaths } from '../Inspector'
 import Text from '../common/Text'
 
@@ -23,20 +17,6 @@ const DerivedWrapper = ({ children }) => (
   </Label>
 )
 
-const ComputedWrapper = ({ children }) => (
-  <Label>
-    <LabelWrapper>
-      <ComputedLabel>
-        {' '}
-        <Text variant="hint" mono>
-          computed
-        </Text>
-      </ComputedLabel>
-    </LabelWrapper>
-    <div>{children}</div>
-  </Label>
-)
-
 const State: React.SFC<Connect> = ({ app }) => (
   <Wrapper>
     <Inspector
@@ -54,15 +34,6 @@ const State: React.SFC<Connect> = ({ app }) => (
                 ),
               }),
             {}
-          ),
-          Object.keys(app.state.currentApp.computed || {}).reduce(
-            (aggr, key) =>
-              Object.assign(aggr, {
-                [key]: (children) => (
-                  <ComputedWrapper key={key}>{children}</ComputedWrapper>
-                ),
-              }),
-            {}
           )
         ) as RenderPaths
       }