TurboWarp拡張機能 · v0.1.1

診断を、安全に、読みやすく。

1件の構造化診断を検証してXMLエスケープ済みSVGへ変換し、TurboWarpステージに追従する非操作型overlayとして表示します。

検証

厳密な入力

severity、code、messageと任意のdetail・source位置を表示前に正規化します。

描画

安全なSVG text

外部文字列をXMLエスケープし、要素名、属性、色、URLとしては使用しません。

表示

ステージへ追従

renderer canvasのサイズ変更を追跡し、pointer-events: noneで入力を妨げません。

レビュー済みビルドを導入

pnpm add --save-exact @kubohiroya/turbowarp-diagnostic-overlay@0.1.1

単独機能拡張は、次の固定URLをサンドボックスなしで読み込みます。

https://cdn.jsdelivr.net/npm/@kubohiroya/turbowarp-diagnostic-overlay@0.1.1/dist/diagnostic-overlay.js

Composition API

packageをimportしただけではTurboWarpへ登録しません。composition rootがextensionとcontrollerを明示的に作成し、1度だけ登録します。

import {createDiagnosticOverlayComposition} from
  '@kubohiroya/turbowarp-diagnostic-overlay/composition';

const {extension, controller} = createDiagnosticOverlayComposition(Scratch);
Scratch.extensions.register(extension);
controller.show({severity: 'error', code: 'APP001', message: '入力を確認してください。'});

純粋rendererは/svg-rendererから利用できます。詳細は0.1仕様を参照してください。英語版もあります。

ライフサイクル

新しい診断は現在の表示を置換します。プロジェクト読込時に消去し、runtime dispose時にDOM observerとlistenerを解放します。project stop後は原因を読めるよう表示を残します。

利用側の責務

診断の発見、Scratch threadやVMを止める判断、永続化は利用側が行います。このpackageはアプリ固有DSLを知りません。