Polaris Web Components 2.0 が CDN の stable チャネルで配信開始。CDN がセマンティックバージョニングになってから初めてのメジャーリリース。ただし自動では切り替わらないので、script タグを polaris-2.js に変える必要がある。
polaris-2.js と polaris-2.0.js の2つの URL で 2.0 が配信される。
リニューアル後の管理画面のフレーム・ナビゲーション・外観に合わせた版。
polaris.js / polaris-1.js は引き続き 1.1 を配信。2.0 にするには自分で script タグを書き換える。
polaris-2.js はメジャー 2 系の最新を追い、polaris-2.0.js は 2.0 に固定される。polaris.js は今後も 2.x に移らないと明記されている。
| URL | 今配信される版 | 今後の 2.x リリース時 | 向いている使い方 |
|---|---|---|---|
polaris.js |
1.1 | 2.x には絶対に移らない | すぐには移行しないアプリ |
polaris-1.js |
1.1 | 記載なし（1.1 を配信し続けると記載） | 1 系に留まりたいアプリ |
polaris-2.js |
2.0 | 後続の 2.x に追従 | 公式が案内する標準のアップデート先 |
polaris-2.0.js |
2.0 | 2.0 のまま固定 | 後続 2.x を取り込まず 2.0 に留めたいアプリ |
polaris.js / polaris-1.js を polaris-2.js に変更。
@shopify/polaris-types@^2.0.0 をインストール。
後続 2.x を取り込みたくなければ polaris-2.0.js を指定。
<script src="https://cdn.shopify.com/shopifycloud/polaris-2.js"></script>
<script src="https://cdn.shopify.com/shopifycloud/polaris-2.0.js"></script><script src="https://cdn.shopify.com/shopifycloud/polaris-2.0.js"></script>polarisUrl を2か所に設定AppProvider と shopifyApp のサーバー設定の両方で polarisUrl を指定し、値を揃える。@shopify/shopify-app-react-router 2.1.0 以上が必要。
npm install @shopify/polaris-types@^2.0.0記事に書かれているのは @shopify/polaris-types@^2.0.0 を入れることだけ。上記はそれを npm で書いた例（パッケージマネージャは任意）。
既存アプリは何もしなければ 1.1 のまま。勝手に壊れない一方で、新しい管理画面と見た目を揃えるには自分で切り替える必要がある。
polaris.js は「最新」ではない名前から最新版を指すように見えるが、2.x には絶対に移らない。「polaris.js を使っていれば最新」という思い込みは捨てる。
polaris-2.js は後続 2.x に追従、polaris-2.0.js は 2.0 に固定。検証済みの版で止めたいなら pin、更新を自動で取り込みたいなら追従。
AppProvider とサーバー側 shopifyApp の polarisUrl は同じ値にする。片方だけ変えないこと。@shopify/shopify-app-react-router 2.1.0 以上が前提。
TypeScript 環境では @shopify/polaris-types@^2.0.0 をインストールする。CDN の版と型定義の版を揃えておく。変更内容の詳細は記事に記載なしのため、「Update your app for Polaris 2」「Versioning for web components」を併読する。
polaris-2.js に変更し、TypeScript 環境では @shopify/polaris-types@^2.0.0 に更新する。polaris-2.0.js に pin して 2.0 で動作確認 → 後続 2.x が出たら検証してから URL を上げる運用にする。polaris-2.js、固定したいアプリは polaris-2.0.js、とアプリごとに方針を決めて README に残す。@shopify/shopify-app-react-router を 2.1.0 以上に → ② AppProvider と shopifyApp の polarisUrl を同じ値に → ③ 型定義を ^2.0.0 に、の3点をチェックリスト化。polarisUrl を環境変数や共通定数に1か所で定義し、両方から参照すると値のずれを防ぎやすい。