@xstate/react 2.0.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md DELETED
@@ -1,439 +0,0 @@
1
- # Changelog
2
-
3
- ## 2.0.0
4
-
5
- ### Major Changes
6
-
7
- - [#2674](https://github.com/statelyai/xstate/pull/2674) [`e5a8b8dff`](https://github.com/statelyai/xstate/commit/e5a8b8dffb88cffbdca26683099ffdf5f1b01c8d) Thanks [@Andarist](https://github.com/Andarist), [@mattpocock](https://github.com/mattpocock)! - To avoid breaking any consumers and to leverage the newly introduced typegen support, the major version of this package had to be bumped. While you can still use it with older versions of TS, the typegen support in this package requires TS version 4.0 or greater.
8
-
9
- When using hooks from `@xstate/react` it's recommended to skip providing explicit generics to them. Note that that generics list has changed since v1 and we now only accept a single generic, `TMachine`.
10
-
11
- * [#2674](https://github.com/statelyai/xstate/pull/2674) [`ab919d300`](https://github.com/statelyai/xstate/commit/ab919d300f6d2b78871d3399ec58a697c4268d9b) Thanks [@Andarist](https://github.com/Andarist)! - Removed already deprecated `useService` from `@xstate/react`. You can replace its usage with `useActor`.
12
-
13
- ### Patch Changes
14
-
15
- - [#2957](https://github.com/statelyai/xstate/pull/2957) [`8550ddda7`](https://github.com/statelyai/xstate/commit/8550ddda73e2ad291e19173d7fa8d13e3336fbb9) Thanks [@davidkpiano](https://github.com/davidkpiano)! - The repository links have been updated from `github.com/davidkpiano` to `github.com/statelyai`.
16
-
17
- ## 1.6.3
18
-
19
- ### Patch Changes
20
-
21
- - [#2767](https://github.com/statelyai/xstate/pull/2767) [`c1503b121`](https://github.com/statelyai/xstate/commit/c1503b1219d995ebf0f45de46036c5a1d7e6442f) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an over-rendering issue in the `useSelector`.
22
-
23
- ## 1.6.2
24
-
25
- ### Patch Changes
26
-
27
- - [#2736](https://github.com/statelyai/xstate/pull/2736) [`2246ae051`](https://github.com/statelyai/xstate/commit/2246ae051663f261b4750d7adba57f008ec28f1d) Thanks [@Andarist](https://github.com/Andarist), [@davidkpiano](https://github.com/statelyai), [@VanTanev](https://github.com/VanTanev)! - The `useSelector(...)` hook now works as expected when the `actor` passed in changes. The hook will properly subscribe to the new `actor` and select the desired value. See [#2702](https://github.com/statelyai/xstate/issues/2702)
28
-
29
- * [#2685](https://github.com/statelyai/xstate/pull/2685) [`469268d39`](https://github.com/statelyai/xstate/commit/469268d39fbc23996599773adfc4ca824b48585f) Thanks [@farskid](https://github.com/farskid), [@Andarist](https://github.com/Andarist)! - Fixed a regression with a development-only warning not being shown when a machine reference is updated during the hook lifecycle. This usually happens when machine options are dependent on external values and they're passed via `withConfig`.
30
-
31
- ```js
32
- const machine = createMachine({
33
- initial: 'foo',
34
- context: { id: 1 },
35
- states: {
36
- foo: {
37
- on: {
38
- CHECK: {
39
- target: 'bar',
40
- cond: 'hasOverflown'
41
- }
42
- }
43
- },
44
- bar: {}
45
- }
46
- });
47
-
48
- const [id, setId] = useState(1);
49
- const [current, send] = useMachine(
50
- machine.withConfig({
51
- guards: {
52
- hasOverflown: () => id > 1 // id is a reference to an outside value
53
- }
54
- })
55
- );
56
-
57
- // later when id updates
58
- setId(2);
59
- // Now the reference passed to `useMachine` (the result of `machine.withConfig`) is updated but the interpreted machine stays the same. So the guard is still the previous one that got passed to the `useMachine` initially, and it closes over the stale `id`.
60
- ```
61
-
62
- ## 1.6.1
63
-
64
- ### Patch Changes
65
-
66
- - [#2587](https://github.com/statelyai/xstate/pull/2587) [`5aaa8445c`](https://github.com/statelyai/xstate/commit/5aaa8445c0041c6e9c47285c18e8b71cb2d805a7) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with implementations provided outside of React being wiped out and unusable.
67
-
68
- ## 1.6.0
69
-
70
- ### Minor Changes
71
-
72
- - [`4b4872ca`](https://github.com/statelyai/xstate/commit/4b4872cafd63f825f3918c6eb6fa84642d45e3e0) [#2241](https://github.com/statelyai/xstate/pull/2241) Thanks [@mattpocock](https://github.com/mattpocock)! - Changed the behaviour of guards, delays and activities when declared as options in `useMachine`/`useInterpret`.
73
-
74
- Previously, guards could not reference external props, because they would not be updated when the props changed. For instance:
75
-
76
- ```tsx
77
- const Modal = props => {
78
- useMachine(modalMachine, {
79
- guards: {
80
- isModalOpen: () => props.isOpen
81
- }
82
- });
83
- };
84
- ```
85
-
86
- When the component is created, `props.isOpen` would be checked and evaluated to the initial value. But if the guard is evaluated at any other time, it will not respond to the props' changed value.
87
-
88
- This is not true of actions/services. This will work as expected:
89
-
90
- ```tsx
91
- const Modal = props => {
92
- useMachine(modalMachine, {
93
- actions: {
94
- consoleLogModalOpen: () => {
95
- console.log(props.isOpen);
96
- }
97
- }
98
- });
99
- };
100
- ```
101
-
102
- This change brings guards and delays into line with actions and services.
103
-
104
- ⚠️ **NOTE:** Whenever possible, use data from within `context` rather than external data in your guards and delays.
105
-
106
- ### Patch Changes
107
-
108
- - [`fe3e859f`](https://github.com/statelyai/xstate/commit/fe3e859f5c53813307bacad915bebc8d1f3a982c) [#2522](https://github.com/statelyai/xstate/pull/2522) Thanks [@farskid](https://github.com/farskid), [@Andarist](https://github.com/Andarist)! - Fixed an issue with actors not being spawned correctly by `useMachine` and `useInterpret` when they were defined a lazily evaluated context, like for example here:
109
-
110
- ```js
111
- createMachine({
112
- // lazy context
113
- context: () => ({
114
- ref: spawn(() => {})
115
- })
116
- });
117
- ```
118
-
119
- ## 1.5.1
120
-
121
- ### Patch Changes
122
-
123
- - [`453acacb`](https://github.com/statelyai/xstate/commit/453acacbec364531a2851f183c3ab446d7db0e84) [#2389](https://github.com/statelyai/xstate/pull/2389) Thanks [@davidkpiano](https://github.com/statelyai)! - An internal issue where the `spawnBehavior` import for the `useSpawn(...)` hook was broken internally has been fixed.
124
-
125
- ## 1.5.0
126
-
127
- ### Minor Changes
128
-
129
- - [`432b60f7`](https://github.com/statelyai/xstate/commit/432b60f7bcbcee9510e0d86311abbfd75b1a674e) [#2280](https://github.com/statelyai/xstate/pull/2280) Thanks [@davidkpiano](https://github.com/statelyai)! - Just like `useInvoke(...)`, other types of actors can now be spawned from _behaviors_ using `useSpawn(...)`:
130
-
131
- ```tsx
132
- import { fromReducer } from 'xstate/lib/behaviors';
133
- import { useActor, useSpawn } from '@xstate/react';
134
-
135
- type CountEvent = { type: 'INC' } | { type: 'DEC' };
136
-
137
- const countBehavior = fromReducer(
138
- (count: number, event: CountEvent): number => {
139
- if (event.type === 'INC') {
140
- return count + 1;
141
- } else if (event.type === 'DEC') {
142
- return count - 1;
143
- }
144
-
145
- return count;
146
- },
147
- 0 // initial state
148
- );
149
-
150
- const countMachine = createMachine({
151
- invoke: {
152
- id: 'count',
153
- src: () => fromReducer(countReducer, 0)
154
- },
155
- on: {
156
- INC: {
157
- actions: forwardTo('count')
158
- },
159
- DEC: {
160
- actions: forwardTo('count')
161
- }
162
- }
163
- });
164
-
165
- const Component = () => {
166
- const countActorRef = useSpawn(countBehavior);
167
- const [count, send] = useActor(countActorRef);
168
-
169
- return (
170
- <div>
171
- Count: {count}
172
- <button onClick={() => send({ type: 'INC' })}>Increment</button>
173
- <button onClick={() => send({ type: 'DEC' })}>Decrement</button>
174
- </div>
175
- );
176
- };
177
- ```
178
-
179
- ## 1.4.0
180
-
181
- ### Minor Changes
182
-
183
- - [`849ec56c`](https://github.com/statelyai/xstate/commit/849ec56c2a9db34e65a30af94e68a7a7a50b4158) [#2286](https://github.com/statelyai/xstate/pull/2286) Thanks [@davidkpiano](https://github.com/statelyai)! - The `useService(...)` hook will be deprecated, since services are also actors. In future versions, the `useActor(...)` hook should be used instead:
184
-
185
- ```diff
186
- -const [state, send] = useService(service);
187
- +const [state, send] = useActor(service);
188
- ```
189
-
190
- ### Patch Changes
191
-
192
- - [`ea3aaffb`](https://github.com/statelyai/xstate/commit/ea3aaffb906b34a42bb2736c7b91d54ffe9ed882) [#2326](https://github.com/statelyai/xstate/pull/2326) Thanks [@davidkpiano](https://github.com/statelyai)! - The `send` type returned in the tuple from `useActor(someService)` was an incorrect `never` type; this has been fixed.
193
-
194
- ## 1.3.4
195
-
196
- ### Patch Changes
197
-
198
- - [`aa3c2991`](https://github.com/statelyai/xstate/commit/aa3c29916b7382fbcf1a3efb183ca1e8eb625480) [#2223](https://github.com/statelyai/xstate/pull/2223) Thanks [@davidkpiano](https://github.com/statelyai)! - Support for actor refs with the `.getSnapshot()` method (added for spawned actors in XState version 4.19) is now supported in the `useActor(...)` hook.
199
-
200
- ## 1.3.3
201
-
202
- ### Patch Changes
203
-
204
- - [`27e7242c`](https://github.com/statelyai/xstate/commit/27e7242c24146de85cf618a658b400a3241fa7d7) [#2112](https://github.com/statelyai/xstate/pull/2112) Thanks [@davidkpiano](https://github.com/statelyai)! - The `executeEffect` function is no longer exported (was meant to be internal and is useless as a public function anyway). This also fixes a circular dependency issue.
205
-
206
- ## 1.3.2
207
-
208
- ### Patch Changes
209
-
210
- - [`bb5e81ea`](https://github.com/statelyai/xstate/commit/bb5e81eaa1ecba1fd54a7677ce9eaee9bd695964) [#2050](https://github.com/statelyai/xstate/pull/2050) Thanks [@theKashey](https://github.com/theKashey)! - Added an explicit entrypoint for `@xstate/react/fsm` which you can use instead of `@xstate/react/lib/fsm`. This is the only specifier that will be supported in the future - the other one will be dropped in the next major version.
211
-
212
- ```diff
213
- -import { useMachine } from '@xstate/react/lib/fsm'
214
- +import { useMachine } from '@xstate/react/fsm'
215
- ```
216
-
217
- ## 1.3.1
218
-
219
- ### Patch Changes
220
-
221
- - [`b076b253`](https://github.com/statelyai/xstate/commit/b076b25364224874f62e8065892be40dfbb28030) [#1947](https://github.com/statelyai/xstate/pull/1947) Thanks [@lukekarrys](https://github.com/lukekarrys)! - Fix typing of the service returned from the fsm useMachine hook by passing it Typestate
222
-
223
- * [`9b5dc784`](https://github.com/statelyai/xstate/commit/9b5dc7843c44f50bcca0ffccb843b3d50cef6ddc) [#1950](https://github.com/statelyai/xstate/pull/1950) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with `toObserver` being internally imported from `xstate/lib/utils` which has broken UMD build and the declared peer dep contract.
224
-
225
- ## 1.3.0
226
-
227
- ### Minor Changes
228
-
229
- - [`577ae023`](https://github.com/statelyai/xstate/commit/577ae02384926b49e876011c4393f212b49066f8) [#1915](https://github.com/statelyai/xstate/pull/1915) Thanks [@davidkpiano](https://github.com/statelyai)! - New hook: `useInterpret(machine)`, which is a low-level hook that interprets the `machine` and returns the `service`:
230
-
231
- ```js
232
- import { useInterpret } from '@xstate/react';
233
- import { someMachine } from '../path/to/someMachine';
234
-
235
- const App = () => {
236
- const service = useInterpret(someMachine);
237
-
238
- // ...
239
- };
240
- ```
241
-
242
- * [`577ae023`](https://github.com/statelyai/xstate/commit/577ae02384926b49e876011c4393f212b49066f8) [#1915](https://github.com/statelyai/xstate/pull/1915) Thanks [@davidkpiano](https://github.com/statelyai)! - New hook: `useSelector(actor, selector)`, which subscribes to `actor` and returns the selected state derived from `selector(snapshot)`:
243
-
244
- ```js
245
- import { useSelector } from '@xstate/react';
246
-
247
- const App = ({ someActor }) => {
248
- const count = useSelector(someActor, state => state.context.count);
249
-
250
- // ...
251
- };
252
- ```
253
-
254
- ## 1.2.2
255
-
256
- ### Patch Changes
257
-
258
- - [`4b31cefb`](https://github.com/statelyai/xstate/commit/4b31cefb3d3497e5515314046639df7e27dbe9e8) [#1780](https://github.com/statelyai/xstate/pull/1780) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with some external packages not being bundled correctly into the UMD bundles.
259
-
260
- ## 1.2.1
261
-
262
- ### Patch Changes
263
-
264
- - [`a16a5f2f`](https://github.com/statelyai/xstate/commit/a16a5f2ff5ba9d4d7834ec3ca2d0adecf5d6a870) [#1756](https://github.com/statelyai/xstate/pull/1756) Thanks [@dimitardanailov](https://github.com/dimitardanailov)! - Fixed an issue with `process` references not being removed correctly from the UMD bundles.
265
-
266
- ## 1.2.0
267
-
268
- ### Minor Changes
269
-
270
- - [`dd98296e`](https://github.com/statelyai/xstate/commit/dd98296e9fcbae905da2395e67e876e28be7c774) [#1738](https://github.com/statelyai/xstate/pull/1738) Thanks [@dimitardanailov](https://github.com/dimitardanailov)! - Added UMD bundle.
271
-
272
- ## 1.1.0
273
-
274
- ### Minor Changes
275
-
276
- - [`89f9c27c`](https://github.com/statelyai/xstate/commit/89f9c27c453dc56bdfdf49c8ea1f0f87ff1f9b67) [#1622](https://github.com/statelyai/xstate/pull/1622) Thanks [@davidkpiano](https://github.com/statelyai)! - Spawned/invoked actors and interpreters are now typed as extending `ActorRef` rather than `Actor` or `Interpreter`. This unification of types should make it more straightforward to provide actor types in React:
277
-
278
- ```ts
279
- import { ActorRef } from 'xstate';
280
- import { useActor } from '@xstate/react';
281
-
282
- const Child: React.FC<{ actorRef: ActorRef<SomeEvent, SomeEmitted> }> = ({
283
- actorRef
284
- }) => {
285
- // `state` is typed as `SomeEmitted`
286
- // `send` can be called with `SomeEvent` values
287
- const [state, send] = useActor(actorRef);
288
-
289
- // . ..
290
- };
291
- ```
292
-
293
- It's also easier to specify the type of a spawned/invoked machine with `ActorRefFrom`:
294
-
295
- ```ts
296
- import { createMachine, ActorRefFrom } from 'xstate';
297
- import { useActor } from '@xstate/react';
298
-
299
- const someMachine = createMachine<SomeContext, SomeEvent>({
300
- // ...
301
- });
302
-
303
- const Child: React.FC<{ someRef: ActorRefFrom<typeof someMachine> }> = ({
304
- someRef
305
- }) => {
306
- // `state` is typed as `State<SomeContext, SomeEvent>`
307
- // `send` can be called with `SomeEvent` values
308
- const [state, send] = useActor(someRef);
309
-
310
- // . ..
311
- };
312
- ```
313
-
314
- ## 1.0.3
315
-
316
- ### Patch Changes
317
-
318
- - [`27db2950`](https://github.com/statelyai/xstate/commit/27db295064d42cacb89ff10d55f39eb7609148e1) [#1636](https://github.com/statelyai/xstate/pull/1636) Thanks [@Andarist](https://github.com/Andarist)! - Allow React 17 in the specified peer dependency range.
319
-
320
- ## 1.0.2
321
-
322
- ### Patch Changes
323
-
324
- - [`c7927083`](https://github.com/statelyai/xstate/commit/c7927083a651e3c51952ade2ffda793df0391bf6) [#1516](https://github.com/statelyai/xstate/pull/1516) Thanks [@davidkpiano](https://github.com/statelyai)! - The `send` function returned from the `useService()` now can take two arguments (an event type and payload), to match the behavior of `@xstate/react` version 0.x.
325
-
326
- * [`db77623a`](https://github.com/statelyai/xstate/commit/db77623a48955d762cffa9b624f438220add5eed) [#1516](https://github.com/statelyai/xstate/pull/1516) Thanks [@davidkpiano](https://github.com/statelyai)! - The `send` value returned from the `useService()` hook will now accept a payload, which matches the signature of the `send` value returned from the `useMachine()` hook:
327
-
328
- ```js
329
- const [state, send] = useService(someService);
330
-
331
- // ...
332
-
333
- // this is OK:
334
- send('ADD', { value: 3 });
335
-
336
- // which is equivalent to:
337
- send({ type: 'ADD', value: 3 });
338
- ```
339
-
340
- - [`93f6db02`](https://github.com/statelyai/xstate/commit/93f6db02a2d56ec997198ddef0af3d7730bb79bb) [#1594](https://github.com/statelyai/xstate/pull/1594) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with internal `setState` in `useService` being called with 2 arguments instead of 1.
341
-
342
- * [`72b0880e`](https://github.com/statelyai/xstate/commit/72b0880e6444ae009adca72088872bb5c0760ce3) [#1504](https://github.com/statelyai/xstate/pull/1504) Thanks [@Andarist](https://github.com/Andarist)! - Fixed issue with `useService` returning an initial state for services in their final states.
343
-
344
- ## 1.0.1
345
-
346
- ### Patch Changes
347
-
348
- - [`c0bd0407`](https://github.com/statelyai/xstate/commit/c0bd040767dcac20ed690e49a8725b4f1011dd5d) [#1493](https://github.com/statelyai/xstate/pull/1493) Thanks [@davidkpiano](https://github.com/statelyai)! - There will now be a descriptive error when trying to use an actor-like object in the `useService()` hook, where `useActor()` should be preferred:
349
-
350
- > Attempted to use an actor-like object instead of a service in the useService() hook. Please use the useActor() hook instead.
351
-
352
- All notable changes to this project will be documented in this file.
353
-
354
- ## [1.0.0-rc.7]
355
-
356
- - The `machine` passed into `useMachine(machine)` can now be passed in lazily:
357
-
358
- ```js
359
- const [state, send] = useMachine(() => createMachine(/* ... */));
360
-
361
- // ...
362
- ```
363
-
364
- This has the benefit of avoiding unnecessary machine initializations whenever the component rerenders.
365
-
366
- - The `useActor` hook now takes a second argument: `getSnapshot` which is a function that should return the last emitted value:
367
-
368
- ```js
369
- const [state, send] = useActor(someActor, actor => actor.current);
370
- ```
371
-
372
- ## [1.0.0-rc.6]
373
-
374
- ## [1.0.0-rc.5]
375
-
376
- - You can now schedule actions in `useEffect` or `useLayoutEffect` via:
377
- - `asEffect` - queues the action to be executed in `useEffect`
378
- - `asLayoutEffect` - queues the action to be executed in `useLayoutEffect`
379
-
380
- ```jsx
381
- import { createMachine } from 'xstate';
382
- import { useMachine, asEffect } from '@xstate/react';
383
-
384
- const machine = createMachine({
385
- initial: 'focused',
386
- states: {
387
- focused: {
388
- entry: 'focus'
389
- }
390
- }
391
- });
392
-
393
- const Input = () => {
394
- const inputRef = useRef(null);
395
- const [state, send] = useMachine(machine, {
396
- actions: {
397
- focus: asEffect(() => {
398
- inputRef.current && inputRef.current.focus();
399
- })
400
- }
401
- });
402
-
403
- return <input ref={inputRef} />;
404
- };
405
- ```
406
-
407
- ## [0.8.1]
408
-
409
- - Services are now kept up to date
410
-
411
- ## [0.8.0]
412
-
413
- - The `useActor()` hook is now available.
414
- - Support for persisted states
415
-
416
- ## [0.7.1]
417
-
418
- - Actions passed into `useMachine(..., { actions: { ... } })` will now be kept up-to-date and no longer reference stale data.
419
-
420
- ## [0.7.0]
421
-
422
- ### Added
423
-
424
- - Machine configuration can now be merged into the options argument of `useMachine(machine, options)`. The following Machine Config options are available: `guards`, `actions`, `activities`, `services`, `delays` and `updates` (NOTE: `context` option is not implemented yet, use `withContext` or `withConfig` instead for the meantime)
425
-
426
- ```js
427
- const [current, send] = useMachine(someMachine, {
428
- actions: {
429
- doThing: doTheThing
430
- },
431
- services: {
432
- /* ... */
433
- },
434
- guards: {
435
- /* ... */
436
- }
437
- // ... etc.
438
- });
439
- ```
@@ -1,3 +0,0 @@
1
- import { EventObject, Interpreter } from 'xstate';
2
- export declare function useReactEffectActions<TContext, TEvent extends EventObject>(service: Interpreter<TContext, any, TEvent, any>): void;
3
- //# sourceMappingURL=useReactEffectActions.d.ts.map
@@ -1,76 +0,0 @@
1
- var __read = (this && this.__read) || function (o, n) {
2
- var m = typeof Symbol === "function" && o[Symbol.iterator];
3
- if (!m) return o;
4
- var i = m.call(o), r, ar = [], e;
5
- try {
6
- while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
7
- }
8
- catch (error) { e = { error: error }; }
9
- finally {
10
- try {
11
- if (r && !r.done && (m = i["return"])) m.call(i);
12
- }
13
- finally { if (e) throw e.error; }
14
- }
15
- return ar;
16
- };
17
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
18
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
19
- if (ar || !(i in from)) {
20
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
21
- ar[i] = from[i];
22
- }
23
- }
24
- return to.concat(ar || Array.prototype.slice.call(from));
25
- };
26
- import { useEffect, useRef } from 'react';
27
- import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
28
- import { ReactEffectType } from './types';
29
- import { partition } from './utils';
30
- function executeEffect(action, state) {
31
- var exec = action.exec;
32
- var originalExec = exec(state.context, state._event.data, {
33
- action: action,
34
- state: state,
35
- _event: state._event
36
- });
37
- originalExec();
38
- }
39
- export function useReactEffectActions(service) {
40
- var effectActionsRef = useRef([]);
41
- var layoutEffectActionsRef = useRef([]);
42
- useIsomorphicLayoutEffect(function () {
43
- var sub = service.subscribe(function (currentState) {
44
- var _a, _b;
45
- if (currentState.actions.length) {
46
- var reactEffectActions = currentState.actions.filter(function (action) {
47
- return (typeof action.exec === 'function' &&
48
- '__effect' in action.exec);
49
- });
50
- var _c = __read(partition(reactEffectActions, function (action) {
51
- return action.exec.__effect === ReactEffectType.Effect;
52
- }), 2), effectActions = _c[0], layoutEffectActions = _c[1];
53
- (_a = effectActionsRef.current).push.apply(_a, __spreadArray([], __read(effectActions.map(function (effectAction) { return [effectAction, currentState]; })), false));
54
- (_b = layoutEffectActionsRef.current).push.apply(_b, __spreadArray([], __read(layoutEffectActions.map(function (layoutEffectAction) { return [layoutEffectAction, currentState]; })), false));
55
- }
56
- });
57
- return function () {
58
- sub.unsubscribe();
59
- };
60
- }, []);
61
- // this is somewhat weird - this should always be flushed within useLayoutEffect
62
- // but we don't want to receive warnings about useLayoutEffect being used on the server
63
- // so we have to use `useIsomorphicLayoutEffect` to silence those warnings
64
- useIsomorphicLayoutEffect(function () {
65
- while (layoutEffectActionsRef.current.length) {
66
- var _a = __read(layoutEffectActionsRef.current.shift(), 2), layoutEffectAction = _a[0], effectState = _a[1];
67
- executeEffect(layoutEffectAction, effectState);
68
- }
69
- }); // https://github.com/statelyai/xstate/pull/1202#discussion_r429677773
70
- useEffect(function () {
71
- while (effectActionsRef.current.length) {
72
- var _a = __read(effectActionsRef.current.shift(), 2), effectAction = _a[0], effectState = _a[1];
73
- executeEffect(effectAction, effectState);
74
- }
75
- });
76
- }
@@ -1,3 +0,0 @@
1
- import { EventObject, Interpreter } from 'xstate';
2
- export declare function useReactEffectActions<TContext, TEvent extends EventObject>(service: Interpreter<TContext, any, TEvent, any>): void;
3
- //# sourceMappingURL=useReactEffectActions.d.ts.map
@@ -1,80 +0,0 @@
1
- "use strict";
2
- var __read = (this && this.__read) || function (o, n) {
3
- var m = typeof Symbol === "function" && o[Symbol.iterator];
4
- if (!m) return o;
5
- var i = m.call(o), r, ar = [], e;
6
- try {
7
- while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
8
- }
9
- catch (error) { e = { error: error }; }
10
- finally {
11
- try {
12
- if (r && !r.done && (m = i["return"])) m.call(i);
13
- }
14
- finally { if (e) throw e.error; }
15
- }
16
- return ar;
17
- };
18
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
19
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
20
- if (ar || !(i in from)) {
21
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
22
- ar[i] = from[i];
23
- }
24
- }
25
- return to.concat(ar || Array.prototype.slice.call(from));
26
- };
27
- Object.defineProperty(exports, "__esModule", { value: true });
28
- exports.useReactEffectActions = void 0;
29
- var react_1 = require("react");
30
- var use_isomorphic_layout_effect_1 = require("use-isomorphic-layout-effect");
31
- var types_1 = require("./types");
32
- var utils_1 = require("./utils");
33
- function executeEffect(action, state) {
34
- var exec = action.exec;
35
- var originalExec = exec(state.context, state._event.data, {
36
- action: action,
37
- state: state,
38
- _event: state._event
39
- });
40
- originalExec();
41
- }
42
- function useReactEffectActions(service) {
43
- var effectActionsRef = (0, react_1.useRef)([]);
44
- var layoutEffectActionsRef = (0, react_1.useRef)([]);
45
- (0, use_isomorphic_layout_effect_1.default)(function () {
46
- var sub = service.subscribe(function (currentState) {
47
- var _a, _b;
48
- if (currentState.actions.length) {
49
- var reactEffectActions = currentState.actions.filter(function (action) {
50
- return (typeof action.exec === 'function' &&
51
- '__effect' in action.exec);
52
- });
53
- var _c = __read((0, utils_1.partition)(reactEffectActions, function (action) {
54
- return action.exec.__effect === types_1.ReactEffectType.Effect;
55
- }), 2), effectActions = _c[0], layoutEffectActions = _c[1];
56
- (_a = effectActionsRef.current).push.apply(_a, __spreadArray([], __read(effectActions.map(function (effectAction) { return [effectAction, currentState]; })), false));
57
- (_b = layoutEffectActionsRef.current).push.apply(_b, __spreadArray([], __read(layoutEffectActions.map(function (layoutEffectAction) { return [layoutEffectAction, currentState]; })), false));
58
- }
59
- });
60
- return function () {
61
- sub.unsubscribe();
62
- };
63
- }, []);
64
- // this is somewhat weird - this should always be flushed within useLayoutEffect
65
- // but we don't want to receive warnings about useLayoutEffect being used on the server
66
- // so we have to use `useIsomorphicLayoutEffect` to silence those warnings
67
- (0, use_isomorphic_layout_effect_1.default)(function () {
68
- while (layoutEffectActionsRef.current.length) {
69
- var _a = __read(layoutEffectActionsRef.current.shift(), 2), layoutEffectAction = _a[0], effectState = _a[1];
70
- executeEffect(layoutEffectAction, effectState);
71
- }
72
- }); // https://github.com/statelyai/xstate/pull/1202#discussion_r429677773
73
- (0, react_1.useEffect)(function () {
74
- while (effectActionsRef.current.length) {
75
- var _a = __read(effectActionsRef.current.shift(), 2), effectAction = _a[0], effectState = _a[1];
76
- executeEffect(effectAction, effectState);
77
- }
78
- });
79
- }
80
- exports.useReactEffectActions = useReactEffectActions;