GitBook: [master] 4 pages modified

Author: christianalfoni

SUMMARY.md

@@ -12,7 +12,7 @@
 * [Actions](core/writing-application-logic.md)
 * [Effects](core/running-side-effects.md)
 * [Operators](core/going-functional.md)
-* [Statecharts](features/statecharts.md)
+* [Statecharts](core/statecharts.md)
 * [Typescript](core/typescript.md)
 
 ## Features

core/going-functional.md

@@ -65,21 +65,21 @@ You will typically rely on an **operators** file where all your composable piece
 Let us look at how the operators in the search example could have been implemented:
 
 {% tabs %}
-{% tab title="overmind/operators.ts" %}
+{% tab title="overmind/operators.js" %}
 ```typescript
-import { Operator, filter, mutate } from 'overmind'
+import {filter, mutate } from 'overmind'
 
-export const setQuery: () => Operator<string> = () =>
+export const setQuery = () =>
   mutate(function setQuery({ state }, query) {
     state.query = query
   })
 
-export const lengthGreaterThan: (length: number) => Operator<string> = (length) =>
+export const lengthGreaterThan = (length) =>
   filter(function lengthGreaterThan(_, value) {
     return value.length > length
   })
 
-export const getSearchResult: () => Operator<string> = () => 
+export const getSearchResult = () => 
   mutate(async function getSearchResult({ state, effects }, query) {
     state.isSearching = true
     state.searchResult = await effects.api.search(query)
@@ -93,8 +93,6 @@ export const getSearchResult: () => Operator<string> = () =>
 Note that we give all the actual operator functions the same name as the exported variable that creates it. The reason is that this name is picked up by the devtools and gives you more insight into how your code runs.
 {% endhint %}
 
-
-
 You might wonder why we define the operators as functions that we call. We do that for the following reasons:
 
 1. It ensures that each composition using the operator has a unique instance of that operator. For most operators this does not matter, but for others like **debounce** it actually matters.
@@ -109,11 +107,11 @@ Now, you might feel that we are just adding complexity here. An additional file
 You typically compose the different operators together with **pipe** and **parallel** in the _actions_ file, but any operator can actually be exposed as an action. With the search example:
 
 {% tabs %}
-{% tab title="overmind/actions.ts" %}
+{% tab title="overmind/actions.js" %}
 ```typescript
-import { Operator, pipe, debounce, mutate, filter } from 'overmind'
+import {pipe, debounce, mutate, filter } from 'overmind'
 
-export const search: Operator<string> = pipe(
+export const search = pipe(
   mutate(({ state }, value) => {
     state.query = value
   }),
@@ -140,39 +138,35 @@ overmind.actions.search("something")
 To produce new values throughout your pipe you can use the **map** operator. It will put whatever value you return from it on the pipe for the next operator to consume.
 
 {% tabs %}
-{% tab title="overmind/operators.ts" %}
+{% tab title="overmind/operators.js" %}
 ```typescript
-import { Operator, map, mutate } from 'overmind'
+import {map, mutate } from 'overmind'
 
-export const toNumber: () => Operator<string, number> = () =>
+export const toNumber = () =>
   map(function toNumber(_, value) { 
     return Number(value)
   })
 
-export const setValue: () => Operator<string> = () =>
+export const setValue = () =>
   mutate(function setValue({ state}, value) {
     state.value = value
   })
 ```
 {% endtab %}
 
-{% tab title="overmind/actions.ts" %}
+{% tab title="overmind/actions.js" %}
 ```typescript
-import { Operator, pipe } from 'overmind'
+import {pipe } from 'overmind'
 import * as o from './operators'
 
-export const onValueChange: Operator<string, number> = pipe(
+export const onValueChange = pipe(
   o.toNumber(),
   o.setValue()
 )
 ```
 {% endtab %}
 {% endtabs %}
 
-{% hint style="info" %}
-Notice here that we are typing both the input and the output. Both for the **map** operator and the **pipe** operator. This is important to manage the composition of operators. Typically operators pass on the same value they receive, meaning that you do not need the second typing parameter for the **Operator** type.
-{% endhint %}
-
 ## Custom operators
 
 The operators concept of Overmind is based on the [OP-OP SPEC](https://github.com/christianalfoni/op-op-spec), which allows for endless possibilities in functional composition. But since Overmind does not only pass values through these operators, but also the context where you can change state, run effects etc., we want to simplify how you can create your own operators. The added benefit of this is that the operators you create are also tracked in the devtools.
@@ -182,29 +176,29 @@ The operators concept of Overmind is based on the [OP-OP SPEC](https://github.co
 Let us create an operator that simply uppercases the string value passed through. This could easily have been done using the **map** operator, but for educational purposes let us see how we can create our very own operator.
 
 {% tabs %}
-{% tab title="overmind/operators.ts" %}
+{% tab title="overmind/operators.js" %}
 ```typescript
-import { Operator, createOperator, mutate } from 'overmind'
+import {createOperator, mutate } from 'overmind'
 
-export const toUpperCase: () => Operator<string> = () => {
+export const toUpperCase = () => {
   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) => {
+export const setTitle = mutate(({ state }, title) => {
   state.title = title
 })
 ```
 {% endtab %}
 
-{% tab title="overmind/actions.ts" %}
+{% tab title="overmind/actions.js" %}
 ```typescript
-import { Operator, pipe } from 'overmind'
+import { pipe } from 'overmind'
 import { toUpperCase, setTitle } from './operators'
 
-export const setUpperCaseTitle: Operator<string> = pipe(
+export const setUpperCaseTitle = pipe(
   toUpperCase(),
   setTitle
 )
@@ -221,12 +215,10 @@ In this example we did not use the **context** because we are not going to look
 You might want to run some logic related to your operator. Typically this is done by giving a callback. You can provide this callback whatever information you want, even handle its return value. So for example the **map** operator is implemented like this:
 
 ```typescript
-import { Operator, Context, Config, createOperator } from 'overmind'
+import { createOperator } from 'overmind'
 
-export function map<Input, Output>(
-  operation: (context: Context, value: Input) => Output
-): Operator<Input, Output extends Promise<infer U> ? U : Output> {
-  return createOperator<Config>(
+export function map(operation) {
+  return createOperator(
     'map',
     operation.name,
     (err, context, value, next) => {
@@ -242,12 +234,10 @@ export function map<Input, Output>(
 You can also create operators that have the ability to mutate the state, it is just a different factory **createMutationFactory**. This is how the **mutate** operator is implemented:
 
 ```typescript
-import { Operator, Context, Config, createMutationOperator } from 'overmind'
+import { createMutationOperator } from 'overmind'
 
-export function mutate<Input>(
-  operation: (context: Context, value: Input) => void
-): Operator<Input> {
-  return createMutationOperator<Config>(
+export function mutate(operation) {
+  return createMutationOperator(
     'mutate',
     operation.name,
     (err, context, value, next) => {
@@ -266,20 +256,10 @@ export function mutate<Input>(
 You can even manage paths in your operator. This is how the **when** operator is implemented:
 
 ```typescript
-import { Operator, Context, Config, createOperator } from 'overmind'
-
-export function when<
-  Input,
-  OutputTrue,
-  OutputFalse
->(
-  operation: (context: Context, value: Input) => boolean,
-  paths: {
-    true: Operator<Input, OutputTrue>
-    false: Operator<Input, OutputFalse>
-  }
-): Operator<Input, OutputTrue | OutputFalse> {
-  return createOperator<Config>(
+import { createOperator } from 'overmind'
+
+export function when(operation, paths) {
+  return createOperator(
     'when',
     operation.name,
     (err, context, value, next) => {
@@ -304,12 +284,10 @@ export function when<
 Some operators want to prevent further execution. That is also possible to implement, as seen here with the **filter** operator:
 
 ```typescript
-import { Operator, Context, Config, createOperator } from 'overmind'
+import { createOperator } from 'overmind'
 
-export function filter<Input>(
-  operation: (context: Context, value: Input) => boolean
-): Operator<Input> {
-  return createOperator<Config>(
+export function filter(operation) {
+  return createOperator(
     'filter',
     operation.name,
     (err, context, value, next, final) => {