Merge pull request cerebral#24 from cerebral/computed

feat(overmind): add computed concept

Author: christianalfoni

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

@@ -12,13 +12,20 @@ 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>
+export type Connect = TConnect<
+  typeof app.state,
+  typeof app.actions,
+  typeof app.computed
+>
 
 export const connect = app.connect
 

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.state.count}
+    {app.computed.test(5)}
     <Form onSubmit={app.actions.addTodo}>
       <Input
         placeholder="I need to..."

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

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

packages/node_modules/overmind/src/computed.ts

@@ -0,0 +1,89 @@
+import ProxyStateTree from 'proxy-state-tree'
+
+type ComputedOptions = {
+  cacheLimit?: number
+}
+
+type Cache = {
+  isDirty: boolean
+  proxyStateTreeListener: any
+  value: any
+  paths: Set<string>
+  updateCount: number
+}
+
+export class Computed {
+  cb: (config: any) => (state: object) => void
+  cacheLimit: number = 10
+  cacheKeys: Cache[] = []
+  cache: Map<any, Cache> = new Map()
+  constructor(cb, options: ComputedOptions = {}) {
+    this.cb = cb
+    this.cacheLimit = options.cacheLimit || this.cacheLimit
+  }
+  evaluate(actionChain, proxyStateTree: ProxyStateTree, path) {
+    return (config) => {
+      let cache = this.cache.get(config)
+
+      if (!cache) {
+        cache = {
+          isDirty: true,
+          proxyStateTreeListener: null,
+          value: undefined,
+          paths: new Set<string>(),
+          updateCount: 0,
+        }
+        this.cache.set(config, cache)
+        this.cacheKeys.push(config)
+        if (this.cacheKeys.length > this.cacheLimit) {
+          const cacheKey = this.cacheKeys.shift()
+          this.cache.get(cacheKey).proxyStateTreeListener.dispose()
+          this.cache.delete(cacheKey)
+        }
+      }
+
+      if (cache && cache.isDirty) {
+        const trackId = proxyStateTree.startPathsTracking()
+        cache.value = this.cb(config)(proxyStateTree.get())
+        cache.isDirty = false
+        cache.paths = proxyStateTree.clearPathsTracking(trackId)
+        if (cache.proxyStateTreeListener) {
+          cache.proxyStateTreeListener.update(cache.paths)
+        } else {
+          cache.proxyStateTreeListener = proxyStateTree.addMutationListener(
+            cache.paths,
+            () => {
+              cache.isDirty = true
+            }
+          )
+        }
+        actionChain.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.updateCount++
+
+        // Tracks the paths for the consumer of this derived value
+        for (let path of cache.paths) {
+          proxyStateTree.addTrackingPath(path)
+        }
+
+        return cache.value
+      } else if (cache) {
+        return cache.value
+      }
+    }
+  }
+}
+
+export default function computed<Config, NewValue>(
+  cb: (config: Config) => (state: object) => NewValue,
+  options?: ComputedOptions
+): (config: Config) => (state: object) => NewValue {
+  return new Computed(cb, options) as any
+}

packages/node_modules/overmind/src/index.ts

@@ -5,13 +5,16 @@ import createActionFactory, {
   Action,
   NoValueAction,
 } from './createActionFactory'
+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> = {
+type Configuration<State, Providers, Actions, Computed> = {
   state?: State
   providers?: Providers
   actions?: Actions
+  computed?: Computed
 }
 
 type Options = {
@@ -39,7 +42,10 @@ export default class App<
     | {
         [namespace: string]: ActionsCallback<Providers, State>
       }
-    | ActionsCallback<Providers, State>
+    | ActionsCallback<Providers, State>,
+  Computed extends {
+    [key: string]: (...args: any[]) => (state: State) => any
+  }
 > {
   private proxyStateTree: ProxyStateTree
   devtools: Devtools
@@ -51,8 +57,9 @@ export default class App<
       ? ReturnType<Actions>
       : any
   state: State
+  computed: Computed
   constructor(
-    configuration: Configuration<State, Providers, Actions>,
+    configuration: Configuration<State, Providers, Actions, Computed>,
     options: Options = {}
   ) {
     const proxyStateTree = new ProxyStateTree(configuration.state || {}, {
@@ -115,6 +122,24 @@ 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') {
@@ -180,6 +205,12 @@ export default class App<
         data,
       })
     )
+    actionChain.on('computed', (data) =>
+      devtools.send({
+        type: 'computed',
+        data,
+      })
+    )
     this.devtools = devtools
   }
   trackState() {

packages/node_modules/overmind/src/views/react.ts

@@ -7,10 +7,11 @@ export type IReactComponent<P = any> =
   | React.ComponentClass<P>
   | React.ClassicComponentClass<P>
 
-export type TConnect<State = {}, Actions = {}> = {
+export type TConnect<State = {}, Actions = {}, Computed = {}> = {
   app: {
     state: State
     actions: Actions
+    computed: Computed
   }
 }
 
@@ -30,8 +31,11 @@ export default class ReactApp<
     | {
         [namespace: string]: ActionsCallback<Providers, State>
       }
-    | ActionsCallback<Providers, State>
-> extends App<State, Providers, Actions> {
+    | ActionsCallback<Providers, State>,
+  Computed extends {
+    [key: string]: (...args: any[]) => (state: State) => any
+  }
+> extends App<State, Providers, Actions, Computed> {
   connect = <
     Props,
     ConnectedActions = Actions extends {
@@ -42,11 +46,13 @@ export default class ReactApp<
         ? ReturnType<Actions>
         : any
   >(
-    Component: IReactComponent<Props & TConnect<State, ConnectedActions>>
+    Component: IReactComponent<
+      Props & TConnect<State, ConnectedActions, Computed>
+    >
   ): IReactComponent<
     Omit<
-      Props & TConnect<State, ConnectedActions>,
-      keyof TConnect<State, ConnectedActions>
+      Props & TConnect<State, ConnectedActions, Computed>,
+      keyof TConnect<State, ConnectedActions, Computed>
     >
   > => {
     const componentId = nextComponentId++
@@ -108,8 +114,8 @@ export default class ReactApp<
 
     return class extends React.PureComponent<
       Omit<
-        Props & TConnect<State, ConnectedActions>,
-        keyof TConnect<State, ConnectedActions>
+        Props & TConnect<State, ConnectedActions, Computed>,
+        keyof TConnect<State, ConnectedActions, Computed>
       >
     > {
       __mutationListener: any
@@ -137,6 +143,7 @@ export default class ReactApp<
             app: {
               state: instance.state,
               actions: instance.actions,
+              computed: instance.computed,
               __componentInstanceId: this.__componentInstanceId,
             },
           }),
@@ -173,6 +180,7 @@ export default class ReactApp<
           app: {
             state: instance.state,
             actions: instance.actions,
+            computed: instance.computed,
             __componentInstanceId: this.__componentInstanceId,
           },
         }) as any)