docs(website): rewritten functional docs

Author: christianalfoni

packages/node_modules/overmind-devtools/src/components/ActionFlush/styles.ts

@@ -9,6 +9,7 @@ export const flush = css({
   position: 'relative',
   ':hover div:nth-child(2)': {
     display: 'block',
+    zIndex: 2,
   },
   ':hover': {
     borderBottomRightRadius: 0,

packages/node_modules/overmind-devtools/src/overmind/types.ts

@@ -44,7 +44,7 @@ export type ActionsListItem = ActionItem | ActionGroupItem
 
 export type Execution = {
   actionId: number
-  name: string
+  actionName: string
   executionId: number
   isAsync?: boolean
   operatorId: number

packages/overmind-website/api/operators.md

@@ -6,27 +6,14 @@ Overmind also provides a functional API to help you manage complex logic. This A
 h(Example, { name: "api/operators" })
 ```
 
-The **action** function is an operator that allows you to express logic just like you do in a traditional action. The **fromOperator** function converts an operator to a callable action that you can add to the configuration of your app. That means whenever you want to call an operator from a component, or somewhere else, you have to attach the operator on the configuration using the **fromOperator** function.
-
-Operators are small composable pieces of logic that can be combined in many ways. This allows you to express complexity in a declarative way. You typically use the **pipe** operator in combination with the other operators to do this:
+The **mutate** function is one of many operators. Operators are small composable pieces of logic that can be combined in many ways. This allows you to express complexity in a declarative way. You typically use the **pipe** operator in combination with the other operators to do this:
 
 ```marksy
 h(Example, { name: "api/operators_pipe" })
 ```
 
 Any of these operators can be used with other operators. You can even insert a pipe inside an other pipe. This kind of composition is what makes functional programming so powerful.
 
-
-## action
-
-**async**
-
-This operator takes a normal action and converts it to an operator so that it can be combined with other operators. You use this operator whenever you want to change the state of the app, but you can run effects as well. Just like a normal action.
-
-```marksy
-h(Example, { name: "api/operators_operator_action" })
-```
-
 ## catchError
 
 **async**
@@ -72,6 +59,16 @@ Returns a new value to the pipe. If the value is a promise it will wait until pr
 h(Example, { name: "api/operators_operator_map" })
 ```
 
+## mutate
+
+**async**
+
+You use this operator whenever you want to change the state of the app, but you can run effects as well. Any returned value is ignored.
+
+```marksy
+h(Example, { name: "api/operators_operator_action" })
+```
+
 ## parallel
 Will run every operator and wait for all of them to finish before moving on. Works like *Promise.all*.
 

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

@@ -3,9 +3,9 @@ export default (ts) =>
     ? [
         {
           code: `
-import { Operator, action } from 'overmind'
+import { Operator, mutate } from 'overmind'
 
-export const changeFoo: Operator = action(({ state }) => {
+export const changeFoo: Operator = mutate(({ state }) => {
   state.foo = 'bar'
 })
 `,
@@ -14,9 +14,9 @@ export const changeFoo: Operator = action(({ state }) => {
     : [
         {
           code: `
-import { action } from 'overmind'
+import { mutate } from 'overmind'
 
-export const changeFoo = action(({ state }) => {
+export const changeFoo = mutate(({ state }) => {
   state.foo = 'bar'
 })
 `,

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

@@ -3,9 +3,9 @@ export default (ts) =>
     ? [
         {
           code: `
-import { Operator, action } from 'overmind'
+import { Operator, mutate } from 'overmind'
 
-export const setUser: Operator<User> = action(({ value: user, state }) => {
+export const setUser: Operator<User> = mutate(({ value: user, state }) => {
   state.user = user
 })
 `,
@@ -14,9 +14,9 @@ export const setUser: Operator<User> = action(({ value: user, state }) => {
     : [
         {
           code: `
-import { action } from 'overmind'
+import { mutate } from 'overmind'
 
-export const setUser = action(({ value: user, state }) => {
+export const setUser = mutate(({ value: user, state }) => {
   state.user = user
 })
 `,

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

@@ -3,21 +3,21 @@ export default (ts) =>
     ? [
         {
           code: `
-import { Operator, pipe, action, catchError } from 'overmind'
+import { Operator, pipe, mutate, catchError } from 'overmind'
 
 export const doSomething: Operator<string> = pipe(
-  action(() => {
+  mutate(() => {
     throw new Error('foo')
   }),
-  action(() => {
+  mutate(() => {
     // This one is skipped
   })
   catchError(({ state }, error) => {
     state.error = error.message
 
     return 'value_to_be_passed_on'
   }),
-  action(() => {
+  mutate(() => {
     // This one continues executing with replaced value
   })
 )
@@ -27,21 +27,21 @@ export const doSomething: Operator<string> = pipe(
     : [
         {
           code: `
-import { pipe, action, catchError } from 'overmind'
+import { pipe, mutate, catchError } from 'overmind'
 
 export const doSomething = pipe(
-  action(() => {
+  mutate(() => {
     throw new Error('foo')
   }),
-  action(() => {
+  mutate(() => {
     // This one is skipped
   })
   catchError(({ state }, error) => {
     state.error = error.message
 
     return 'value_to_be_passed_on'
   }),
-  action(() => {
+  mutate(() => {
     // This one continues executing with replaced value
   })
 )

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

@@ -3,38 +3,29 @@ export default (ts) =>
     ? [
         {
           code: `
-import { Operator, pipe, action } from 'overmind'
-import { Item } from './state'
+import { Operator, pipe } from 'overmind'
 
 export const loadSomeData: Operator = pipe(...)
 export const loadSomeMoreData: Operator = pipe(...)
-export const manageAllData = action(...)
 
-export const openItem: Operator = pipe(
-  parallel(
-    loadSomeData,
-    loadSomeMoreData
-  ),
-  manageAllData
+export const loadAllData: Operator = parallel(
+  loadSomeData,
+  loadSomeMoreData
 )
 `,
         },
       ]
     : [
         {
           code: `
-import { pipe, action } from 'overmind'
+import { pipe } from 'overmind'
 
 export const loadSomeData = pipe(...)
 export const loadSomeMoreData = pipe(...)
-export const manageAllData = action(...)
 
-export const openItem = pipe(
-  parallel(
-    loadSomeData,
-    loadSomeMoreData
-  ),
-  manageAllData
+export const loadAllData = parallel(
+  loadSomeData,
+  loadSomeMoreData
 )
 `,
         },

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

@@ -3,7 +3,7 @@ export default (ts) =>
     ? [
         {
           code: `
-import { Operator, pipe, action, tryCatch } from 'overmind'
+import { Operator, pipe, tryCatch } from 'overmind'
 
 export const doSomething: Operator<string> = tryCatch({
   try: pipe(
@@ -19,7 +19,7 @@ export const doSomething: Operator<string> = tryCatch({
     : [
         {
           code: `
-import { pipe, action, tryCatch } from 'overmind'
+import { pipe, tryCatch } from 'overmind'
 
 export const doSomething = tryCatch({
   try: pipe(

packages/overmind-website/examples/guide/createcustomoperators/action.ts

@@ -5,11 +5,11 @@ export default (ts) =>
           code: `
 import { Operator, Context, Config, createMutationOperator } from 'overmind'
 
-export function action<Input>(
+export function mutate<Input>(
   operation: (context: Context, value: Input) => void
 ): Operator<Input> {
   return createMutationOperator<Config>(
-    'action',
+    'mutate',
     operation.name,
     (err, context, value, next) => {
       if (err) next(err, value)
@@ -28,9 +28,9 @@ export function action<Input>(
           code: `
 import { createMutationOperator } from 'overmind'
 
-export function action(operation) {
+export function mutate(operation) {
   return createMutationOperator(
-    'action',
+    'mutate',
     operation.name,
     (err, context, value, next) => {
       if (err) next(err, value)

packages/overmind-website/examples/guide/createcustomoperators/touppercase.ts

@@ -3,53 +3,57 @@ export default (ts) =>
     ? [
         {
           code: `
-import { Operator, createOperator } from 'overmind'
+import { Operator, createOperator, mutate } from 'overmind'
 
-export function toUpperCase(): Operator<string> {
+export const toUpperCase: () => Operator<string> = () => {
   return createOperator('toUpperCase', '', (err, context, value, next) => {
     if (err) next(err, value)
     else next(null, value.toUpperCase())
   })
 }
+
+export const setTitle: Operator<string> = mutate(({ state }, title) => {
+  state.title = title
+})
 `,
         },
         {
           code: `
-import { Operator, pipe, action } from 'overmind'
-import { toUpperCase } from './operators'
+import { Operator, pipe } from 'overmind'
+import { toUpperCase, setTitle } from './operators'
 
 export const setUpperCaseTitle: Operator<string> = pipe(
   toUpperCase(),
-  action(({ state }, title) => {
-    state.title = title
-  })
+  setTitle
 )
   `,
         },
       ]
     : [
         {
           code: `
-import { createOperator } from 'overmind'
+import { createOperator, mutate } from 'overmind'
 
-export function toUpperCase() {
+export const toUpperCase = () => {
   return createOperator('toUpperCase', '', (err, context, value, next) => {
     if (err) next(err, value)
     else next(null, value.toUpperCase())
   })
 }
+
+export const setTitle = mutate(({ state }, title) => {
+  state.title = title
+})
 `,
         },
         {
           code: `
-import { pipe, action } from 'overmind'
+import { pipe } from 'overmind'
 import { toUpperCase } from './operators'
 
 export const setUpperCaseTitle = pipe(
   toUpperCase(),
-  action(({ state }, title) => {
-    state.title = title
-  })
+  setTitle
 )
 `,
         },