@triggery/devtools-panel

React-компоненты для инспекции рантайма Triggery прямо в приложении. Без CSS-пайплайна — компоненты используют inline-стили, поэтому встают в любой хост без конфликтов с глобальными стилями.

Установка

pnpm add -D @triggery/core @triggery/react @triggery/devtools-panel

npm install --save-dev @triggery/core @triggery/react @triggery/devtools-panel

yarn add --save-dev @triggery/core @triggery/react @triggery/devtools-panel

bun add -D @triggery/core @triggery/react @triggery/devtools-panel

Peer-зависимости: react ^18 || ^19.

Что внутри

Экспорт	Назначение
`<InspectorView limit?={20} title?={'Triggery Inspector'} />`	Живая, подписанная панель с последними запусками. Клик по строке раскрывает полный JSON-снимок.
`<TriggerSnapshotView snapshot variant?='compact'\|'full' />`	Рендерит одну строку запуска (`compact`) или раскрытый JSON (`full`).

Быстрый пример

import { InspectorView } from '@triggery/devtools-panel';

function DebugDrawer() {
  return import.meta.env.DEV ? <InspectorView limit={50} /> : null;
}

Это вся интеграция. Компонент подписывается на активный рантайм (через контекст <TriggerRuntimeProvider> или глобальный дефолтный) и показывает живой список последних запусков. Клик по строке раскрывает полный JSON-снимок.

Для разового рендера одного снимка (например, внутри кастомного дебаг-инструмента):

import { TriggerSnapshotView } from '@triggery/devtools-panel';

<TriggerSnapshotView snapshot={mySnapshot} variant="full" />

Roadmap

Standalone-панель (в браузере, на postMessage) и обёртка Chrome DevTools выйдут в v1.1. Прогресс — в заготовке Chrome-расширения.

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

@triggery/core Рантайм, который инспектирует эта панель.

@triggery/react Это React-компоненты.

@triggery/devtools-redux Стримит события рантайма в расширение Redux DevTools.

@triggery/devtools-bridge Page-side мост для внешних инспекторов.