vue-state-machine — конечные автоматы для Vue 3 без XState

npm install @macrulez/vue-state-machine

import { defineMachine } from '@macrulez/vue-state-machine'

const loginMachine = defineMachine({
  id: 'login',
  initial: 'idle',
  context: {
    attempts: 0,
    error: null as string | null,
  },
  states: {
    idle:    { on: { SUBMIT:  { target: 'loading', actions: [resetError] } } },
    loading: { on: { SUCCESS: { target: 'success' },
                     FAILURE: { target: 'error', actions: [incrementAttempts] } } },
    error:   { on: { RETRY:   { target: 'idle', guard: canRetry } } },
    success: { type: 'final' },
  },
})

<script setup lang="ts">
import { defineMachine, useMachine } from '@macrulez/vue-state-machine'

const trafficLight = defineMachine({
  id: 'traffic',
  initial: 'red',
  states: {
    red:    { on: { NEXT: { target: 'green'  } } },
    green:  { on: { NEXT: { target: 'yellow' } } },
    yellow: { on: { NEXT: { target: 'red'    } } },
  },
})

const { state, send, can, matches, isDone, history } = useMachine(trafficLight)
</script>

<template>
  <div :class="state">
    <p>Сейчас: {{ state }}</p>
    <button @click="send('NEXT')">Следующий</button>
  </div>
</template>

const canRetry = (ctx: { attempts: number }) => ctx.attempts < 3

// Обновляет контекст — returns Partial
const incrementAttempts = (ctx: { attempts: number }) => ({
  attempts: ctx.attempts + 1,
})

// Асинхронный action — fetch внутри, результат мёрджится в контекст
const loadUser = async (ctx, event: { type: 'LOAD'; id: number }) => {
  const user = await api.getUser(event.id)
  return { user }
}

// Сайд-эффект без возврата
const logTransition = (ctx, event) => {
  analytics.track('state_changed', { event: event.type })
}

// Безопасно вызывать в быстрой последовательности
await send('SUBMIT')        // дожидаемся завершения
// state здесь уже 'loading'

send('SUCCESS')             // встаёт в очередь
send('RETRY')               // тоже встаёт — но когда дойдёт очередь, state будет 'success' и RETRY будет проигнорирован

const editor = defineMachine({
  id: 'editor',
  initial: 'editing',
  states: {
    editing: {
      parallel: {
        saving: {
          initial: 'idle',
          states: {
            idle:   { on: { START_SAVE: { target: 'saving' } } },
            saving: { on: { SAVE_DONE:  { target: 'saved'  } } },
            saved:  {},
          },
        },
        validation: {
          initial: 'valid',
          states: {
            valid:   { on: { INVALIDATE: { target: 'invalid' } } },
            invalid: { on: { VALIDATE:   { target: 'valid'   } } },
          },
        },
      },
    },
    idle: {},
  },
})

const { matches, send } = useMachine(editor)

matches('editing')                  // главное состояние
matches({ saving: 'idle' })         // регион saving
matches({ validation: 'valid' })    // регион validation

await send('INVALIDATE')
matches({ validation: 'invalid' })  // true
matches({ saving: 'idle' })         // true — этот регион не затронут

import { useWizard } from '@macrulez/vue-state-machine'

const { currentStep, progress, isFirst, isLast, next, prev } = useWizard([
  {
    id: 'info',
    label: 'Контакты',
    canProceed: (ctx) => !!ctx.name && !!ctx.email,
    onEnter: () => trackEvent('step_info_entered'),
  },
  {
    id: 'address',
    label: 'Доставка',
    canProceed: async (ctx) => {
      // canProceed может быть async — например проверить адрес через API
      return await addressApi.validate(ctx.address)
    },
  },
  {
    id: 'payment',
    label: 'Оплата',
    onLeave: () => clearSensitiveData(),
  },
])

<template>
  <div>
    <progress :value="progress" max="1" />
    <component :is="currentStep.component" />
    <nav>
      <button :disabled="isFirst" @click="prev">Назад</button>
      <button v-if="!isLast" @click="next">Далее</button>
      <button v-else @click="submit">Оформить</button>
    </nav>
  </div>
</template>

// Компонент A — где угодно в дереве
const { state } = useSharedMachine(cartMachine)

// Компонент B — в другой ветке
const { send } = useSharedMachine(cartMachine)

// Оба используют один экземпляр
await send('ADD_ITEM')
// state.value в компоненте A обновился реактивно

// main.ts
import { VueMachinePlugin } from '@macrulez/vue-state-machine'
app.use(VueMachinePlugin)

const { state, send } = useMachine(checkoutMachine, {
  persist: { key: 'checkout-v1' },
})
// При каждом переходе — снапшот пишется в localStorage
// При монтировании — снапшот читается и машина восстанавливается

useMachine(machine, {
  persist: { key: 'my-key', storage: sessionStorage },
})

interface CheckoutCtx {
  email: string
  address: { city: string; street: string }
  delivery: 'standard' | 'express' | null
  cardToken: string | null
}

const { currentStep, currentIndex, progress, next, prev, goTo } = useWizard<CheckoutCtx>(
  [
    {
      id: 'contacts',
      label: 'Контакты',
      component: StepContacts,
      canProceed: (ctx) => isValidEmail(ctx.email),
    },
    {
      id: 'address',
      label: 'Адрес',
      component: StepAddress,
      canProceed: async (ctx) => {
        // Проверяем адрес через DADATA API
        const result = await dadataApi.checkAddress(ctx.address)
        return result.isValid
      },
    },
    {
      id: 'delivery',
      label: 'Доставка',
      component: StepDelivery,
      canProceed: (ctx) => ctx.delivery !== null,
    },
    {
      id: 'payment',
      label: 'Оплата',
      component: StepPayment,
      onEnter: () => analytics.track('payment_step_entered'),
      onLeave: () => {
        // Очищаем данные карты при уходе со шага
        ctx.cardToken = null
      },
    },
  ],
  { allowSkip: false },
)

// В шаблоне — кнопки навигации блокируются автоматически
// next() вернёт false если canProceed вернул false или бросил ошибку
async function handleNext() {
  const ok = await next()
  if (!ok) {
    showValidationError()
  }
}

// Прыгаем назад к контактам — canProceed не проверяется
goTo('contacts')

type LoginCtx = { attempts: number; error: string | null; userId: number | null }
type LoginEvent = 'SUBMIT' | 'SUCCESS' | 'FAILURE' | 'RETRY'

const resetError:        Action<LoginCtx, LoginEvent> = () => ({ error: null })
const incrementAttempts: Action<LoginCtx, LoginEvent> = (ctx) => ({ attempts: ctx.attempts + 1 })
const canRetry:          Guard<LoginCtx, LoginEvent>  = (ctx) => ctx.attempts < 3

const loginMachine = defineMachine<
  'idle' | 'loading' | 'error' | 'success',
  LoginEvent,
  LoginCtx
>({
  id: 'login',
  initial: 'idle',
  context: { attempts: 0, error: null, userId: null },
  states: {
    idle:    { on: { SUBMIT:  { target: 'loading', actions: [resetError] } } },
    loading: {
      on: {
        SUCCESS: { target: 'success' },
        FAILURE: { target: 'error', actions: [incrementAttempts] },
      }
    },
    error:   { on: { RETRY: { target: 'idle', guard: canRetry } } },
    success: { type: 'final' },
  },
})

const { state, context, send, can, isDone } = useMachine(loginMachine)

async function handleSubmit(email: string, password: string) {
  await send('SUBMIT')        // machine → loading
  try {
    const { userId } = await authApi.login({ email, password })
    await send({ type: 'SUCCESS', userId })
  } catch (e) {
    await send({ type: 'FAILURE', error: e.message })
  }
}

<template>
  <form @submit.prevent="handleSubmit(email, password)">
    <p v-if="state === 'error'" class="error">
      {{ context.error }} (попытка {{ context.attempts }}/3)
    </p>

    <input v-model="email" :disabled="state === 'loading'" />
    <input v-model="password" type="password" :disabled="state === 'loading'" />

    <button type="submit" :disabled="state === 'loading'">
      {{ state === 'loading' ? 'Входим...' : 'Войти' }}
    </button>

    <button
      v-if="state === 'error'"
      @click="send('RETRY')"
      :disabled="!can('RETRY')"
    >
      Попробовать снова
    </button>

    <p v-if="isDone">Вход выполнен!</p>
  </form>
</template>

const editorMachine = defineMachine({
  id: 'document-editor',
  initial: 'editing',
  context: { title: '', content: '', lastSavedAt: null as Date | null },
  states: {
    editing: {
      parallel: {
        saving: {
          initial: 'idle',
          states: {
            idle:   { on: { SAVE:      { target: 'saving' } } },
            saving: { on: { SAVE_DONE: { target: 'saved'  },
                           SAVE_FAIL:  { target: 'idle'   } } },
            saved:  { on: { EDIT:      { target: 'idle'   } } },
          },
        },
        validation: {
          initial: 'valid',
          states: {
            valid:   { on: { INVALIDATE: { target: 'invalid' } } },
            invalid: { on: { VALIDATE:   { target: 'valid'   } } },
          },
        },
      },
    },
    archived: { type: 'final' },
  },
})

const { state, matches, send } = useMachine(editorMachine)

// Автосохранение при изменении контента
const debouncedSave = useDebounceFn(async () => {
  if (matches({ saving: 'idle' })) {
    await send('SAVE')
    try {
      await documentApi.save(documentId, content.value)
      await send('SAVE_DONE')
    } catch {
      await send('SAVE_FAIL')
    }
  }
}, 1000)

watch(content, () => {
  // Отмечаем что контент изменился — нужна валидация
  send('INVALIDATE')
  debouncedSave()
})

<template>
  <div class="editor">
    <header>
      <span v-if="matches({ saving: 'saving' })">Сохранение...</span>
      <span v-else-if="matches({ saving: 'saved' })">Сохранено</span>

      <span v-if="matches({ validation: 'invalid' })" class="badge-warn">
        Есть ошибки
      </span>
    </header>

    <textarea v-model="content" />
  </div>
</template>