javascript / expert
Snippet
Deterministic State Machine Transitions via Generator Iterators in Svelte Context API
Generators enable bidirectional control flow execution for Svelte multi-step wizard workflows, allowing step transitions to pause cleanly until component user input is yielded back.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
export function* createCheckoutStepSequence() {const cartValid = yield 'CART_REVIEW';if (!cartValid) return 'ABORTED';const paymentApproved = yield 'PAYMENT_INPUT';if (!paymentApproved) return 'PAYMENT_FAILED';return 'ORDER_CONFIRMED';}export function executeStep(iterator, stepResult) {const { value, done } = iterator.next(stepResult);return { nextStep: value, isCompleted: done };}
svelte
Breakdown
1
const paymentApproved = yield 'PAYMENT_INPUT';
Pauses generator execution at this step and receives external data when iterator.next() is invoked.
2
export function executeStep(iterator, stepResult) {
Drives the generator forward by passing reactive component input into the generator state flow.
3
const { value, done } = iterator.next(stepResult);
Extracts the current state frame and completion flag from the generator iterator result.