docs(website): several doc fixes

Author: christianalfoni

packages/overmind-website/api/mock.md

@@ -0,0 +1,8 @@
+# Mock
+
+The **createOvermindMock** factory creates an instance of Overmind which can be used to test actions. You can mock out effects and evaluate mutations performed during action execution.
+
+
+```marksy
+h(Example, { name: "guide/writingtests/actionsnapshot" })
+```

packages/overmind-website/api/overmind.md

@@ -1,12 +1,12 @@
 # Overmind
 
-The **Overmind** class is used to create the application instance. You need to create and export a mechanism to connect your instance to the components. Please look at the guides for each view layer for more information.
+The **createOvermind** factory is used to create the application instance. You need to create and export a mechanism to connect your instance to the components. Please look at the guides for each view layer for more information.
 
 ```marksy
 h(Example, { name: "api/app_initialize" })
 ```
 
-You can pass a second argument to the **Overmind** constructor. This is an options object with the following properties:
+You can pass a second argument to the **createOvermind** factory. This is an options object with the following properties:
 
 ## addMutationListener
 
@@ -24,7 +24,6 @@ The **addMutationListener** triggers whenever there is a mutation. The **addFlus
 h(Example, { name: "api/app_addFlushListener" })
 ```
 
-
 ## options.devtools
 If you develop your app on localhost the application connects to the devtools on **localhost:3031**. You can change this in case you need to use an IP address, the devtools is configured with a different port or you want to connect to localhost (with default port) even though the app is not on localhost.
 

packages/overmind-website/api/ssr.md

@@ -0,0 +1,13 @@
+# SSR
+
+The **createOvermindSSR** factory creates an instance of Overmind which can be used on the server with server side rendering. It allows you to change state and extract the mutations performed, which can then be rehydrated on the client.
+
+```marksy
+h(Example, { name: "guide/serversiderendering/renderonserver" })
+```
+
+## rehydrate
+
+```marksy
+h(Example, { name: "guide/serversiderendering/renderonclient" })
+```

packages/overmind-website/examples/guide/definingstate/reference.ts

@@ -0,0 +1,54 @@
+export default (ts) =>
+  ts
+    ? [
+        {
+          fileName: 'overmind/state.ts',
+          code: `
+export type User = {
+  id: string
+  username: string
+}
+
+export type State = {
+  users: {
+    [id: string]: User
+  }
+  currentUser: User
+}
+
+export const state: State = {
+  users: {},
+  currentUser: null
+}
+  `,
+        },
+        {
+          fileName: 'overmind/actions.ts',
+          code: `
+import { Action } from 'overmind'
+
+export const setUser: Action<string> = ({ state }, id) => {
+  state.currentUser = state.users[id]
+}
+  `,
+        },
+      ]
+    : [
+        {
+          fileName: 'overmind/state.js',
+          code: `
+export default {
+  users: {},
+  currentUser: null
+}
+  `,
+        },
+        {
+          fileName: 'overmind/actions.ts',
+          code: `
+export const setUser = ({ state }, id) => {
+  state.currentUser = state.users[id]
+}
+  `,
+        },
+      ]

packages/overmind-website/examples/guide/definingstate/reference_correct.ts

@@ -0,0 +1,61 @@
+export default (ts) =>
+  ts
+    ? [
+        {
+          fileName: 'overmind/state.ts',
+          code: `
+export type User = {
+  id: string
+  username: string
+}
+
+export type State = {
+  users: {
+    [id: string]: User
+  }
+  currentUserId: string
+  currentUser: User
+}
+
+export const state: State = {
+  users: {},
+  currentUserId: null,
+  get currentUser(this: State) {
+    return this.users[this.currentUserId]
+  } 
+}
+  `,
+        },
+        {
+          fileName: 'overmind/actions.ts',
+          code: `
+import { Action } from 'overmind'
+
+export const setUser: Action<string> = ({ state }, id) => {
+  state.currentUserId = id
+}
+  `,
+        },
+      ]
+    : [
+        {
+          fileName: 'overmind/state.js',
+          code: `
+export default {
+  users: {},
+  currentUserId: null
+  get currentUser() {
+    return this.users[this.currentUserId]
+  }
+}
+  `,
+        },
+        {
+          fileName: 'overmind/actions.ts',
+          code: `
+export const setUser = ({ state }, id) => {
+  state.currentUserId = id
+}
+  `,
+        },
+      ]

packages/overmind-website/examples/guide/serversiderendering/renderonserver.ts

@@ -1,5 +1,3 @@
-import { tsAppIndex } from '../../templates'
-
 const javascript = {
   react: [
     {
@@ -13,10 +11,10 @@ import App from '../client/components/App'
 import db from './db'
 
 module.exports = async (req, res) => {
-  const overmind = createOvermindSSR(overmind)
+  const overmind = createOvermindSSR(config)
 
-  overmind.currentPage = 'posts'
-  overmind.posts = await db.getPosts()
+  overmind.state.currentPage = 'posts'
+  overmind.state.posts = await db.getPosts()
 
   const html = renderToString(
     <Provider value={overmind}>
@@ -72,10 +70,10 @@ import App from '../client/components/App'
 import db from './db'
 
 export default async (req, res) => {
-  const overmind = createOvermindSSR(overmind)
+  const overmind = createOvermindSSR(config)
 
-  overmind.currentPage = 'posts'
-  overmind.posts = await db.getPosts()
+  overmind.state.currentPage = 'posts'
+  overmind.state.posts = await db.getPosts()
 
   const html = renderToString(
     <Provider value={overmind}>
@@ -188,8 +186,8 @@ const { AppServerModuleNgFactory } = require('./server/main')
 export default async (req, res) => {
   const overmind = createOvermindSSR(config)
   
-  overmind.currentPage = 'posts'
-  overmind.posts = await db.getPosts()
+  overmind.state.currentPage = 'posts'
+  overmind.state.posts = await db.getPosts()
 
   const html = await renderModuleFactory(AppServerModuleNgFactory, {
     extraProviders: [{

packages/overmind-website/guides/beginner/02_definingstate.md

@@ -48,9 +48,17 @@ Are things loading or not, is the user logged in or not ? These are typical usag
 
 All values, with the exception of booleans, can also be **null**. Non existing. You can have a non existing object, array, string or number. That means if we have not selected a tab both the string version and number version would have the value **null**.
 
+## Getter
+
+A concept in Javascript called a [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) allows you to intercept accessing a property in an object. A getter is just like a plain value, it can be added an removed at any point. Getters does **not** cache the result for that very reason, but whatever state they access is tracked.
+
+```marksy
+h(Example, { name: "guide/definingstate/getter" })
+```
+
 ## Deriving state
 
-Not all state should be explicitly defined. Some state are values based off of other state. This is what we call **derived state**. A simple example of this would be:
+When you need to do more heavy calculation or combine state from different parts ot the tree you can use **derived state**. A simple example of this would be:
 
 ```marksy
 h(Example, { name: "guide/definingstate/derived" })
@@ -87,14 +95,25 @@ So to solve this specific scenario you would rather create a new state called **
 
 Also remember that **derived** is a concept for computation heavy derived state, you most commonly want to use a **getter**.
 
-## Getter
+```marksy
+h(Notice, null, "Derived state can not be dynamically added. They have to be defined and live in the tree from start to end of your application lifecycle.")
+```
+
+## References
+
+When you add objects and arrays to your state tree, they are labeled with an "address" in the tree. That means if you try to add the same object or array in multiple spots in the tree you will get an error, as they can not have multiple addresses. Typically this indicates that you rather want to create a references to an existing object or array.
 
-A concept in Javascript called a [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) allows you to intercept accessing a property in an object. This is similar to deriving state, though they are dynamic. That means derived state can only be defined once and needs to stay in the state tree. A getter is just like a plain value, it can be added an removed at any point. Getters does **not** cache the result for that very reason, but whatever state they access is tracked.
+So this is an example of how you would **not** want to do it:
 
 ```marksy
-h(Example, { name: "guide/definingstate/getter" })
+h(Example, { name: "guide/definingstate/reference" })
 ```
 
+You rather change a reference to the user and for example use a **getter** to grab the actual user:
+
+```marksy
+h(Example, { name: "guide/definingstate/reference_correct" })
+```
 
 ## Exposing the state
 

packages/overmind-website/guides/intermediate/05_writingtests.md

@@ -1,6 +1,6 @@
 # Writing tests
 
-Testing is a broad subject and everybody has an opinion on it. We can only show you how we think about testing in general and how to effectively write those tests for your Overmind app. It is encouraged to think **unit testing** of actions and effects. This will cover expected changes in state and that your side effects behaves in a predictable manner. If you want to test how your application works when it is all put together we recommend doing integration tests as close to the user experience as possible. Testing solutions like [Cypress.io](https://www.cypress.io/) is a great way to do exactly that.
+Testing is a broad subject and everybody has an opinion on it. We can only show you how we think about testing in general and how to effectively write those tests for your Overmind app. It is encouraged to think **unit testing** of actions and effects. This will cover expected changes in state and that your side effects behaves in a predictable manner. If you want to test how your application works when it is all put together we recommend doing integration tests as close to the user experience as possible. Testing solutions like [Cypress.io](https://www.cypress.io/) is a great way to do exactly that. You can read more about Cypress and integration testing with Overmind in [this article](https://www.cypress.io/blog/2019/02/28/shrink-the-untestable-code-with-app-actions-and-effects/#).
 
 ## Structuring the app