`wa-dropdown`のポップアップコンポーネント登録を修正

wa-dropdownが依存するwa-popupカスタムエレメントのインポート方法が修正されました。型定義とコンポーネント登録を分離することで、ドロップダウンのレンダリングに必要なポップアップが確実に利用可能になります。

背景

wa-dropdownコンポーネントは内部でwa-popupカスタムエレメントを使用してドロップダウンをレンダリングしています。しかし、元のコードではwa-popupのインポート方法が不適切で、カスタムエレメントの登録が保証されていませんでした。PR内のコメントでは、wa-tooltipのようにstatic dependenciesプロパティでの依存関係宣言も検討されましたが、この変更ではインポート方法の修正のみが採用されています。

技術的な変更

packages/webawesome/src/components/dropdown/dropdown.tsのインポート文が、型定義とコンポーネント登録を分離する形式に変更されました。

変更前:

import WaPopup from '../popup/popup.js'; // Added import for wa-popup

変更後:

import '../popup/popup.js';
import type WaPopup from '../popup/popup.js';

1行目のimport '../popup/popup.js'により、wa-popupカスタムエレメントの登録処理が実行されます。2行目のimport typeにより、TypeScriptの型定義のみをインポートします。この2つのインポートを分離することで、ランタイムでのコンポーネント登録と、型チェックのための型情報取得を明確に区別しています。

元のコードにあった// Added import for wa-popupというコメントも削除され、意図が明確になりました。

設計判断

副作用インポートと型インポートの分離という手法が採用されました。

import WaPopup from '../popup/popup.js'という形式では、デフォルトエクスポートのみをインポートし、モジュール全体の実行を保証しません。カスタムエレメントの登録はモジュールのトップレベルで実行されるため、import '../popup/popup.js'による副作用インポートが必要です。一方、型定義はimport typeで明示的に分離することで、ビルド時の型チェックにのみ使用されることが明確になります。

PR内で言及されたstatic dependenciesプロパティによる依存関係宣言は、より明示的な依存管理の手法ですが、今回の修正では採用されませんでした。インポート方法の修正のみで問題が解決できると判断されたためと考えられます。

まとめ

本PRは、カスタムエレメントの登録を確実にするためのインポート方法の修正です。副作用インポートと型インポートを分離することで、wa-popupコンポーネントがランタイムで確実に利用可能になり、同時にTypeScriptの型安全性も維持されています。