概要
管理画面のアセット (html/bundle/admin.bundle.js) が依存している jQuery UI を撤去したい。
動機はバンドルサイズの削減ではなく、EOL・脆弱性対応の観点です。jQuery UI は 2021 年以降メンテナンスモードで、セキュリティ修正と jQuery 新版への追随のみが行われ、新規の機能開発は行われていません。1.14.0 のリリースにあたっては 1.13.x 系のサポートが終了し、ui/core.js を含む複数ファイルが削除されました (この破壊的変更で #6921 のビルドが実際に落ちています)。将来的に完全な EOL を迎えた場合、脆弱性が公表されても上流の修正が期待できず、EC-CUBE 側で抱え込むことになります。
現状の依存範囲
html/template/admin/assets/js/bundle.js は jQuery UI から 6 モジュールを読み込んでいますが、実際に呼び出されているのは以下の通りです (4.4 ブランチで調査)。
| ウィジェット |
呼び出し箇所 |
備考 |
sortable |
管理画面 twig 8 ファイル + html/template/admin/assets/js/layout_design.js の計 9 箇所 |
実質的な依存の本体 |
resizable |
Content/{css,js,page_edit,block_edit}.twig / Setting/Shop/mail.twig の計 6 箇所 (Ace エディタのリサイズ) |
|
tooltip |
利用なし (デッドコード) |
Bootstrap 5.3 が defineJQueryPlugin により $.fn.tooltip を DOMContentLoaded 時に上書きするため、jQuery UI 版は読み込まれるだけで使われていない。テンプレート側の tooltip('_fixTitle') 等も Bootstrap の API 前提 |
position / widget / mouse |
上記ウィジェットの内部依存のみ |
直接の利用なし |
$.ui.keyCode / disableSelection / :tabbable / :focusable といった ui/core.js 由来のユーティリティを、管理画面のテンプレート・JS から直接呼んでいる箇所はありませんでした。
参考値として、jQuery UI の読み込みを全て外して npm run build した場合、admin.bundle.js は 1,340KB → 1,164KB (-176KB) になります。
進め方 (案)
BC への影響度が異なるため、3 段階に分けたいと考えています。
tooltip の読み込み削除 — 誰にも使われていないため影響なし。resizable の撤去 — $("#editor").resizable({resize: () => editor.resize()}) は CSS の resize: vertical と ResizeObserver で代替可能。追加ライブラリ不要。twig 内の .ui-resizable-se のスタイル指定も不要になる。sortable の代替 (要議論) — SortableJS への置換を想定。単一リストの並べ替え (items + update) はほぼ機械的に対応するが、layout_design.js は複数コンテナ間の移動 (connectWith)・placeholder・ui.sender 判定を使っており、group / ghostClass / onAdd への設計の読み替えが必要。
論点: プラグイン互換
3 の実施にあたっては後方互換の判断が必要です。
admin.bundle.js はグローバルに $.fn.sortable を生やしているため、これに依存しているプラグインが存在し得る。Content/layout.twig は ui-sortable クラスをマークアップに直接記述しており、updateUpDown() もこのクラスを親セレクタとして参照している。事実上の公開インターフェイスになっている可能性がある。
撤去する場合、どのバージョンで、どのような告知とともに行うかを決める必要があります。
補足
概要
管理画面のアセット (
html/bundle/admin.bundle.js) が依存している jQuery UI を撤去したい。動機はバンドルサイズの削減ではなく、EOL・脆弱性対応の観点です。jQuery UI は 2021 年以降メンテナンスモードで、セキュリティ修正と jQuery 新版への追随のみが行われ、新規の機能開発は行われていません。1.14.0 のリリースにあたっては 1.13.x 系のサポートが終了し、
ui/core.jsを含む複数ファイルが削除されました (この破壊的変更で #6921 のビルドが実際に落ちています)。将来的に完全な EOL を迎えた場合、脆弱性が公表されても上流の修正が期待できず、EC-CUBE 側で抱え込むことになります。現状の依存範囲
html/template/admin/assets/js/bundle.jsは jQuery UI から 6 モジュールを読み込んでいますが、実際に呼び出されているのは以下の通りです (4.4 ブランチで調査)。sortablehtml/template/admin/assets/js/layout_design.jsの計 9 箇所resizableContent/{css,js,page_edit,block_edit}.twig/Setting/Shop/mail.twigの計 6 箇所 (Ace エディタのリサイズ)tooltipdefineJQueryPluginにより$.fn.tooltipを DOMContentLoaded 時に上書きするため、jQuery UI 版は読み込まれるだけで使われていない。テンプレート側のtooltip('_fixTitle')等も Bootstrap の API 前提position/widget/mouse$.ui.keyCode/disableSelection/:tabbable/:focusableといったui/core.js由来のユーティリティを、管理画面のテンプレート・JS から直接呼んでいる箇所はありませんでした。参考値として、jQuery UI の読み込みを全て外して
npm run buildした場合、admin.bundle.jsは 1,340KB → 1,164KB (-176KB) になります。進め方 (案)
BC への影響度が異なるため、3 段階に分けたいと考えています。
tooltipの読み込み削除 — 誰にも使われていないため影響なし。resizableの撤去 —$("#editor").resizable({resize: () => editor.resize()})は CSS のresize: verticalとResizeObserverで代替可能。追加ライブラリ不要。twig 内の.ui-resizable-seのスタイル指定も不要になる。sortableの代替 (要議論) — SortableJS への置換を想定。単一リストの並べ替え (items+update) はほぼ機械的に対応するが、layout_design.jsは複数コンテナ間の移動 (connectWith)・placeholder・ui.sender判定を使っており、group/ghostClass/onAddへの設計の読み替えが必要。論点: プラグイン互換
3 の実施にあたっては後方互換の判断が必要です。
admin.bundle.jsはグローバルに$.fn.sortableを生やしているため、これに依存しているプラグインが存在し得る。Content/layout.twigはui-sortableクラスをマークアップに直接記述しており、updateUpDown()もこのクラスを親セレクタとして参照している。事実上の公開インターフェイスになっている可能性がある。撤去する場合、どのバージョンで、どのような告知とともに行うかを決める必要があります。
補足
require('jquery-ui/ui/core')の削除のみを行っており、本 issue のスコープとは切り離しています。admin-contents.spec.ts(レイアウト管理の drag & drop) とadmin-basicinfo.spec.tsが関連します。