Phoenix LiveView 1.2版本发布，主要新增了在HEEx模板中直接编写CSS的功能，支持将CSS代码与组件同位置存放，并通过编译时提取到构建目录中与常规CSS流程整合。同时保留了1.1版本中引入的同位置JavaScript和钩子功能，升级只需修改mix.exs文件版本号即可。

Phoenix LiveView 1.2 版本发布

发布日期：2026年6月10日
作者：Steffen Deusch

主要更新内容

1. Colocated CSS（同文件CSS）

   • LiveView 1.2 在 1.1 版本引入的“同文件Hooks”和“同文件JavaScript”基础上，进一步支持在 HEEx 模板中直接编写 CSS。
   • 通过 <style :type={MyApp.ColocatedCSS}> 标签内联 CSS，编译时内容会被提取到 _build 目录下的 phoenix-colocated 文件夹，由打包工具（如 Tailwind 或 Esbuild）处理。
   • 结合 CSS 的 @scope 规则，可实现样式作用域隔离，避免组件样式污染全局。例如：
     css @scope ([phx-css-foo]) to ([phx-r]) { p { font-weight: bold; } }
   • 需在配置中启用根标签属性标记：config :phoenix_live_view, root_tag_attribute: "phx-r"。
   • 注意：由于浏览器对 @scope 的支持尚不完善（截至2026年6月），默认未启用该功能，但提供了自定义作用域实现的接口。

2. HEEx 编译优化

   • 为实现同文件 CSS，重构了 HEEx 模板的编译流程，分离为词法分析和解析两步，提升处理宏组件（如 CSS/JS）的灵活性。

3. 其他改进

   • 标签格式化：支持通过 Phoenix.LiveView.HTMLFormatter.TagFormatter 行为自定义 <script> 和 <style> 标签的格式化工具（如 Prettier）。
   • JS 结构编码：Phoenix.LiveView.JS 结构现在可通过 push_event 自动编码（支持 Jason 或内置 JSON 模块）。
   • 调试配置：支持通过模块属性 @debug_heex_annotations 和 @debug_attributes 按模块配置 HEEx 调试注解。
   • 测试警告分类：测试警告可按类别配置。
   • 文档分离：JavaScript 客户端文档已独立。

升级指南

将 mix.exs 中的依赖版本更新为：
elixir {:phoenix_live_view, "~> 1.2.0"}

反馈与致谢

• 欢迎通过 Elixir 论坛或 BlueSky 提供反馈，发现问题请提交 Issue。
• 感谢 Dashbit 对本版本开发的赞助！

精简说明：
- 移除原文中导航菜单、标签列表、页脚等非核心内容。
- 保留技术细节（如 CSS 作用域实现、HEEx 编译优化）和实用改进（如格式化工具支持）。
- 突出版本亮点与升级方式，确保信息清晰实用。

以下是评论内容的总结：

1. LiveView优势

   • 认为LiveView比NextJS更简洁高效，提供开箱即用的功能
   • 关键引用：
     • "LiveView is such a breath of fresh air...that need specialized hosting, are dog slow"
     • "Elixir and Phoenix provide out of the box"

2. 技术对比询问

   • 询问与ASP.Net/Blazor的优缺点比较
   • 关键引用：
     • "What are the pros and cons compared to ASP.Net/Blazor?"

3. 对CSS/JS集成的担忧

   • 担心代码组织混乱，类似早期Rails的问题
   • 关键引用：
     • "it reminds me of Rails 2.x where it became almost impossible to debug"
     • "disparate snippets of JS were littered throughout your code base"

4. LLM支持疑问

   • 好奇LLM对Phoenix/Elixir的代码生成能力
   • 关键引用：
     • "I wonder how good are LLMs at writing Phoenix or Elixir"
     • "Time for me to create another side project"

5. 轻量SPA实践

   • 分享类似技术的成功实践案例
   • 关键引用：
     • "I find the end result blazing fast, simple to maintain"
     • "I recommend this approach for websites that are not very complex"

注：所有评论均无评分数据。观点呈现平衡，包含支持、质疑和实践经验分享。