devtools-react

@json-render/devtools-react

json-render の DevTools パネル用 React アダプターです。共通パネルの機能、props、ドッキングの動作、サーバーサイドのストリームタップについては、skills/devtools/SKILL.md をお読みください。

インストール

npm install @json-render/devtools @json-render/devtools-react

パネルのマウント

レンダラーの状態、アクション、ストリームを監視できるように、既存の React json-render プロバイダー内に JsonRenderDevtools をマウントしてください。

import { JsonRenderDevtools } from "@json-render/devtools-react";

<JSONUIProvider registry={registry} handlers={handlers}>
  <Renderer spec={spec} registry={registry} />
  <JsonRenderDevtools spec={spec} catalog={catalog} messages={messages} />
</JSONUIProvider>;

このコンポーネントは、本番ビルドでは何もレンダリングしません。パネルには、Ctrl/Cmd + Shift + J のショートカットなど、共通の DevTools コントロールが用意されています。

命令型コントロール

マウント済みの React 子孫コンポーネントから useJsonRenderDevtools を使用してください。

import { useJsonRenderDevtools } from "@json-render/devtools-react";

const devtools = useJsonRenderDevtools();
devtools?.open();
devtools?.toggle();
devtools?.recordEvent({ kind: "stream-text", at: Date.now(), text: "hi" });

このフックは、本番環境またはコンポーネントのマウント前には null を返します。サーバーサイドのストリーム計装には @json-render/devtools を使用してください。