docs(website): update docs to latest API, other fixes

Author: christianalfoni

packages/overmind-website/api/action.md

@@ -4,10 +4,22 @@
 h(Example, { name: "api/action"})
 ```
 
-An action is where you write the logic of the application. Every action receives one argument and that is the configuration of your application:
+An action is where you write the logic of the application. Every action receives at least on argument and that is the **context**. This is the signature of the context:
 
 `{ state, actions, effects }`
 
-This *injected* configuration allows Overmind to understand from where you are chaing state and running effects. You can also use other actions defined in your application. Additionally with *injection* your actions become highly testable as it can easily be mocked.
+This *injected* context allows Overmind to understand from where you are changing state and running effects. You can also use other actions defined in your application. Additionally with *injection* your actions become highly testable as it can easily be mocked.
 
-State changes are restricted to these actions. That means if you try to change the state outside of an action you will get an error. The state changes are also scoped to the action. That means it does not matter if you perform the state change asynchronously, either by defining the action as an **async** function or for example use a **setTimeout**. You can change the state at any time within the action.
+State changes are restricted to these actions. That means if you try to change the state outside of an action you will get an error. The state changes are also scoped to the action. That means it does not matter if you perform the state change asynchronously, either by defining the action as an **async** function or for example use a **setTimeout**. You can change the state at any time within the action.
+
+## Payload
+
+When an action is called you can optionally pass it a payload. This payload is received as the second argument to the action.
+
+```marksy
+h(Example, { name: "api/action_payload"})
+```
+
+```marksy
+h(Notice, null, "There is only one argument, which means if you want to pass multiple values you have to do so with an object")
+```

packages/overmind-website/api/overmind.md

@@ -16,6 +16,14 @@ It is possible to listen to all mutations performed in Overmind. This allows you
 h(Example, { name: "api/app_addMutationListener" })
 ```
 
+## addFlushListener
+
+The **addMutationListener** triggers whenever there is a mutation. The **addFLushListener** triggers whenever Overmind tells components to render again. It can have multiple mutations related to it.
+
+```marksy
+h(Example, { name: "api/app_addFlushListener" })
+```
+
 
 ## options.devtools
 If you develop your app on localhost the application connects to the devtools on **localhost:3031**. You can change this in case you need to use an IP address, the devtools is configured with a different port or you want to connect to localhost (with default port) even though the app is not on localhost.

packages/overmind-website/examples/api/action.ts

@@ -5,36 +5,22 @@ export default (ts) =>
           code: `
 import { Action } from 'overmind'
 
-export const changeTitle: Action<string> = ({ value: title, state }) => {
-  state.title = title
+export const getPosts: Action = async ({ state, effects }) => {
+  state.isLoadingPosts = true
+  state.posts = await effects.api.getPosts()
+  state.isLoadingPosts = false
 }
 `,
         },
-        {
-          code: `
-import { Action } from 'overmind'
-
-export const getItem: Action<number> = async ({ value: id, state, effects }) => {
-  const item = await effects.api.getItem(id)
-  state.items.push(item)
-}
-  `,
-        },
       ]
     : [
         {
           code: `
-export const changeTitle = ({ value: title, state }) => {
-  state.title = title
+export const getPosts = async ({ state, effects }) => {
+  state.isLoadingPosts = true
+  state.posts = await effects.api.getPosts()
+  state.isLoadingPosts = false
 }
 `,
         },
-        {
-          code: `
-export const getItem = async ({ value: id, state, effects }) => {
-  const item = await effects.api.getItem(id)
-  state.items.push(item)
-}
-  `,
-        },
       ]

packages/overmind-website/examples/api/action_payload.ts

@@ -0,0 +1,22 @@
+export default (ts) =>
+  ts
+    ? [
+        {
+          code: `
+import { Action } from 'overmind'
+
+export const setTitle: Action<string> = async ({ state }, title) => {
+  state.title = title
+}
+`,
+        },
+      ]
+    : [
+        {
+          code: `
+export const setTitle = async ({ state }, title) => {
+  state.title = title
+}
+`,
+        },
+      ]

packages/overmind-website/examples/api/app_addFlushListener.ts

@@ -0,0 +1,30 @@
+import { tsAppIndex } from '../templates'
+
+export default (ts, view) =>
+  ts
+    ? [
+        {
+          fileName: 'overmind/onInitialize.ts',
+          code: `
+import { OnInitialize } from 'overmind'
+
+const onInitialize: OnInitialize = async ({ state, effects }, overmind) => {
+  overmind.addFlushListener(effects.history.addMutations)
+}
+
+export default onInitialize
+`,
+        },
+      ]
+    : [
+        {
+          fileName: 'overmind/onInitialize.js',
+          code: `
+const onInitialize = async ({ state, effects }, overmind) => {
+  overmind.addFlushListener(effects.history.addMutations)
+}
+
+export default onInitialize
+`,
+        },
+      ]

packages/overmind-website/examples/api/app_addMutationListener.ts

@@ -8,7 +8,7 @@ export default (ts, view) =>
           code: `
 import { OnInitialize } from 'overmind'
 
-const onInitialize: OnInitialize = async ({ value: overmind, state, localStorage }) => {
+const onInitialize: OnInitialize = async ({ state, localStorage }, overmind) => {
   overmind.addMutationListener((mutation) => {
     if (mutation.path.indexOf('todos') === 0) {
       localStorage.set('todos', state.todos)
@@ -24,7 +24,7 @@ export default onInitialize
         {
           fileName: 'overmind/onInitialize.js',
           code: `
-const onInitialize = async ({ value: overmind, state, localStorage }) => {
+const onInitialize = async ({ state, localStorage }, overmind) => {
   overmind.addMutationListener((mutation) => {
     if (mutation.path.indexOf('todos') === 0) {
       localStorage.set('todos', state.todos)

packages/overmind-website/examples/guide/goingfunctional/actionoperator.ts

@@ -6,11 +6,11 @@ export default (ts) =>
           code: `
 import { Action, Operator, action } from 'overmind'
 
-export const plainAction: Action = ({ value, state }) => {
+export const plainAction: Action = ({ state }, value) => {
 
 }
 
-export const functionlAction: Operator = action(({ value, state }) => {
+export const functionlAction: Operator = action(({ state }, value) => {
 
 })
   `,
@@ -22,11 +22,11 @@ export const functionlAction: Operator = action(({ value, state }) => {
           code: `
 import { action } from 'overmind'
 
-export const plainAction = ({ value, state }) => {
+export const plainAction = ({ state }, value) => {
 
 }
 
-export const functionlAction = action(({ value, state }) => {
+export const functionlAction = action(({ state }, value) => {
 
 })
 `,

packages/overmind-website/examples/guide/goingfunctional/clean.ts

@@ -11,7 +11,7 @@ export const search: Operator<Event> = pipe(
   getEventTargetValue,
   lengthGreaterThan(2),
   debounce(200),
-  action(async ({ value: query, state, effects }) => {
+  action(async ({ state, effects }, query) => {
     state.isSearching = true
     state.searchResult = await effects.api.search(query)
     state.isSearching = false
@@ -25,10 +25,10 @@ export const search: Operator<Event> = pipe(
 import { Operator, map, filter } from 'overmind'
 
 const getEventTargetValue: Operator<Event, string> =
-  map(({ value }) => value.currentTarget.value)
+  map((_, value) => value.currentTarget.value)
 
 const lengthGreaterThan: (length: number) => Operator<string> =
-  (length) => filter(({ value }) => value.length > length)
+  (length) => filter((_, value) => value.length > length)
     
         `,
         },
@@ -44,7 +44,7 @@ export const search = pipe(
   getEventTargetValue,
   lengthGreaterThan(2),
   debounce(200),
-  action(async ({ value: query, state, effects }) => {
+  action(async ({ state, effects }, query) => {
     state.isSearching = true
     state.searchResult = await effects.api.search(query)
     state.isSearching = false
@@ -57,9 +57,9 @@ export const search = pipe(
           code: `
 import { map, filter } from 'overmind'
 
-export const getEventTargetValue = map(({ value }) => value.currentTarget.value)
+export const getEventTargetValue = map((_, value) => value.currentTarget.value)
 
-export const lengthGreaterThan = (length) => filter(({ value }) => value.length > length)
+export const lengthGreaterThan = (length) => filter((_, value) => value.length > length)
         `,
         },
       ]

packages/overmind-website/examples/guide/goingfunctional/factory.ts

@@ -7,7 +7,7 @@ export default (ts) =>
 import { Operator, filter } from 'overmind'
 
 const lengthGreaterThan: (length: number) => Operator<string> =
-  (length) => filter(({ value }) => value.length > length)
+  (length) => filter((_, value) => value.length > length)
     
         `,
         },
@@ -18,7 +18,7 @@ const lengthGreaterThan: (length: number) => Operator<string> =
           code: `
 import { map, filter } from 'overmind'
 
-export const lengthGreaterThan = (length) => filter(({ value }) => value.length > length)
+export const lengthGreaterThan = (length) => filter((_, value) => value.length > length)
         `,
         },
       ]

packages/overmind-website/examples/guide/goingfunctional/map.ts

@@ -6,7 +6,7 @@ export default (ts) =>
           code: `
 import { Operator, map } from 'overmind'
 
-export const getTargetValue: Operator<Event, string> = map(({ value : event }) => 
+export const getTargetValue: Operator<Event, string> = map((_, event) => 
   event.currentTarget.value
 )
   `,
@@ -19,7 +19,7 @@ import { getTargetValue } from './operators'
 
 export const setValue: Operator<Event, string> = pipe(
   getTargetValue,
-  action(({ state, value }) => {
+  action(({ state}, value) => {
     state.value = value
   })
 )
@@ -32,7 +32,7 @@ export const setValue: Operator<Event, string> = pipe(
           code: `
 import { map } from 'overmind'
 
-export const getTargetValue = map(({ value : event }) => 
+export const getTargetValue = map((_, event) => 
   event.currentTarget.value
 )
 `,
@@ -45,7 +45,7 @@ import { getTargetValue } from './operators'
 
 export const setValue = pipe(
   getTargetValue,
-  action(({ state, value }) => {
+  action(({ state }, value) => {
     state.value = value
   })
 )