{{ state.context.error.message }}
``` -------------------------------- ### Specify XState Machine Options with .withConfig Source: https://stately.ai/docs/xstate-v4/xstate/xstate/basics/options This example demonstrates how to apply machine options dynamically after machine creation using the `.withConfig` method. This allows for flexible option definition separate from the initial machine configuration. ```javascript import { createMachine } from 'xstate'; const machine = createMachine({}); // ---cut--- machine.withConfig({ actions: {}, // `actors` in v5 services: {}, guards: {}, delays: {}, }); ``` -------------------------------- ### Basic useInterpret Hook in Vue Source: https://stately.ai/docs/xstate-v4/xstate/xstate/packages/xstate-vue Demonstrates the fundamental usage of the `useInterpret` composition function to interpret an XState machine within a Vue component's `setup` function, returning the service. ```Vue.js import { useInterpret } from '@xstate/vue'; import { someMachine } from '../path/to/someMachine'; export default { setup() { const service = useInterpret(someMachine); return service; }, }; ``` -------------------------------- ### Install XState and React Integration Package Source: https://stately.ai/docs/xstate-v4/xstate/xstate/running-machines/react Instructions to install the `xstate` core library and the `@xstate/react` package using npm, which are essential for integrating XState state machines into React applications. ```Shell npm install xstate @xstate/react ``` -------------------------------- ### XState Machine with Wildcard Transition Example Source: https://stately.ai/docs/xstate-v4/xstate/xstate/states/parent-and-child-states This XState machine example illustrates the behavior of wildcard transitions (`*`) in conjunction with specific event handlers. It shows how the wildcard catches unhandled events at the machine level, while more specific `on` handlers at the machine or state level take precedence, demonstrating when the wildcard is triggered or ignored based on the current state and event specificity. ```javascript import { createMachine } from 'xstate'; const machine = createMachine({ initial: 'inactive', on: { '*': { actions: 'logEventToConsole', }, FOCUS: { actions: 'onFocus', }, }, states: { inactive: { on: { HOVER: { actions: 'onHover', }, }, }, active: {}, }, }); ``` -------------------------------- ### Using XState Services as Svelte Stores Source: https://stately.ai/docs/xstate-v4/xstate/xstate/packages/xstate-svelte This example illustrates how XState services implement the Svelte store contract, allowing direct access and automatic subscriptions. It shows a `toggleMachine` defined in `service.js` and how its `toggleService` is imported and used in `App.svelte` to control button text based on the service's current state. ```javascript // service.js import { createMachine, interpret } from 'xstate'; const toggleMachine = createMachine({ id: 'toggle', initial: 'inactive', states: { inactive: { on: { TOGGLE: 'active' }, }, active: { on: { TOGGLE: 'inactive' }, }, }, }); export const toggleService = interpret(toggleMachine).start(); ``` ```svelte // App.svelte ``` -------------------------------- ### Define XState Toggle Machine Source: https://stately.ai/docs/xstate-v4/xstate/xstate/packages/xstate-test Illustrates how to create a basic XState machine with 'inactive' and 'active' states and a 'TOGGLE' event. ```javascript import { createMachine } from 'xstate'; const toggleMachine = createMachine({ id: 'toggle', initial: 'inactive', states: { inactive: { on: { TOGGLE: 'active', }, }, active: { on: { TOGGLE: 'inactive', }, }, }, }); ``` -------------------------------- ### Implement XState Machine with Immer `assign` and `createUpdater` Source: https://stately.ai/docs/xstate-v4/xstate/xstate/packages/xstate-immer This example demonstrates how to integrate `@xstate/immer` utilities, `assign` and `createUpdater`, into an XState machine. It shows immutable context updates for a `count` property using `assign` and a `level` property using `createUpdater` within a toggle machine, illustrating state transitions and context changes. ```javascript import { createMachine, interpret } from 'xstate'; import { assign, createUpdater } from '@xstate/immer'; const levelUpdater = createUpdater('UPDATE_LEVEL', (ctx, { input }) => { ctx.level = input; }); const toggleMachine = createMachine({ id: 'toggle', context: { count: 0, level: 0, }, initial: 'inactive', states: { inactive: { on: { TOGGLE: { target: 'active', // Immutably update context the same "mutable" // way as you would do with Immer! actions: assign((ctx) => ctx.count++), }, }, }, active: { on: { TOGGLE: { target: 'inactive', }, // Use the updater for more convenience: [levelUpdater.type]: { actions: levelUpdater.action, }, }, }, }, }); const toggleService = interpret(toggleMachine) .onTransition((state) => { console.log(state.context); }) .start(); toggleService.send('TOGGLE'); // { count: 1, level: 0 } toggleService.send(levelUpdater.update(9)); // { count: 1, level: 9 } toggleService.send('TOGGLE'); // { count: 2, level: 9 } toggleService.send(levelUpdater.update(-100)); // Notice how the level is not updated in 'inactive' state: // { count: 2, level: 9 } ``` -------------------------------- ### useInterpret with Options and State Listener Source: https://stately.ai/docs/xstate-v4/xstate/xstate/packages/xstate-vue Illustrates how to use `useInterpret` with additional configuration options (e.g., `actions`) and a listener function to subscribe to and log state changes, providing dynamic interaction with the machine. ```Vue.js import { useInterpret } from '@xstate/vue'; import { someMachine } from '../path/to/someMachine'; export default { setup() { const service = useInterpret( someMachine, { actions: { /* ... */ }, }, (state) => { // subscribes to state changes console.log(state.value); }, ); // ... }, }; ``` -------------------------------- ### XState TestModel: Get Plan From Events Source: https://stately.ai/docs/xstate-v4/xstate/xstate/packages/xstate-test Generates a single testing plan with a single path based on a sequence of events. Throws an error if the final state does not match the target option. ```APIDOC testModel.getPlanFromEvents(events, options) events: EventObject[] - The sequence of events to create the plan options: { target: string } - An object with a `target` property that should match the target state of the events Returns: array - An array with a single testing plan with a single path generated from the events. ``` -------------------------------- ### Create XState Test Model with Events Source: https://stately.ai/docs/xstate-v4/xstate/xstate/packages/xstate-test Shows how to create a test model from an XState machine using `@xstate/test`'s `createModel` and define event execution logic with `withEvents`. ```javascript import { createMachine } from 'xstate'; import { createModel } from '@xstate/test'; const toggleMachine = createMachine(/* ... */); const toggleModel = createModel(toggleMachine).withEvents({ TOGGLE: { exec: async (page) => { await page.click('input'); }, }, }); ``` -------------------------------- ### Fully Typed XState Form Machine with createUpdater (TypeScript) Source: https://stately.ai/docs/xstate-v4/xstate/xstate/packages/xstate-immer Provides a comprehensive example of an XState machine for a form, demonstrating the full type-safety integration of `createUpdater` and `ImmerUpdateEvent`. It defines context and event interfaces, creates typed updaters, and configures the machine with a schema for type inference. ```typescript import { createMachine } from 'xstate'; import { createUpdater, ImmerUpdateEvent } from '@xstate/immer'; interface FormContext { name: string; age: number | undefined; } type NameUpdateEvent = ImmerUpdateEvent<'UPDATE_NAME', string>; type AgeUpdateEvent = ImmerUpdateEvent<'UPDATE_AGE', number>; const nameUpdater = createUpdater