プラットフォームトポロジー
配信チェーン
| ステージ | 所有者 | 検証 |
|---|---|---|
| ソースとパッケージビルド | フロントエンドモジュール | パッケージビルドが期待されるエントリファイルを出力する。 |
| アーティファクトの場所 | デプロイのビルドターゲット | ビルドコマンドが --outDir を受け取る。Viteはこれをハードコードしない。 |
| レジストリエントリ | バックエンドモジュール | view.page または view.component が出力されたエントリを指している。 |
| 配信URL | ファイルシステムとHTTPのレジストリエントリ | アセットへの直接リクエストが、ビルドされたJavaScriptまたはHTMLを返す。 |
| ランタイムコンテナ | Web Host | ページは about:srcdoc を使い、コンポーネントはカスタム要素（通常はshadow DOM付き）を使う。 |
| コンテキスト | AppConfigとWippyパッケージ | ルーティング、APIアクセス、テーマデータが、サポートされたパッケージ経由で届く。 |
ソースが存在すること、ビルドが成功すること、レジストリエントリが有効であることは、いずれも次のステージを保証しません。各境界を検証してください。
ページ
view.page は about:srcdoc iframe内で動作します。iframeのURLはホストのルートではありません。ホストの状態を知るために window.location、window.parent.location、クエリパラメータを調べてはいけません。AppConfigと @wippy-fe/router を使用してください。パッケージがWippyのルート統合を処理します。
iframe CSS注入は、現在のところデフォルトのテーマ付きスクロールバースタイルを提供します。その名前は歴史的なもので、現在の目的よりも広いものです。スクロールバーの一貫性のために有効なままにし、レイアウトのリセットとして説明しないでください。
Webコンポーネント
view.component はホストドキュメント内で動作し、通常はshadow rootを所有します。CSSセレクタはshadow境界を越えてカスケードしません。Web Hostは、コンポーネントの設定に応じて、承認されたスタイルシートとファサードCSSをそのroot内に配信することがあります。
CSS変数の継承とスタイルシートの注入は異なるメカニズムです:
- 公開された継承変数は、ホストからshadowへの境界を越えられます。
- セレクタルールは、そのshadow root内に配信された場合にのみ影響します。
- 配信されたからといって、任意のセレクタがポータブルなAPIになるわけではありません。
テーマとオーバーレイ
ファサードがPrimeVueテーマを供給します。ファサードの custom_css にある共有の .p-* ルールは正当なテーマ実装であり、ホストと子の両方に意図されている場合はグローバルであって構いません。.wippy-host-app はホスト固有のクロームにのみ使用してください。
テーマモードはAppConfigの状態であり、CSSクラスのAPIではありません。アプリケーション、
コンポーネント、フィクスチャ、ブラウザテストは、@wippy-fe/proxy の
host.setThemeMode('auto' | 'light' | 'dark') でモードを切り替え、その後
@theme を待って host.getThemeMode() を検証します。AppConfigがその変更を
ホストから子へのトランスポートを通じて伝えます。ホストは自身のドキュメントを更新し、
稼働中の about:srcdoc iframeにAppConfigを再ブロードキャストし、そのモードを
Webコンポーネントのrootへミラーリングします。w-theme-dark や w-theme-light クラスを
直接強制してはいけません。
w-theme-dark や w-theme-light クラスを直接強制してはいけません。
PrimeVueのオーバーレイはテレポートされることがあります。実際のオーバーレイrootを、トップドキュメント、iframeドキュメント、再帰的に発見されたshadow rootの中で検証してください。PrimeVueの一般的な配置を前提にしてはいけません。
ランタイムデバッグの順序
- バックエンドがリッスンしていることを確認する。
- 予期しない5xxレスポンスがないか、バックエンドのログを確認する。
- レジストリの所有者と配信アセットURLを確認する。
- そのアセットを出力したのが正確にどのパッケージビルドかを確認する。
- 直接のディープリンクがサポートされていない場合は、SPA内を遷移する前にホストのルートを読み込む。
- 遷移および操作の後に、コンソールとネットワークのエラーを確認する。
- テーマのシナリオでは、公開のプロキシテーマメソッドを呼び出し、
@themeを観測し、 スクリーンショットを受け入れる前にhost.getThemeMode()を検証する。