importmap向けに誤ったUMDバンドルをESMファイルへ置き換え
dependencies:vendor Rakeタスクがimportmapで参照されないUMDバンドルをvendorしていたバグを修正し、importmapが実際にピンしているESMファイルを正しく生成するよう変更されました。
背景
これまでの dependencies:vendor タスクは、floating-uiのvendorファイルを生成する処理として UMDバンドル(floating-ui.dom.umd.min.js)をコピーしていました。しかしimportmapが実際にピンしているのは @floating-ui--core.js と @floating-ui--dom.js の2つのESMファイルであり、タスクが生成するファイルとimportmapが参照するファイルの間に乖離が生じていました。
その結果、vendor/javascript/floating-ui--dom.js として配置されたUMDファイルはimportmapからもアプリケーションコードからも参照されない死んだアーティファクトとなっており、一方でimportmapが参照する @floating-ui--core.js と @floating-ui--dom.js にはRakeタスクによる自動生成の手段が存在しない状態でした。
技術的な変更
tasks/dependencies.rake の dependencies:vendor タスクで、UMDバンドルのコピー処理を2つのESMファイルのコピー処理に置き換えました。
変更前:
# Copy @floating-ui/dom to vendor
FileUtils.cp(
File.join(node_modules, '@floating-ui', 'dom', 'dist', 'floating-ui.dom.umd.min.js'),
File.join(vendor, 'floating-ui--dom.js')
)
変更後:
# Copy @floating-ui/core and @floating-ui/dom ESM files to vendor
FileUtils.cp(
File.join(node_modules, '@floating-ui', 'core', 'dist', 'floating-ui.core.browser.mjs'),
File.join(vendor, '@floating-ui--core.js')
)
FileUtils.cp(
File.join(node_modules, '@floating-ui', 'dom', 'dist', 'floating-ui.dom.browser.mjs'),
File.join(vendor, '@floating-ui--dom.js')
)
コピー元のファイル形式が .umd.min.js(UMD)から .browser.mjs(ESM)に変わり、コピー先のパスも floating-ui--dom.js から @floating-ui--core.js / @floating-ui--dom.js へと修正されています。また、不要になったUMDファイル vendor/javascript/floating-ui--dom.js(1行のminifiedコード)はリポジトリから削除されました。
設計判断
importmapとESMの相性を踏まえ、ブラウザネイティブのESMファイル(.browser.mjs) を採用する設計が選択されています。UMDはAMD・CommonJS・グローバル変数のいずれの環境でも動作する汎用フォーマットですが、importmapはES Modulesのネイティブな import 構文を前提としており、UMDバンドルはその用途に適しません。
今回の修正により、@floating-ui/core と @floating-ui/dom の両方をRakeタスクで一元管理できるようになっています。importmapのピン定義・vendorディレクトリの実ファイル・Rakeタスクによる生成元が一致した状態が、このタスクの本来あるべき姿です。
まとめ
この変更は、モジュール形式の不一致(UMD vs ESM)というサイレントなバグを修正し、dependencies:vendor タスクをimportmapが参照するファイルの正規の生成源として機能させるものです。UMDファイルの削除と合わせて、vendorディレクトリに参照されないファイルが混在しない整合した状態が実現されています。