feat(overmind): computed state now in state and shown in devtools

Author: christianalfoni

packages/demos/todomvc/src/app/index.ts

@@ -12,20 +12,13 @@ const app = new App(
     state,
     actions,
     providers,
-    computed: {
-      test: (foo: number) => (state) => state.count + foo,
-    },
   },
   {
     devtools: 'localhost:1234',
   }
 )
 
-export type Connect = TConnect<
-  typeof app.state,
-  typeof app.actions,
-  typeof app.computed
->
+export type Connect = TConnect<typeof app.state, typeof app.actions>
 
 export const connect = app.connect
 

packages/demos/todomvc/src/app/state.ts

@@ -1,4 +1,4 @@
-import { derived } from 'overmind'
+import { derived, computed } from 'overmind'
 
 export type Todo = {
   id: string
@@ -10,12 +10,14 @@ export type State = {
   todos: Todo[]
   newTodoTitle: string
   count: number
+  testCount: (foo: number) => number
 }
 
 const state: State = {
   todos: [],
   count: derived((state: State) => state.todos.length),
   newTodoTitle: '',
+  testCount: computed((foo: number) => (state: State) => state.count + foo),
 }
 
 export default state

packages/demos/todomvc/src/components/AddTodo/index.tsx

@@ -4,7 +4,7 @@ import { Wrapper, Input, Button, Form } from './elements'
 
 const AddTodo: React.SFC<Connect> = ({ app }) => (
   <Wrapper>
-    {app.computed.test(5)}
+    {app.state.testCount(5)}
     <Form onSubmit={app.actions.addTodo}>
       <Input
         placeholder="I need to..."

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

@@ -104,7 +104,7 @@ export const performMutationsByMessageType = (
         ].components.push(id)
         break
       }
-      case 'component:remove':
+      case 'component:remove': {
         const id = `${clientMessage.data.componentId}_${
           clientMessage.data.componentInstanceId
         }`
@@ -114,13 +114,23 @@ export const performMutationsByMessageType = (
           state.apps[message.port].flushes.length - 1
         ].components.push(id)
         break
-      case 'derived':
+      }
+      case 'derived': {
         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] = clientMessage.data.value
         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] = clientMessage.data
+        break
+      }
     }
   })
 }

packages/node_modules/overmind/src/computed.test.ts

@@ -2,99 +2,107 @@ import App, { computed } from './'
 
 describe('Computed', () => {
   test('should instantiate app with computed', () => {
+    type State = {
+      foo: string
+      test: (foo: number) => string
+    }
+    const state: State = {
+      foo: 'bar',
+      test: computed((foo: number) => (state: State) => state.foo + foo),
+    }
     const app = new App({
-      state: {
-        foo: 'bar',
-      },
-      computed: {
-        test: (foo: number) => (state) => state.foo + foo,
-      },
+      state,
     })
-    expect(app.computed.test(123)).toEqual('bar123')
+    expect(app.state.test(123)).toEqual('bar123')
   })
   test('should not recalculate when not dirty', () => {
     let runCount = 0
+    type State = {
+      foo: string
+      test: (foo: number) => string
+    }
+    const state: State = {
+      foo: 'bar',
+      test: computed((foo: number) => (state: State) => {
+        runCount++
+        return state.foo + foo
+      }),
+    }
     const app = new App({
-      state: {
-        foo: 'bar',
-      },
-      computed: {
-        test: (foo: number) => (state) => {
-          runCount++
-          return state.foo + foo
-        },
-      },
+      state,
     })
-    app.computed.test(123)
-    app.computed.test(123)
+    app.state.test(123)
+    app.state.test(123)
     expect(runCount).toEqual(1)
   })
   test('should create new cache entry when args change', () => {
     let runCount = 0
+    type State = {
+      foo: string
+      test: (foo: number) => string
+    }
+    const state: State = {
+      foo: 'bar',
+      test: computed((foo: number) => (state: State) => {
+        runCount++
+        return state.foo + foo
+      }),
+    }
     const app = new App({
-      state: {
-        foo: 'bar',
-      },
-      computed: {
-        test: (foo: number) => (state) => {
-          runCount++
-          return state.foo + foo
-        },
-      },
+      state,
     })
-    app.computed.test(123)
-    app.computed.test(321)
+    app.state.test(123)
+    app.state.test(321)
     expect(runCount).toEqual(2)
   })
-  test.only('should flag as dirty when state changes', () => {
+  test('should flag as dirty when state changes', () => {
     let runCount = 0
+    type State = {
+      foo: string
+      test: (foo: number) => string
+    }
+    const state: State = {
+      foo: 'bar',
+      test: computed((foo: number) => (state: State) => {
+        runCount++
+        return state.foo + foo
+      }),
+    }
     const app = new App({
-      state: {
-        foo: 'bar',
-      },
-      computed: {
-        test: (foo: number) => (state) => {
-          runCount++
-          return state.foo + foo
-        },
-      },
+      state,
       actions: (action) => ({
         changeFoo: action().mutation((_, state) => (state.foo = 'bar2')),
       }),
     })
-    app.computed.test(123)
+    app.state.test(123)
     app.actions.changeFoo()
-    expect(app.computed.test(123)).toEqual('bar2123')
+    expect(app.state.test(123)).toEqual('bar2123')
     expect(runCount).toEqual(2)
   })
   test('should use factory to adjust cache limit', () => {
     let runCount = 0
     type State = {
       foo: string
+      test: (foo: number) => string
+    }
+    const state: State = {
+      foo: 'bar',
+      test: computed(
+        (foo: number) => (state: State) => {
+          runCount++
+          return state.foo + foo
+        },
+        {
+          cacheLimit: 1,
+        }
+      ),
     }
     const app = new App({
-      state: {
-        foo: 'bar',
-      },
-      computed: {
-        test: computed(
-          (foo: number) => (state: State) => {
-            runCount++
-            return state.foo + foo
-          },
-          {
-            cacheLimit: 1,
-          }
-        ),
-      },
+      state,
     })
-    app.computed.test(123)
-    app.computed.test(432)
-    app.computed.test(123)
+    app.state.test(123)
+    app.state.test(432)
+    app.state.test(123)
     expect(runCount).toEqual(3)
   })
 })
-
-/*
-  - Should expose to actions as provider
-*/

packages/node_modules/overmind/src/computed.ts

@@ -20,6 +20,7 @@ export class Computed {
   constructor(cb, options: ComputedOptions = {}) {
     this.cb = cb
     this.cacheLimit = options.cacheLimit || this.cacheLimit
+    return this.evaluate.bind(this)
   }
   evaluate(actionChain, proxyStateTree: ProxyStateTree, path) {
     return (config) => {
@@ -84,6 +85,6 @@ export class Computed {
 export default function computed<Config, NewValue>(
   cb: (config: Config) => (state: object) => NewValue,
   options?: ComputedOptions
-): (config: Config) => (state: object) => NewValue {
+): (config: Config) => NewValue {
   return new Computed(cb, options) as any
 }

packages/node_modules/overmind/src/index.ts

@@ -2,16 +2,14 @@ import { ActionChain } from 'action-chain'
 import ProxyStateTree from 'proxy-state-tree'
 import Devtools, { Message, safeValue } from './Devtools'
 import Action, { IValueAction, INoValueAction } from './Action'
-import { Computed } from './computed'
 export { default as compose } from './compose'
 export { default as derived } from './derived'
 export { default as computed } from './computed'
 
-type Configuration<State, Providers, Actions, Computed> = {
+type Configuration<State, Providers, Actions> = {
   state?: State
   providers?: Providers
   actions?: Actions
-  computed?: Computed
 }
 
 type Options = {
@@ -39,10 +37,7 @@ export default class App<
     | {
         [namespace: string]: ActionsCallback<Providers, State>
       }
-    | ActionsCallback<Providers, State>,
-  Computed extends {
-    [key: string]: (...args: any[]) => (state: State) => any
-  }
+    | ActionsCallback<Providers, State>
 > {
   private proxyStateTree: ProxyStateTree
   devtools: Devtools
@@ -54,9 +49,8 @@ export default class App<
       ? ReturnType<Actions>
       : any
   state: State
-  computed: Computed
   constructor(
-    configuration: Configuration<State, Providers, Actions, Computed>,
+    configuration: Configuration<State, Providers, Actions>,
     options: Options = {}
   ) {
     const proxyStateTree = new ProxyStateTree(configuration.state || {}, {
@@ -115,24 +109,6 @@ export default class App<
               }),
             {}
           ) as any)
-    this.computed = Object.keys(configuration.computed || {}).reduce(
-      (aggr, key) =>
-        Object.assign(aggr, {
-          [key]:
-            configuration.computed[key] instanceof Computed
-              ? (configuration.computed[key] as any).evaluate(
-                  actionChain,
-                  proxyStateTree,
-                  key
-                )
-              : new Computed(configuration.computed[key]).evaluate(
-                  actionChain,
-                  proxyStateTree,
-                  key
-                ),
-        }),
-      {}
-    ) as Computed
     this.proxyStateTree = proxyStateTree
 
     if (options.devtools && typeof window !== 'undefined') {