xstate 6.0.0-alpha.7 โ 6.0.0-alpha.70
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/README.md +178 -67
- package/bin/xstate.js +36 -0
- package/dist/createActor-11e36865.development.cjs.js +7043 -0
- package/dist/createActor-54296cf2.cjs.js +6820 -0
- package/dist/createActor-9529bbaf.development.esm.js +6933 -0
- package/dist/createActor-eaa95ae0.esm.js +6711 -0
- package/dist/declarations/src/SimulatedClock.d.ts +2 -1
- package/dist/declarations/src/State.d.ts +66 -5
- package/dist/declarations/src/StateMachine.d.ts +133 -30
- package/dist/declarations/src/StateNode.d.ts +21 -16
- package/dist/declarations/src/actions.d.ts +11 -6
- package/dist/declarations/src/actors/callback.d.ts +11 -2
- package/dist/declarations/src/actors/index.d.ts +6 -5
- package/dist/declarations/src/actors/listener.d.ts +8 -3
- package/dist/declarations/src/actors/logic.d.ts +42 -52
- package/dist/declarations/src/actors/observable.d.ts +15 -2
- package/dist/declarations/src/actors/promise.d.ts +90 -22
- package/dist/declarations/src/actors/subscription.d.ts +9 -3
- package/dist/declarations/src/assert.d.ts +1 -0
- package/dist/declarations/src/base.types.d.ts +102 -0
- package/dist/declarations/src/createActor.d.ts +104 -27
- package/dist/declarations/src/createMachine.d.ts +37 -16
- package/dist/declarations/src/delay.d.ts +8 -0
- package/dist/declarations/src/durable/index.d.ts +222 -0
- package/dist/declarations/src/effectDescriptor.d.ts +95 -0
- package/dist/declarations/src/eventTypes.d.ts +9 -0
- package/dist/declarations/src/fsm/index.d.ts +2 -0
- package/dist/declarations/src/fsm.d.ts +169 -0
- package/dist/declarations/src/graph/adjacency.d.ts +6 -3
- package/dist/declarations/src/graph/graph.d.ts +6 -3
- package/dist/declarations/src/graph/index.d.ts +2 -3
- package/dist/declarations/src/graph/pathFromEvents.d.ts +5 -2
- package/dist/declarations/src/graph/shortestPaths.d.ts +5 -3
- package/dist/declarations/src/graph/simplePaths.d.ts +5 -3
- package/dist/declarations/src/graph/types.d.ts +91 -58
- package/dist/declarations/src/hotSwap.d.ts +18 -0
- package/dist/declarations/src/index.d.ts +27 -19
- package/dist/declarations/src/inspection.d.ts +24 -1
- package/dist/declarations/src/machineFromJSON.d.ts +171 -0
- package/dist/declarations/src/machineVersion.types.d.ts +53 -0
- package/dist/declarations/src/machineVersions.d.ts +105 -0
- package/dist/declarations/src/mapState.d.ts +2 -0
- package/dist/declarations/src/runtimeHelpers.d.ts +43 -0
- package/dist/declarations/src/schema.types.d.ts +31 -4
- package/dist/declarations/src/serialize.d.ts +25 -27
- package/dist/declarations/src/setup.d.ts +1088 -145
- package/dist/declarations/src/spawn.d.ts +6 -4
- package/dist/declarations/src/stateUtils.d.ts +57 -14
- package/dist/declarations/src/system.d.ts +165 -17
- package/dist/declarations/src/systemTransition.d.ts +108 -0
- package/dist/declarations/src/toPromise.d.ts +1 -0
- package/dist/declarations/src/transition.d.ts +48 -10
- package/dist/declarations/src/transitionActions.d.ts +22 -4
- package/dist/declarations/src/typeUtils.d.ts +52 -0
- package/dist/declarations/src/types.d.ts +839 -297
- package/dist/declarations/src/types.v6.d.ts +543 -101
- package/dist/declarations/src/utils.d.ts +39 -8
- package/dist/declarations/src/validation/index.d.ts +49 -0
- package/dist/declarations/src/validation.types.d.ts +29 -0
- package/dist/declarations/src/waitFor.d.ts +1 -0
- package/dist/effectDescriptor-425644eb.cjs.js +351 -0
- package/dist/effectDescriptor-97802bb8.esm.js +343 -0
- package/dist/effectDescriptor-df768c71.development.esm.js +343 -0
- package/dist/effectDescriptor-fd2aaf45.development.cjs.js +351 -0
- package/dist/index-967ad7fa.esm.js +1069 -0
- package/dist/index-9826ee1d.development.cjs.js +1078 -0
- package/dist/index-986372f2.cjs.js +1078 -0
- package/dist/index-e30fe161.development.esm.js +1069 -0
- package/dist/schema.types-0ecd17b8.esm.js +71 -0
- package/dist/schema.types-15a68ddc.cjs.js +74 -0
- package/dist/schema.types-1c16f035.development.cjs.js +74 -0
- package/dist/schema.types-1cd4652e.development.esm.js +71 -0
- package/dist/xstate-actors.cjs.js +5 -6
- package/dist/xstate-actors.cjs.mjs +2 -4
- package/dist/xstate-actors.development.cjs.js +5 -6
- package/dist/xstate-actors.development.cjs.mjs +2 -4
- package/dist/xstate-actors.development.esm.js +2 -1
- package/dist/xstate-actors.esm.js +2 -1
- package/dist/xstate-actors.umd.min.js +1 -1
- package/dist/xstate-actors.umd.min.js.map +1 -1
- package/dist/xstate-durable.cjs.d.mts +2 -0
- package/dist/xstate-durable.cjs.d.ts +2 -0
- package/dist/xstate-durable.cjs.js +513 -0
- package/dist/xstate-durable.cjs.mjs +5 -0
- package/dist/xstate-durable.development.cjs.js +513 -0
- package/dist/xstate-durable.development.cjs.mjs +5 -0
- package/dist/xstate-durable.development.esm.js +507 -0
- package/dist/xstate-durable.esm.js +507 -0
- package/dist/xstate-durable.umd.min.js +2 -0
- package/dist/xstate-durable.umd.min.js.map +1 -0
- package/dist/xstate-fsm.cjs.d.mts +2 -0
- package/dist/xstate-fsm.cjs.d.ts +2 -0
- package/dist/xstate-fsm.cjs.js +111 -0
- package/dist/xstate-fsm.cjs.mjs +5 -0
- package/dist/xstate-fsm.development.cjs.js +111 -0
- package/dist/xstate-fsm.development.cjs.mjs +5 -0
- package/dist/xstate-fsm.development.esm.js +105 -0
- package/dist/xstate-fsm.esm.js +105 -0
- package/dist/xstate-fsm.umd.min.js +2 -0
- package/dist/xstate-fsm.umd.min.js.map +1 -0
- package/dist/xstate-graph.cjs.js +142 -453
- package/dist/xstate-graph.cjs.mjs +2 -5
- package/dist/xstate-graph.development.cjs.js +142 -453
- package/dist/xstate-graph.development.cjs.mjs +2 -5
- package/dist/xstate-graph.development.esm.js +140 -447
- package/dist/xstate-graph.esm.js +140 -447
- package/dist/xstate-graph.umd.min.js +1 -1
- package/dist/xstate-graph.umd.min.js.map +1 -1
- package/dist/xstate-validation.cjs.d.mts +2 -0
- package/dist/xstate-validation.cjs.d.ts +2 -0
- package/dist/xstate-validation.cjs.js +330 -0
- package/dist/xstate-validation.cjs.mjs +5 -0
- package/dist/xstate-validation.development.cjs.js +330 -0
- package/dist/xstate-validation.development.cjs.mjs +5 -0
- package/dist/xstate-validation.development.esm.js +324 -0
- package/dist/xstate-validation.esm.js +324 -0
- package/dist/xstate-validation.umd.min.js +2 -0
- package/dist/xstate-validation.umd.min.js.map +1 -0
- package/dist/xstate.cjs.js +3989 -1536
- package/dist/xstate.cjs.mjs +21 -13
- package/dist/xstate.development.cjs.js +4135 -1475
- package/dist/xstate.development.cjs.mjs +21 -13
- package/dist/xstate.development.esm.js +4097 -1445
- package/dist/xstate.esm.js +3883 -1438
- package/dist/xstate.umd.min.js +1 -1
- package/dist/xstate.umd.min.js.map +1 -1
- package/docs/actions.md +75 -0
- package/docs/actor-logic.md +250 -0
- package/docs/actors.md +64 -0
- package/docs/async-logic.md +75 -0
- package/docs/async-requests.md +157 -0
- package/docs/backend-workflows.md +121 -0
- package/docs/cancellation.md +42 -0
- package/docs/cheatsheet.md +561 -0
- package/docs/choice-states.md +109 -0
- package/docs/choose-xstate.md +47 -0
- package/docs/configuration.md +161 -0
- package/docs/context.md +63 -0
- package/docs/create-actor.md +156 -0
- package/docs/data-and-effects.md +48 -0
- package/docs/delays.md +81 -0
- package/docs/durable-execution.md +510 -0
- package/docs/emitted-events.md +127 -0
- package/docs/examples.md +75 -0
- package/docs/faq.md +60 -0
- package/docs/final-states.md +149 -0
- package/docs/forms-and-wizards.md +166 -0
- package/docs/frameworks.md +69 -0
- package/docs/fsm.md +164 -0
- package/docs/glossary.md +68 -0
- package/docs/guards.md +137 -0
- package/docs/history-states.md +159 -0
- package/docs/how-xstate-runs-machines.md +84 -0
- package/docs/index.md +71 -0
- package/docs/input-output.md +69 -0
- package/docs/inspect-actor-systems.md +116 -0
- package/docs/inspection.md +73 -0
- package/docs/internal-events.md +156 -0
- package/docs/invoke.md +354 -0
- package/docs/lifecycle-and-errors.md +48 -0
- package/docs/listen-and-subscribe.md +126 -0
- package/docs/model-based-testing.md +319 -0
- package/docs/modeling.md +40 -0
- package/docs/parallel-states.md +182 -0
- package/docs/persist-and-restore-actors.md +115 -0
- package/docs/persistence.md +325 -0
- package/docs/quick-start.md +55 -0
- package/docs/retries-and-timeouts.md +122 -0
- package/docs/route-states.md +104 -0
- package/docs/scxml.md +59 -0
- package/docs/selectors.md +99 -0
- package/docs/serialization.md +124 -0
- package/docs/setup-and-provide.md +271 -0
- package/docs/snapshots.md +134 -0
- package/docs/spawn.md +220 -0
- package/docs/state-input.md +162 -0
- package/docs/statecharts.md +54 -0
- package/docs/states-events-transitions.md +82 -0
- package/docs/states.md +168 -0
- package/docs/system-transitions.md +170 -0
- package/docs/systems.md +134 -0
- package/docs/testing.md +150 -0
- package/docs/timeouts.md +125 -0
- package/docs/transition-functions.md +87 -0
- package/docs/transitions.md +185 -0
- package/docs/troubleshooting.md +48 -0
- package/docs/tutorial.md +481 -0
- package/docs/typescript.md +211 -0
- package/docs/typestates.md +110 -0
- package/docs/utilities.md +39 -0
- package/docs/why-state-machines.md +59 -0
- package/docs/xstate-v5-to-v6.md +1756 -0
- package/docs/your-first-machine.md +79 -0
- package/durable/package.json +8 -0
- package/fsm/package.json +8 -0
- package/package.json +56 -10
- package/validation/package.json +8 -0
- package/actions/package.json +0 -8
- package/dev/package.json +0 -8
- package/dist/StateMachine-1ff90553.esm.js +0 -729
- package/dist/StateMachine-2b259bff.development.esm.js +0 -746
- package/dist/StateMachine-6673bf76.cjs.js +0 -732
- package/dist/StateMachine-68fe6077.development.cjs.js +0 -749
- package/dist/declarations/src/createMachineFromConfig.d.ts +0 -177
- package/dist/declarations/src/getNextSnapshot.d.ts +0 -37
- package/dist/declarations/src/graph/TestModel.d.ts +0 -70
- package/dist/declarations/src/graph/pathGenerators.d.ts +0 -4
- package/dist/index-87499be0.cjs.js +0 -4415
- package/dist/index-9594f050.development.esm.js +0 -4399
- package/dist/index-aaf74d09.esm.js +0 -4360
- package/dist/index-b063a967.development.cjs.js +0 -4454
- package/guards/package.json +0 -8
- package/invoke/package.json +0 -4
package/README.md
CHANGED
|
@@ -1,3 +1,73 @@
|
|
|
1
|
+
# XState v6
|
|
2
|
+
|
|
3
|
+
This package contains **XState v6 alpha**. Its APIs differ from v5.
|
|
4
|
+
|
|
5
|
+
<!-- bundled documentation generated by scripts/build-package-docs.mjs from docs/meta.json -->
|
|
6
|
+
|
|
7
|
+
Before writing code with an installed package, read `docs/index.md` beside this
|
|
8
|
+
README, usually `node_modules/xstate/docs/index.md`. These bundled docs match the
|
|
9
|
+
installed package version.
|
|
10
|
+
|
|
11
|
+
Online, start with the [quick start](https://github.com/statelyai/xstate/blob/next/docs/quick-start.md)
|
|
12
|
+
or the [v5 to v6 migration guide](https://github.com/statelyai/xstate/blob/next/docs/xstate-v5-to-v6.md).
|
|
13
|
+
|
|
14
|
+
<!-- v6 authoring replacements from src/index.ts, src/transitionActions.ts and src/types.ts -->
|
|
15
|
+
|
|
16
|
+
| XState v5 | XState v6 |
|
|
17
|
+
| --- | --- |
|
|
18
|
+
| `assign(...)` | Return a shallow `{ context: { ... } }` patch from a transition, entry or exit function. |
|
|
19
|
+
| `fromPromise(fn)` | `createAsyncLogic({ run: fn })` from `xstate`. |
|
|
20
|
+
| `types: {} as { ... }` | `schemas` with `types<T>()` for type-only schemas or Standard Schema for runtime schemas. |
|
|
21
|
+
| `{ target, guard, actions }` | A transition function that checks its condition and returns `{ target, context }`; queue effects with `enq`. |
|
|
22
|
+
|
|
23
|
+
<!-- quick start using public createMachine and createActor exports from src/index.ts -->
|
|
24
|
+
|
|
25
|
+
## Quick start
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install xstate@alpha
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
```ts
|
|
32
|
+
import { createMachine, createActor } from 'xstate';
|
|
33
|
+
|
|
34
|
+
// State machine
|
|
35
|
+
const toggleMachine = createMachine({
|
|
36
|
+
id: 'toggle',
|
|
37
|
+
initial: 'inactive',
|
|
38
|
+
context: {
|
|
39
|
+
count: 0
|
|
40
|
+
},
|
|
41
|
+
states: {
|
|
42
|
+
inactive: {
|
|
43
|
+
on: {
|
|
44
|
+
TOGGLE: { target: 'active' }
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
active: {
|
|
48
|
+
entry: ({ context }) => ({
|
|
49
|
+
context: { count: context.count + 1 }
|
|
50
|
+
}),
|
|
51
|
+
on: {
|
|
52
|
+
TOGGLE: { target: 'inactive' }
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
// Actor (instance of the machine logic, like a store)
|
|
59
|
+
const toggleActor = createActor(toggleMachine);
|
|
60
|
+
toggleActor.subscribe((state) => console.log(state.value, state.context));
|
|
61
|
+
toggleActor.start();
|
|
62
|
+
// => logs 'inactive', { count: 0 }
|
|
63
|
+
|
|
64
|
+
toggleActor.send({ type: 'TOGGLE' });
|
|
65
|
+
// => logs 'active', { count: 1 }
|
|
66
|
+
|
|
67
|
+
toggleActor.send({ type: 'TOGGLE' });
|
|
68
|
+
// => logs 'inactive', { count: 1 }
|
|
69
|
+
```
|
|
70
|
+
|
|
1
71
|
<p align="center">
|
|
2
72
|
<br />
|
|
3
73
|
|
|
@@ -6,20 +76,91 @@
|
|
|
6
76
|
<img alt="XState logotype" src="https://raw.githubusercontent.com/statelyai/public-assets/main/logos/xstate-logo-black-nobg.svg" width="200">
|
|
7
77
|
</picture>
|
|
8
78
|
<br />
|
|
9
|
-
<strong>Actor-based state management & orchestration for complex app logic.</strong> <a href="https://
|
|
79
|
+
<strong>Actor-based state management & orchestration for complex app logic.</strong> <a href="https://github.com/statelyai/xstate/tree/next/docs">โ Documentation</a>
|
|
10
80
|
<br />
|
|
11
81
|
<br />
|
|
12
82
|
</p>
|
|
13
83
|
|
|
14
|
-
|
|
84
|
+
<!-- runtime dependencies and public entry points from package.json -->
|
|
85
|
+
|
|
86
|
+
XState is a state management and orchestration solution for JavaScript and TypeScript apps. The `xstate` package has _zero_ runtime dependencies. XState is useful for frontend and backend application logic.
|
|
15
87
|
|
|
16
88
|
It uses event-driven programming, state machines, statecharts, and the actor model to handle complex logic in predictable, robust, and visual ways. XState provides a powerful and flexible way to manage application and workflow state by allowing developers to model logic as actors and state machines.
|
|
17
89
|
|
|
90
|
+
<!-- experimental whole-system transitions from packages/core/src/systemTransition.ts -->
|
|
91
|
+
|
|
92
|
+
For pure actor-system simulation, `initialSystemTransition`, `systemTransition`
|
|
93
|
+
and `advanceSystemTime` return an immutable system snapshot and external effects
|
|
94
|
+
as data. Branch or replay actors, messages and virtual timers without starting live
|
|
95
|
+
actors. See [pure system transitions](https://github.com/statelyai/xstate/blob/next/docs/system-transitions.md).
|
|
96
|
+
|
|
97
|
+
<!-- durable execution and checkpoint restoration from packages/core/src/durable/index.ts -->
|
|
98
|
+
|
|
99
|
+
For durable hosts, the experimental `xstate/durable` entry point provides
|
|
100
|
+
`createDurable`. Resume a checkpoint with `execution.restore(persistedSnapshot)`
|
|
101
|
+
and execute the returned effects to restart active embedded children and pending
|
|
102
|
+
timers without replaying entry actions. Await `executeEffects()` before persisting
|
|
103
|
+
to retain accepted timer deadlines. The host handles root error snapshots;
|
|
104
|
+
`run()` rejects with the root error. See [durable execution](https://github.com/statelyai/xstate/blob/next/docs/durable-execution.md).
|
|
105
|
+
|
|
106
|
+
<!-- state context refinements from packages/core/src/setup.ts and packages/core/src/State.ts -->
|
|
107
|
+
|
|
108
|
+
For [typestates](https://github.com/statelyai/xstate/blob/next/docs/typestates.md), declare state-level `schemas.context`
|
|
109
|
+
in `setup({ states })`. State functions receive narrowed context, transitions
|
|
110
|
+
check the target context requirements, and `snapshot.matches(...)` narrows
|
|
111
|
+
context when reading snapshots.
|
|
112
|
+
|
|
113
|
+
<!-- typed inline invocation from packages/core/src/setup.ts -->
|
|
114
|
+
|
|
115
|
+
Use `s.createInvoke({ src, input, onDone })` inline in `s.createMachine(...)` for an actor used in one state. It infers the actor's input and output and the enclosing state's narrowed context without registering that actor in `setup.actors`. See [typed inline invokes](https://github.com/statelyai/xstate/blob/next/docs/invoke.md#typed-inline-invokes).
|
|
116
|
+
|
|
117
|
+
Pass an async function directly as `src`, with `schemas.input`, `schemas.output`, and `schemas.error` on the same invoke. Output also infers from the async return when its schema is omitted. Existing logic values use their own schemas.
|
|
118
|
+
|
|
119
|
+
The helper requires input for actors whose input excludes `undefined`, and checks child IDs and source compatibility against `schemas.children` declared in the setup or machine.
|
|
120
|
+
|
|
121
|
+
<!-- graph traversal events from packages/core/src/graph/index.ts -->
|
|
122
|
+
|
|
123
|
+
Graph traversal requires samples for known event types with required payloads. Pass an `events` map such as `{ ADD: [{ value: 1 }, { value: 0 }] }`; each entry also accepts a snapshot callback returning nonempty payload cases. Maps preserve payload-free defaults, invoke completions, errors, and delayed events. Event arrays and callbacks returning events replace all defaults. Coverage remains sample-based. See [model-based testing](https://github.com/statelyai/xstate/blob/next/docs/model-based-testing.md).
|
|
124
|
+
|
|
125
|
+
<!-- JSON loading and runtime validation from packages/core/src/machineFromJSON.ts -->
|
|
126
|
+
|
|
127
|
+
Revive JSON definitions with `machineFromJSON(json, { schemas, validator, ...sources })` to restore runtime validation. The loader validates config keys and references. See [serialization](https://github.com/statelyai/xstate/blob/next/docs/serialization.md).
|
|
128
|
+
|
|
129
|
+
For flat finite state machines, `xstate/fsm` provides a tiny pure transition
|
|
130
|
+
table with context and TypeScript support:
|
|
131
|
+
|
|
132
|
+
<!-- public exports from packages/core/src/fsm/index.ts; exact capabilities documented in docs/fsm.md -->
|
|
133
|
+
|
|
134
|
+
```ts
|
|
135
|
+
import { createFSM } from 'xstate/fsm';
|
|
136
|
+
|
|
137
|
+
const machine = createFSM({
|
|
138
|
+
initial: 'inactive',
|
|
139
|
+
states: {
|
|
140
|
+
inactive: { on: { toggle: 'active' } },
|
|
141
|
+
active: { on: { toggle: 'inactive' } }
|
|
142
|
+
}
|
|
143
|
+
});
|
|
144
|
+
|
|
145
|
+
let state = machine.initialState;
|
|
146
|
+
[state] = machine.transition(state, { type: 'toggle' });
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
The FSM is also actor logic, so `createActor(machine)` from `xstate` runs it.
|
|
150
|
+
|
|
151
|
+
For typed context, event payloads, or state-specific context snapshots, use
|
|
152
|
+
`setup` and `types` from `xstate/fsm`. These schemas are type-only in this
|
|
153
|
+
subpath; use root `xstate` for runtime schema validation.
|
|
154
|
+
|
|
155
|
+
See the [exact supported surface](https://stately.ai/docs/fsm). Use the root `xstate`
|
|
156
|
+
entry point for compound or parallel statecharts, invocation, named sources,
|
|
157
|
+
runtime schemas, serialization and inspection.
|
|
158
|
+
|
|
18
159
|
### โจ Create state machines visually in Stately Studio โ [state.new](https://state.new)
|
|
19
160
|
|
|
20
161
|
---
|
|
21
162
|
|
|
22
|
-
๐ [Read the documentation](https://
|
|
163
|
+
๐ [Read the documentation](https://github.com/statelyai/xstate/tree/next/docs)
|
|
23
164
|
|
|
24
165
|
โก๏ธ [Create state machines with the Stately Editor](https://stately.ai/editor)
|
|
25
166
|
|
|
@@ -27,9 +168,13 @@ It uses event-driven programming, state machines, statecharts, and the actor mod
|
|
|
27
168
|
|
|
28
169
|
๐ Inspired by the [SCXML specification](https://www.w3.org/TR/scxml/)
|
|
29
170
|
|
|
171
|
+
<!-- public SCXML entry point from packages/xstate-scxml/src/index.ts -->
|
|
172
|
+
|
|
173
|
+
Create machines from SCXML documents with the separate [`@xstate/scxml`](https://www.npmjs.com/package/@xstate/scxml) package. See the [SCXML guide](https://github.com/statelyai/xstate/blob/next/docs/scxml.md).
|
|
174
|
+
|
|
30
175
|
๐ฌ Chat on the [Stately Discord Community](https://discord.gg/xstate)
|
|
31
176
|
|
|
32
|
-
โ๏ธ Browse through the many [XState examples](https://github.com/statelyai/xstate/tree/
|
|
177
|
+
โ๏ธ Browse through the many [XState examples](https://github.com/statelyai/xstate/tree/next/examples)
|
|
33
178
|
|
|
34
179
|
## Templates
|
|
35
180
|
|
|
@@ -44,14 +189,14 @@ Get started by forking one of these templates on CodeSandbox:
|
|
|
44
189
|
<tr>
|
|
45
190
|
<td>
|
|
46
191
|
|
|
47
|
-
[๐ค XState Template (CodeSandbox)](https://codesandbox.io/p/devbox/github/statelyai/xstate/tree/
|
|
192
|
+
[๐ค XState Template (CodeSandbox)](https://codesandbox.io/p/devbox/github/statelyai/xstate/tree/next/templates/vanilla-ts)
|
|
48
193
|
|
|
49
|
-
[](https://stackblitz.com/github/statelyai/xstate/tree/
|
|
194
|
+
[](https://stackblitz.com/github/statelyai/xstate/tree/next/templates/vanilla-ts?file=%2Fsrc%2FfeedbackMachine.ts)
|
|
50
195
|
|
|
51
196
|
</td>
|
|
52
197
|
<td>
|
|
53
198
|
|
|
54
|
-
- XState
|
|
199
|
+
- XState v6 alpha
|
|
55
200
|
- TypeScript
|
|
56
201
|
- _No framework_
|
|
57
202
|
|
|
@@ -61,15 +206,15 @@ Get started by forking one of these templates on CodeSandbox:
|
|
|
61
206
|
<tr>
|
|
62
207
|
<td>
|
|
63
208
|
|
|
64
|
-
[โ๏ธ XState + React Template (CodeSandbox)](https://codesandbox.io/p/devbox/github/statelyai/xstate/tree/
|
|
209
|
+
[โ๏ธ XState + React Template (CodeSandbox)](https://codesandbox.io/p/devbox/github/statelyai/xstate/tree/next/templates/react-ts)
|
|
65
210
|
|
|
66
|
-
[](https://stackblitz.com/github/statelyai/xstate/tree/
|
|
211
|
+
[](https://stackblitz.com/github/statelyai/xstate/tree/next/templates/react-ts?file=%2Fsrc%2FfeedbackMachine.ts)
|
|
67
212
|
|
|
68
213
|
</td>
|
|
69
214
|
<td>
|
|
70
215
|
|
|
71
216
|
- [React](https://react.dev/)
|
|
72
|
-
- XState
|
|
217
|
+
- XState v6 alpha
|
|
73
218
|
- TypeScript
|
|
74
219
|
|
|
75
220
|
</td>
|
|
@@ -78,15 +223,15 @@ Get started by forking one of these templates on CodeSandbox:
|
|
|
78
223
|
<tr>
|
|
79
224
|
<td>
|
|
80
225
|
|
|
81
|
-
[๐ XState + Vue Template (CodeSandbox)](https://codesandbox.io/p/devbox/github/statelyai/xstate/tree/
|
|
226
|
+
[๐ XState + Vue Template (CodeSandbox)](https://codesandbox.io/p/devbox/github/statelyai/xstate/tree/next/templates/vue-ts)
|
|
82
227
|
|
|
83
|
-
[](https://stackblitz.com/github/statelyai/xstate/tree/
|
|
228
|
+
[](https://stackblitz.com/github/statelyai/xstate/tree/next/templates/vue-ts?file=%2Fsrc%2FfeedbackMachine.ts)
|
|
84
229
|
|
|
85
230
|
</td>
|
|
86
231
|
<td>
|
|
87
232
|
|
|
88
233
|
- [Vue](https://vuejs.org/)
|
|
89
|
-
- XState
|
|
234
|
+
- XState v6 alpha
|
|
90
235
|
- TypeScript
|
|
91
236
|
|
|
92
237
|
</td>
|
|
@@ -95,15 +240,15 @@ Get started by forking one of these templates on CodeSandbox:
|
|
|
95
240
|
<tr>
|
|
96
241
|
<td>
|
|
97
242
|
|
|
98
|
-
[๐งก XState + Svelte Template (CodeSandbox)](https://codesandbox.io/p/devbox/github/statelyai/xstate/tree/
|
|
243
|
+
[๐งก XState + Svelte Template (CodeSandbox)](https://codesandbox.io/p/devbox/github/statelyai/xstate/tree/next/templates/svelte-ts)
|
|
99
244
|
|
|
100
|
-
[](https://stackblitz.com/github/statelyai/xstate/tree/
|
|
245
|
+
[](https://stackblitz.com/github/statelyai/xstate/tree/next/templates/svelte-ts?file=%2Fsrc%2FfeedbackMachine.ts)
|
|
101
246
|
|
|
102
247
|
</td>
|
|
103
248
|
<td>
|
|
104
249
|
|
|
105
250
|
- [Svelte](https://svelte.dev/)
|
|
106
|
-
- XState
|
|
251
|
+
- XState v6 alpha
|
|
107
252
|
- TypeScript
|
|
108
253
|
|
|
109
254
|
</td>
|
|
@@ -112,52 +257,6 @@ Get started by forking one of these templates on CodeSandbox:
|
|
|
112
257
|
</tbody>
|
|
113
258
|
</table>
|
|
114
259
|
|
|
115
|
-
## Super quick start
|
|
116
|
-
|
|
117
|
-
```bash
|
|
118
|
-
npm install xstate
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
```ts
|
|
122
|
-
import { createMachine, createActor } from 'xstate';
|
|
123
|
-
|
|
124
|
-
// State machine
|
|
125
|
-
const toggleMachine = createMachine({
|
|
126
|
-
id: 'toggle',
|
|
127
|
-
initial: 'inactive',
|
|
128
|
-
context: {
|
|
129
|
-
count: 0
|
|
130
|
-
},
|
|
131
|
-
states: {
|
|
132
|
-
inactive: {
|
|
133
|
-
on: {
|
|
134
|
-
TOGGLE: { target: 'active' }
|
|
135
|
-
}
|
|
136
|
-
},
|
|
137
|
-
active: {
|
|
138
|
-
entry: ({ context }) => ({
|
|
139
|
-
context: { count: context.count + 1 }
|
|
140
|
-
}),
|
|
141
|
-
on: {
|
|
142
|
-
TOGGLE: { target: 'inactive' }
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
});
|
|
147
|
-
|
|
148
|
-
// Actor (instance of the machine logic, like a store)
|
|
149
|
-
const toggleActor = createActor(toggleMachine);
|
|
150
|
-
toggleActor.subscribe((state) => console.log(state.value, state.context));
|
|
151
|
-
toggleActor.start();
|
|
152
|
-
// => logs 'inactive', { count: 0 }
|
|
153
|
-
|
|
154
|
-
toggleActor.send({ type: 'TOGGLE' });
|
|
155
|
-
// => logs 'active', { count: 1 }
|
|
156
|
-
|
|
157
|
-
toggleActor.send({ type: 'TOGGLE' });
|
|
158
|
-
// => logs 'inactive', { count: 1 }
|
|
159
|
-
```
|
|
160
|
-
|
|
161
260
|
## [Stately Studio](https://stately.ai)
|
|
162
261
|
|
|
163
262
|
- Visually create, edit, and collaborate on state machines
|
|
@@ -166,7 +265,7 @@ toggleActor.send({ type: 'TOGGLE' });
|
|
|
166
265
|
- Deploy to Stately Sky
|
|
167
266
|
- Generate & modify machines with Stately AI
|
|
168
267
|
|
|
169
|
-
<a href="stately.ai/registry/new?ref=github" title="Stately Studio">
|
|
268
|
+
<a href="https://stately.ai/registry/new?ref=github" title="Stately Studio">
|
|
170
269
|
<img src="https://github.com/statelyai/xstate/assets/1093738/74ed9cbc-b824-4ed7-a16d-f104947af8a7" alt="XState Viz" width="800" />
|
|
171
270
|
</a>
|
|
172
271
|
|
|
@@ -186,10 +285,10 @@ Read [๐ฝ the slides](http://slides.com/davidkhourshid/finite-state-machines) (
|
|
|
186
285
|
| Package | Description |
|
|
187
286
|
| ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
|
|
188
287
|
| ๐ค `xstate` | Core finite state machine and statecharts library + interpreter |
|
|
189
|
-
| [โ๏ธ `@xstate/react`](https://github.com/statelyai/xstate/tree/
|
|
190
|
-
| [๐ `@xstate/vue`](https://github.com/statelyai/xstate/tree/
|
|
191
|
-
| [๐ท `@xstate/svelte`](https://github.com/statelyai/xstate/tree/
|
|
192
|
-
| [๐ฅ `@xstate/solid`](https://github.com/statelyai/xstate/tree/
|
|
288
|
+
| [โ๏ธ `@xstate/react`](https://github.com/statelyai/xstate/tree/next/packages/xstate-react) | React hooks and utilities for using XState in React applications |
|
|
289
|
+
| [๐ `@xstate/vue`](https://github.com/statelyai/xstate/tree/next/packages/xstate-vue) | Vue composition functions and utilities for using XState in Vue applications |
|
|
290
|
+
| [๐ท `@xstate/svelte`](https://github.com/statelyai/xstate/tree/next/packages/xstate-svelte) | Svelte utilities for using XState in Svelte applications |
|
|
291
|
+
| [๐ฅ `@xstate/solid`](https://github.com/statelyai/xstate/tree/next/packages/xstate-solid) | Solid hooks and utilities for using XState in Solid applications |
|
|
193
292
|
|
|
194
293
|
## Finite State Machines
|
|
195
294
|
|
|
@@ -575,3 +674,15 @@ For these reasons, it is impractical for our team to be bound by decisions taken
|
|
|
575
674
|
### Packages
|
|
576
675
|
|
|
577
676
|
Most of the packages in the XState family declare a peer dependency on XState itself. Weโll be cautious about maintaining compatibility with already-released packages when releasing a new version of XState, **but** each release of packages depending on XState will always adjust the declared peer dependency range to include the latest version of XState. For example, you should always be able to update `xstate` without `@xstate/react`. But when you update `@xstate/react`, we highly recommend updating `xstate` too.
|
|
677
|
+
|
|
678
|
+
<!-- public input validation contract from src/StateMachine.ts -->
|
|
679
|
+
Validate external input with `machine.eventSchema` before `actor.send()`.
|
|
680
|
+
It validates complete public events, excludes internal/runtime events, and allows
|
|
681
|
+
explicitly configured routes. Payload checks require runtime schemas;
|
|
682
|
+
`types<T>()` supplies types only. See [public input validation](https://github.com/statelyai/xstate/blob/next/docs/internal-events.md#validating-public-input).
|
|
683
|
+
|
|
684
|
+
<!-- entry effects and terminal transition behavior from packages/core/src/stateUtils.ts and transitionActions.ts -->
|
|
685
|
+
|
|
686
|
+
Use the `enq` argument in transition, entry and exit functions to queue effects. Return context or child patches from those functions; the return value of an enqueued effect is ignored, with a development warning. See [actions](https://github.com/statelyai/xstate/blob/next/docs/actions.md).
|
|
687
|
+
|
|
688
|
+
For actors that are done, stopped or failed, pure transitions return the same snapshot and no effects, and `snapshot.can(...)` returns `false`. See [snapshots](https://github.com/statelyai/xstate/blob/next/docs/snapshots.md) and [states](https://github.com/statelyai/xstate/blob/next/docs/states.md).
|
package/bin/xstate.js
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
// Lightweight `xstate` CLI. Heavy commands are delegated to dedicated
|
|
3
|
+
// packages fetched on demand so the core package stays dependency-free.
|
|
4
|
+
const { spawnSync } = require('child_process');
|
|
5
|
+
|
|
6
|
+
const [command, ...rest] = process.argv.slice(2);
|
|
7
|
+
|
|
8
|
+
switch (command) {
|
|
9
|
+
case 'migrate': {
|
|
10
|
+
// Delegates to @xstate/codemod (ts-morph based v5 โ v6 codemods).
|
|
11
|
+
const result = spawnSync(
|
|
12
|
+
process.platform === 'win32' ? 'npx.cmd' : 'npx',
|
|
13
|
+
['-y', '@xstate/codemod', 'migrate', ...rest],
|
|
14
|
+
{ stdio: 'inherit' }
|
|
15
|
+
);
|
|
16
|
+
process.exit(result.status ?? 1);
|
|
17
|
+
break;
|
|
18
|
+
}
|
|
19
|
+
case '--help':
|
|
20
|
+
case 'help':
|
|
21
|
+
case undefined:
|
|
22
|
+
console.log(
|
|
23
|
+
[
|
|
24
|
+
'Usage: xstate <command>',
|
|
25
|
+
'',
|
|
26
|
+
'Commands:',
|
|
27
|
+
' migrate [globs...] [--dry] Migrate source files to the current XState version',
|
|
28
|
+
' (delegates to @xstate/codemod)'
|
|
29
|
+
].join('\n')
|
|
30
|
+
);
|
|
31
|
+
process.exit(command ? 0 : 1);
|
|
32
|
+
break;
|
|
33
|
+
default:
|
|
34
|
+
console.error(`Unknown command: ${command}`);
|
|
35
|
+
process.exit(1);
|
|
36
|
+
}
|