Счётчик

Тот же сценарий счётчика, что и в рецепте на React, но через createSignal Solid’а. Триггер абсолютно тот же — он живёт в @triggery/core и не знает ни про один из фреймворков.

Триггер

src/triggers/counter.trigger.ts

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

export const counterTrigger = createTrigger<{
  events:  { increment: void; decrement: void };
  actions: { adjust: number };
}>({
  id: 'counter',
  events: ['increment', 'decrement'],
  handler({ event, actions }) {
    actions.adjust?.(event.name === 'increment' ? 1 : -1);
  },
});

Компонент

src/Counter.tsx

import { useAction, useEvent } from '@triggery/solid';
import { createSignal } from 'solid-js';
import { counterTrigger } from './triggers/counter.trigger';

export function Counter() {
  const [count, setCount] = createSignal(0);

  const inc = useEvent(counterTrigger, 'increment');
  const dec = useEvent(counterTrigger, 'decrement');

  useAction(counterTrigger, 'adjust', delta => setCount(c => c + delta));

  return (
    <div>
      <button onClick={dec}>−</button>
      <output>{count()}</output>
      <button onClick={inc}>+</button>
    </div>
  );
}

Та же форма, нативная для Solid. Никакого перерендера остального дерева, когда счётчик меняется — fine-grained-реактивность Solid делает своё дело, а биндинги Triggery просто регистрируются/отписываются через onCleanup.

См. также

Версия для React Тот же триггер, React-хуки.

Версия для Vue Composition API.

Пайплайн уведомлений (Solid) Полный многокомпонентный сценарий.

Пакет @triggery/solid Справочник по хукам.