Vize

コンパイラインスペクタ

プレイグラウンド インスペクターは、.vue のレビューに必要なコンパイラーと分析サーフェスを収集します。 レプロ。公式の Vue SFC コンパイラ出力、Vize コンパイラ出力、仮想 TS、VIR、および ローカル バッチのクロスファイル グラフ。

プレイグラウンドからインスペクターを開きます。

https://vizejs.dev/play/?tab=inspector

インスペクタはブラウザで次のチェックを実行します。

  • @vue/compiler-sfc リファレンス出力用
  • Vize 出力用の Vize WASM
  • 選択したファイルのキヤノン支援仮想 TS
  • 選択したファイルのクロッキー VIR
  • ネイティブ vize_curator グラフと差分メタデータが CLI と共有される
  • ペイロード ファイルのファイル間診断
  • DOM または SSR ターゲットの選択
  • オプションのカスタム レンダラーおよびテンプレート構文モード コントロール
  • 両方のコンパイラの完全な出力タブ
  • Vue のみと Vize のみの行を含む比較タブ
  • パーマリンクと事前入力されたプル リクエスト リンク

CLI ペイロード

再現がローカル プロジェクトにすでに存在する場合は、vize inspector を使用します。単一のファイルによって生成されるのは、 デフォルトのプレイグラウンド URL:

vize inspector src/App.vue

ディレクトリとグロブはバッチ ペイロードを作成します。プレイグラウンドでバッチが開き、切り替えることができます ファイル間。

vize inspector src/components
vize inspector "src/**/*.vue" --target ssr

大規模なバッチの場合は、長い URL の代わりに JSON を出力します。

vize inspector "src/**/*.vue" --format json --output inspector-payload.json

AI エージェントまたは端末ハンドオフの場合、エージェント レポートを発行します。これには、ペイロード、プレイグラウンド URL、 概要メトリクス、およびファイル間のグラフのメタデータ。

vize inspector "src/**/*.vue" --format agent --output inspector-agent.json

ローカル開発チェックアウトでは、CLI でコンパイラ比較を直接実行することもできます。これは、 現在のバイナリ内の Rust コンパイラを使用し、現在のプロジェクトから @vue/compiler-sfc をロードする、または Vize ワークスペース node_modules

vize inspector "src/**/*.vue" --format compare --output inspector-compare.json

ペイロードとエージェント レポートは、使用されるのと同じローカル専用の Rust クレートである vize_curator によって生成されます。 グラフおよび線差分メタデータのプレイグラウンド WASM バインディングによる。これにより、バッチ CLI レポートが保持され、 公式の Vue コンパイラをブラウザ内で実行したまま、ブラウザ インスペクションを調整します。

便利なオプション:

オプション 説明
--target dom VDOM コンパイラの出力を比較する
--target ssr SSR コンパイラの出力を比較する
--format agent グラフのメタデータを含むエージェントが読み取り可能な JSON を出力する
--format compare Vue に対して開発専用 CLI 比較を実行する
--custom-renderer プレイグラウンドでカスタム レンダラー モードを有効にする
--template-syntax standardstrict、または quirks を選択します
--max-files <n> バッチ ペイロード内のファイル数を制限する
--playground-url リンクに使用されるプレイグラウンド URL をオーバーライドする

PR ワークフロー

コンパイラ パリティ PR を開くときは、インスペクタのパーマリンクを PR 本文に含めて、 出力の変更を CI で確認できるようにする最小限のフィクスチャまたは完全なスナップショット。事前に入力された PR リンクは出発点です。ブランチをプッシュした後、GitHub から要求された場合は比較ヘッドを交換します。

PR に役立つ証拠は次のとおりです。

  • 検査官の固定リンク
  • 選択したターゲットとオプション
  • 最小化された .vue フィクスチャまたは完全なスナップショット
  • 修正がコンパイラの領域をまたぐ場合の、関連する仮想 TS、VIR、またはグラフ コンテキスト
  • Vize の出力が Vue と一致する必要がある理由、または意図的に Vue と異なる必要がある理由
  • タッチされたコンパイラ表面をカバーするローカル検証コマンド