Phoenix LiveView 1.2 發佈說明

Phoenix LiveView 1.2 的重點在於透過在 HEEx 模板中直接實現 CSS 共存（colocation），來提升開發者體驗，這反映了先前為 JavaScript 引入的功能。此版本包含對 HEEx 編譯器的重大架構變更，以支援這些功能。

HEEx 模板中的共存 CSS

LiveView 1.2 允許開發者使用帶有特定 :type 屬性的 <style> 標籤，直接在 HEEx 模板中定義 CSS 樣式。這種方法讓樣式可以與其所影響的 HTML 一起定義。

實作與建置流程

使用 :type={MyApp.ColocatedCSS} 定義的樣式會在編譯時被提取到 _build 目錄下的特殊 phoenix-colocated 資料夾中。這些提取出的樣式接著會由專案現有的 CSS 流程（例如 Tailwind CSS 或 Esbuild）進行處理，確保共存的樣式能整合進最終的 CSS 封裝檔中。

CSS 作用域（Scoping）與 @scope 規則

為了防止共存的樣式洩漏到其他組件，LiveView 1.2 引入了作用域機制。這是透過在渲染的 HTML 中標註唯一的屬性來識別模板的邊界來實現的。

  1. 根標籤屬性：透過在 Phoenix LiveView 配置中設定 root_tag_attribute: "phx-r"，LiveView 會在模板的所有最外層元素上增加一個 phx-r 屬性。
  2. 獨特的組件屬性：使用作用域 CSS 的組件根元素也會獲得一個唯一的 phx-css-* 屬性。

這些屬性允許使用現代 CSS @scope 規則，將樣式精確地對準組件的根部並限制選擇器。例如，像 @scope ([phx-css-foo]) to ([phx-r]) 這樣的規則可以確保只有該特定組件邊界內的元素會受到影響。

作用域可用性

雖然提供了作用域的基礎設施，但由於截至 2026 年 6 月，@scope CSS 規則尚未在所有瀏覽器中得到普遍支援，因此 LiveView 1.2 並未預設啟用 @scope 實作。相反地，LiveView 提供了一個 @behaviour，讓開發者可以實作自定義的作用域策略，或選擇加入 @scope 實作以進行早期採用。

HEEx 編譯架構

為了支援 CSS 與 JS 的共存，Phoenix 團隊重新設計了 HEEx 的編譯流程。編譯現在分為兩個截然不同的步驟：標記化（tokenization）與解析（parsing）。這項架構變更簡化了對巨集組件（macro components）的處理，並減少了模板編譯與格式化之間的程式碼重複。

1.2 版本中的其他改進

LiveView 1.2 帶來了幾項提升生活品質的改進：

  • HTML 格式化工具：新的 Phoenix.LiveView.HTMLFormatter.TagFormatter behaviour 允許開發者使用外部工具（例如 Prettier）來格式化 HEEx 模板中的 <script> 與 <style> 標籤。
  • JS 結構體編碼：當透過 push_event 使用 Jason 或內建的 JSON 模組傳送時，Phoenix.LiveView.JS 結構體現在會自動進行編碼。開發者也可以使用 JS.to_encodable/1 手碼進行編碼。
  • Debug 標註：HEEx 的 debug 標註現在可以根據每個模組進行配置，使用 @debug_heex_annotations 與 @debug_attributes。
  • 測試：測試警告現在可以按類別進行配置。
  • 文件：JavaScript 用戶端現在擁有自己專屬的文件。

社群觀點

社群討論顯示，對於共存資產（colocated assets）的反應褒貶不一。雖然有些使用者覺得這比起現代 JavaScript 框架來說是「令人耳目一新」的體驗，但也有人擔心將 JS 與 CSS 共存可能會導致程式碼庫變得混亂，並引用了 Rails 2.x 的經驗。一位使用者指出，他們先前在 Surface UI 中使用過類似的功能，並很高興看到它被整合進 LiveView 主線程式庫中。

Sources