Перейти к содержимому
GitHubXDiscord

@triggery/solid

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

npm bundle

pnpm add @triggery/core @triggery/solid solid-js

Peer-зависимости: solid-js >= 1.8.0.

ЭкспортНазначение
useEventТипизированный эмиттер событий со стабильной идентичностью на протяжении жизни компонента.
useConditionРегистрирует pull-only геттер условия. Естественно читает сигналы.
useActionРегистрирует обработчик действия. Автоочистка через onCleanup.
useInlineTriggerОдноразовые триггеры внутри компонента.
<TriggerRuntimeProvider>Внедрить кастомный рантайм через context API Solid.
<TriggerScope>Ограничить регистрации условий/действий поддеревом-фичей.

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

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.notifications) return;
    actions.showToast?.({
      title: event.payload.author,
      body:  event.payload.text,
    });
  },
});
src/index.tsx
import { createRuntime } from '@triggery/core';
import { TriggerRuntimeProvider } from '@triggery/solid';
import { render } from 'solid-js/web';
import { App } from './App';

const runtime = createRuntime();

render(
  () => (
    <TriggerRuntimeProvider runtime={runtime}>
      <App />
    </TriggerRuntimeProvider>
  ),
  document.getElementById('root')!,
);
src/App.tsx
import { createSignal, type Component } from 'solid-js';
import { useAction, useCondition, useEvent } from '@triggery/solid';
import { messageTrigger } from './triggers/message.trigger';

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

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

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

export const App: Component = () => (
  <>
    <SettingsProvider />
    <Chat />
    <Toast />
  </>
);

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

Компоненты Solid выполняют свой setup один раз. Никаких useCallback, массивов зависимостей и танцев с ref — просто замыкай то, что нужно. Геттеры условий, читающие сигналы, автоматически видят актуальное значение в момент срабатывания, потому что сигналы Solid — это чистые функции.

// Сравни с React: ни массива deps, ни useCallback, ни мемоизации.
useCondition(trigger, 'settings', () => settings());

Все composables автоматически очищаются через onCleanup — они работают и внутри setup’а компонента, и внутри отдельных createRoot()-скоупов. Никаких ручных disposer’ов.