Skip to content

Commit 69ab52a

Browse files
christianalfonichristianalfoni
committed
docs(website): add get started guide and fix some styling
1 parent d843bc4 commit 69ab52a

28 files changed

+872
-215
lines changed

‎packages/overmind-website/api/effects.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,7 @@
1-
# Effects
1+
# Effects
2+
3+
```marksy
4+
<Example name="api_effects" />
5+
```
6+
7+
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/namespaced.md‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/overmind-website/api/namespaces.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Namespaces
2+
3+
```marksy
4+
<Example name="api_namespaces" view />
5+
```
6+
7+
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 pass them into the **namespaces** factory.
8+
9+
## Dynamic
10+
11+
```marksy
12+
<Example name="api_namespaces_dynamic" view />
13+
```
14+
15+
When you create a module you can export a function instead of an object. This function will receive that key used by **namespaces** to attach the module to the application configuration. Use this **namespace** argument to point correctly to state, actions etc. as they are now namespaced.

‎packages/overmind-website/api/reaction.md‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
1-
# Reaction
1+
# Reaction
2+
3+
```marksy
4+
<Example name="api_reaction_global" />
5+
```
6+
7+
You can register reactions to act whenever a state path is affected by a mutation. The **global** reactions are conigured with the application and will live as long as the application lives. A reaction results in an executed action.
8+
9+
## Component
10+
11+
```marksy
12+
<Example name="api_reaction_component" view />
13+
```
14+
15+
Inside components reactions can be registered to perform view related side effects. These reactions are unregistered automatically when the component unmounts.

‎packages/overmind-website/backend/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@
115115
}
116116
</style>
117117
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
118+
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
118119
</head>
119120

120121
<body>

‎packages/overmind-website/examples/api_connect.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ const SomeComponent = ({ app }) => {
1313
)
1414
}
1515
16-
export default connect(MyComponent)
16+
export default connect(SomeComponent)
1717
`,
1818
},
1919
]
2020

2121
export const reactTs = [
2222
{
23-
fileName: 'MyComponent.tsx',
23+
fileName: 'components/SomeComponent.tsx',
2424
code: `
2525
import * as React from 'react'
2626
import { connect, Connect } from '../app'
@@ -33,22 +33,22 @@ const SomeComponent: React.SFC<Connect, {}> = ({ app }) => {
3333
)
3434
}
3535
36-
export default connect(MyComponent)
36+
export default connect(SomeComponent)
3737
`,
3838
},
3939
]
4040

4141
export const vue = [
4242
{
43-
fileName: 'SomeComponent.vue (template)',
43+
fileName: 'components/SomeComponent.vue (template)',
4444
code: `
4545
<div v-on:click="app.actions.onClick">
4646
{{app.state.foo}}
4747
</div>
4848
`,
4949
},
5050
{
51-
fileName: 'SomeComponent.vue (script)',
51+
fileName: 'components/SomeComponent.vue (script)',
5252
code: `
5353
import { connect } from '../app'
5454

‎packages/overmind-website/examples/api_effects.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
export const js = [
2+
{
3+
code: `
4+
export axios from 'axios'
5+
`,
6+
},
7+
{
8+
code: `
9+
export const api = {
10+
getUser() {
11+
return fetch('/user').then(response => response.json())
12+
},
13+
getItem(id) {
14+
return fetch(\`/items/\${id}\`).then(response => response.json())
15+
}
16+
}
17+
`,
18+
},
19+
]
20+
21+
export const ts = [
22+
{
23+
code: `
24+
export axios from 'axios'
25+
`,
26+
},
27+
{
28+
code: `
29+
export const api = {
30+
getUser(): Promise<User> {
31+
return fetch('/user').then(response => response.json())
32+
},
33+
getItem(id: number): Promise<Item> {
34+
return fetch(\`/items/\${id}\`).then(response => response.json())
35+
}
36+
}
37+
`,
38+
},
39+
]

‎packages/overmind-website/examples/api_namespaces.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
function createCode(view) {
2+
return [
3+
{
4+
code: `
5+
import App, { namespaces } from '${view}'
6+
import * as moduleA from './moduleA'
7+
import * as moduleB from './moduleB'
8+
9+
const namespaced = namespaces({
10+
moduleA,
11+
moduleB
12+
})
13+
14+
const app = new App(namespaced)
15+
`,
16+
},
17+
]
18+
}
19+
20+
export const react = createCode('react-overmind')
21+
22+
export const reactTs = createCode('react-overmind')
23+
24+
export const vue = createCode('vue-overmind')
25+
26+
export const vueTs = createCode('vue-overmind')

‎packages/overmind-website/examples/api_namespaces_dynamic.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
function createJsCode() {
2+
return [
3+
{
4+
fileName: 'app/moduleA/index.js',
5+
code: `
6+
export default (namespace) => ({
7+
state: {},
8+
effects: {},
9+
actions: action => ({}),
10+
reactions: (reaction, action) => ({})
11+
})
12+
`,
13+
},
14+
]
15+
}
16+
17+
function createTsCode(view) {
18+
return [
19+
{
20+
code: `
21+
import { Namespace } from '${view}'
22+
23+
export default (namespace: Namespace) => ({
24+
state: {},
25+
effects: {},
26+
actions: action => ({}),
27+
reactions: (reaction, action) => ({})
28+
})
29+
`,
30+
},
31+
]
32+
}
33+
34+
export const react = createJsCode()
35+
36+
export const reactTs = createTsCode('react-overmind')
37+
38+
export const vue = createJsCode()
39+
40+
export const vueTs = createTsCode('vue-overmind')

‎packages/overmind-website/examples/api_reaction_component.ts‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
export const react = [
2+
{
3+
fileName: 'components/SomeComponent.js',
4+
code: `
5+
import React from 'react'
6+
import { connect } from '../app'
7+
8+
class SomeComponent extends React.Component {
9+
componentDidMount () {
10+
this.props.app.reaction(
11+
'scrollUpOnNotification',
12+
state => state.notifications,
13+
() => {
14+
window.scrollTop = 0
15+
}
16+
)
17+
}
18+
render () {
19+
return <h1>foo</h1>
20+
}
21+
}
22+
23+
export default connect(SomeComponent)
24+
`,
25+
},
26+
]
27+
28+
export const reactTs = [
29+
{
30+
fileName: 'components/SomeComponent.tsx',
31+
code: `
32+
import React from 'react'
33+
import { connect, Connect } from '../app'
34+
35+
class SomeComponent extends React.Component<Connect, {}> {
36+
componentDidMount () {
37+
this.props.app.reaction(
38+
'scrollUpOnNotification',
39+
state => state.notifications,
40+
() => {
41+
window.scrollTop = 0
42+
}
43+
)
44+
}
45+
render () {
46+
return <h1>foo</h1>
47+
}
48+
}
49+
50+
export default connect(SomeComponent)
51+
`,
52+
},
53+
]
54+
55+
export const vue = [
56+
{
57+
fileName: 'SomeComponent.vue (template)',
58+
code: `
59+
<h1>foo</h1>
60+
`,
61+
},
62+
{
63+
fileName: 'SomeComponent.vue (script)',
64+
code: `
65+
import { connect } from '../app'
66+
67+
export default connect({
68+
mounted() {
69+
this.app.reaction(
70+
'scrollUpOnNotification',
71+
state => state.notifications,
72+
() => {
73+
window.scrollTop = 0
74+
}
75+
)
76+
}
77+
})
78+
`,
79+
},
80+
]
81+
82+
export const vueTs = vue

0 commit comments

Comments
 (0)