Merge pull request cerebral#72 from cerebral/moreDocs4

refactor(website): refactor example code, add github link and change …

Author: christianalfoni

package.json

@@ -44,7 +44,9 @@
     "vue": "2.5.16",
     "vue-hot-reload-api": "2.3.0",
     "vue-styled-components": "1.3.0",
-    "ws": "5.2.1"
+    "ws": "5.2.1",
+    "preact": "8.3.1",
+    "preact-compat": "3.18.4"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",

packages/overmind-website/api/app.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
-h(Example, { name: "api/app_initialize", view: true })
+h(Example, { name: "api/app_initialize" })
 ```

packages/overmind-website/api/connect.md

@@ -1,7 +1,7 @@
 # Connect
 
 ```marksy
-h(Example, { name: "api/connect", view: true })
+h(Example, { name: "api/connect" })
 ```
 
 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 **connect**.

packages/overmind-website/api/modules.md

@@ -1,7 +1,7 @@
 # Modules
 
 ```marksy
-h(Example, { name: "api/modules", view: true })
+h(Example, { name: "api/modules" })
 ```
 
 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.

packages/overmind-website/api/onInitialize.md

@@ -3,7 +3,7 @@
 If you need to run logic as the application initializes you can use the **onInitialize** hook. This is defined as an action.
 
 ```marksy
-h(Example, { name: "api/onInitialize", view: true })
+h(Example, { name: "api/onInitialize" })
 ```
 
 Overmind will first run any module defined onInitialize in parallel. After that the main onInitialize runs. You can see this in the devtools as well. The reason it works this way is because you module defined onInitialize indicates that you want to prepare something related to that module specifically, you do not care about the rest. The root onInitialize covers all the modules and allows you to orchestrate logic when those are indeed ready.

packages/overmind-website/api/reaction.md

@@ -9,7 +9,7 @@ You can register reactions to act whenever a state path is affected by a mutatio
 ## Component
 
 ```marksy
-h(Example, { name: "api/reaction_component", view: true })
+h(Example, { name: "api/reaction_component" })
 ```
 
 Inside components reactions can be registered to perform view related side effects. These reactions are unregistered automatically when the component unmounts. 

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

@@ -1,23 +1,24 @@
-export const js = [
-  {
-    code: `
-export const doThis = action => 
+export default (ts) =>
+  ts
+    ? [
+        {
+          code: `
+import { Action } from 'overmind'
+
+export const doThis: Action<number> = action =>
   action()
     .map(operations.getUser)
     .mutate(mutations.setUser)
   `,
-  },
-]
-
-export const ts = [
-  {
-    code: `
-import { Action } from 'overmind'
-
-export const doThis: Action<number> = action =>
+        },
+      ]
+    : [
+        {
+          code: `
+export const doThis = action => 
   action()
     .map(operations.getUser)
     .mutate(mutations.setUser)
   `,
-  },
-]
+        },
+      ]

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

@@ -1,33 +1,34 @@
-export const js = [
-  {
-    fileName: 'app/actions.js',
-    code: `
+export default (ts) =>
+  ts
+    ? [
+        {
+          fileName: 'app/actions.ts',
+          code: `
 import * as operations from './operations'
 
-export const goDoSomethingWithString = action =>
+export const goDoSomethingWithString: Action<string> = action =>
   action()
 
-export const doThis = action =>
+export const doThis: Action<string> = action =>
   action()
     .map(operations.transformString)
     .compose(goDoSomethingWithString)
     `,
-  },
-]
-
-export const ts = [
-  {
-    fileName: 'app/actions.ts',
-    code: `
+        },
+      ]
+    : [
+        {
+          fileName: 'app/actions.js',
+          code: `
 import * as operations from './operations'
 
-export const goDoSomethingWithString: Action<string> = action =>
+export const goDoSomethingWithString = action =>
   action()
 
-export const doThis: Action<string> = action =>
+export const doThis = action =>
   action()
     .map(operations.transformString)
     .compose(goDoSomethingWithString)
     `,
-  },
-]
+        },
+      ]

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

@@ -1,21 +1,22 @@
-export const js = [
-  {
-    code: `
-export const doThis = action =>
-  action()
-    .debounce(200)
-  `,
-  },
-]
-
-export const ts = [
-  {
-    code: `
+export default (ts) =>
+  ts
+    ? [
+        {
+          code: `
 import { Action } from 'overmind'
 
 export const doThis: Action = action =>
   action()
     .debounce(200)
   `,
-  },
-]
+        },
+      ]
+    : [
+        {
+          code: `
+export const doThis = action =>
+  action()
+    .debounce(200)
+  `,
+        },
+      ]

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

@@ -1,39 +1,40 @@
-export const js = [
-  {
-    fileName: 'app/operations.js',
-    code: `
-export const trackSubmitForm = ({ track }) =>
-  track.interaction('submitForm')    
-    `,
-  },
-  {
-    fileName: 'app/actions.js',
-    code: `
-export const doThis = action =>
-  action()
-    .do(operations.trackSubmitForm)
-  `,
-  },
-]
-
-export const ts = [
-  {
-    fileName: 'app/operations.ts',
-    code: `
+export default (ts) =>
+  ts
+    ? [
+        {
+          fileName: 'app/operations.ts',
+          code: `
 import { Operation } from 'overmind'
 
 export const trackSubmitForm: Operation.Do = ({ track }) =>
   track.interaction('submitForm')
     `,
-  },
-  {
-    fileName: 'app/actions.ts',
-    code: `
+        },
+        {
+          fileName: 'app/actions.ts',
+          code: `
 import { Action } from 'overmind'
 
 export const doThis: Action = action =>
   action()
     .do(operations.trackSubmitForm)
   `,
-  },
-]
+        },
+      ]
+    : [
+        {
+          fileName: 'app/operations.js',
+          code: `
+export const trackSubmitForm = ({ track }) =>
+  track.interaction('submitForm')    
+    `,
+        },
+        {
+          fileName: 'app/actions.js',
+          code: `
+export const doThis = action =>
+  action()
+    .do(operations.trackSubmitForm)
+  `,
+        },
+      ]