mcpField
D
devtools-svelte

devtools-svelte

github.com/vercel-labs開発18.8k108 回インストール5 日前に更新
リポジトリ

devtools-svelte について

Svelte 5 向けの json-render devtools パネルアダプターです。Svelte の json-render provider を使うプロジェクトに組み込め、プロダクションビルドでは表示されません。

主な機能

  1. 01Svelte 5 パネルアダプター
  2. 02json-render provider 内にマウント
  3. 03プロダクションビルドでは非表示
  4. 04Ctrl/Cmd + Shift + J ショートカット

活用シーン

  1. 01Svelte プロジェクトの json-render の確認
  2. 02ショートカットで devtools パネルを開く

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/vercel-labs/json-render --skill devtools-svelte

インストール後、Claude Code で/devtools-svelteを入力して読み込まれたか確認します。

詳細

@json-render/devtools-svelte

json-render の開発者ツールパネル向け Svelte 5 アダプターです。共通のパネル機能、props、ドッキング動作、サーバーサイドのストリームタップについては、skills/devtools/SKILL.md を参照してください。

インストール

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

パネルをマウントする

既存の Svelte json-render プロバイダー内に JsonRenderDevtools をマウントします。

<script>
  import { JsonRenderDevtools } from "@json-render/devtools-svelte";
</script>

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

このコンポーネントは本番ビルドでは何もレンダリングしません。パネルには、Ctrl/Cmd + Shift + J のショートカットなど、共通の開発者ツール操作機能が用意されています。サーバーサイドのストリーム計測は @json-render/devtools に含めてください。

コメント

Markdown 対応