Merge pull request cerebral#70 from cerebral/moreDocs3

feat(overmind): fix onInitialize, also fix website marksy dependency

Author: christianalfoni

package-lock.json

@@ -32,7 +32,7 @@
     "express": "4.16.3",
     "install": "0.12.1",
     "is-plain-object": "2.0.4",
-    "marksy": "6.0.3",
+    "marksy": "^6.1.0",
     "npm": "6.3.0",
     "page": "1.8.6",
     "prismjs": "1.15.0",

package.json

@@ -423,19 +423,26 @@ export default class App<
 
     const initializers = this.getInitializers(configuration)
 
-    if (initializers.length === 1 && initializers[0].name === 'onInitialize') {
-      const onInitialize = action().compose(initializers[0])
-
-      // @ts-ignore
-      onInitialize.displayName = 'onInitialize'
-      onInitialize(undefined)
-    } else if (initializers.length) {
-      const onInitialize = action().parallel(initializers)
-
-      // @ts-ignore
-      onInitialize.displayName = 'onInitialize'
-      onInitialize(undefined)
+    if (!initializers.length) {
+      return
     }
+
+    const rootInitializer =
+      initializers[0].name === 'onInitialize' ? initializers.shift() : null
+
+    let onInitialize = action()
+
+    if (initializers.length) {
+      onInitialize = onInitialize.parallel(initializers)
+    }
+
+    if (rootInitializer) {
+      onInitialize = onInitialize.compose(rootInitializer)
+    }
+
+    // @ts-ignore
+    onInitialize.displayName = 'onInitialize'
+    onInitialize(undefined)
   }
   private initializeDevtools(host, actionChain, eventHub, proxyStateTree) {
     const devtools = new Devtools()

packages/node_modules/overmind/src/index.ts

@@ -1,7 +1,7 @@
 # Action
 
 ```marksy
-<Example name="api/action" />
+h(Example, { name: "api/action"})
 ```
 
 An action allows you to compose pieces of logic into an execution. You typically execute an action based on some user interaction in your application, but it could be everything from a route change to a websocket message as well.
@@ -10,9 +10,16 @@ Actions are defined with a powerful chaining API which gives control of the exec
 
 The action is built up by **operators**, methods called on the action itself. These operators describes the execution logic.
 
+## compose
+```marksy
+h(Example, { name: "api/action_compose" })
+```
+
+Typically used to merge in a separate action. This action will runs as if it was defined with the source action.
+
 ## debounce
 ```marksy
-<Example name="api/action_debounce" />
+h(Example, { name: "api/action_debounce" })
 ```
 
 Typically used to only continue execution of the last action call if multiple action calls has been made in the time limit passed in.
@@ -21,7 +28,7 @@ The only argument is the time limit in milliseconds the operator should prevent
 
 ## do
 ```marksy
-<Example name="api/action_do" />
+h(Example, { name: "api/action_do" })
 ```
 
 Typically used to fire off an effect without caring about its returned result, if any.
@@ -30,7 +37,7 @@ Only argument is a function that receives the **effects** registered in the appl
 
 ## filter
 ```marksy
-<Example name="api/action_filter" />
+h(Example, { name: "api/action_filter" })
 ```
 
 Typically used to stop execution related to some condition.
@@ -39,7 +46,7 @@ The first argument is a function that receives the **effects** registered in the
 
 ## fork
 ```marksy
-<Example name="api/action_fork" />
+h(Example, { name: "api/action_fork" })
 ```
 Typically used to fork out execution when a value can result in multiple complex executions.
 
@@ -48,7 +55,7 @@ The first argument is a function that receives the **effects** as the first argu
 
 ## map
 ```marksy
-<Example name="api/action_map" />
+h(Example, { name: "api/action_map" })
 ```
 
 Typically used to get values from an effect or transform the current value of the action.
@@ -57,16 +64,25 @@ Only argument is a function that receives the **effects** registered in the appl
 
 ## mutate
 ```marksy
-<Example name="api/action_mutation" />
+h(Example, { name: "api/action_mutation" })
 ```
 
 Used to change the state of the application.
 
 Only argument is a function that receives the **state** as the first argument and the current **value** of the action as the second argument. This operator is the only operator that is allowed to mutate the state of the application.
 
+## parallel
+```marksy
+h(Example, { name: "api/action_parallel" })
+```
+
+Typically used to run multiple composed actions in parallel. "In parallel" means that one executes after the other synchronously, but if any of them are doing something asynchronous the execution of the source action will not continue until all of them are done.
+
+The parallel operator does not return a value.
+
 ## try
 ```marksy
-<Example name="api/action_try" />
+h(Example, { name: "api/action_try" })
 ```
 
 Typically used to explicitly handle potentially thrown errors from an effect.
@@ -75,7 +91,7 @@ The first argument is a function that receives the **effects** registered in the
 
 ## when
 ```marksy
-<Example name="api/action_when" />
+h(Example, { name: "api/action_when" })
 ```
 
 Typically used to fork execution based on a thruthy or falsy value.

packages/overmind-website/api/action.md

@@ -3,5 +3,5 @@
 The **App** class is used to create the application instance. The instance itself exposes a **connect** function used to connect views to the state of the application and allow them to trigger actions. Following is a simple example to show you the structure.
 
 ```marksy
-<Example name="api/app_initialize" view />
+h(Example, { name: "api/app_initialize", view: true })
 ```

packages/overmind-website/api/app.md

@@ -1,7 +1,7 @@
 # Compute
 
 ```marksy
-<Example name="api/compute" view/>
+h(Example, { name: "api/compute", view: true })
 ```
 
 You can add computed state values. These state values are functions that takes one argument, `filterNameBy` in the example above. This argument can be whatever you want, but it can only be a single argument. That means if you want to pass in multiple values you would pass those as part of an object. The reason computed state values work like this is because this argument is the cache key. As long as you pass in the same argument and the accessed state is not changed, the cached value is instantly returned.

packages/overmind-website/api/compute.md

@@ -1,7 +1,7 @@
 # Connect
 
 ```marksy
-<Example name="api/connect" view/>
+h(Example, { name: "api/connect", view: true })
 ```
 
 When you instantiate an Overmind application it exposes the ability to connect components to the state and actions defined. This is simply done by using the **connect** function and pass in the component.

packages/overmind-website/api/connect.md

@@ -1,7 +1,7 @@
 # Derive
 
 ```marksy
-<Example name="api/derive" view />
+h(Example, { name: "api/derive", view: true })
 ```
 
 You can add derived state to your application. You access derived state like any other value, there is not need to call it as a function. The derived value is cached and will only update when any accessed state changes. 

packages/overmind-website/api/derive.md

@@ -1,7 +1,7 @@
 # Effects
 
 ```marksy
-<Example name="api/effects" />
+h(Example, { name: "api/effects" })
 ```
 
 There is really no API with effects. You just expose existing libraries or create your own APIs for doing side effects. When these effects are attached to the application they will be tracked by the devtools giving you additional debugging information. By "injecting" the effects this way also opens up for easier testability of your logic.

packages/overmind-website/api/effects.md

@@ -1,7 +1,7 @@
 # Modules
 
 ```marksy
-<Example name="api/modules" view />
+h(Example, { name: "api/modules", view: true })
 ```
 
 When you have multiple application configurations, each with their own state, effects etc. you can give them a namespace by simply importing the modules and attach them to the **modules** config property.