@sh1n4ps/plasma-devtools

@sh1n4ps/plasma-devtools は、動作中の plasma client を調べるための 3 つの 手段を提供します: ページ内 React パネル、カスタム UI 向けの state スナップショット hook、そして Chrome DevTools 拡張向けの window.postMessage ブリッジです。

主な内容

• PlasmaDevtools — ドロップインで使える React パネルコンポーネント。
• PlasmaDevtoolsProps — パネルの props (client, dbName, schema)。
• useDevtoolsSnapshot — 現在の sync 状態 (clientID, cookie, outbox, schemaVersion) を返すポーリング hook。
• DevtoolsSnapshot — この hook の戻り値の型。
• attachDevtoolsBridge — 外部インスペクタが client を観測・制御できる ように window.postMessage ブリッジをアタッチします。
• AttachOptions — ブリッジの設定 (dbName, schema, refreshIntervalMs, targetOrigin, allowedOrigins, runtime)。
• プロトコル型 — DevtoolsMessage (union), HelloMessage, StateUpdateMessage, CommandMessage, CommandResultMessage, DevtoolsStateSnapshot。
• isDevtoolsMessage — postMessage 受信側向けの brand チェック。
• PLASMA_DEVTOOLS_SOURCE — すべてのメッセージの source フィールドに 使われる定数 "plasma-devtools"。

主要なパターン

// dev ビルド限定のレンダーにパネルを差し込む。
{import.meta.env.DEV && (
  <PlasmaDevtools client={plasma} dbName="app" schema={schema} />
)}

// または独自のステータスウィジェットを作る。
function SyncStatus() {
  const snap = useDevtoolsSnapshot(plasma, { dbName: "app", schema })
  return <span>Outbox: {snap.outbox.length}</span>
}

// または Chrome 拡張向けにブリッジを配線する。
const dispose = attachDevtoolsBridge(plasma, {
  dbName: "app",
  schema,
  allowedOrigins: ["chrome-extension://your-extension-id"],
})

全 symbol インデックス

reference/generated/plasma-devtools/src 配下にあります。

次に読むページ

• Devtools (Guide) — 3 つの調査モードの 完全なウォークスルー