PageFlow の仕組み

PageFlow はフレームワーク固有のルート検出と、フレームワークに依存しないビジュアルクライアントを組み合わせます。

1. ルートを検出

選択したアダプターがフレームワークのルート情報を読み取ります。Vue Router と Nuxt はルーターレコード、ファイルベースのフレームワークはビルド連携、React Router はルートオブジェクト、Next.js は開発用 sidecar を使います。

2. 開発ランタイムを起動

開発サーバーの実行中だけ、小さなランタイムを注入します。ルート情報、表示中の遷移先、ページタイトル、準備状態を PageFlow エンドポイントへ報告します。

3. 実際のページを描画

同一オリジンのアプリページを制御された iframe で開きます。選択ページはライブ表示を保ち、背景ページは上限付きサムネイルキャッシュへ保存します。

4. 遷移を検出

アダプターは対応フレームワークリンク、同一オリジンのアンカー、履歴変更、リテラルな遷移先、明示的なヒントを認識します。クライアントはそれらを方向付きエッジとホットスポットに変換します。

5. グラフを配置

LeaferJS がキャンバスを描画します。ルートデッキは大きな階層を整理し、空間インデックスは表示範囲の処理を制限します。大規模レイアウトは Worker で実行できます。

本番ビルド

PageFlow は開発専用です。ランタイムエンドポイントとビジュアルクライアントは本番出力へ注入されません。

安全境界

プレビューモードは制御フレーム内のアンカー遷移とフォーム送信を止めますが、アプリ初期化時の副作用は抑止できません。ローカルまたはテストデータを使ってください。