feat: jQuery 4 にアップグレード#1396
Conversation
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #1396 +/- ##
=======================================
Coverage 55.30% 55.30%
=======================================
Files 87 87
Lines 11089 11089
=======================================
Hits 6133 6133
Misses 4956 4956
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
jQuery 4.0 で `.attr('checked'|'selected'|'disabled')` の文字列値での設定挙動と
イベントショートカット `.load(fn)` (Ajax 版ではないバインド) が削除されたため、
EC-CUBE 本体の対象 17 箇所を jQuery 4 ネイティブ API に置換した。
- 管理画面: design/index, order/edit, ownersstore/{plugin,plugin_hookpoint_list},
products/{product,product_class}
- PC フロント: products/detail (favorite ボタンの img load イベント)
- インストーラ: install/step1 (SMTP フォーム disable)
- バンドル: data/eccube.js (規格 2 プルダウンの option 選択状態)
また data/eccube.js の `\$.migrateMute = true;` を削除し、jquery-migrate の
警告を常時 console に出力するよう変更した。これは将来 jQuery メジャーアップ時に
deprecated API 利用箇所を早期発見するため。
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
EC-CUBE 2 に同梱されている 2007〜2010 年制作の旧式 jQuery プラグイン 3 つで、
jQuery 4 で削除された API (.bind, .size, .attr('selected', ...) ) を
jQuery 4 ネイティブ API に置換した。
- jquery.biggerlink.js (sphone): .bind() 5 件 → .on()
- jquery.autoResizeTextAreaQ-0.1.js (sphone): .bind() 1 件 → .on()
- jquery.multiselect2side.js (admin CSV 設定): .size() 9 件 → .length、
.attr('selected', true/false) 9 件 → .prop('selected', true/false)
これらは upstream で更新されていない fork なので、本リポジトリで直接修正する
方針を採った。
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- jquery: 3.7.1 → ^4.0.0
- jquery-migrate: ^3.5.2 → ^4.0.0
- jquery-ui: ^1.14.1 → ^1.14.2 (jQuery 4 公式テスト済バージョン)
jquery-migrate は package.json から削除せず残置する。本体・同梱プラグインは
jQuery 4 ネイティブ API に改修済みのため migrate なしで動作するが、ユーザーが
html/user_data/packages/<template_code>/ 配下に書いた独自テンプレート JS で
レガシー API を使っているケースに対する後方互換シムとして機能させる。
警告は意図的に mute しないため、ユーザーカスタム部分の deprecated API 利用が
ブラウザ console で可視化される。将来のメジャーアップ時の修正を促す目的。
合わせて esbuild ビルド成果物 (html/js/eccube.{js,css,map}) を再生成した。
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 participant
Summary
EC-CUBE 2 系を jQuery 3.7.1 から jQuery 4.0 にアップグレードする。あわせて jquery-ui 1.14.1 → 1.14.2、jquery-migrate 3.5.2 → 4.0 を取り込む。
jquery-migrate@4 は package.json に残置し、ユーザーが
html/user_data/packages/<template_code>/配下に書いた独自テンプレート JS でレガシー API を使っているケースを保護する。$.migrateMuteは削除して警告を常時 console 出力し、deprecated API 利用箇所の早期発見を促す。Changes
1. 本体コードの jQuery 4 互換 API 置換 (17 箇所)
jQuery 4 で削除される
.attr('checked'|'selected'|'disabled')の文字列設定挙動と、イベントショートカット.load(fn)を置換。admin/design/index.tpl,admin/order/edit.tpl,admin/ownersstore/{plugin,plugin_hookpoint_list}.tpl,admin/products/{product,product_class}.tpldefault/products/detail.tpl(お気に入りボタンの img load イベント)install/templates/step1.tpl(SMTP フォーム disable)data/eccube.js(規格 2 プルダウンの option 選択状態 + migrateMute 削除)2. 同梱の旧式 jQuery プラグインを jQuery 4 互換に更新
jquery.biggerlink.js(sphone, 2007 年版):.bind()5 件 →.on()jquery.autoResizeTextAreaQ-0.1.js(sphone, 2010 年版):.bind()1 件 →.on()jquery.multiselect2side.js(admin CSV, 2010 年版):.size()9 件 →.length、.attr('selected', bool)9 件 →.prop('selected', bool)3. 依存関係更新
jquery:3.7.1→^4.0.0jquery-migrate:^3.5.2→^4.0.0(残置、warn は mute しない)jquery-ui:^1.14.1→^1.14.2(jQuery 4 公式テスト済)4. ビルド成果物
yarn.lockを新規追加html/js/eccube.{js,css,map}を esbuild で再生成Test plan
npm run build成功data/vendor/bin/phpunit通過 (jQuery 化と無関係の既存mysqli object is already closedエラー 11 件は別問題)admin/products/review,admin/basis/delivery× 2) は jQuery 4 修正箇所と無関係で master でも再現する可能性が高い (PC フロントの商品検索フォーム不在、管理画面のルーティング問題)admin/design/index.php) — sortable によるブロック並び替えadmin/order/edit.php) — 数量入力欄の disable 制御a.expansionのカラーボックス画像拡大#detailphotoblock ul,#whobought_area ul)$.colorboxモーダル/install/) — SMTP フォーム disable 切替既知の懸念
slick-carousel@1.8.1は upstream で jQuery 4 未対応。動作確認で$.type is not a function等が出た場合はslick-carousel-jquery4@4.xへの差し替えを検討する。jquery-colorbox@1.6.4は upstream archived。本 PR では動作確認のみとし、将来的に TurbojetTechnologies/colorbox fork への移行を別 issue で検討。🤖 Generated with Claude Code