javascript / expert
Snippet
Generator-based Workflow Orchestration
Generators allow you to define complex, multi-step UI logic as a linear sequence. By yielding UI state objects, you can pause execution until user interaction occurs, significantly simplifying state machines and avoiding 'boolean flag soup'.
snippet.js
1
2
3
4
5
6
7
8
9
function* createOnboarding() {yield { step: 1, label: 'Profile' };const bio = yield { step: 2, label: 'Bio' };if (bio.length < 10) yield { step: 2, label: 'Bio too short!' };yield { step: 3, label: 'Finished' };}let flow = createOnboarding();let current = $state(flow.next().value);
svelte
Breakdown
1
function* createOnboarding() {
Defines a generator function that can pause its execution using the yield keyword.
2
let current = $state(flow.next().value);
Initializes the reactive state with the first step yielded by the generator.