Skip to content

Commit 08c5b49

Browse files
christianalfonichristianalfoni
committed
docs(website): refactor get started
1 parent e2a74d0 commit 08c5b49

File tree

16 files changed

+372
-355
lines changed

16 files changed

+372
-355
lines changed

‎packages/node_modules/overmind-devtools/src/components/Apps/styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const app = css({
2323
boxShadow: '5px 5px 20px 5px rgba(0,0,0,0.10)',
2424
display: 'flex',
2525
alignItems: 'center',
26-
color: colors.black,
26+
color: colors.white,
2727
padding: '0.5rem 1rem',
2828
whiteSpace: 'nowrap',
2929
})

‎packages/overmind-website/examples/guide/getstarted/changestate.ts‎

Lines changed: 30 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,23 @@
11
import { tsAppIndex } from '../../templates'
22

3-
const javascript = {
4-
react: [
5-
{
6-
fileName: 'overmind/index.js',
7-
code: `
8-
import { createOvermind } from 'overmind'
9-
import { createHook } from 'overmind-react'
10-
11-
export const overmind = createOvermind({
12-
state: {
13-
count: 0
14-
},
15-
actions: {
16-
changeCount({ state }, countChange) {
17-
state.count += countChange
18-
}
19-
}
20-
})
21-
22-
export const useOvermind = createHook(overmind)
23-
`,
24-
},
25-
],
26-
vue: [
27-
{
28-
fileName: 'overmind/index.js',
29-
code: `
30-
import { createOvermind } from 'overmind'
31-
import { createPlugin } from 'overmind-vue'
32-
33-
export const overmind = createOvermind({
34-
state: {
35-
count: 0
36-
},
37-
actions: {
38-
changeCount({ state }, countChange) {
39-
state.count += countChange
40-
}
41-
}
42-
})
43-
44-
export const OvermindPlugin = createPlugin(overmind)
45-
`,
46-
},
47-
],
48-
}
49-
50-
const typescript = {
51-
react: [
52-
{
53-
fileName: 'overmind/actions.ts',
54-
code: `
3+
export default (ts) =>
4+
ts
5+
? [
6+
{
7+
fileName: 'overmind/actions.ts',
8+
code: `
559
import { Action } from 'overmind'
5610
5711
export const changeCount: Action<number> = ({ state }, countChange) => {
5812
state.count += countChange
5913
}
6014
`,
61-
},
62-
{
63-
fileName: 'overmind/index.ts',
64-
code: tsAppIndex(
65-
'react',
66-
`
15+
},
16+
{
17+
fileName: 'overmind/index.ts',
18+
code: tsAppIndex(
19+
'angular',
20+
`
6721
import { state } from './state'
6822
import * as actions from './actions'
6923
@@ -72,37 +26,23 @@ const config = {
7226
actions
7327
}
7428
`
75-
),
76-
},
77-
],
78-
vue: javascript.vue,
79-
angular: [
80-
{
81-
fileName: 'overmind/actions.ts',
82-
code: `
83-
import { Action } from 'overmind'
84-
85-
export const changeCount: Action<number> = ({ state }, countChange) => {
86-
state.count += countChange
29+
),
30+
},
31+
]
32+
: [
33+
{
34+
fileName: 'overmind/index.js',
35+
code: `
36+
export const config = {
37+
state: {
38+
count: 0
39+
},
40+
actions: {
41+
changeCount({ state }, countChange) {
42+
state.count += countChange
43+
}
44+
}
8745
}
8846
`,
89-
},
90-
{
91-
fileName: 'overmind/index.ts',
92-
code: tsAppIndex(
93-
'angular',
94-
`
95-
import { state } from './state'
96-
import * as actions from './actions'
97-
98-
const config = {
99-
state,
100-
actions
101-
}
102-
`
103-
),
104-
},
105-
],
106-
}
107-
108-
export default (ts, view) => (ts ? typescript[view] : javascript[view])
47+
},
48+
]

‎packages/overmind-website/examples/guide/getstarted/connectapp.ts‎

Lines changed: 146 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,41 @@
11
const javascript = {
22
react: [
3+
{
4+
fileName: 'overmind/index.ts',
5+
code: `
6+
import { createHook } from 'overmind-react'
7+
import { state } from './state'
8+
import * as actions from './actions'
9+
import * as effects from './effects'
10+
11+
const config = {
12+
state,
13+
actions,
14+
effects
15+
}
16+
17+
export const useOvermind = createHook()
18+
`,
19+
},
20+
{
21+
fileName: 'index.js',
22+
code: `
23+
import React from 'react'
24+
import { render } from 'react-dom'
25+
import { createOvermind } from 'overmind'
26+
import { Provider } from 'overmind-react'
27+
import { config } from './overmind'
28+
import Count from './Count'
29+
30+
const overmind = createOvermind(config)
31+
32+
render((
33+
<Provider value={overmind}>
34+
<Count />
35+
</Provider>
36+
), document.querySelector('#app'))
37+
`,
38+
},
339
{
440
fileName: 'Count.js',
541
target: 'jsx',
@@ -8,11 +44,13 @@ import React from 'react'
844
import { useOvermind } from '../overmind'
945
1046
const Count = () => {
11-
const { state } = useOvermind()
47+
const { state, actions } = useOvermind()
1248
1349
return (
1450
<div>
51+
<button onClick={() => actions.changeCount(-1)}>-1</button>
1552
{state.count}
53+
<button onClick={() => actions.changeCount(1)}>+1</button>
1654
</div>
1755
)
1856
}
@@ -26,9 +64,14 @@ export default Count
2664
fileName: 'index.js',
2765
code: `
2866
import Vue from 'vue'
29-
import { OvermindPlugin } from './overmind'
67+
import { createOvermind } from 'overmind'
68+
import { createPlugin } from 'overmind-vue'
69+
import { config } from './overmind'
3070
import Count from './components/Count'
3171
72+
const overmind = createOvermind(config)
73+
const OvermindPlugin = createPlugin(overmind)
74+
3275
Vue.use(OvermindPlugin)
3376
3477
new Vue({
@@ -38,34 +81,130 @@ new Vue({
3881
3982
`,
4083
},
84+
{
85+
fileName: 'components/Count.vue (template)',
86+
target: 'markup',
87+
code: `
88+
<div>
89+
<button @click="actions.changeCount(-1)">-1</button>
90+
{{ state.count }}
91+
<button @click="actions.changeCount(1)">+1</button>
92+
</div>
93+
`,
94+
},
4195
],
4296
}
4397

4498
const typescript = {
4599
react: [
100+
{
101+
fileName: 'overmind/index.ts',
102+
code: `
103+
import { IConfig } from 'overmind'
104+
import { createHook } from 'overmind-react'
105+
import { state } from './state'
106+
import * as actions from './actions'
107+
import * as effects from './effects'
108+
109+
const config = {
110+
state,
111+
actions,
112+
effects
113+
}
114+
115+
declare module 'overmind' {
116+
interface Config extends IConfig<typeof config> {}
117+
}
118+
119+
export const useOvermind = createHook()
120+
`,
121+
},
122+
{
123+
fileName: 'index.tsx',
124+
code: `
125+
import React from 'react'
126+
import { render } from 'react-dom'
127+
import { createOvermind } from 'overmind'
128+
import { Provider } from 'overmind-react'
129+
import { config } from './overmind'
130+
import Count from './Count'
131+
132+
const overmind = createOvermind(config)
133+
134+
render((
135+
<Provider value={overmind}>
136+
<Count />
137+
</Provider>
138+
), document.querySelector('#app'))
139+
`,
140+
},
46141
{
47142
fileName: 'components/Count.tsx',
48143
code: `
49144
import * as React from 'react'
50145
import { useOvermind } from '../overmind'
51146
52147
const Count: React.FunctionComponent = () => {
53-
const { state } = useOvermind()
148+
const { state, actions } = useOvermind()
54149
55150
return (
56151
<div>
152+
<button onClick={() => actions.changeCount(-1)}>-1</button>
57153
{state.count}
154+
<button onClick={() => actions.changeCount(1)}>+1</button>
58155
</div>
59156
)
60157
}
61158
62-
63159
export default Count
64160
`,
65161
},
66162
],
67163
vue: javascript.vue,
68164
angular: [
165+
{
166+
fileName: 'overmind/index.ts',
167+
code: `
168+
import { IConfig } from 'overmind'
169+
import { Injectable } from '@angular/core'
170+
import { OvermindService } from 'overmind-angular'
171+
import { state } from './state'
172+
import * as actions from './actions'
173+
import * as effects from './effects'
174+
175+
export const config = { state, actions, effects }
176+
177+
declare module 'overmind' {
178+
interface Config extends IConfig<typeof config> {}
179+
}
180+
181+
@Injectable()
182+
export class Store extends OvermindService<typeof config> {}
183+
`,
184+
},
185+
{
186+
fileName: 'app.module.ts',
187+
code: `
188+
import { NgModule } from '@angular/core';
189+
import { BrowserModule } from '@angular/platform-browser';
190+
import { createOvermind } from 'overmind';
191+
import { OvermindModule, OvermindService, OVERMIND_INSTANCE } from 'overmind-angular'
192+
193+
import { config, Store } from './overmind'
194+
import { CountComponent } from './count.component';
195+
196+
@NgModule({
197+
imports: [ BrowserModule, OvermindModule ],
198+
declarations: [ CountComponent ],
199+
bootstrap: [ CountComponent ],
200+
providers: [
201+
{ provide: OVERMIND_INSTANCE, useValue: createOvermind(config) },
202+
{ provide: Store, useExisting: OvermindService }
203+
]
204+
})
205+
export class AppModule { }
206+
`,
207+
},
69208
{
70209
fileName: 'count.component.ts',
71210
code: `
@@ -76,12 +215,15 @@ import { Store } from '../overmind'
76215
selector: 'count-component',
77216
template: \`
78217
<div *track>
218+
<button (click)="actions.changeCount(-1)">-1</button>
79219
{{ state.count }}
220+
<button (click)="actions.changeCount(1)">+1</button>
80221
</div>
81222
\`
82223
})
83224
export class CountComponent {
84225
state = this.store.select()
226+
actions = this.store.actions
85227
constructor (private store: Store) {}
86228
}
87229
`,

0 commit comments

Comments
 (0)