Примеры

Все примеры собраны в папке apps/playground/app/examples репозитория. Это рабочее Next.js-приложение для локальной проверки сценариев вместе с DevTools.

Запуск playground локально


git clone https://github.com/AlexanderGureev/lite-fsm.git
cd lite-fsm
pnpm install
pnpm --filter @lite-fsm/playground dev

После запуска откройте http://localhost:3000 — там собраны все примеры ниже. На каждой странице примера есть ссылка Visualizer, которая открывает заранее сгенерированный JSON IR.

Что можно посмотреть

Пример	Что показывает	Ссылки
lamp	Минимальный автомат: `OFF`/`ON`, immer-reducer, типизированные `Typed`-фабрики и React-хуки.	код · визуализатор
likes / likes-v2	Оптимистичные обновления, отмена эффектов, очередь pending-операций.	likes · likes visualizer · likes-v2 · likes-v2 visualizer
album-download	Шаблоны акторов: динамические загрузки треков, маршрутизация по `meta.actorId`, `groupTag`, доступ к `getState`.	код · визуализатор
actor-canvas	Расширенный сценарий с акторами и canvas-рендерингом.	код · визуализатор
roguelite	Комплексный пример с параллельными автоматами и игровым циклом.	код · визуализатор
persist	Чат на `persistManager`: история в `localStorage`, синхронизация между вкладками через `storage` event.	код · визуализатор
ssr-demo / ssr-demo-2 / ssr-demo-3	Гидратация состояния с Next.js App Router: `dehydrate` на сервере и `FSMHydrationBoundary` на клиенте.	код · ssr-demo visualizer · ssr-demo-2 visualizer · ssr-demo-3 visualizer

С чего начать

Посмотрите examples/lamp — каноничная структура: types.ts, create-machine.ts, hooks.ts, index.ts и одна машина в machines/.
Если строите SSR — изучите examples/ssr-demo и страницу Сохранение состояния.
Для динамических подсистем (карточки, треки, чаты) — examples/album-download и examples/likes-v2 и страница Акторы.
Если нужно сохранить состояние между сессиями или синхронизировать вкладки — посмотрите examples/persist и страницу Persist.

CodeSandbox

Минимальный sandbox с интеграцией в React: