@triggery/react

React-биндинги для Triggery. Хуки имеют ту же форму, что и в @triggery/solid и @triggery/vue. Без рантайм-зависимостей — тонкая прослойка над жизненным циклом поверх @triggery/core.

Установка

pnpm

pnpm add @triggery/core @triggery/react

npm

npm install @triggery/core @triggery/react

yarn

yarn add @triggery/core @triggery/react

bun

bun add @triggery/core @triggery/react

Peer-зависимости: react >= 18.0.0, react-dom >= 18.0.0.

Что внутри

Экспорт	Назначение
useEvent	Типизированный эмиттер событий со стабильной идентичностью.
useCondition	Регистрирует pull-only геттер условия.
useAction	Регистрирует обработчик действия.
useInlineTrigger	Одноразовые триггеры внутри компонента.
useInspect / useInspectHistory	Снимок последнего запуска / история из кольцевого буфера.
createNamedHooks	Получить useNewMessageEvent, useUserCondition, … из триггера.
<TriggerRuntimeProvider>	Внедрить кастомный рантайм в поддерево.
<TriggerScope>	Ограничить регистрации условий/действий поддеревом-фичей.

Быстрый старт

Три небольших файла. Триггер читается как спецификация, компоненты знают только о своём порту.

1. Опиши триггер

src/triggers/message.trigger.ts

import { createTrigger } from '@triggery/core';

type Settings = { sound: boolean; notifications: boolean };

export const messageTrigger = createTrigger<{
  events: { 'new-message': { text: string; author: string } };
  conditions: { settings: Settings };
  actions: { showToast: { title: string; body: string } };
}>({
  id: 'message-received',
  events: ['new-message'],
  required: ['settings'],
  handler({ event, conditions, actions }) {
    if (!conditions.settings) return;
    if (!conditions.settings.notifications) return;
    actions.showToast?.({
      title: event.payload.author,
      body:  event.payload.text,
    });
  },
});

2. Оберни дерево

src/main.tsx

import { createRuntime } from '@triggery/core';
import { TriggerRuntimeProvider } from '@triggery/react';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './App';

const runtime = createRuntime();

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <TriggerRuntimeProvider runtime={runtime}>
      <App />
    </TriggerRuntimeProvider>
  </StrictMode>,
);

3. Подключи компоненты

src/App.tsx

import { useAction, useCondition, useEvent } from '@triggery/react';
import { useState } from 'react';
import { messageTrigger } from './triggers/message.trigger';

function SettingsProvider() {
  const [settings] = useState({ sound: true, notifications: true });
  useCondition(messageTrigger, 'settings', () => settings, [settings]);
  return null;
}

function Chat() {
  const fire = useEvent(messageTrigger, 'new-message');
  return (
    <button type="button" onClick={() => fire({ text: 'hi', author: 'Alice' })}>
      send
    </button>
  );
}

function Toast() {
  useAction(messageTrigger, 'showToast', ({ title, body }) => console.log(`[${title}] ${body}`));
  return null;
}

export function App() {
  return (
    <>
      <SettingsProvider />
      <Chat />
      <Toast />
    </>
  );
}

Нажми на кнопку — Toast залогирует. Переключи settings.notifications в false — тишина.

Рецепты

Счётчик Hello-world рецепт.

Конвейер уведомлений Тост + звук + бейдж в трёх компонентах.

Поиск с дебаунсом take-latest + AbortSignal для автокомплита.

WebSocket-синхронизация Realtime-обновления без связности компонентов.

SSR / RSC

На сервере хуки возвращают no-op’ы. Реальная подписка происходит в useEffect, поэтому гидрация не расходится. См. руководство по SSR и руководство по React Server Components.

Связанные пакеты

@triggery/core Рантайм, который оборачивает этот биндинг.

@triggery/solid Идентичная форма хуков для SolidJS.

@triggery/vue Идентичная форма хуков для Vue 3.

@triggery/zustand Адаптер: чтение стора Zustand из условия.

@triggery/redux Адаптер: чтение стора Redux из условия.

@triggery/testing Тестируй триггер без рендера React.

Исходники

• GitHub
• npm
• Changelog