概要
- LiveView 1.2.0 がリリースされ、mix.exsのバージョン更新のみで移行可能
- Colocated CSS がHEExテンプレート内で利用可能に進化
- 新しい @scopeルール によるCSSスコープ設定が技術的にサポート
- デフォルトでスコープは無効、独自実装やカスタム戦略が必要
- その他にも 小規模な改善 や新機能が多数追加
LiveView 1.2.0 アップデート方法と主な新機能
- LiveView 1.2.0 へのアップデートは、mix.exsの
{:phoenix_live_view, "~> 1.2.0"}にバージョン指定を変更し、依存関係を再取得するだけで完了 - Colocated CSS 機能追加により、HEExテンプレート内で直接CSS記述が可能
- 例:
<style :type={MyApp.ColocatedCSS}> ... </style>のように記述 - :type属性により、タグ内容がコンパイル時に
phoenix-colocatedフォルダへ抽出、TailwindやEsbuildなどのバンドラで処理
- 例:
- Colocated JS と同様の仕組みで、CSSもテンプレートごとに分離管理
CSSスコープ設定と@scopeルール
- @scopeルール により、特定コンポーネント内だけにCSSを適用可能
- 例:
@scope ([phx-css-foo]) to ([phx-r]) { p { font-weight: bold; } }
- 例:
- phx-r属性 がテンプレートのルート要素に付与され、スコープの範囲を明示
- phx-css- *属性がColocated CSS使用時のルート要素に自動付与
- slot使用時、スロット内要素も独立したphx-r属性付与でスコープを明確化
HEExテンプレートのコンパイル方式変更
- Colocated CSS対応のため、 HEExテンプレートのコンパイル処理を分割
- トークナイズとパースを分離し、マクロコンポーネント(Colocated CSS/JS)も柔軟に処理
- テンプレートコンパイルとフォーマット間のコード重複も解消
デフォルトスコープ未対応と今後の対応
- LiveView 1.2 では@scopeによるスコープCSSはデフォルト無効
- 理由: 2026年6月時点で主要ブラウザで@scope未対応
- 独自の @behaviour を実装し、カスタムスコープ戦略の導入が可能
- 公式ドキュメントには@scopeの実装例あり、早期導入も選択可能
その他の小規模な改善点
- Phoenix.LiveView.HTMLFormatter.TagFormatter ビヘイビアで、HEEx内の<script>や<style>タグを任意のツール(例: prettier)で整形可能
- Phoenix.LiveView.JS構造体 がpush_event送信時に自動エンコード(Jasonまたは組み込みJSON利用時)、JS.to_encodable/1で手動エンコードも可能
- HEExデバッグ注釈 をモジュール単位で@debug_heex_annotationsや@debug_attributesで設定可能
- テスト警告 をカテゴリごとに設定可能
- JavaScriptクライアント のドキュメントを分離、詳細はchangelog参照
フィードバックとサポート
- フィードバックは Elixir forum や BlueSky で受付
- バグ報告は GitHub Issue で受付
- Dashbit によるスポンサーシップに感謝
Happy coding!