@vira-ui/react

React-хуки для работы с Vira Reactive Protocol (VRP). Синхронизация состояния между клиентом и сервером через WebSocket.

Зачем нужен

Пакет предоставляет простой способ подключения React-компонентов к серверу через WebSocket:

• Автоматическая синхронизация — состояние обновляется при изменениях на сервере
• Двусторонняя связь — можно отправлять события и обновления на сервер
• Diff-патчи — обновляются только изменённые части данных
• Переподключение — автоматическое восстановление соединения

Основные возможности

useViraState

Подключается к каналу и синхронизирует состояние:

import { useViraState } from '@vira-ui/react';

function UserProfile({ userId }: { userId: string }) {
  const { data, sendUpdate, sendDiff, isConnected } = useViraState<User>(
    `user:${userId}`,
    {
      initial: { name: 'Guest' },
      onOpen: () => console.log('Connected'),
      deepMerge: true
    }
  );

  if (!isConnected) return <div>Connecting...</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      <h1>{data.name}</h1>
      <button onClick={() => sendDiff({ name: 'New Name' })}>
        Update Name
      </button>
    </div>
  );
}

Отправка данных

• sendUpdate(payload) — полная замена состояния
• sendDiff(patch) — частичное обновление (merge)
• sendEvent(name, payload) — отправка события

Опции

• initial — начальное значение
• apiUrl — URL сервера (по умолчанию из VITE_API_URL)
• authToken — токен авторизации
• deepMerge — глубокое слияние для diff-патчей
• enableMsgId — поддержка idempotency
• onOpen, onClose, onError — колбэки событий соединения

Использование

Требует сервер с поддержкой Vira Reactive Protocol. Обычно используется вместе с @vira-ui/core и @vira-ui/bindings-react.