Merge pull request cerebral#21 from cerebral/derivedMessagesToDevtools

Derived messages to devtools

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() {

packages/node_modules/proxy-state-tree/README.md

@@ -138,4 +138,18 @@ const tree = new ProxyStateTree({
 })
 ```
 
-The allows you to easily extend functionality with for example a computed concept that lives in the tree, as you can see in this [codesandbox](https://codesandbox.io/s/xnv45zmkz).
+The allows you to easily extend functionality with for example a computed concept that lives in the tree, as you can see in this [codesandbox](https://codesandbox.io/s/xnv45zmkz).
+
+You can inject a wrapper around this function by:
+
+```js
+import ProxyStateTree from 'proxy-state-tree'
+
+const tree = new ProxyStateTree({
+  foo: (foo, proxyStateTree, path) => {}
+}, {
+  dynamicWrapper: (proxyStateTree, path, func) => func('foo', proxyStateTree, path)
+})
+```
+
+This helps you expose library entities to these functions.

packages/node_modules/proxy-state-tree/src/index.test.ts

@@ -369,6 +369,23 @@ describe('FUNCTIONS', () => {
     }
     const tree = new ProxyStateTree(state)
 
+    expect(tree.get().foo).toBe('bar')
+  })
+  test('should be able to inject a wrapper around functions', () => {
+    const state = {
+      foo: (foo, proxyStateTree, path) => {
+        expect(foo).toBe('foo')
+        expect(proxyStateTree).toBe(tree)
+        expect(path).toEqual('foo')
+
+        return 'bar'
+      },
+    }
+    const tree = new ProxyStateTree(state, {
+      dynamicWrapper: (proxyStateTree, path, func) =>
+        func('foo', proxyStateTree, path),
+    })
+
     expect(tree.get().foo).toBe('bar')
   })
 })

packages/node_modules/proxy-state-tree/src/index.ts

@@ -2,7 +2,8 @@ import proxify, { IS_PROXY, STATUS } from './proxify'
 const isPlainObject = require('is-plain-object')
 
 export type Options = {
-  devmode: boolean
+  devmode?: boolean
+  dynamicWrapper?: Function
 }
 
 type Mutation = {
@@ -21,11 +22,15 @@ class ProxyStateTree {
   paths: Set<string>[]
   status: STATUS
   proxy: any
-  constructor(state: object, options: Options = { devmode: true }) {
+  constructor(state: object, options: Options = {}) {
     if (!isPlainObject(state)) {
       throw new Error('You have to pass a plain object to the Proxy State Tree')
     }
 
+    if (typeof options.devmode === 'undefined') {
+      options.devmode = true
+    }
+
     this.state = state
     this.options = options
     this.pathDependencies = {}

packages/node_modules/proxy-state-tree/src/proxify.ts

@@ -112,7 +112,9 @@ function createObjectProxy(tree, value, path) {
       }
 
       if (typeof targetValue === 'function') {
-        return targetValue(tree, nestedPath)
+        return tree.options.dynamicWrapper
+          ? tree.options.dynamicWrapper(tree, nestedPath, targetValue)
+          : targetValue(tree, nestedPath)
       }
 
       if (targetValue === undefined) {