docs(overmind): docs for parallel statecharts

Author: christianalfoni

packages/overmind-website/examples/guide/statecharts/define.ts

@@ -55,7 +55,7 @@ export default statechart(config, loginChart)
       ]
     : [
         {
-          fileName: 'overmind/login/index.ts',
+          fileName: 'overmind/login/index.js',
           code: `
 import { statechart } from 'overmind/config'
 import * as actions from './actions'

packages/overmind-website/examples/guide/statecharts/nested.ts

@@ -102,7 +102,7 @@ export default statechart(config, dashboardChart)
       ]
     : [
         {
-          fileName: 'overmind/login/index.ts',
+          fileName: 'overmind/login/index.js',
           code: `
 import { statechart } from 'overmind/config'
 import * as actions from './actions'

packages/overmind-website/examples/guide/statecharts/parallel.ts

@@ -0,0 +1,136 @@
+export default (ts, view) =>
+  ts
+    ? [
+        {
+          fileName: 'overmind/files/index.ts',
+          code: `
+import { Statechart, statechart } from 'overmind/config'
+import * as actions from './actions'
+import { state } from './state'
+
+const config = {
+  state,
+  actions
+}
+
+enum UploadState {
+  IDLE = 'IDLE',
+  PENDING = 'PENDING',
+  SUCCESS = 'SUCCESS',
+  ERROR = 'ERROR'
+}
+
+const uploadChart: Statechart<typeof config, UploadState> = {
+  initial: UploadState.IDLE,
+  states: {
+    [UploadState.IDLE]: {
+      on: {
+        upload: UploadState.PENDING,
+      }
+    },
+    [LoginState.PENDING]: {
+      on: {
+        resolveUpload: UploadState.SUCCESS,
+        rejectUpload: UploadState.ERROR
+      }
+    },
+    [LoginState.SUCCESS]: {
+      on: {
+        reset: UploadState.IDLE
+      }
+    },
+    [LoginState.ERROR]: {
+      on: {
+        reset: UploadState.IDLE
+      }
+    }
+  }
+}
+
+enum DownloadState {
+  IDLE = 'IDLE',
+  PENDING = 'PENDING',
+  SUCCESS = 'SUCCESS',
+  ERROR = 'ERROR'
+}
+
+const downloadChart: Statechart<typeof config, DownloadState> = {
+  initial: DownloadState.IDLE,
+  states: {
+    [DownloadState.IDLE]: {
+      on: {
+        download: DownloadState.PENDING,
+      }
+    },
+    [DownloadState.PENDING]: {
+      on: {
+        resolveDownload: DownloadState.SUCCESS,
+        rejectDownload: DownloadState.ERROR
+      }
+    },
+    [DownloadState.SUCCESS]: {
+      on: {
+        reset: DownloadState.IDLE
+      }
+    },
+    [DownloadState.ERROR]: {
+      on: {
+        reset: DownloadState.IDLE
+      }
+    }
+  }
+}
+
+export default statechart(config, [
+  uploadChart,
+  downloadChart
+])
+`,
+        },
+      ]
+    : [
+        {
+          fileName: 'overmind/login/index.ts',
+          code: `
+import { statechart } from 'overmind/config'
+import * as actions from './actions'
+import { state } from './state'
+
+const config = {
+  state,
+  actions
+}
+
+const loginChart = {
+  initial: 'LOGIN',
+  states: {
+    LOGIN: {
+      on: {
+        changeUsername: null,
+        changePassword: null,
+        login: 'AUTHENTICATING'
+      }
+    },
+    AUTHENTICATING: {
+      on: {
+        resolveUser: 'AUTHENTICATED',
+        rejectUser: 'ERROR'
+      }
+    },
+    AUTHENTICATED: {
+      on: {
+        logout: 'LOGIN'
+      }
+    },
+    ERROR: {
+      on: {
+        tryAgain: 'LOGIN'
+      }
+    }
+  }
+}
+
+export default statechart(config, loginChart)
+`,
+        },
+      ]

packages/overmind-website/guides/intermediate/06_statecharts.md

@@ -131,6 +131,29 @@ What to take notice of in this example is that we simply **spread** a chart into
 
 In this example we also took advantage of the **entry** and **exit** hooks of a transition state. These also points to actions. When a transition is made into the transition state the **entry** will run. This behavior is nested. When an exit hook exists and a transition is made away from the transition state it will also run. This behivor is also nested of course.
 
+## Parallel statecharts
+
+It is also possible to define your charts in a parallel manner. Basically wherever you would insert a chart, you can insert an array of charts. Parallel charts does not affect each other, but they are affected by the statechart as a whole. That means if you have nested parallel charts their **entry** and **exit** actions will run when transitioning the statehcart at a higher level.
+
+```marksy
+h(Example, { name: "guide/statecharts/parallel.ts" })
+```
+
+In this example we passed an array to the chart configuration itself. But the **chart** property used to nest charts can also hold an array of charts.
+
+```js
+{
+  initial: 'foo',
+  states: {
+    foo: {
+      chart: [chartA, chartB]
+    },
+    bar: {}
+  }
+}
+```
+
+
 ## Devtools
 
 The Overmind devtools understands statecharts. That means you are able to get an overview of available statecharts and even manipulate them directly in the devtools.

packages/overmind-website/src/overmind/index.ts

@@ -1,6 +1,5 @@
 import { IConfig } from 'overmind'
 import { createHook } from 'overmind-react'
-import { merge, namespaced, statechart } from 'overmind/config'
 
 import * as actions from './actions'
 import * as effects from './effects'
@@ -36,15 +35,12 @@ const chart = {
   },
 }
 
-export const config = statechart(
-  {
-    onInitialize,
-    state,
-    actions,
-    effects,
-  },
-  [chart, chart2]
-)
+export const config = {
+  onInitialize,
+  state,
+  actions,
+  effects,
+}
 
 declare module 'overmind' {
   interface Config extends IConfig<typeof config> {}