01/С чего начать
basics
Лампа: переключатель ON/OFF
Простейшая FSM из двух состояний и счётчика переключений. Удобно посмотреть форму машины: события, переходы, контекст.
lite-fsm · playground
Сборник примеров lite-fsm
Технические демо: sync-машины, async-эффекты, actor-шаблоны, persist и SSR-streaming. Каждый пример — самодостаточная папка со своим store, machines и React-компонентами.
- 10
- примеров
- 5
- категории
Basics
Старт
Базовая форма машины: состояния, события, переходы, контекст.
1 пример
Effects
Async-эффекты
Оптимистичные апдейты, pending-состояния и обработка ошибок.
1 пример
02/Async-эффекты
effects
Лайки: оптимистичные апдейты
Клик по LIKE мгновенно меняет UI, в фоне идёт fetch. Pending-счётчик и ошибки живут в отдельной машине — никаких гонок и моргания.
Actors
Actors
Live actor-инстансы, actor-группы, hydration между store.
4 примеров
03/Actors вместо pending-машины
actorseffects
Лайки на actor-шаблонах
Та же оптимистичная схема без отдельной pending-машины: каждый запрос — живой actor, в полёте = сколько актёров живо.
04/Hydration через snapshots
actors
Совместный рисунок: Alice ↔ Bob
Два независимых store обмениваются snapshot-ами штрихов. Тот же канал годится для BroadcastChannel, WebRTC или backend-а.
05/Actor-группы в реальном времени
actors
Roguelite на Phaser
Игрок, враги и снаряды живут как actor-группы lite-fsm. Phaser отвечает только за рендер, вся логика — в машинах.
06/Actors для download-задач
actorseffects
Релиз: закачка альбома и треков
Каждый трек скачивается отдельным actor-инстансом: прогресс, пауза, resume и сброс собираются в общий прогресс релиза.
Persist
Persist
Сохранение MachineManager snapshot-а, restore и синхронизация вкладок через storage adapter.
1 пример
07/Storage adapter
persist
Persist: мини-чат в localStorage
История чата сохраняется через persistManager, а соседние вкладки подтягивают snapshot через localStorage event.
SSR
SSR & streaming
Стриминг виджетов, manifest-first и snapshot-first hydration.
3 примеров
08/Long-lived store
ssr
SSR: streaming-виджеты + кеш
Сессия пользователя грузится один раз в layout, виджеты страниц стримятся независимо и кешируются как у React Query.
09/Manifest + независимые виджеты
ssr
SSR: grid-пагинация со streaming
Сервер отдаёт первую страницу grid-манифеста, каждый виджет стримится сам по себе, дальнейшая пагинация — на клиенте.
10/FSMHydrationBoundary
ssr
SSR: hydration через snapshots
Manifest и seed виджетов приходят с сервера как готовые MachineManager-снапшоты. На клиенте — никаких повторных запросов.