Merge pull request #111 from cerebral/wrappingUp

Wrapping up

Author: christianalfoni

packages/node_modules/overmind-devtools/src/components/Action/elements.tsx

@@ -3,6 +3,7 @@ import styled from '../../styled-components'
 export const Wrapper = styled.div`
   padding: ${({ theme }) => theme.padding.normal};
   background-color: ${({ theme }) => theme.color.fade(theme.color.white, 0.1)};
+  overflow-y: scroll;
 `
 
 export const Container = styled.div`
@@ -14,3 +15,20 @@ export const Pipe = styled.div`
   align-items: center;
   margin: ${({ theme }) => `${theme.padding.small} 0`};
 `
+
+export const ExpandAll = styled<
+  {
+    isActive: boolean
+  },
+  'div'
+>('div')`
+  display: flex;
+  justify-content: flex-end;
+  font-size: ${({ theme }) => theme.fontSize.small};
+  cursor: pointer;
+  color: ${({ theme }) => theme.color.black};
+  opacity: ${({ isActive }) => (isActive ? '1' : '0.5')};
+  :hover {
+    opacity: ${({ isActive }) => (isActive ? '1' : '0.75')};
+  }
+`

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Connect, connect } from '../../app'
-import { Wrapper, Container } from './elements'
+import { Wrapper, Container, ExpandAll } from './elements'
 import Operator from '../ActionOperator'
 import Flush from '../ActionFlush'
 import { getActionId, getOperatorId } from '../../app/utils'
@@ -16,6 +16,12 @@ const Action: React.SFC<Connect> = ({ app }) => {
   return (
     <Wrapper>
       <Container>
+        <ExpandAll
+          isActive={app.state.expandAllActionDetails}
+          onClick={() => app.actions.toggleExpandAllActions()}
+        >
+          expand all
+        </ExpandAll>
         {app.state.currentAction.operators.map((operator, index) => {
           const prevOperator = app.state.currentAction.operators[index - 1]
           const value =

packages/node_modules/overmind-devtools/src/components/Actions/elements.tsx

@@ -18,22 +18,3 @@ export const CenterWrapper = styled.div`
   align-items: center;
   justify-content: center;
 `
-
-export const ExpandAll = styled<
-  {
-    isActive: boolean
-  },
-  'div'
->('div')`
-  display: flex;
-  position: absolute;
-  top: 10px;
-  right: ${({ theme }) => theme.padding.normal};
-  font-size: ${({ theme }) => theme.fontSize.small};
-  cursor: pointer;
-  color: ${({ theme }) => theme.color.black};
-  opacity: ${({ isActive }) => (isActive ? '1' : '0.5')};
-  :hover {
-    opacity: ${({ isActive }) => (isActive ? '1' : '0.75')};
-  }
-`

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

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import ActionsList from '../ActionsList'
 import Action from '../Action'
-import { Wrapper, CenterWrapper, ExpandAll } from './elements'
+import { Wrapper, CenterWrapper } from './elements'
 import { Connect, connect } from '../../app'
 import Text from '../common/Text'
 
@@ -16,12 +16,6 @@ const Actions: React.SFC<Connect> = ({ app }) => {
 
   return (
     <Wrapper>
-      <ExpandAll
-        isActive={app.state.expandAllActionDetails}
-        onClick={() => app.actions.toggleExpandAllActions()}
-      >
-        expand all
-      </ExpandAll>
       <ActionsList />
       <Action />
     </Wrapper>

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

@@ -66,4 +66,37 @@ describe('Derived', () => {
     expect(app.state.upperFoo).toBe('BAR2')
     expect(renderCount).toBe(1)
   })
+  test('should not require flush to flag as dirty', () => {
+    expect.assertions(1)
+    const changeFoo: Action = ({ map }) =>
+      map(({ state }) => state.upperFoo)
+        .mutate((state) => (state.foo = 'bar2'))
+        .run(({ state }) => {
+          expect(state.upperFoo).toBe('BAR2')
+        })
+
+    const derived: Derive<string> = (state: State) => state.foo.toUpperCase()
+
+    const config = {
+      state: {
+        foo: 'bar',
+        upperFoo: derived,
+      },
+      actions: {
+        changeFoo,
+      },
+    }
+    type Config = TConfig<{
+      state: {
+        foo: string
+        upperFoo: string
+      }
+      actions: typeof config.actions
+    }>
+    type Action<Input = void, Output = any> = TAction<Input, Output, Config>
+    type Derive<T> = TDerive<T, Config>
+
+    const app = new App(config)
+    app.actions.changeFoo()
+  })
 })

packages/node_modules/overmind/src/derived.ts

@@ -21,17 +21,16 @@ export default class Derived {
       this.value = this.cb(proxyStateTree.get())
       this.isDirty = false
       this.paths = proxyStateTree.clearPathsTracking(trackId)
-      if (this.proxyStateTreeListener) {
-        this.proxyStateTreeListener.update(this.paths)
-      } else {
+      if (!this.proxyStateTreeListener) {
         this.proxyStateTreeListener = proxyStateTree.addMutationListener(
-          this.paths,
-          (flushId) => {
-            eventHub.emitAsync(EventType.DERIVED_DIRTY, {
-              path,
-              flushId,
-            })
-            this.isDirty = true
+          (mutation, flushId) => {
+            if (this.paths.has(mutation.path)) {
+              eventHub.emitAsync(EventType.DERIVED_DIRTY, {
+                path,
+                flushId,
+              })
+              this.isDirty = true
+            }
           }
         )
       }

packages/node_modules/overmind/src/index.ts

@@ -438,7 +438,7 @@ export default class App<
     return this.proxyStateTree.clearPathsTracking(id, cb)
   }
   addMutationListener(paths, cb) {
-    return this.proxyStateTree.addMutationListener(paths, cb)
+    return this.proxyStateTree.addFlushListener(paths, cb)
   }
   createReactionFactory(prefix: string) {
     const reactions = []

packages/node_modules/overmind/src/reaction.ts

@@ -18,7 +18,7 @@ class Reaction {
       this.proxyStateTree.clearPathsTracking(trackId)
     )[0]
 
-    this.proxyStateTreeListener = this.proxyStateTree.addMutationListener(
+    this.proxyStateTreeListener = this.proxyStateTree.addFlushListener(
       (mutations, flushId) => {
         for (let mutationIndex in mutations) {
           const mutation = mutations[mutationIndex]

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

@@ -102,7 +102,7 @@ function render () {
   return tree.clearPathsTracking(trackId)
 }
 
-const listener = tree.addMutationListener(render(), (flushId) => {
+const listener = tree.addFlushListener(render(), (flushId) => {
   // Runs when mutations matches paths passed in
 
   // Whenever mutations affecting these paths occurs
@@ -126,7 +126,7 @@ listener.dispose()
 
 Here we combine the tracked paths with the mutations performed to see if this components, computed or whatever indeed needs to run again, doing a new **startPathsTracking** and **clearPathsTracking**.
 
-You can optionally declare a global listener which will be informed by all mutations:
+You can optionally declare a global listener which will be informed by all mutation flushes:
 
 ```js
 import ProxyStateTree from 'proxy-state-tree'
@@ -137,7 +137,7 @@ const tree = new ProxyStateTree({
 })
 const state = tree.get()
 
-const listener = tree.addMutationListener((mutations, flushId) => {
+const listener = tree.addFlushListener((mutations, flushId) => {
   /*
     [{
       method: "set",
@@ -154,6 +154,33 @@ tree.flush()
 listener.dispose()
 ```
 
+In addition to this you can also listen to each individual mutation:
+
+```js
+import ProxyStateTree from 'proxy-state-tree'
+
+const tree = new ProxyStateTree({
+  foo: 'bar',
+  bar: 'baz'
+})
+const state = tree.get()
+
+const listener = tree.addMutationListener((mutation) => {
+  /*
+    {
+      method: "set",
+      path: "foo",
+      args: ["bar2"] 
+    }
+  */
+})
+
+tree.startMutationTracking()
+state.foo = 'bar2'
+tree.clearMutationTracking()
+listener.dispose()
+```
+
 ## Dynamic state values
 
 If you insert a function into the state tree it will be called when accessed. The function is passed the **proxy-state-tree** instance and the path of where the function lives in the tree.