Skip to content

Commit 582daf3

Browse files
christianalfonichristianalfoni
committed
feat(overmind): remove run and mutate operator, use action
BREAKING CHANGE: no more run and mutate, use action
1 parent 61d9993 commit 582daf3

File tree

15 files changed

+100
-186
lines changed

15 files changed

+100
-186
lines changed

‎packages/node_modules/overmind-devtools/src/app/actions.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Action, pipe, OnInitialize, Operator, run } from 'overmind'
1+
import { Action, pipe, OnInitialize, Operator } from 'overmind'
22
import {
33
Message,
44
Tab,

‎packages/node_modules/overmind-devtools/src/app/operators.ts‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { mutate, forEach, fork, Operator, when, map } from 'overmind'
1+
import { action, forEach, fork, Operator, when, map } from 'overmind'
22
import {
33
Message,
44
AppMessage,
@@ -30,13 +30,13 @@ import {
3030
runMutation,
3131
} from './utils'
3232

33-
export const ensureCurrentApp = mutate<Message>(({ value: message, state }) => {
33+
export const ensureCurrentApp = action<Message>(({ value: message, state }) => {
3434
if (!state.currentAppName) {
3535
state.currentAppName = message.appName
3636
}
3737
})
3838

39-
export const setPortExists = mutate<any>(({ state }) => {
39+
export const setPortExists = action<any>(({ state }) => {
4040
state.error = 'PORT_EXISTS'
4141
})
4242

@@ -49,12 +49,12 @@ export const isPortExistsMessage = (paths: {
4949
paths
5050
)
5151

52-
export const addState = mutate<InitMessage>(({ value: message, state }) => {
52+
export const addState = action<InitMessage>(({ value: message, state }) => {
5353
state.isConnecting = false
5454
state.apps[message.appName].state = message.data.state
5555
})
5656

57-
export const addFlushAndRunMutations = mutate<FlushMessage>(
57+
export const addFlushAndRunMutations = action<FlushMessage>(
5858
({ value: message, state }) => {
5959
ensureFlushExists(state.apps[message.appName].flushes, message.data.flushId)
6060
state.apps[message.appName].flushes[message.data.flushId].mutations =
@@ -78,7 +78,7 @@ export const addFlushAndRunMutations = mutate<FlushMessage>(
7878
}
7979
)
8080

81-
export const ensureApp = mutate<Message>(({ value: message, state }) => {
81+
export const ensureApp = action<Message>(({ value: message, state }) => {
8282
if (
8383
!state.apps[message.appName] ||
8484
message.messages[0].type === ExecutionType.INIT
@@ -89,7 +89,7 @@ export const ensureApp = mutate<Message>(({ value: message, state }) => {
8989
}
9090
})
9191

92-
export const addClientMessages = mutate<Message>(
92+
export const addClientMessages = action<Message>(
9393
({ value: message, state }) => {
9494
state.apps[message.appName].messages = message.messages
9595
.slice()
@@ -98,7 +98,7 @@ export const addClientMessages = mutate<Message>(
9898
}
9999
)
100100

101-
export const addComponent = mutate<AddComponentMessage>(
101+
export const addComponent = action<AddComponentMessage>(
102102
({ value: message, state }) => {
103103
const id = `${message.data.componentId}_${message.data.componentInstanceId}`
104104

@@ -112,7 +112,7 @@ export const addComponent = mutate<AddComponentMessage>(
112112
}
113113
)
114114

115-
export const updateComponent = mutate<UpdateComponentMessage>(
115+
export const updateComponent = action<UpdateComponentMessage>(
116116
({ value: message, state }) => {
117117
const id = `${message.data.componentId}_${message.data.componentInstanceId}`
118118

@@ -133,15 +133,15 @@ export const updateComponent = mutate<UpdateComponentMessage>(
133133
}
134134
)
135135

136-
export const removeComponent = mutate<RemoveComponentMessage>(
136+
export const removeComponent = action<RemoveComponentMessage>(
137137
({ value: message, state }) => {
138138
const id = `${message.data.componentId}_${message.data.componentInstanceId}`
139139

140140
state.apps[message.appName].components[id].isMounted = false
141141
}
142142
)
143143

144-
export const updateDerived = mutate<DerivedMessage>(
144+
export const updateDerived = action<DerivedMessage>(
145145
({ value: message, state }) => {
146146
const appState = state.apps[message.appName].state
147147
const path = message.data.path.split('.')
@@ -153,7 +153,7 @@ export const updateDerived = mutate<DerivedMessage>(
153153
}
154154
)
155155

156-
export const updateFlushWithDerived = mutate<DirtyDerivedMessage>(
156+
export const updateFlushWithDerived = action<DirtyDerivedMessage>(
157157
({ value: message, state }) => {
158158
ensureFlushExists(state.apps[message.appName].flushes, message.data.flushId)
159159
state.apps[message.appName].flushes[message.data.flushId].derived.push(
@@ -162,7 +162,7 @@ export const updateFlushWithDerived = mutate<DirtyDerivedMessage>(
162162
}
163163
)
164164

165-
export const addAction = mutate<StartActionMessage>(
165+
export const addAction = action<StartActionMessage>(
166166
({ value: message, state }) => {
167167
const app = state.apps[message.appName]
168168
const action = message.data
@@ -205,7 +205,7 @@ export const addAction = mutate<StartActionMessage>(
205205
}
206206
)
207207

208-
export const addOperator = mutate<StartOperatorMessage>(
208+
export const addOperator = action<StartOperatorMessage>(
209209
({ value: message, state }) => {
210210
const operatorData = message.data
211211
const actionId = getActionId(operatorData)
@@ -241,7 +241,7 @@ export const addOperator = mutate<StartOperatorMessage>(
241241
}
242242
)
243243

244-
export const updateOperator = mutate<EndOperatorMessage>(
244+
export const updateOperator = action<EndOperatorMessage>(
245245
({ value: message, state }) => {
246246
const operatorData = message.data
247247
const actionId = getActionId(operatorData)
@@ -256,7 +256,7 @@ export const updateOperator = mutate<EndOperatorMessage>(
256256
}
257257
)
258258

259-
export const updateAction = mutate<EndActionMessage>(
259+
export const updateAction = action<EndActionMessage>(
260260
({ value: message, state }) => {
261261
const app = state.apps[message.appName]
262262
const action = message.data
@@ -266,7 +266,7 @@ export const updateAction = mutate<EndActionMessage>(
266266
}
267267
)
268268

269-
export const addMutations = mutate<MutationsMessage>(
269+
export const addMutations = action<MutationsMessage>(
270270
({ value: message, state }) => {
271271
const mutations = message.data
272272
const id = `${mutations.actionId}_${mutations.executionId}`
@@ -277,7 +277,7 @@ export const addMutations = mutate<MutationsMessage>(
277277
}
278278
)
279279

280-
export const addEffect = mutate<EffectMessage>(({ value: message, state }) => {
280+
export const addEffect = action<EffectMessage>(({ value: message, state }) => {
281281
const effect = message.data
282282
const id = getActionId(effect)
283283
const operator =
@@ -294,4 +294,4 @@ export const forkEachMessage = (paths: {
294294
[key: string]: Operator<AppMessage<any>, AppMessage<any>>
295295
}) => forEach<AppMessage<any>[]>(fork(({ value }) => value.type, paths))
296296

297-
export const updateOperatorAsync = mutate<AsyncOperatorMessage>(() => {})
297+
export const updateOperatorAsync = action<AsyncOperatorMessage>(() => {})

‎packages/node_modules/overmind/src/index.ts‎

Lines changed: 7 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,10 @@ export class Overmind<Config extends Configuration> implements Configuration {
106106
*/
107107

108108
if (!IS_PRODUCTION && typeof window !== 'undefined') {
109-
if (options.devtools || (location.hostname === 'localhost' && options.devtools !== false)) {
109+
if (
110+
options.devtools ||
111+
(location.hostname === 'localhost' && options.devtools !== false)
112+
) {
110113
this.initializeDevtools(options.devtools, eventHub, proxyStateTree)
111114
} else {
112115
console.warn(
@@ -630,30 +633,6 @@ export function map<Input, Output, Config extends Configuration = TheConfig>(
630633
return instance
631634
}
632635

633-
export function run<Input, Config extends Configuration = TheConfig>(
634-
operation: (input: TValueContext<Config, Input>) => any
635-
): TOperator<Config, Input, Input> {
636-
const instance = (err, context, next) => {
637-
if (err) next(err)
638-
else {
639-
startDebugOperator('run', operation, context)
640-
const result = operation(context)
641-
stopDebugOperator(context, context.value)
642-
643-
const newContext = createContext(
644-
context,
645-
result instanceof Promise
646-
? result.then(() => context.value)
647-
: context.value
648-
)
649-
next(null, newContext)
650-
}
651-
}
652-
instance[IS_OPERATOR] = true
653-
654-
return instance
655-
}
656-
657636
export function forEach<
658637
Input extends any[],
659638
Config extends Configuration = TheConfig
@@ -763,13 +742,14 @@ export function filter<Input, Config extends Configuration = TheConfig>(
763742
return instance
764743
}
765744

766-
export function mutate<Input, Config extends Configuration = TheConfig>(
745+
export function action<Input, Config extends Configuration = TheConfig>(
767746
operation: (input: TValueContext<Config, Input>) => void
768747
): TOperator<Config, Input, Input> {
769748
const instance = (err, context, next) => {
770749
if (err) next(err)
771750
else {
772-
startDebugOperator('mutate', operation, context)
751+
startDebugOperator('action', operation, context)
752+
773753
const mutationTree = context.proxyStateTree.getMutationTree()
774754
if (!IS_PRODUCTION) {
775755
mutationTree.onMutation((mutation) => {

‎packages/node_modules/overmind/src/pipe.test.ts‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
Operator,
99
wait,
1010
debounce,
11-
run,
11+
action,
1212
parallel,
1313
} from './'
1414

@@ -27,6 +27,13 @@ function createMockAction(pipe) {
2727
send: () => {},
2828
trackEffects: () => {},
2929
},
30+
proxyStateTree: {
31+
getMutationTree() {
32+
return {
33+
onMutation() {},
34+
}
35+
},
36+
},
3037
}
3138
pipe(
3239
null,
@@ -170,25 +177,25 @@ describe('PIPE', () => {
170177
expect(value).toEqual(['foo', 'FOO'])
171178
})
172179
})
173-
test('run', () => {
180+
test('action', () => {
174181
expect.assertions(1)
175182
const test: Operator<string, string> = pipe(
176-
run(({ value }) => value + '!!!')
183+
action(({ value }) => value + '!!!')
177184
)
178-
const action = createMockAction(test)
179-
return action('foo').then((value) => {
185+
const mockedAction = createMockAction(test)
186+
return mockedAction('foo').then((value) => {
180187
expect(value).toEqual('foo')
181188
})
182189
})
183-
test('run (async)', () => {
190+
test('action (async)', () => {
184191
expect.assertions(2)
185192
let hasRun = false
186193
const test: Operator<string, string> = pipe(
187-
run(({ value }) => Promise.resolve(value + '!!!')),
188-
run(() => (hasRun = true))
194+
action(({ value }) => Promise.resolve(value + '!!!')),
195+
action(() => (hasRun = true))
189196
)
190-
const action = createMockAction(test)
191-
const actionRun = action('foo')
197+
const mockedAction = createMockAction(test)
198+
const actionRun = mockedAction('foo')
192199
expect(hasRun).toBe(false)
193200
return actionRun.then((value) => {
194201
expect(value).toEqual('foo')

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

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,27 @@
11
# Operators
22

3-
Overmind also provides a functional API to help you manage complex logic. This API is inspired by asynchronous flow libraries like RxJS, though it is a simpler approach. You define an operator just like an action:
3+
Overmind also provides a functional API to help you manage complex logic. This API is inspired by asynchronous flow libraries like RxJS, though it is designed to manage application state and effects. A plain old action can be converted to an operator by doing:
44

55
```marksy
66
h(Example, { name: "api/operators" })
77
```
88

9-
Operators forces you to split up your logic in tiny composable pieces that has a specific purpose. This allows you to express complexity in a declarative way. You typically use the **pipe** operator in combination with the other operators to do this:
9+
Operators are small composable pieces of logic that can be combined in many ways. This allows you to express complexity in a declarative way. You typically use the **pipe** operator in combination with the other operators to do this:
1010

1111
```marksy
1212
h(Example, { name: "api/operators_pipe" })
1313
```
1414

1515
Any of these operators can be used with other operators. You can even insert a pipe inside an other pipe. This kind of composition is what makes functional programming so powerful.
1616

17+
18+
## action
19+
This operator takes a normal action and converts it to an operator so that it can be combined with other operators. You use this operator whenever you want to change the state of the app, but you can run effects as well. Just like a normal action.
20+
21+
```marksy
22+
h(Example, { name: "api/operators_operator_action" })
23+
```
24+
1725
## debounce
1826
When action is called multiple times within the set time limit, only the last action will move beyond the point of the debounce.
1927

@@ -29,7 +37,7 @@ h(Example, { name: "api/operators_operator_filter" })
2937
```
3038

3139
## forEach
32-
Allows you to point to an array where each item will be sent to the operator/pipe on the second argument.
40+
Allows you to pass each item of a value that is an array to the operator/pipe on the second argument.
3341

3442
```marksy
3543
h(Example, { name: "api/operators_operator_forEach" })
@@ -49,13 +57,6 @@ Returns a new value to the pipe. If the value is a promise it will wait until pr
4957
h(Example, { name: "api/operators_operator_map" })
5058
```
5159

52-
## mutate
53-
You are only allowed to change the state in the mutate operator.
54-
55-
```marksy
56-
h(Example, { name: "api/operators_operator_mutate" })
57-
```
58-
5960
## parallel
6061
Will run every operator and wait for all of them to finish before moving on. Works like *Promise.all*.
6162

@@ -70,14 +71,6 @@ The pipe is an operator in itself. Use it to compose other operators and pipes.
7071
h(Example, { name: "api/operators_operator_pipe" })
7172
```
7273

73-
## run
74-
This operator is useful to run effects. It will just pass the current value a long. You may return a promise which will hold further
75-
execution until it is resolved.
76-
77-
```marksy
78-
h(Example, { name: "api/operators_operator_run" })
79-
```
80-
8174
## wait
8275
Hold execution for set time.
8376

‎packages/overmind-website/examples/api/operators.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ export default (ts) =>
33
? [
44
{
55
code: `
6-
import { mutate } from 'overmind'
6+
import { action } from 'overmind'
77
8-
export const changeFoo = mutate(({ state }) => {
8+
export const changeFoo = action(({ state }) => {
99
state.foo = 'bar'
1010
})
1111
`,
@@ -14,9 +14,9 @@ export const changeFoo = mutate(({ state }) => {
1414
: [
1515
{
1616
code: `
17-
import { mutate } from 'overmind'
17+
import { action } from 'overmind'
1818
19-
export const changeFoo = mutate(({ state }) => {
19+
export const changeFoo = action(({ state }) => {
2020
state.foo = 'bar'
2121
})
2222
`,

packages/overmind-website/examples/api/operators_operator_mutate.ts renamed to packages/overmind-website/examples/api/operators_operator_action.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ export default (ts) =>
33
? [
44
{
55
code: `
6-
import { mutate } from 'overmind'
6+
import { action } from 'overmind'
77
8-
export const setUser = mutate<User>(({ value: user, state }) => {
8+
export const setUser = action<User>(({ value: user, state }) => {
99
state.user = user
1010
})
1111
`,
@@ -14,9 +14,9 @@ export const setUser = mutate<User>(({ value: user, state }) => {
1414
: [
1515
{
1616
code: `
17-
import { mutate } from 'overmind'
17+
import { action } from 'overmind'
1818
19-
export const setUser = mutate(({ value: user, state }) => {
19+
export const setUser = action(({ value: user, state }) => {
2020
state.user = user
2121
})
2222
`,

0 commit comments

Comments
 (0)