查看源代码 变更日志
0.20.17 (2024-06-21)
错误修复
- 修复格式化程序在脚本标签中添加换行符
0.20.16 (2024-06-20)
错误修复
- 修复 0.20.15 中引入的错误,该错误在等待确认时会导致对表单元素进行错误的修补
0.20.15 (2024-06-18)
增强功能
- 渲染名为“id”的输入时发出警告
- 在客户端和服务器版本不匹配时发出警告
- 允许表单恢复在嵌套的 LiveView 中的表单上工作
- 允许在表单外部使用 form/3 与输入
- 允许将页面标题设置为空字符串
- 修复 Elixir 1.17 上的警告
错误修复
- 修复现有流项的属性在重置时未更新
- 修复流内的嵌套 LiveView 在重置时变为空
- 修复
phx-mounted
触发两次,第一次在死渲染时,第二次在实时渲染时,导致 LiveComponent 尚未挂载时出现错误 - 修复
JS.toggle_class
在与过渡一起使用时出现错误 - 修复 phx-debounce=blur 在某些情况下错误地将更改事件发送到下一页
- 修复在过渡仍在运行时销毁 LiveComponent 时发生的竞争条件
- 修复如果使用 Bandit,则在断开 LiveSocket 连接时重新加载页面
- 修复格式化程序将
<%
更改为<%=
,而它不应该这样做 - 修复在某些情况下使用 phx-trigger-action 时未发送更新的表单值
- 修复 html 或 body 元素具有 overflow 属性时的 phx-viewport 绑定
弃用
- 弃用
live_flash
,转而使用Phoenix.Flash.get
- 弃用
push_redirect
,转而使用push_navigate
删除之前已弃用的功能
phx-capture-click
已删除(在 0.17.0 中弃用)live_component/2
和live_component/3
助手(不是函数组件)已删除
0.20.14 (2024-03-13)
错误修复
- 修复由可选 Floki 依赖项引起的警告
0.20.13 (2024-03-12)
错误修复
- 修复 LiveComponent 渲染错误,导致元素在服务器删除 LiveComponent 子节点并将其添加回来时消失
增强功能
- 在访问传递给 assign_async / start_async 的函数中的套接字时发出警告
0.20.12 (2024-03-04)
增强功能
- Phoenix LiveView 需要 Elixir v1.13+
错误修复
- 不要将 Telemetry 元数据作为 Logger 事件发送,这避免了元数据意外复制到其他进程
- 确保 LiveViewTest 在包含外来字符(如问号)的 ID 上不会崩溃
- 修复 LiveViewTest 无法在包含某些流的页面上执行连接挂载的错误
0.20.11 (2024-02-29)
错误修复
- 修复带有无效条目的自动上传错误地继续进行表单提交而不是停止,导致正在进行的条目错误
- 修复自动上传条目在提交后无法上传,即使它们已进入有效状态,例如,落在
max_entries
内 - 修复 TagEngine 子句警告
0.20.10 (2024-02-28)
错误修复
- 修复已取消的上传被重新添加
- 修复先前提交的无效上传条目的表单提交导致错误,而不是预检新的上传条目
- 修复 HTML 格式化程序未为脚本标签尊重 phx-no-format
增强功能
- 为函数组件调用的调用者位置添加额外的 HEEx 调试注释
- 如果恢复事件失败,则放弃表单恢复
0.20.9 (2024-02-19)
错误修复
- 修复 LiveViewTest 中的错误,当
phx-update="ignore"
容器被动态地添加到 DOM 中时
0.20.8 (2024-02-19)
错误修复
- 修复表单包含多个
<.live_file_input>
时出现的实时上传程序问题 - 修复在重新添加的流项上 phx-remove 触发删除,而它不应该触发
- 修复尝试重新排序 DOM 中不存在的元素时出现的 js 错误
增强功能
- 在 LiveViewTest 中更新属性时,将 LiveViewTest 与 JavaScript DOM 修补行为对齐,以实现 phx-update="ignore"
0.20.7 (2024-02-15)
错误修复
- 修复 phx-skip 容器在某些情况下在第一次修补时泄漏到 DOM 中(#3117)
- 修复 phx-feedback-for 在某些情况下无法正确更新(#3122)
0.20.6 (2024-02-14)
错误修复
- 修复流项在 LiveViewTest 中被排除在外
- 修复流项无法正确更新嵌套流或 LiveComponent
- 修复 debounce/blur 回归导致发送意外事件
0.20.5 (2024-02-08)
弃用
- 弃用在上一个版本中引入的
phx-feedback-group
,目标是将反馈处理移到 Elixir 中,而不是 DOM
错误修复
- 修复 phx-debounce 上的 blur 事件被错误地分派
- 修复
open_browser
在 WSL 上对位于 UNIX 文件系统下的项目不起作用 - 在
LiveViewTest
中匹配浏览器流插入排序行为 - 修复
phx-click-away
在元素部分隐藏时不起作用 - 修复
phx-feedback-for
类在某些情况下未应用 - 修复表单提交者在某些情况下无法作为键值对发送
- 修复空表单引用导致某些 DOM 修补出现错误
0.20.4 (2024-02-01)
错误修复
- 修复粘性 LiveView 上的 phx-remove
- 修复 phx-disabled-with 在空差异确认时未恢复按钮禁用状态
- 修复流重置未按顺序排序项
- 在
cancel_async
上向handle_async/3
发送{:shutdown, :cancel}
- 防止来自子 LiveView 的事件在子节点尚未挂载时冒泡到根 LiveView
- 修复
phx-mounted
对流项被调用两次 - 如果现有流项已存在,则永远不要移动它们(使用 stream_delete,然后使用 stream_insert 代替)
- 修复在服务器添加了客户端已修剪的组件时,实时组件渲染中断(#3026)
- 允许从上传进度回调重定向
- 修复在重置流时嵌套组件被跳过
- 修复嵌套组件在 LiveComponent 中被跳过
- 修复在批量插入时流限制未正确应用
- 修复在表单提交时错误地调用点击远离
- 修复 LiveViewTest 和浏览器流实现之间的不一致性
- 修复当有多个具有相同名称的输入时,phx-feedback-for 被重新应用
- 确保 phx-update="ignore" 行为一致:忽略来自服务器对元素内容和属性的更新,_除了数据属性_
增强功能
- 添加
JS.toggle_class
- 添加
JS.toggle_attribute
- 当选项从服务器更改时,强制更新选择选项,同时选择具有焦点
- 引入
phx-feedback-group
用于处理复合输入组的反馈 - 向插槽添加
validate_attrs
- 支持可滚动容器中的
phx-viewport
绑定 - 在尝试从死客户端进行实时导航时执行客户端重定向,以避免额外的往返
- 允许具有 name/value 属性的常规按钮发送表单事件,并调整动态表单文档以反映这一点
- 允许
live_file_input
上的 form 属性
删除之前已弃用的功能
live_component/2
和live_component/3
助手(不是函数组件)已删除
0.20.3 (2024-01-02)
错误修复
- 修复 phx-viewport 绑定在导航后无法触发
- 在
LiveViewTest
中保留流中附加项的顺序 - 修复在将流重置为现有项集时,客户端上项的顺序
增强功能
- 支持
JS.push
从死视图
0.20.2 (2023-12-18)
错误修复
- 修复提交具有进行中上传的表单时出现的 JavaScript 错误
- 修复 JS 命令
:target
在与基于选择器的目标一起用作 phx-submit 或 phx-change 时无法工作 - 修复
JS.focus()
无法聚焦负 tabindex - 修复
LiveViewTest
无法在流重置后删除项 - 修复
phx-window-blur
和phx-window-focus
事件未触发 - 修复 SVG 锚点链接在点击时抛出错误
增强功能
- DOM 修补性能提高 3-30 倍 🔥
- 支持
handle_async
生命周期回调 - 扩展 phx-click-away 的可见性检查,以更好地处理元素是否在视窗中可见
- 允许
JS.patch
和JS.navigate
用render_click
测试 - 支持
:supervisor
选项到assign_async
和start_async
弃用
- 弃用
phx-update="append"
和phx-update="prepend"
,转而使用phx-update="stream"
0.20.1 (2023-10-09)
错误修复
- 修复实时上传
auto_upload: true
在文件预检失败时的错误 - 修复实时上传的错误,其中早期退出会导致地图键错误
- 修复在客户端重新连接时进行实时导航时的匹配错误
增强功能
- 在 JavaScript 客户端的 File/Blob 子类上支持新的
meta()
方法,允许客户端在使用钩子中的upload/uploadTo
时传递任意元数据。%UploadEntry{}
的新client_meta
字段将从这些信息中填充。 - 改进 void 标记和错误消息
0.20.0 (2023-09-22)
弃用
- 弃用
~L
符号,改为使用~H
- 在 LiveComponent 中弃用
preload/1
,改为使用update_many/1
- 弃用
live_component/2-3
,改为使用<.live_component />
- 弃用
live_patch
,改为使用<.link patch={...} />
- 弃用
live_redirect
,改为使用<.link navigate={...} />
- 弃用
live_title_tag
,改为使用<.live_title />
向后不兼容的更改
- 删除之前弃用的
render_block/2
,改为使用render_slot/2
- 删除之前弃用的
live_img_preview/2
,改为使用<.live_img_preview />
- 删除之前弃用的
live_file_input/2
,改为使用<.live_file_input />
错误修复
- 修复使用
auto_upload: true
的上传时,当任何单个条目无效时,无法传播错误 - 修复使用
auto_upload: true
的上传时,当任何单个条目无效时,无法自动上传有效条目错误 - 修复使用
auto_upload: true
的表单恢复时的错误 - 修复表单恢复时,隐藏输入被错误选中的问题
- 修复当 phx-change 是 JS 命令时的表单恢复
- 修复嵌套流的嵌套 Live 组件上的流重置
- 修复在连接错误时使用嵌套 LiveView 时,窗口位置重置为 null
- 修复可编辑内容中的锚点导致 LiveSocket 断开连接
增强功能
- 通过
config :phoenix_live_view, debug_heex_annotations: true
添加 Heex 调试注释,这将提供围绕渲染组件的特殊 HTML 注释,以帮助您识别 HTML 文档中的标记在函数组件树中的渲染位置 - 添加
assign_async
、start_async
、<.async_result>
和AsyncResult
,用于在 LiveView 或 LiveComponent 中以声明方式处理异步操作。 - 支持为
Phoenix.LiveView.send_update/3
传递@myself
- 支持 Access.get 上的更改跟踪
- 允许覆盖
<.live_img_preview>
的id
0.19.5 (2023-07-19)
向后不兼容的更改
Phoenix.LiveView.UploadWriter
的close/1
回调现在为close/2
,并将关闭原因作为第二个参数传递。Phoenix.LiveView.UploadWriter
的write_chunk
回调现在必须在发生错误时返回更新的写入器状态。 不要返回{:error, reason}
,而是返回{:error, reason, new_state}
。
增强功能
- 将关闭原因传递给
Phoenix.LiveView.UploadWriter
的关闭。 - 当 LiveView 更改历史记录状态时,调度
phx:navigate
窗口事件
错误修复
- 当 LiveView 停止或连接丢失时,调用
Phoenix.LiveView.UploadWriter
的关闭回调 - 修复对具有
:host
的 Phoenix 路由范围的 JS.patch 导致错误 - 修复修补后立即导航不会更新 URL
- 修复 Live 组件内部嵌套流上的流重置导致嵌套流子项被删除
0.19.4 (2023-07-10)
增强功能
0.19.3 (2023-06-21)
错误修复
- 修复某些情况下,组件更新内的
push_event
不会发送 - 恢复意外弃用的
upload_errors/1
0.19.2 (2023-06-12)
错误修复
- 修复使用
<input name="value" />
时的错误
0.19.1 (2023-06-06)
增强功能
- 允许
<.live_file_input>
上的accept
属性覆盖默认值
错误修复
- 修复导致锚点点击断开 LV 连接的问题,即使它们已通过其他脚本中的
preventDefault()
处理
0.19.0 (2023-05-29)
向后不兼容的更改
- 不再支持将 id 传递给
phx-feedback-for
属性。 必须改为传递输入名称。 - 删除之前弃用的
let
属性。 改用:let
- 删除之前弃用的
<%= live_img_preview(entry) %>
。 改用<.live_img_preview entry={entry} />
- 删除之前弃用的
<%= live_file_input(upload) %>
。 改用<.live_file_input upload={upload} />
- 删除之前弃用的
<%= live_component(Component) %>
。 改用<.live_component module={Component} id=\"hello\" />
- 渲染 HTML 属性时不再自动将下划线转换为连字符。 改用连字符或下划线,具体取决于情况。
增强功能
- 支持使用批量插入操作重置流
- 支持
inputs_for
中的有序输入,以配合 Ecto 的新sort_param
和drop_param
转换 - 在表单事件上发送表单 phx-value
弃用
- 弃用将
:dom_id
传递给stream/4
,改为使用stream_configure/3
- 弃用
render_block/2
,改为使用render_slot/2
- 弃用
<%= live_img_preview(entry, opts) %>
。 改用<.live_img_preview entry={entry} {opts} />
- 弃用
<%= live_file_input(upload, opts) %>
。 改用<.live_file_input upload={upload} {opts} />
- 弃用无状态 LiveComponent,改为使用函数组件或
<.live_component id={...} />
(注意id
是必需的)
错误修复
- 修复点击
download
链接时 LiveView 断开连接 - 修复嵌套 for 推导式中流删除未发送
- 修复
phx-disconnected
绑定在挂载失败时未触发 - 支持仅包含隐藏输入的表单上的表单恢复
0.18.18 (2023-03-16)
错误修复
- 允许在组件中分配
:live_action
- 仅在
assigns_to_attributes
中过滤内部函数组件属性 - 仅包含具有名称的提交者
增强功能
- 添加
JS.exec
命令,用于执行在其他元素属性上定义的命令
0.18.17 (2023-03-09)
错误修复
- 修复在使用 Phoenix 代码重新加载器后,代码更改后,
handle_info
等回调无法在开发中调用
增强功能
- 支持表单提交事件上的
submitter
。 - 避免在引用结构时为
attr
使用编译时依赖 - 验证保留的分配。 尝试分配
:uploads
、:streams
、:live_action
、:socket
、:myself
现在将在 LiveView 和 LiveComponent 中引发错误
0.18.16 (2023-02-23)
增强功能
- 支持 Live 组件中的流
- 优化在连接的 LiveView 上引发 Plug.Exception 时的插件错误转换
错误修复
- 修复存在多个 HTML 注释时的格式化程序问题
0.18.15 (2023-02-16)
错误修复
- 修复
JS.transition
应用不正确的类
增强功能
- 在
type="reset"
输入和按钮上重置 phx-feedback-for 错误
0.18.14 (2023-02-14)
错误修复
- 修复 LiveViewTest 无法找到主 LiveView
0.18.13 (2023-02-10)
增强功能
- 改进无法使用 Phoenix.Component 时的错误消息
0.18.12 (2023-02-10)
增强功能
- 引入流,以有效地处理大型集合
- 允许
:handle_event
生命周期钩子中的回复 - 将
<.inputs_for>
组件添加到Phoenix.Component
- 支持生命周期
:handle_event
钩子上的回复
错误修复
- 修复将默认属性重新分配给相同默认值时的更改跟踪
- 修复使用文件选择对话框后,上传拖放无法工作
- 修复当表单的第一个输入是 phx-change 时的表单恢复
0.18.11 (2023-01-19)
错误修复
- 修复对已默认阻止的表单的套接字卸载连接
0.18.10 (2023-01-18)
错误修复
- 修复具有 href 的 svg 标记在点击时错误地卸载套接字
- 修复使用
target="_blank"
的表单提交在提交时错误地卸载套接字
0.18.9 (2023-01-17)
错误修复
- 修复常规表单提交无法调度
0.18.8 (2023-01-16)
增强功能
- 在返回时恢复滚动位置,前提是之前的导航是 Live 修补
错误修复
- 修复 Live 布局在连接渲染之前未应用
0.18.7 (2023-01-13)
错误修复
- 修复在断开连接渲染期间传递给
:live_session
时,Live 布局未应用 - 修复外部锚点点击和带有哈希的链接错误地卸载套接字
0.18.6 (2023-01-09)
错误修复
- 修复外部锚点点击在外部点击时卸载
0.18.5 (2023-01-09)
错误修复
- 修复外部锚点点击卸载套接字
0.18.4 (2023-01-05)
增强功能
- 支持字符串上传名称以支持动态生成的
allow_upload
错误修复
- 修复 LiveView 嵌套在实时补丁上的竞态条件,导致嵌套子项在某些情况下跳过更新
- 修复使用实时导航和
@page_title
时浏览器历史记录显示不正确的标题 - 修复使用
JS.push
进行表单更改时未定义的 _target 参数 - 修复表单提交后添加的输入中缺少
phx-no-feedback
- 修复导航离开或提交外部表单时
phx-disconnected
事件触发
0.18.3 (2022-10-26)
增强功能
- 将
embed_templates
添加到Phoenix.Component
,用于将模板文件嵌入为函数组件 - 在全局插槽属性上引发异常
错误修复
- 修复使用混合 if/for 语法传递多个插槽条目时插槽上的错误
0.18.2 (2022-10-04)
错误修复
- 修复在
:default
之前定义:values
时发生的匹配错误 - 允许元组在外部重定向中使用
- 修复在按下 Enter 键时调度点击离开时的竞态条件
- 修复格式化程序在没有空格的情况下被文本包围时破坏内联块
增强功能
- 添加
intersperse
组件,用于在可枚举元素之间渲染分隔符
0.18.1 (2022-09-28)
错误修复
- 修复 phx-loading 类应用于已失效的视图
- 修复
<.live_img_preview />
在上传时导致无效属性错误 - 元素禁用时不触发 phx 事件
增强功能
- 支持
:include
选项,以逐案扩展全局属性 - 在访问定义在
~H
以外的变量绑定时发出警告
0.18.0 (2022-09-20)
LiveView v0.18 包含一项重大新功能,即使用新的 attr
和 slot
API 进行声明式赋值,用于指定函数组件支持的属性、类型和默认值。属性和插槽在编译时进行验证并发出警告(需要 Elixir v1.14.0+)。
v0.18 包含许多新的函数组件,它们替换了其 EEx 表达式对应项 <%= ... %>
。例如,live_redirect
、live_patch
和 Phoenix.HTML 的 link
已被统一的 Phoenix.Component.link/1
函数组件替换
<.link href="https://myapp.com">my app</.link>
<.link navigate={@path}>remount</.link>
<.link patch={@path}>patch</.link>
这些新组件位于 Phoenix.Component
模块中。Phoenix.LiveView.Helpers
本身已软弃用,所有相关功能都已迁移。升级后,您必须在之前导入 Phoenix.LiveView.Helpers
的地方导入 import Phoenix.Component
。您可能还需要在导入 Phoenix.LiveView
且某些函数已移至 Phoenix.Component
的地方导入 import Phoenix.Component
。
此外,函数组件上的特殊 let
属性已被 :let
用法弃用。
弃用
live_redirect
- 弃用,转而使用新的<.link navigate={..}>
组件Phoenix.Component
live_patch
- 弃用,转而使用新的<.link patch={..}>
组件Phoenix.Component
push_redirect
- 弃用,转而使用Phoenix.LiveView
上新的push_navigate
函数
增强功能
- [组件] 添加声明式赋值,通过
attr
/slot
进行编译时验证和警告 - [组件] 添加新的属性
:let
和:for
,以及带有 HTML 标签、函数组件和插槽支持的:if
。我们仍然支持let
,但格式化程序会将其转换为:let
,很快它将被弃用。 - [组件] 添加
dynamic_tag
函数组件 - [组件] 添加
link
函数组件 - [组件] 添加
focus_wrap
函数组件,以围绕内容(如模态和对话框)包装焦点,以实现无障碍性 - [日志记录器] 添加新的 LiveView 日志记录器,带有用于生命周期事件的遥测仪器
- [JS] 添加用于无障碍性的新 JS 命令:
focus
、focus_first
、push_focus
和pop_focus
- [套接字] 支持通过
use Phoenix.LiveView.Socket
与常规通道共享Phoenix.LiveView.Socket
- 添加
_live_referer
连接参数,用于处理push_navigate
的推荐 URL - 添加新的
phx-connected
和phx-disconnected
绑定,用于对生命周期更改做出反应 - 为 JS 命令添加失效视图支持
- 为钩子添加失效视图支持
错误修复
- 修复外部上传问题,其中在客户端发生外部故障时未清除侦听器
- 不防抖
phx-blur
0.17.12 (2022-09-20)
增强功能
- 添加对即将推出的 Phoenix 1.7 闪光界面支持
0.17.11 (2022-07-11)
增强功能
- 将
replaceTransport
添加到 LiveSocket
错误修复
- 取消在实时导航事件后触发的防抖事件
- 修复哈希锚点在实时导航时无法滚动到锚点元素
- 不防抖
phx-blur
事件
0.17.10 (2022-05-25)
错误修复
- [格式化程序] 保留属性上的单引号分隔符
- [格式化程序] 不要格式化没有空格包围的内联元素
- [格式化程序] 在没有空格的情况下保持文本和 eex 始终在一起
- [格式化程序] 修复在 eex 表达式后有意换行
- [格式化程序] 将自闭合标签处理为内联
- [格式化程序] 不要格式化没有空格的内联元素
- [格式化程序] 属性 contenteditable 存在时不要格式化
增强功能
- [格式化程序] 引入特殊属性 phx-no-format 以跳过格式化
0.17.9 (2022-04-07)
错误修复
- 修复粘性 LiveView 在实时导航期间无法修补
- 不要在动态
phx-update
值上引发异常
0.17.8 (2022-04-06)
增强功能
- 添加 HEEx 格式化程序
- 支持
phx-change
在单个输入上 - 在客户端调度
MouseEvent
- 将
:bubbles
选项添加到JS.dispatch
以控制事件冒泡 - 在钩子上公开底层
liveSocket
实例 - 默认情况下在 localhost 上启用客户端调试
错误修复
- 修复从 mount 进行连续实时重定向导致的钩子和粘性 LiveView 问题
- 修复在某些情况下,phx-remove 子项的钩子销毁回调无法调用
- 如果断开连接,不要在推送超时时对页面进行故障安全重新加载
- 不要将导航点击事件冒泡到常规 phx-click
- 不再为没有操作的表单生成
csrf_token
,从而减少了 phx-change/phx-submit 事件期间的负载
0.17.7 (2022-02-07)
增强功能
- 优化嵌套的 for 推导差异
错误修复
- 修复在某些情况下,当未连接时
live_redirect
链接被点击时发生的错误
0.17.6 (2022-01-18)
增强功能
- 添加
JS.set_attribute
和JS.remove_attribute
- 添加
sticky: true
选项到live_render
,以在实时重定向之间维护嵌套子项 - 在
JS.show|hide|toggle
上调度phx:show-start
、phx:show-end
、phx:hide-start
和phx:hide-end
- 添加
get_connect_info/2
,它也适用于断开连接的渲染 - 添加
LiveSocket
构造函数选项,用于通过新的maxReloads
、reloadJitterMin
、reloadJitterMax
、failsafeJitter
选项配置故障安全行为
错误修复
- 即使服务器上没有发生更改,也要在提交后显示表单错误
- 修复
phx-disable-with
无法禁用表单以外的元素 - 修复 phx 引用跟踪在针对外部 LiveView 时将元素留在等待状态
- 修复响应上的差异在某些情况下无法等待活动的转换
- 修复
phx-click-away
不尊重phx-target
- 修复“断开连接”广播无法对页面进行故障安全刷新
- 修复
JS.push
带有:target
在某些情况下无法发送到正确的组件
弃用
- 弃用
Phoenix.LiveView.get_connect_info/1
,转而使用get_connect_info/2
- 弃用
Phoenix.LiveViewTest.put_connect_info/2
,转而调用Plug.Conn
中的相关函数 - 弃用从
Phoenix.LiveView.consume_uploaded_entry/3
和Phoenix.LiveView.consume_uploaded_entries/3
上的上传回调中返回“原始”值。回调必须返回{:ok, value}
或{:postpone, value}
。返回任何其他值都会发出警告。
0.17.5 (2021-11-02)
错误修复
- 如果元素不可见,请不要触发
phx-click-away
- 修复
phx-remove
无法拆除嵌套的动态子元素问题
0.17.4 (2021-11-01)
错误修复
- 修复变量作用域问题,导致各种内容块或重复渲染错误
0.17.3 (2021-10-28)
增强功能
- 支持 JS 类转换中的三元组,以便支持分阶段动画,其中转换类与起始类和结束类一起应用
- 允许在 LiveView 容器之外的 DOM 节点上执行 JS 命令
优化
- 避免在推导式中出现重复的静态内容。在以前版本中,推导式只能避免其根节点内容中的重复。现在,我们递归地遍历所有推导式节点,并且只为整个推导式发送一次静态内容。这应该大大降低通过网络发送推导式的成本
错误修复
- 修复 HTML 引擎错误,导致表达式重复或渲染不正确
- 修复 HTML 引擎错误,导致插槽在应该重新渲染时没有重新渲染
- 修复表单恢复被发送到错误的目标
0.17.2 (2021-10-22)
错误修复
- 修复 HTML 引擎错误,导致属性表达式在某些情况下被错误地计算
- 修复显示/隐藏/切换自定义显示未被恢复的问题
- 修复
JS.show|hide|dispatch
的默认to
目标 - 修复表单输入定位
0.17.1 (2021-10-21)
错误修复
- 修复 SVG 元素对
phx
绑定交互的支持
0.17.0 (2021-10-21)
重大更改
on_mount
更改
LiveView 0.16 中引入的钩子 API 已根据反馈得到改进。LiveView 0.17 删除了 Phoenix.LiveView.on_mount/1
宏和 Phoenix.LiveView.Router.live_session/3
的 :on_mount
选项的自定义模块函数回调,以支持自定义参数。为了清楚起见,在挂载生命周期阶段调用的模块函数将始终命名为 on_mount/4
。
例如,如果您之前这样调用了 on_mount/1
on_mount MyAppWeb.MyHook
on_mount {MyAppWeb.MyHook, :assign_current_user}
并定义了您的回调为
# my_hook.ex
def mount(_params, _session, _socket) do
end
def assign_current_user(_params, _session, _socket) do
end
将回调更改为
# my_hook.ex
def on_mount(:default, _params, _session, _socket) do
end
def on_mount(:assign_current_user, _params, _session, _socket) do
end
如果只给定模块名称,则 on_mount/4
的第一个参数将是原子 :default
。
有状态的 LiveComponents 中的 LEEx 模板
有状态的 LiveComponents(其中给定了 :id
)现在必须返回 HEEx 模板(~H
符号或 .heex
扩展名)。LEEx 模板(~L
符号或 .leex
扩展名)不再受支持。这解决了错误,并允许有状态的组件在客户端更有效地渲染。
phx-disconnected
类已被 phx-loading
类替换
由于新发布的 Safari 15 中存在错误,以前使用的 .phx-disconnected
类已被新的 .phx-loading
类替换。更改的原因是 phx.new
在生成的 app.css
中包含了一个 .phx-disconnected
规则,该规则触发了 Safari 错误。重命名该类避免了对现有应用程序应用错误规则。用户可以通过简单地将他们的 .phx-disconnected
规则重命名为 .phx-loading
来进行升级。
phx-capture-click
已被弃用,取而代之的是 phx-click-away
新的 phx-click-away
绑定取代了 phx-capture-click
,并且它更加通用,因为它可以检测容器上的“点击焦点”丢失。
删除之前弃用的功能
一些以前弃用的功能已被删除
- 不再支持
live_component
do-块中的隐式赋值 - 如果可能,将
@socket
传递给live_component
现在会引发异常
增强功能
- 允许函数组件中的插槽:它们标记为
<:slot_name>
,可以使用<%= render_slot @slot_name %>
渲染 - 添加
JS
命令,用于使用扩展的推送 API 在客户端执行 JavaScript 实用程序操作 - 优化字符串属性
- 如果属性是字符串插值,例如
<div class={"foo bar #{@baz}"}>
,则只有插值部分被标记为动态 - 如果属性可以为空,例如“class”和“style”,则将属性名称保留为静态
- 如果属性是字符串插值,例如
- 添加用于渲染
Phoenix.LiveComponent
的函数组件。现在,您必须执行以下操作,而不是<%= live_component FormComponent, id: "form" %>
:<.live_component module={FormComponent} id="form" />
错误修复
- 修复在进行实时重定向后,具有表单恢复功能的 LiveViews 无法在重新连接后正确挂载的问题
- 修复在从挂载发出
push_redirect
时,过时的会话导致完全重定向回退的问题 - 添加对 Safari 错误的解决方法,该错误会导致具有 srcset 的
<img>
标签和具有自动播放的视频无法渲染 - 支持 HEEx 模板中 HTML 注释内的 EEx 插值
- 支持脚本标签内的 HTML 标签(如常规 HTML 中那样)
- 如果在属性名称中使用引号,则引发异常
- 在无法解析插值属性时,将文件名包含在错误消息中
- 确保测试客户端始终在
live_patch
/live_redirect
上发送完整 URL。这反映了 JavaScript 客户端的行为 - 在
live_redirect
上不要从会话中重新加载闪存 - 修复在 Chrome 中,当 DOM 在焦点期间被修补时,选择下拉菜单闪烁的问题
弃用
<%= live_component MyModule, id: @user.id, user: @user %>
已被弃用,取而代之的是<.live_component module={MyModule} id={@user.id} user={@user} />
。请注意,新 API 需要使用 HEEx 模板。此更改使我们能够进一步改进 LiveComponent 并为其带来新功能,例如插槽。render_block/2
已被弃用,取而代之的是render_slot/2
0.16.4 (2021-09-22)
增强功能
- 改进 HEEx 错误消息
- 放松 HTML 标签验证,以支持大小写混合的标签
- 支持自闭合 HTML 标签
- 删除对生命周期钩子定义
handle_params
的要求
错误修复
- 修复推送无法在消息中包含通道
join_ref
的问题
0.16.3 (2021-09-03)
错误修复
- 修复当钩子发出停止重定向时,
on_mount
钩子在重定向之前调用视图挂载的问题。
0.16.2 (2021-09-03)
增强功能
- 改进标记化时的错误消息
- 改进
@inner_block
丢失时的错误消息
错误修复
- 修复在组件顺序发生变化时,
phx-change
表单恢复事件在重新连接时被发送到错误组件的问题
0.16.1 (2021-08-26)
增强功能
- 放宽
phoenix_html
依赖项要求 - 允许通过将函数引用传递给
Phoenix.LiveViewTest.render_component/3
来测试功能组件
错误修复
- 不要为非 POST 表单生成 CSRF 令牌
- 不要添加对
on_mount
声明的编译时依赖项
0.16.0 (2021-08-10)
从 0.15 升级的安全注意事项
LiveView v0.16 通过支持仅通过现有 WebSocket 连接进行导航来优化实时重定向。这是通过 Phoenix.LiveView.Router
的新 live_session/3
功能实现的。安全指南 一直强调以下内容
... 正如我们所见,LiveView 的生命周期始于一个常规的 HTTP 请求。然后建立一个有状态的连接。HTTP 请求和有状态的连接都通过参数和会话接收客户端数据。这意味着任何会话验证都必须在 HTTP 请求(插件管道)和有状态的连接(LiveView 挂载)中进行...
这些指南仍然有效,但现在至关重要的是,有状态的连接在 LiveView 挂载生命周期内强制执行身份验证和会话验证,因为**来自客户端的 live_redirect
不会像硬刷新或初始 HTTP 渲染那样经过插件管道**。这意味着在 Plug.Conn
管道中可能执行的身份验证、授权等也必须在 LiveView 挂载生命周期内执行。
实时会话允许您通过允许 live_redirect
仅在相同实时会话名称下定义的路由之间发出,来支持共享的安全模型。如果客户端尝试实时重定向到不同的实时会话,则将被拒绝,并且优雅的客户端重定向将触发对尝试 URL 的常规 HTTP 请求。
有关更多信息和示例用法,请参阅 Phoenix.LiveView.Router.live_session/3
文档。
新的 HTML 引擎
LiveView v0.16 引入了 HEEx(HTML + EEx)模板和通过 Phoenix.Component
实现的函数组件的概念。新的 HEEx 模板验证模板中的标记,同时还提供更智能的更改跟踪以及语法便利,使构建可组合组件变得更加容易。
函数组件是任何接收分配映射并返回 ~H
模板的函数
defmodule MyComponent do
use Phoenix.Component
def btn(assigns) do
~H"""
<button class="btn"><%= @text %></button>
"""
end
end
此组件现在可以在您的 HEEx 模板中使用,如下所示
<MyComponent.btn text="Save">
HEEx 和函数组件的引入带来了一系列弃用警告,其中一些是在此版本中引入的,另一些将在未来添加。请注意,HEEx 模板需要 Elixir v1.12+
升级和弃用
此版本中的主要弃用是 ~L
符号和 .leex
扩展名现在被软弃用。文档已更新以不鼓励使用它们,并且在将来的版本中使用它们将发出警告。我们建议您为应用程序中的所有未来模板使用 ~H
符号和 .heex
扩展名。您还应该计划使用以下建议相应地迁移旧模板。
从 LEEx
迁移到 HEEx
相对简单。主要有两个区别。首先,HEEx 不允许在标签内进行插值。因此,不是
<div id="<%= @id %>">
...
</div>
应该使用 HEEx 语法
<div id={@id}>
...
</div>
另一个区别是关于 form_for
的。一些模板可能执行以下操作
~L"""
<%= f = form_for @changeset, "#" %>
<%= input f, :foo %>
</form>
"""
然而,当转换为 ~H
时,它不是有效的 HTML:存在 </form>
标签,但它的开头隐藏在 Elixir 代码中。在 LiveView v0.16 中,有一个名为 form
的函数组件
~H"""
<.form :let={f} for={@changeset}>
<%= input f, :foo %>
</.form>
"""
我们理解将所有模板从 ~L
迁移到 ~H
可能是一项艰巨的任务。因此,我们计划在 LiveView 中长期支持 ~L
。但是,我们无法对有状态的 LiveComponent 做到这一点,因为一些重要的客户端功能和优化将依赖于 ~H
符号。因此,**我们建议首先在 Live 组件中,特别是状态化的 Live 组件中,用 ~H
替换 ~L
**。
此外,无状态的 live_component
(即没有 :id
的 Live 组件)将被弃用,取而代之的是新的函数组件。我们计划在一段合理的时间内支持它们,但您应该避免在应用程序中创建新的无状态组件。
重大变更
LiveView 0.16 移除了 Phoenix.LiveView.Routing.live/4
中的 :layout
和 :container
选项,取而代之的是 Phoenix.Router.live_session/3
上的 :root_layout
和 :container
选项。
例如,如果您在 LiveView 0.15 和之前版本中使用以下代码:
live "/path", MyAppWeb.PageLive, layout: {MyAppWeb.LayoutView, "custom_layout.html"}
将其更改为:
live_session :session_name, root_layout: {MyAppWeb.LayoutView, "custom_layout.html"} do
live "/path", MyAppWeb.PageLive
end
在客户端,phoenix_live_view
包不再提供 LiveSocket
的默认导出。
如果您在 JavaScript 入口点(通常位于 assets/js/app.js
)中使用以下代码:
import LiveSocket from "phoenix_live_view"
将其更改为:
import { LiveSocket } from "phoenix_live_view"
此外,在客户端,根 LiveView 元素不再公开 LiveView 模块名称,因此 phx-view
属性永远不会设置。类似地,客户端钩子的 viewName
属性已被移除。
调用自定义函数 component/3
的代码库应该重命名它或指定其模块,以避免冲突,因为 LiveView 引入了一个具有相同名称的宏,并且它在底层引擎中是特殊情况处理的。
增强功能
- 引入 HEEx 模板
- 引入
Phoenix.Component
- 引入
Phoenix.Router.live_session/3
用于优化 Live 重定向 - 引入
on_mount
和attach_hook
钩子,它们提供了一种机制来访问 LiveView 生命周期的关键阶段 - 将上传方法添加到客户端钩子
- [辅助函数] 优化
live_img_preview
渲染 - [辅助函数] 引入
form
函数组件,它包装Phoenix.HTML.form_for
- [LiveViewTest] 添加
with_target
用于直接范围组件 - [LiveViewTest] 添加
refute_redirected
- [LiveViewTest] 支持多个
phx-target
值以反映 JS 客户端 - [LiveViewTest] 添加
follow_trigger_action
- [JavaScript 客户端] 添加
sessionStorage
选项LiveSocket
构造函数以支持客户端存储覆盖 - [JavaScript 客户端] 当标签无法连接时,如果页面不可见,则不要在后台安全地重新加载页面
错误修复
- 确保在
render_component
上加载组件,以确保所有相关的回调都被调用 - 修复
Phoenix.LiveViewTest.page_title
在某些情况下返回nil
的问题 - 修复在服务器上显式设置为禁用时,按钮重新启用
- 修复 Live Patch 无法在同一个回调生命周期内通过
handle_params
再次修补 Live Patch 链接时更新 URL - 修复当页面使用 Live Patch 修补时,
phx-no-feedback
类未应用的问题 - 修复执行非标准 ID 上的 DOM 查找时出现
DOMException, querySelector, not a valid selector
的问题 - 修复在 Chrome/macOS 上更新分配时,选择下拉菜单闪烁关闭/打开的问题
- 修复在一个表单中使用多个
live_file_input
时出现的错误 - 修复
showError
中的竞争条件导致querySelector
为空 - 修复在递归差异中,静态文件无法正确解析的问题
- 修复
Phoenix.LiveView.Diff.many_to_iodata
中没有匹配的函数子句问题 - 修复通过组件上传文件后,上传输入未被清除的问题
- 修复在重新连接期间上传时,通道崩溃的问题
- 修复为大型上传发送重复的进度事件的问题
弃用
- 将
do-end
块传递给live_component
时,隐式分配被弃用 ~L
符号和.leex
扩展名现在被软弃用,取而代之的是~H
和.heex
- 无状态 Live 组件(没有
:id
的live_component
调用)已被弃用,取而代之的是新的函数组件功能
0.15.7 (2021-05-24)
错误修复
- 修复损坏的 webpack 构建,导致缺少 morphdom 依赖项
0.15.6 (2021-05-24)
错误修复
- 修复从
handle_params
再次修补 Live Patch 链接时,Live Patch 无法更新 URL 的问题 - 修复使用通道上传和进度回调时,
LiveViewTest.render_upload/3
中的回归问题 - 修复组件上传在删除时未被清除的问题
- 修复 LiveView 重新连接时,如果之前正在进行活动上传,则出现
KeyError
的问题
增强功能
- 通过
component/3
支持函数组件 - 优化进度事件,以便为更大的文件大小发送更少的邮件
- 允许会话和本地存储客户端覆盖
弃用
- 弃用
live_component/3
调用中的@socket/socket
参数
0.15.5 (2021-04-20)
增强功能
- 添加
upload_errors/1
用于返回顶层上传错误
错误修复
- 修复使用外部上传时,
consume_uploaded_entry/3
导致条目状态不一致的问题 - 修复当单个差异从不同的组件生成多个事件时,
push_event
丢失事件的问题 - 修复组件树共享的深度合并问题
0.15.4 (2021-01-26)
错误修复
- 修复嵌套的
live_render
导致子 LiveView 重新挂载,即使 ID 没有改变 - 除非已连接,否则不要尝试推送钩子事件
- 修复预先加载的引用导致
auto_upload: true
无法提交表单的问题 - 当
max_entries
为 1 时,替换单个上传条目,而不是累积多个文件选择 - 修复
open_browser
中的static_path
无法加载样式表的问题
0.15.3 (2021-01-02)
错误修复
- 修复
push_redirect
返回导致客户端超时的问题
0.15.2 (2021-01-01)
向后不兼容的更改
- 从
phx-hook
回调中删除beforeDestroy
错误修复
- 修复表单恢复在第一次连接失败时无法发送输入的问题
- 修复 LiveView 重新连接后,钩子未重新挂载的问题
- 修复在没有先前断开连接的情况下,钩子
reconnected
回调被触发的问题
0.15.1 (2020-12-20)
增强功能
- 确保所有点击事件冒泡到移动 Safari
- 在 LiveView 调用者进程中运行
consume_uploaded_entries
错误修复
- 修复 LiveView 恢复后,钩子未重新挂载的问题
- 修复从先前关闭的通道超时时,导致重新加载出现抖动的问题
- 修复组件补丁从单个根节点变为多个子兄弟节点时,组件子节点丢失的问题
- 修复在文本选择期间鼠标抬起时,
phx-capture-click
触发的问题 - 修复 LiveView
push_event
未在组件中清除的问题 - 修复 LiveView 在
<textarea>
处于焦点时修补它的问题
0.15.0 (2020-11-20)
增强功能
- 添加对文件进度、交互式文件选择和直接到云支持的 Live 上传支持
- 实现
Phoenix.LiveViewTest.open_browser/2
,它使用 LiveView 页面打开浏览器
向后不兼容的更改
- 从组件中删除
@inner_content
,并引入render_block
用于渲染组件@inner_block
- 从套接字模板中删除
@live_module
,取而代之的是@socket.view
错误修复
- 确保 URL 在拆分后被解码
- 不要恢复没有输入的表单
- 修复当组件被删除,然后在客户端能够通知它们的 CID 被销毁之前立即重新添加时出现的竞争条件
- 如果套接字中只添加了事件/回复,则不要渲染 LiveView
- 在初始渲染时,正确合并不同的组件,以共享组件子树
- 允许 do 块内的变量被污染
- 修复从 mount 中的
push_redirect
在客户端挂起,并导致在客户端跟随点击的live_redirect
时回退到全页面重新加载的问题
0.14.8 (2020-10-30)
错误修复
- 修复与最新 Plug 的兼容性
0.14.7 (2020-09-25)
错误修复
- 修复从事件返回的
redirect(socket, external: ...)
- 正确跟随 Live Patch/Redirect 上的位置哈希
- 修复当
phx-update
具有非 HTML 节点作为子节点时,Phoenix.LiveViewTest
中的失败问题 - 修复
phx_trigger_action
在 DOM 更新完成之前提交表单的问题
0.14.6 (2020-09-21)
错误修复
- 修复
phx-trigger-action
上的竞争条件,导致在服务器表单提交之前重新连接
0.14.5 (2020-09-20)
增强功能
- 优化 DOM 预先加载和追加操作
- 添加
Phoenix.LiveView.send_update_after/3
错误修复
- 修复使用
live_redirect
时,使用后退/前进时的滚动位置 - 在生成差异时,支持递归组件
- 支持在挂载时进行硬重定向
- 在
Phoenix.LiveViewTest
上删除时,正确跟踪嵌套组件
0.14.4 (2020-07-30)
错误修复
- 修复隐藏输入引发选择范围错误的问题
0.14.3 (2020-07-24)
增强功能
- 支持使用 LiveEEx 的
render_layout
错误修复
- 修复处于焦点的输入被延迟补丁覆盖的问题
- 修复当
"_target"
输入名称包含数组时 LiveView 错误 - 修复将 do 块传递给组件时的更改跟踪
0.14.2 (2020-07-21)
错误修复
- 修复将 Map of assigns 与
@inner_content
结合使用导致no function clause matching in Keyword.put/3
错误 - 修复
LiveViewTest
无法为基于 append/prepend 的 phx-update 正确修补子元素 - 修复在向
live
路由提供:as
选项时出现的参数错误 - 修复服务器在处理实时补丁时崩溃导致页面无响应
- 修复空 diff 导致基于 data-ref 的待处理更新(如类和
phx-disable-with
内容)未更新 - 修复按键事件节流会吞掉按键的错误
- 修复表单提交时
<textarea>
未被禁用的问题 - 修复使用
phx-update
append/prepend 时文本节点 DOM 内存泄漏
增强功能
- 允许将
:router
传递给render_component
- 为
~L
的编译警告显示文件 - 在客户端使用没有 DOM ID 的钩子时记录错误
- 优化
phx-update
基于 append/prepend 的 DOM 更新
0.14.1 (2020-07-09)
错误修复
- 修复在某些情况下,从 DOM 中移除嵌套的
live_render
时,无法将其拆除 - 修复 LEEx 问题,嵌套条件无法重新评估
0.14.0 (2020-07-07)
错误修复
- 修复 IE11 问题,其中
document.activeElement
会创建空引用 - 修复在显式调用
liveSocket.disconnect()
后跟liveSocket.connect()
时,根视图的设置和拆除 - 修复
error_tag
无法为非文本输入(如选择和复选框)显示,因为始终应用了phx-no-feedback
类 - 修复
phx-error
类应用于live_redirect
- 正确处理 Elixir 的特殊变量,如
__MODULE__
- 不再在补丁期间设置断开连接类
- 跟踪闪光键,以修复连续的闪光被丢弃的问题
- 在客户端中正确处理空组件 diff,用于组件已在服务器上删除的情况
- 确保嵌套的实时视图中的组件不会冲突
- 修复
phx-static
未从客户端发送到子视图 - 尝试删除已删除的视图时不会失败
- 确保在移除元素的子元素中,钩子上的
beforeDestroy
被调用
增强功能
- 允许在组件已存在于客户端的情况下,共享整个组件静态子树
- 将遥测事件添加到
mount
、handle_params
和handle_event
- 添加
push_event
用于将事件和数据从服务器推送到客户端 - 添加客户端
handleEvent
钩子方法,用于接收从服务器推送的事件 - 添加通过
{:reply, map, socket}
从服务器接收pushEvent
回复的功能 - 使用事件监听器来处理 popstate,以避免与用户定义的 popstate 处理程序冲突
- 在渲染没有直接 DOM 子元素的组件时,在客户端记录错误
- 使
assigns.myself
成为一个结构体,以捕获错误 - 如果组件在
send_update
上不存在,则记录日志,如果模块不可用,则抛出异常
0.13.3 (2020-06-04)
错误修复
- 修复在使用定时去抖的情况下,在失去焦点时触发重复的去抖事件
- 修复当
live_redirect
ed 路由导致服务器上重定向到非实时路由时出现的客户端错误 - 修复无根组件更新时 DOM 同级元素被移除
- 修复去抖输入在通过 Tab、Meta 或其他不可打印键失去焦点时,无法发送最后一次更改
增强功能
- 将
dom
选项添加到LiveSocket
,其中包含onBeforeElUpdated
回调,用于外部客户端库支持广泛的 DOM 操作
0.13.2 (2020-05-27)
错误修复
- 修复使用组件替换根模板会导致 LiveView 崩溃的错误
0.13.1 (2020-05-26)
错误修复
- 修复从
live_redirect
中push_redirect
导致强制页面刷新的问题
增强功能
- 优化组件 diff 以避免发送空 diff
- 优化组件以共享静态值
- [LiveViewTest] 自动同步渲染前的事件
0.13.0 (2020-05-21)
向后不兼容的更改
- 不再默认发送事件元数据。元数据现在是选择加入的,并且由用户在
LiveSocket
级别定义。为了与 0.13 之前的行为保持向后兼容性,您可以提供以下元数据选项
let liveSocket = new LiveSocket("/live", Socket, {
params: {_csrf_token: csrfToken},
metadata: {
click: (e, el) => {
return {
altKey: e.altKey,
shiftKey: e.shiftKey,
ctrlKey: e.ctrlKey,
metaKey: e.metaKey,
x: e.x || e.clientX,
y: e.y || e.clientY,
pageX: e.pageX,
pageY: e.pageY,
screenX: e.screenX,
screenY: e.screenY,
offsetX: e.offsetX,
offsetY: e.offsetY,
detail: e.detail || 1,
}
},
keydown: (e, el) => {
return {
altGraphKey: e.altGraphKey,
altKey: e.altKey,
code: e.code,
ctrlKey: e.ctrlKey,
key: e.key,
keyIdentifier: e.keyIdentifier,
keyLocation: e.keyLocation,
location: e.location,
metaKey: e.metaKey,
repeat: e.repeat,
shiftKey: e.shiftKey
}
}
}
})
错误修复
- 修复 Chrome 在本地 UI 自动完成时发送没有
key
的 keydown 事件导致的错误 - 修复实时导航请求发出重定向时的服务器错误
- 修复在显式调用 LiveSocket connect/disconnect/connect 时,出现双窗口绑定
增强功能
- 添加
Phoenix.LiveView.get_connect_info/1
- 添加
Phoenix.LiveViewTest.put_connect_info/2
和Phoenix.LiveViewTest.put_connect_params/2
- 添加对跨冷服务器部署跟踪页面上静态资产更改的支持
- 添加对将
@myself
目标传递给钩子的pushEventTo
目标的支持 - 添加使用新的
metadata
LiveSocket 选项对事件进行可配置的元数据 - 在连接参数中添加
"_mounts"
键,该键指定 LiveView 已挂载的次数
0.12.1 (2020-04-19)
错误修复
- 修复组件
innerHTML
在兄弟 DOM 元素出现在其上方时被丢弃,这种情况发生在组件没有 DOM ID 的情况下 - 修复 Firefox 在硬重定向期间短暂重新连接
- 修复当服务器返回空补丁时,
phx-disable-with
和其他待处理属性无法恢复 - 确保在挂载之前加载 LiveView 模块,以防止如果第一个请求是到已连接的 LiveView,则第一个应用程序请求记录错误
0.12.0 (2020-04-16)
这个版本的 LiveView 带来了测试模块的全面改革,更紧密地将您的 LiveView 模板与您的 LiveView 事件集成在一起。例如,在以前的版本中,您可以编写以下测试
render_click(live_view, "increment_by", %{by: 1})
但是,无法保证页面上存在任何带有 phx-click="increment"
属性且 phx-value-by
设置为 1 的元素。有了 LiveView 0.12.0,您现在可以编写
live_view
|> element("#term .buttons a", "Increment")
|> render_click()
新的实现将检查 #term .buttons a
处是否存在一个按钮,其文本为“Increment”,验证它是否具有 phx-click
属性并自动使用所有相关的 phx-value
条目提交到它。这使我们更接近集成/验收测试框架,而没有运行无头浏览器的任何开销和复杂性。
增强功能
- 添加
assert_patch/3
和assert_patched/2
用于断言补丁 - 添加
follow_redirect/3
用于自动从render_*
事件中跟踪重定向 - 添加
phx-trigger-action
表单注释,用于在下一个 DOM 补丁上触发 HTTP 表单提交
错误修复
- 修复
phx-target
@myself
将目标设置为具有相同组件 ID 的兄弟 LiveView 组件 - 修复
phx:page-loading-stop
在执行 DOM 补丁之前触发 - 修复
phx-update="prepend"
在相同 ID 被重复更新时无法正确修补 DOM - 修复挂载时的重定向无法复制闪光
向后不兼容的更改
phx-error-for
已被phx-feedback-for
取代。phx-feedback-for
每当需要隐藏反馈时,都会设置一个phx-no-feedback
类Phoenix.LiveViewTest.children/1
已重命名为Phoenix.LiveViewTest.live_children/1
Phoenix.LiveViewTest.find_child/2
已重命名为Phoenix.LiveViewTest.find_live_child/2
Phoenix.LiveViewTest.assert_redirect/3
不再匹配闪光,而是返回闪光Phoenix.LiveViewTest.assert_redirect/3
不再匹配补丁重定向,请改用assert_patch/3
Phoenix.LiveViewTest.assert_remove/3
已被移除。如果 LiveView 崩溃,它也会导致测试崩溃向
render_*
测试函数传递带有 DOM ID 的路径已弃用。此外,它们现在需要在给定的 DOM ID 上有一个phx-target="<%= @id %>"
<div id="component-id" phx-target="component-id"> ... </div>
html = render_submit([view, "#component-id"], event, value)
无论如何,此 API 已弃用,您应该迁移到新的基于元素的 API。
0.11.1 (2020-04-08)
错误修复
- 修复只读状态在空 diff 后无法撤消
- 修复动态添加的子元素无法被客户端加入
- 修复拆除错误,导致过时的客户端会话尝试在重新连接时重新加入
- 修复跨加入的孤立的 prepend/append 内容
- 在 LiveEEx 引擎中跟踪
unless
向后不兼容的更改
render_event
/render_click
及其朋友现在在处理组件时需要一个 DOM ID 选择器。例如,您应该编写render_click([live, "#user-13"])
而不是render_click([live, "user-13"])
,这与phx-target
API 相呼应。- 在模板中直接访问套接字分配
@socket.assigns[...]
现在将引发异常Phoenix.LiveView.Socket.AssignsNotInSocket
。套接字分配在模板内直接作为 LiveEExassigns
可用,如@foo
和@bar
。任何分配访问都应该使用模板中的分配,在那里会进行适当的更改跟踪。
增强功能
- 在输入失去焦点时立即触发去抖事件
- 支持在
LiveSocket
构造函数上使用defaults
选项来配置默认的phx-debounce
和phx-throttle
值,允许<input ... phx-debounce>
- 为点击事件元数据添加
detail
键,用于检测双击/三击
0.11.0 (2020-04-06)
向后不兼容更改
在渲染过程中删除
socket.assigns
,以避免更改跟踪错误。如果您之前依赖于将@socket
传递给函数,然后引用套接字分配,请从模板中将显式分配传递给您的函数。删除了
assets/css/live_view.css
。如果您想显示进度条,则在app.css
中,替换- @import "../../../../deps/phoenix_live_view/assets/css/live_view.css"; + @import "../node_modules/nprogress/nprogress.css";
并将
nprogress
添加到assets/package.json
。完整的细节请查看 进度动画指南
错误修复
- 修复客户端在嵌套两层以上 LiveView 时出现的问题
- 修复导致整个 LiveView 重新渲染而只有组件发生变化的错误
- 修复导致重新加入不会触发
phx:page-loading-stop
的问题
增强功能
- 支持深度更改跟踪,因此
@foo.bar
仅在 bar 发生变化时执行和差异化 - 添加
@myself
分配,以允许组件将自身作为目标,而不是依赖于 DOM ID,例如:phx-target="<%= @myself %>"
- 优化各种客户端渲染场景,以实现更快的组件 DOM 修补以及追加/预置内容
- 将
enableProfiling()
和disableProfiling()
添加到LiveSocket
,用于客户端性能分析,以帮助开发过程 - 允许 LiveView 渲染在 LiveComponent 内部
- 添加对在组件内清除闪存的支持
0.10.0 (2020-03-18)
向后不兼容更改
- 将套接字分配
@live_view_module
重命名为@live_module
- 将套接字分配
@live_view_action
重命名为@live_action
- LiveView 不再使用默认的应用程序布局,并且
put_live_layout
不再受支持。改为使用put_root_layout
。但是,请注意,传递给put_root_layout
的布局必须使用@inner_content
而不是<%= render(@view_module, @view_template, assigns) %>
,并且根布局也将被常规视图使用。请查看文档中的 Live 布局 部分。
错误修复
- 修复加载状态导致嵌套 LiveView 在实时导航期间被删除的问题
- 仅在数据属性发生更改时才触发
phx-update="ignore"
钩子 - 修复 LiveEEx 指纹错误,导致某些情况下没有发送差异
增强功能
- 支持并置模板,其中 LiveView 的相同基名的
.html.leex
模板将自动用于render/1
- 添加
live_title_tag/2
帮助器,用于在@page_title
更新时自动前缀/后缀
0.9.0 (2020-03-08)
错误修复
- 不要将忽略的输入和按钮设置为只读
- 仅解码 URI 中的路径
- 仅在替换主视图时销毁主视图的子孙
- 修复兄弟组件在同一根 DOM 树上的情况下的补丁
- 不要从子 LiveView 的
:use
中获取布局 - 在路由器和挂载时,尊重布局设置为
false
的情况 - 修复兄弟组件在没有容器的情况下进行补丁的情况
- 使闪存可选(即,如果您在之前没有
fetch_flash
,LiveView 仍然可以工作)
增强功能
- 如果将
:flash
作为分配给出,则会引发错误 - 支持路由器中的用户定义元数据
- 允许将路由器访问为
socket.router
- 允许将
MFArgs
作为live
路由器宏中的:session
选项 - 当主 LV 出错时触发页面加载事件
- 自动清除实时导航示例中的闪存 - 仅持久化新分配的闪存
0.8.1 (2020-02-27)
增强功能
- 支持实时重定向和实时修补链接上的
phx-disable-with
错误修复
- 修复日期和时间输入的焦点问题
- 修复在服务器上执行
redirect
后,从后退/前进缓存还原页面时,LiveView 无法挂载的问题 - 修复 IE 在发出 pushState 时将
undefined
强制转换为字符串的问题 - 修复当焦点元素为 null 时 IE 出错的问题
- 修复在使用组件和实时导航(其中渲染了动态模板)时出现的客户端错误
- 修复在组件从 DOM 中删除之前到达补丁时,潜在的组件差异导致错误的问题
- 修复在服务器上为已由服务器删除的组件接收到的组件事件导致匹配错误的竞争条件
0.8.0 (2020-02-22)
向后不兼容更改
- 删除
Phoenix.LiveView.Flash
,转而使用:fetch_live_flash
,该方法由Phoenix.LiveView.Router
导入 - Live 布局现在必须使用
@inner_content
访问子内容,而不是直接调用 LiveView - 从 LiveView 的
mount
或handle_[params|call|cast|info|event]
返回:stop
元组不再受支持。LiveView 在发出redirect
或push_redirect
时停止。
增强功能
- 添加
put_live_layout
插件,以放置用于实时路由的根布局 - 允许从挂载点执行
redirect
和push_redirect
- 使用确认跟踪来避免在服务器处理表单事件之前修补输入
- 向所有具有事件特定 CSS 类的 phx 绑定元素添加 CSS 加载状态
- 为实时导航、初始页面加载和表单提交在窗口上分发
phx:page-loading-start
和phx:page-loading-stop
,用于用户控制的页面加载集成 - 允许任何 phx 绑定元素指定
phx-page-loading
,以便在推送事件时分发上述加载事件 - 添加客户端侧延迟模拟器,并使用新的
enableLatencySim(milliseconds)
和disableLatencySim()
- 将
enableDebug()
和disableDebug()
添加到LiveSocket
,用于从 Web 控制台进行按需浏览器调试 - 除非在页面上找到 LiveView,否则不会连接 LiveSocket WebSocket 或绑定客户端事件
- 添加
transport_pid/1
以在套接字连接时返回 websocket 传输 pid
错误修复
- 修复从
live_redirect
失败的挂载会导致重新加载当前 URL 而不是尝试的新 URL 的问题
0.7.1 (2020-02-13)
错误修复
- 修复在某些情况下,复选框无法将
phx-change
事件发送到服务器的错误 - 修复复选框在服务器以编程方式更新复选框时无法保持选中状态的错误
- 修复 Firefox 中的选择框错误,该错误导致在悬停状态下应用补丁时突出显示的索引跳转
0.7.0 (2020-02-12)
向后不兼容更改
live_redirect
已被删除,转而使用push_patch
(用于更新当前 LiveView 的 URL 和参数)和push_redirect
(用于将 URL 更新到另一个 LiveView)live_link
已被删除,转而使用live_patch
(用于更新当前 LiveView 的 URL 和参数)和live_redirect
(用于将 URL 更新到另一个 LiveView)Phoenix.LiveViewTest.assert_redirect
不再接受匿名函数,转而像assert_receive
一样,在断言重定向之前执行代码。
增强功能
- 支持 LiveView 中的
@live_view_action
,以简化 URL 状态跟踪 - 在断开连接或崩溃恢复时自动恢复表单输入数据
- 添加
phx-auto-recover
表单绑定,用于专门恢复 - 在
live_patch
和live_redirect
上滚动到页面顶部,同时尊重锚点哈希目标 - 添加
phx-capture-click
以使用事件捕获,以便在点击事件从目标向内传播时绑定点击事件 - 改进闪存支持,使其在静态视图、实时视图和组件之间工作
- 添加
phx-key
绑定,以对phx-window-keydown
和phx-window-keyup
事件进行范围限定
错误修复
- 在按键事件上发送
phx-value-*
- 当容器的属性发生变化时,在
phx-update="ignore"
容器上触发updated
钩子回调 - 修复嵌套的
phx-update="append"
在 LiveViewTest 中引发 ArgumentError 的问题 - 修复在将 leex 模板包装在 if 表达式中时,更新在极少数情况下无法应用的问题
0.6.0 (2020-01-22)
弃用
- LiveView 的
mount/2
已被弃用,转而使用mount/3
。参数现在作为mount/3
的第一个参数传递,然后是会话和套接字。
向后不兼容更改
- 套接字会话现在仅接受字符串键
增强功能
- 允许取消窗口 beforeunload,而不会丢失 websocket 连接
错误修复
- 修复 handle_params 未正确解码 URL 路径参数的问题
- 修复在根路径路由时出现的 LiveViewTest 错误
- 修复 URI 编码参数在
handle_params
中无法解码的问题 - 修复组件目标在输入标签上时无法定位到正确组件的问题
0.5.2 (2020-01-17)
错误修复
- 修复优化错误,该错误导致某些 DOM 节点在更新时被删除
0.5.1 (2020-01-15)
错误修复
- 修复 phx-change 错误导致 phx-target 未被使用的问题
0.5.0 (2020-01-15)
LiveView 现在会自动在 LiveView 中提供连接会话。但是,要做到这一点,你需要相应地配置你的端点,否则 LiveView 将无法连接。
步骤如下
在你的 endpoint.ex 中找到
plug Plug.Session, ...
并将选项...
移动到模块属性中@session_options [ ... ]
将
plug Plug.Session
更改为使用上述属性plug Plug.Session, @session_options
还将
@session_options
传递给你的 LiveView socketsocket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]]
你应该在你的布局中的 <head> 中定义 CSRF 元标签,在包含
app.js
之前<meta name="csrf-token" content={Plug.CSRFProtection.get_csrf_token()} /> <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
然后在你的 app.js 中
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content"); let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}});
还要注意,从现在起,会话将具有字符串键。如果使用原子键,LiveView 会发出警告。
增强功能
- 尊重
live_link
中的新标签行为 - 添加
beforeUpdate
和beforeDestroy
JS 钩子 - 在首次渲染时,将 socket 挂载时定义的所有分配都提供给布局
- 使用新的
:layout
选项为实时布局提供支持 - 在启用 DEBUG 模式时,检测前端的重复 ID
- 自动将会话转发到 LiveView
- 支持用于识别(和断开连接)LiveView socket 的 "live_socket_id" 会话键
- 在 LiveView 进程中添加对
hibernate_after
的支持 - 支持在
live_redirect
和redirect
上重定向到完整的 URL - 向单击事件元数据添加
offsetX
和offsetY
- 允许
live_link
和live_redirect
存在于页面的任何位置,并且它将始终指向主 LiveView(在路由器中定义的那个)
向后不兼容的更改
phx-target="window"
已被phx-window-keydown
、phx-window-focus
等替代,并且phx-target
绑定已被重新用于从客户端定位 LiveView 和 LiveComponent 事件Phoenix.LiveView
不再定义live_render
和live_link
。这些函数已移动到Phoenix.LiveView.Helpers
,现在可以在你的视图中完全导入。换句话说,将import Phoenix.LiveView, only: [live_render: ..., live_link: ...]
替换为import Phoenix.LiveView.Helpers
0.4.1 (2019-11-07)
错误修复
- 修复导致输入框模糊的错误
0.4.0 (2019-11-07)
增强功能
- 将
Phoenix.LiveComponent
添加到 LiveView 中,以对状态、标记和事件进行分隔 - 通过在检测到有效但过时的会话时,使用抖动刷新页面来处理过时的客户端
- 仅将实时链接单击事件分派到路由器 LiveView
- 在 socket 处于连接状态时,在挂载失败时刷新页面以进行优雅的错误恢复
错误修复
- 修复在某些情况下
phx-hook
销毁回调无法被调用的问题 - 修复导致 LiveView 无法重新挂载的回退/前进错误
0.3.1 (2019-09-23)
向后不兼容的更改
- 测试中的
live_isolated
不再需要路由器和管道(现在它只期望 3 个参数) - 如果在非路由器 LiveView 上使用
handle_params
,则会引发异常
错误修复
- [LiveViewTest] 修复由 HTML 注释引起的函数子句错误
0.3.0 (2019-09-19)
增强功能
- 添加
phx-debounce
和phx-throttle
绑定以限制事件速率
向后不兼容的更改
- IE11 支持现在需要两个额外的 polyfill,
mdn-polyfills/CustomEvent
和mdn-polyfills/String.prototype.startsWith
错误修复
- 修复由不支持的
getAttributeNames
查找引起的 IE11 支持问题 - 修复 Floki 依赖项编译警告
0.2.1 (2019-09-17)
错误修复
- [LiveView.Router] 修复模块连接在使用自定义命名空间时无法构建正确的布局模块的问题
- [LiveViewTest] 修复
phx-update
附加/前置容器无法构建正确的 DOM 内容的问题 - [LiveViewTest] 修复
phx-update
附加/前置容器无法使用匹配的 ID 更新现有子容器的问题
0.2.0 (2019-09-12)
增强功能
- [LiveView] 向
use Phoenix.LiveView
添加新的:container
选项 - [LiveViewTest] 添加
live_isolated
测试助手,用于测试不可路由的 LiveView
向后不兼容的更改
- 将
configure_temporary_assigns/2
替换为 3 元组挂载返回值,支持:temporary_assigns
键 - 不允许在挂载时或在子实时视图中使用
redirect
/live_redirect
- 所有
phx-update
容器现在都需要唯一的 ID LiveSocket
JavaScript 构造函数现在需要显式依赖注入 Phoenix Socket 构造函数。例如
import {Socket} from "phoenix"
import LiveSocket from "phoenix_live_view"
let liveSocket = new LiveSocket("/live", Socket, {...})
错误修复
- 修复
phx-update=append/prepend
无法连接新的嵌套实时视图或连接新的 phx-hook 的问题 - 修复数字输入处理导致某些浏览器在无效输入时重置表单字段的问题
- 修复多选解码导致服务器错误的问题
- 修复多选更改跟踪在取消选择值时无法提交事件的问题
- 修复在某些情况下触发的实时重定向循环问题
- 修复实时重定向后参数无法在重新挂载时更新的问题
- 修复模糊事件元数据使用
"focus"
类型的错误
0.1.2 (2019-08-28)
向后不兼容的更改
phx-value
无效,请改用phx-value-*
- 会话中的
:path_params
键无效(请改用 LiveView 中的handle_params
)
0.1.1 (2019-08-27)
增强功能
- 使用优化的
insertAdjacentHTML
来实现更快的附加/前置以及正确的 CSS 动画处理 - 允许通过在附加/前置期间替换重复的 ID 来替换之前附加/前置的元素,而不是添加新的 DOM 节点
错误修复
- 修复父内容更新时重复的附加/前置更新问题
- 修复附加和前置内容的 JS 钩子未应用的问题
0.1.0 (2019-08-25)
增强功能
- LiveView 的
handle_in/3
回调现在接收有关客户端事件的元数据映射 - 对于
phx-change
事件,handle_in/3
现在接收一个表示触发更改的表单输入名称键空间的"_target"
参数 - 可以使用
phx-value-
前缀为任何 phx 绑定提供多个值,例如phx-value-myval1
、phx-value-myval2
等 - 添加对 DOM 修补的控制,可以通过
phx-update
设置,它可以设置为"replace"
、"append"
、"prepend"
或"ignore"
向后不兼容的更改
phx-ignore
已重命名为phx-update="ignore"