fix(overmind): allow passed in proxy values to be mutated

Author: christianalfoni

packages/demos/react-typescript-todomvc/src/app/actions.ts

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { Action } from 'overmind'
+import { Todo } from './state'
 
 type ChangeEvent = React.ChangeEvent<HTMLInputElement>
 
@@ -21,7 +22,6 @@ export const addTodo: Action = ({ state }) => {
   state.newTodoTitle = ''
 }
 
-export const toggleCompleted: Action<string> = ({ value: todoId, state }) => {
-  const todo = state.todos.find((todo) => todo.id === todoId)
+export const toggleCompleted: Action<Todo> = ({ value: todo }) => {
   todo.completed = !todo.completed
 }

packages/demos/react-typescript-todomvc/src/components/Todo/index.tsx

@@ -8,7 +8,7 @@ type Props = {
 } & Connect
 
 const Todo: React.SFC<Props> = ({ todo, app }) => (
-  <Item onClick={() => app.actions.toggleCompleted(todo.id)}>
+  <Item onClick={() => app.actions.toggleCompleted(todo)}>
     <Completed completed={todo.completed}>✔</Completed> {todo.title}
   </Item>
 )

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

@@ -8,6 +8,9 @@ function toJSON(obj) {
 function createDefaultApp() {
   const state = {
     foo: 'bar',
+    item: {
+      isAwesome: true,
+    },
   }
   const changeFoo: Action = (context) => {
     context.state.foo = 'bar2'
@@ -24,11 +27,15 @@ function createDefaultApp() {
     await Promise.resolve()
     context.state.foo = 'bar2'
   }
+  const changeValue: Action<{ isAwesome: boolean }> = (context) => {
+    context.value.isAwesome = !context.value.isAwesome
+  }
   const actions = {
     changeFoo,
     changeFooWithEffect,
     waitAndChangeFoo,
     asyncChangeFoo,
+    changeValue,
   }
   const effects = {
     hello() {
@@ -49,11 +56,7 @@ function createDefaultApp() {
     actions: typeof actions
     effects: typeof effects
   }>
-  type Action<Value = void, ReturnValue = Value> = TAction<
-    App,
-    Value,
-    ReturnValue
-  >
+  type Action<Value = void> = TAction<App, Value>
 
   return new Overmind(config)
 }
@@ -296,4 +299,10 @@ describe('Overmind', () => {
       expect(result).toEqual(['foo', 'bar'])
     })
   })
+  test('should allow mutations on passed values', () => {
+    expect.assertions(2)
+    const app = createDefaultApp()
+    expect(() => app.actions.changeValue(app.state.item)).not.toThrow()
+    expect(app.state.item.isAwesome).toBe(false)
+  })
 })

packages/node_modules/overmind/src/index.ts

@@ -31,11 +31,7 @@ export interface IApp {}
 
 type App = BaseApp & IApp
 
-export type Action<Value = void, ReturnValue = any> = TAction<
-  App,
-  Value,
-  ReturnValue
->
+export type Action<Value = void> = TAction<App, Value>
 
 export type Context<Value> = TContext<App, Value>
 
@@ -215,7 +211,11 @@ export class Overmind<Config extends Configuration> implements BaseApp {
         const scopedTree = this.proxyStateTree.getScopedTree()
         scopedTree.startMutationTracking()
         const result = action(
-          this.createContext(value, execution, scopedTree.get())
+          this.createContext(
+            scopedTree.scope(value),
+            execution,
+            scopedTree.get()
+          )
         )
         this.eventHub.emit(EventType.OPERATOR_END, {
           ...execution,

packages/node_modules/overmind/src/types.ts

@@ -31,9 +31,9 @@ export type TContext<App extends BaseApp, Value> = TBaseContext<App> & {
   value: Value
 }
 
-export type TAction<App extends BaseApp, Value, ReturnValue = Value> = (
+export type TAction<App extends BaseApp, Value> = (
   context: TContext<App, Value>
-) => ReturnValue
+) => any
 
 export type TOperator<C, RC> = (
   err: Error,

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

@@ -951,4 +951,18 @@ describe('SCOPED', () => {
     expect(tree.get().foo).toBe('bar2')
     expect(scoped.get().foo).toBe('bar2')
   })
+  it('should be able to change scope of state', () => {
+    const tree = new ProxyStateTree({
+      foo: 'bar',
+    })
+
+    const scoped = tree.getScopedTree()
+    const changeScope = scoped.scope(tree.get())
+
+    scoped.startMutationTracking()
+    changeScope.foo = 'bar2'
+    scoped.clearMutationTracking()
+    expect(tree.get().foo).toBe('bar2')
+    expect(scoped.get().foo).toBe('bar2')
+  })
 })

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

@@ -74,6 +74,11 @@ export class ProxyStateTree {
 
     return instance
   }
+  scope(value) {
+    return value && value[IS_PROXY]
+      ? proxify(this, value[VALUE], value[PATH])
+      : value
+  }
   addTrackingPath(path) {
     if (this.status.has(STATUS.TRACKING_PATHS)) {
       this.paths[this.paths.length - 1].add(path)