feat(overmind-devtools): inform devtools about derived state and updates

Author: christianalfoni

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

@@ -11,9 +11,6 @@ export default (action: Action) => ({
   addTodo: action<React.FormEvent>()
     .do(helpers.preventEventDefault)
     .mutation(mutations.addTodo)
-    .mutation(mutations.clearNewTodoTitle)
-    .filter((_, { state }) => state.todos.length > 2)
-    .map(() => Promise.resolve())
-    .mutation((_, state) => (state.todos[2].title = 'mihihihi')),
+    .mutation(mutations.clearNewTodoTitle),
   toggleCompleted: action<Todo>().mutation(mutations.toggleCompleted),
 })

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

@@ -1,3 +1,5 @@
+import { derived } from 'overmind'
+
 export type Todo = {
   id: string
   title: string
@@ -7,10 +9,12 @@ export type Todo = {
 export type State = {
   todos: Todo[]
   newTodoTitle: string
+  count: number
 }
 
 const state: State = {
   todos: [],
+  count: derived((state: State) => state.todos.length),
   newTodoTitle: '',
 }
 

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

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

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

@@ -114,6 +114,13 @@ export const performMutationsByMessageType = (
           state.apps[message.port].flushes.length - 1
         ].components.push(id)
         break
+      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
     }
   })
 }

packages/node_modules/overmind/src/derived.ts

@@ -6,14 +6,16 @@ class Derived {
   value: any
   cb: (state: object) => void
   paths: Set<string>
+  updateCount: number
   constructor(cb) {
     this.isDirty = true
     this.proxyStateTreeListener = null
     this.value = null
     this.cb = cb
+    this.updateCount = 0
     return this.evaluate.bind(this)
   }
-  evaluate(proxyStateTree: ProxyStateTree) {
+  evaluate(actionChain, proxyStateTree: ProxyStateTree, path) {
     if (this.isDirty) {
       const trackId = proxyStateTree.startPathsTracking()
       this.value = this.cb(proxyStateTree.get())
@@ -29,6 +31,13 @@ class Derived {
           }
         )
       }
+      actionChain.emit('derived', {
+        path,
+        paths: Array.from(this.paths),
+        updateCount: this.updateCount,
+        value: this.value,
+      })
+      this.updateCount++
     }
 
     // Tracks the paths for the consumer of this derived value

packages/node_modules/overmind/src/index.ts

@@ -55,7 +55,10 @@ export default class App<
     configuration: Configuration<State, Providers, Actions>,
     options: Options = {}
   ) {
-    const proxyStateTree = new ProxyStateTree(configuration.state || {})
+    const proxyStateTree = new ProxyStateTree(configuration.state || {}, {
+      dynamicWrapper: (proxyStateTree, path, func) =>
+        func(actionChain, proxyStateTree, path),
+    })
     const actionChain = actionChainFactory(
       Object.assign(
         {
@@ -171,6 +174,12 @@ export default class App<
         data,
       })
     )
+    actionChain.on('derived', (data) =>
+      devtools.send({
+        type: 'derived',
+        data,
+      })
+    )
     this.devtools = devtools
   }
   trackState() {