docs(website): more api docs

Author: christianalfoni

packages/overmind-website/api/compute.md

@@ -1 +1,13 @@
-# Compute
+# Compute
+
+```marksy
+<Example name="api_compute" view/>
+```
+
+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.
+
+By default a computed state value allows 10 values to be cached. This can be adjusted with the limit option. When a new value is cached, the last cached value is popped off.
+
+Note that the argument you pass in to calculate the computed state value is stored by reference. That means if you pass in an object as the argument, the cache is only valid when you pass in the exact same object. That means you should only change reference on the object when the object indeed has a change.
+
+You can learn more about computed state values in [the following guide](/guides/computing_like_a_pro).

packages/overmind-website/api/connect.md

@@ -1 +1,9 @@
-# Connect
+# Connect
+
+```marksy
+<Example name="api_connect" view/>
+```
+
+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.
+
+Any state you access in the component is automatically tracked by Overmind and the component will rerender when there is a change.

packages/overmind-website/api/derive.md

@@ -1 +1,7 @@
-# Derive
+# Derive
+
+```marksy
+<Example name="api_derive" view />
+```
+
+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/backend/favicon.ico

@@ -5,6 +5,57 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="shortcut icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAABwgAAAcIAHND5ueAAAG
+  AGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0w
+  TXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRh
+  LyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2
+  LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3Jn
+  LzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0i
+  IiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJo
+  dHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFk
+  b2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1
+  cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2Jl
+  LmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0Mg
+  MjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTgtMDgtMTJUMTU6MjM6MTErMDI6
+  MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTgtMDgtMTJUMTU6MjM6MTErMDI6MDAiIHhtcDpNb2Rp
+  ZnlEYXRlPSIyMDE4LTA4LTEyVDE1OjIzOjExKzAyOjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAu
+  aWlkOjQ5NzhkYmY1LWVjZjQtNGEzZi04ZmQ2LThmYmNlM2Y3OTU5MSIgeG1wTU06RG9jdW1lbnRJ
+  RD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmNmZjI5N2E0LTIyMDgtYzM0Ny1iNWYxLWNiN2M2Njc2
+  MTIyNSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOmRjODAyMWI1LTM2ZWMtNDZj
+  Mi1iODRiLTU5MmE3NjNmODhlMSIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xv
+  ck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSI+IDx4bXBN
+  TTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0
+  Omluc3RhbmNlSUQ9InhtcC5paWQ6ZGM4MDIxYjUtMzZlYy00NmMyLWI4NGItNTkyYTc2M2Y4OGUx
+  IiBzdEV2dDp3aGVuPSIyMDE4LTA4LTEyVDE1OjIzOjExKzAyOjAwIiBzdEV2dDpzb2Z0d2FyZUFn
+  ZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0
+  OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NDk3OGRiZjUtZWNmNC00
+  YTNmLThmZDYtOGZiY2UzZjc5NTkxIiBzdEV2dDp3aGVuPSIyMDE4LTA4LTEyVDE1OjIzOjExKzAy
+  OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50
+  b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9y
+  ZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIi
+  Pz7Md3/8AAAE7UlEQVR4nO3bX4hVVRTH8c9oT0OQNheaKIqoKAZTJx/EphRBnAh7q0QMeghKQooS
+  KTKkf0Z/sAgi1KeCZIp6CUUaCMJIzMhGLUpRgqIwYjAGYuilpod15k/TzNy7971zz0zdL9yXO2ft
+  tdZv9r5nn7PXautYvt4ssxQ34UZch6twOS7FxcU1v+MCzuNHnMNpfI1TsxncRbMwZjvWYg16sBIL
+  q9hcUnyuwS0Tvv8Tx3AEh/EJhhsZbFsDZ0AX7sQdWN2oQSfxKQ7hAL5txICNEGAJNuJu3FB3RLVx
+  Bu/jPXxTz0AL2zuvzbVdjIfwDO5BpZ5AEqmIWdYjltxp/JEzUK4A60Tij6IzZ4AG0YleXIvf8H3q
+  ADkCbMWzuC3VcBbpwiqM4IsUwxQBKtiJ5zR3utdKB24XS+KEGu8WtQpwNZ7GI2jLCq85tOFWLBJ7
+  iKFqBrUIMJr8/fXF1lRWCBFOqCJCNQEq5l/yoywXy+FzMyyHagLsFNN+vrJC/DB+PN0FM22Ft2J7
+  gwIZwlEcFxuXc/hJ7P+J54IrxbPCEhH4KrE9rpftha83pvrjdAKsw8NYUKfzoziIjwYH+r+a4bpf
+  is+Xo19UuntvFr/qG4QYuSwQuZw2xUyYaiu8GPtwVx1Oj2M/+gYH+n+pYxyV7t5ObMJmMTNy+QAP
+  iA3TGFMJ8Bh2ZzoZwR7sHRzoP5k5xpRUunuX4UFskX8r3oZXJ34xWYAleAfLMgb/GbsHB/pfywyu
+  JirdvY+KRK7IMD+Je014gJq8xjfKS/4cdsx28lD42FH4TGWZyHGMiQJ0iUfaVH7G84MD/W9n2GZR
+  +Hq+8J3K3SJX/FOAO6U/z4+Iad+05EcpfO4uYkjhBpErxgVoF29yUtnTjGk/HYXvPRmmd4icxwRY
+  K/011nHszXDeaPaKWFJYLXIeE2BNhuP9jb7V5VDEsD/DdA3jAvQkGh9FX4bT2aJPxJRCDyHAUvHq
+  OoWD9e7wGkkRy8FEs5VY2jYykvoj+t+i3oedeU9LgLIDKJuWAGUHUDYtAcoOoGxaApQdQNm0BCg7
+  gLJpCVB2AGXT1rF8/VJ8pXol10R2DA70vzBLMWVR6e59ErsSTP7EzQtEHd6xRH8bihObOUERy4ZE
+  s2M4NboEjiQarxLHVXOFTdLPD48w/htwOMPp5uK4qlSKGDZnmB5mXIBPRBFiCivEWV3ZPCj90PRT
+  kfOYAMOiAjOVLcVZXSkUvrdkmB5SVI1MvA0eEBWYKbRhW6W7976MIOqi8LlN+knxGZEr/inAt6L8
+  NJUr8FQzRSh8PSXvhPh9E+qMJ2+E3hNHyKlch13NWA6Fj12Fz1ROihzHaBVItEpkpi6XX4c3cX0d
+  Dqm9SOpfNLBICs6KyvaaiqRG2YrXNeaBqcwyub9EreOUZXLVGiZexOMNCKJMXsIT0/2xWqXoCVFz
+  W8/aK5N9opQmu1R2WFRdLxK1t/OJt0Rp//mZLqqlWnxIzIR282cm7BPJ/1Dtwlr7BYZE1fWIaGub
+  qz0Df+FlMe1n/M+PktIxMixuIxfE7bEjI8DZ5KzoY3pBQm9hTs/QF/hOLImuKtc2iw9EH9O7qYa5
+  XWPfi9nwq+jcKuv12Em8ItZ7ViNlPX2Df4jNzWdiWVymec1UZ8Qzx3P4UGbPII3pHf6m+PT5n7bO
+  TianeXo65lXz9HTM6fb5vwEB1kNwNpL0bgAAAABJRU5ErkJggg==" type="image/x-icon" />
   <title>Overmind</title>
   <style>
     html,

packages/overmind-website/backend/index.html

@@ -97,9 +97,6 @@ app.get('/backend/search', (req, res) => {
 
   res.send(hits.slice(0, 5))
 })
-app.get('/favicon.ico', (_, res) =>
-  res.sendFile(path.resolve('backend', 'favicon.ico'))
-)
 app.get('/*', (_, res) => res.sendFile(path.resolve('dist', 'index.html')))
 
 app.listen(5000, () => console.log('Example app listening on port 5000!'))

packages/overmind-website/backend/index.js

@@ -0,0 +1,46 @@
+function createJsCode(view) {
+  return [
+    {
+      code: `
+import { compute } from '${view}'
+
+compute(
+  filterNameBy =>
+  state =>
+  state.items.filter(item => item.name === filterNameBy),
+  {
+    limit: 10
+  }
+)
+        `,
+    },
+  ]
+}
+
+function createTsCode(view) {
+  return [
+    {
+      code: `
+import { compute } from '${view}'
+import { State } from '../app'
+
+compute(
+  (filterNameBy: string) =>
+  (state: State) =>
+  state.items.filter(item => item.name === filterNameBy),
+  {
+    limit: 10
+  }
+)
+        `,
+    },
+  ]
+}
+
+export const react = createJsCode('react-overmind')
+
+export const reactTs = createTsCode('react-overmind')
+
+export const vue = createJsCode('vue-overmind')
+
+export const vueTs = createTsCode('vue-overmind')

packages/overmind-website/examples/api_compute.ts

@@ -0,0 +1,60 @@
+export const react = [
+  {
+    fileName: 'components/SomeComponent.js',
+    code: `
+import React from 'react'
+import { connect } from '../app'
+
+const SomeComponent = ({ app }) => {
+  return (
+    <div onClick={app.actions.onClick}>
+      {app.state.foo}
+    </div>
+  )
+}
+
+export default connect(MyComponent)
+  `,
+  },
+]
+
+export const reactTs = [
+  {
+    fileName: 'MyComponent.tsx',
+    code: `
+import * as React from 'react'
+import { connect, Connect } from '../app'
+
+const SomeComponent: React.SFC<Connect, {}> = ({ app }) => {
+  return (
+    <div onClick={app.actions.onClick}>
+      {app.state.foo}
+    </div>
+  )
+}
+
+export default connect(MyComponent)
+  `,
+  },
+]
+
+export const vue = [
+  {
+    fileName: 'SomeComponent.vue (template)',
+    code: `
+<div v-on:click="app.actions.onClick">
+  {{app.state.foo}}
+</div>
+  `,
+  },
+  {
+    fileName: 'SomeComponent.vue (script)',
+    code: `
+import { connect } from '../app'
+
+export default connect({})
+`,
+  },
+]
+
+export const vueTs = vue

packages/overmind-website/examples/api_connect.ts

@@ -0,0 +1,36 @@
+function createJsCode(view) {
+  return [
+    {
+      code: `
+import { derive } from '${view}'
+
+derive(
+  state => state.items.filter(item => item.completed)
+)
+        `,
+    },
+  ]
+}
+
+function createTsCode(view) {
+  return [
+    {
+      code: `
+import { derive } from '${view}'
+import { State } from '../app'
+
+derive(
+  (state: State) => state.items.filter(item => item.completed)
+)
+        `,
+    },
+  ]
+}
+
+export const react = createJsCode('react-overmind')
+
+export const reactTs = createTsCode('react-overmind')
+
+export const vue = createJsCode('vue-overmind')
+
+export const vueTs = createTsCode('vue-overmind')

packages/overmind-website/examples/api_derive.ts

@@ -13,31 +13,31 @@
 		"typecheck": "tsc --noEmit",
 		"prepare": "npm run build",
 		"posttest": "npm run typecheck"
-  },
-  "now": {
-    "files": [
-      "api",
-      "backend",
-      "examples",
-      "guides",
-      "src",
-      "package.json",
-      "tsconfig.json",
-      "videos.json",
-      "webpack.config.js"
-    ]
-  },
+	},
+	"now": {
+		"files": [
+			"api",
+			"backend",
+			"examples",
+			"guides",
+			"src",
+			"package.json",
+			"tsconfig.json",
+			"videos.json",
+			"webpack.config.js"
+		]
+	},
 	"keywords": [
 		"overmind",
 		"demo"
 	],
 	"dependencies": {
 		"@types/node": "^10.5.1",
-    "express": "^4.16.3",
-    "overmind-themes": "next",
+		"express": "^4.16.3",
 		"install": "^0.12.1",
 		"marksy": "^6.0.3",
 		"npm": "^6.3.0",
+		"overmind-themes": "next",
 		"page": "^1.8.6",
 		"prismjs": "^1.15.0",
 		"react": "^16.4.1",
@@ -56,7 +56,7 @@
 		"url-loader": "^1.0.1",
 		"webpack": "^4.15.1",
 		"webpack-cli": "^3.0.8",
-    "webpack-dev-server": "^3.1.5",
-    "html-webpack-plugin": "^3.2.0"
+		"webpack-dev-server": "^3.1.5",
+		"html-webpack-plugin": "^3.2.0"
 	}
 }