Hotwire / Turbo 到 htmx 迁移指南

本指南的目的是为 htmx 中的“Hotwire 等价”功能提供常见实践。

htmx 专注于将 HTML 扩展到超文本的逻辑结论的一组透明、高度灵活的扩展。
Hotwire / Turbo 专注于开箱即用的顺畅体验，但更具意见性和灵活性较低。

Turbo Drive

<body hx-boost="true"> 用于启用类似于 Turbo Drive 的体验。参见：hx-boost
与 Turbo Drive 类似，如果用户禁用了 JavaScript，hx-boost 仍将正常工作。参见：渐进增强
hx-boost="false" 等同于 data-turbo="false"，用于禁用特定链接或表单的 boost。参见：手册
表单提交后重定向（302、303、307、3xx）hx-target="body" hx-swap="outerHTML" hx-push-url="true" 参见：手册
表单提交时禁用按钮参见：手册
- 仅禁用按钮，因为 <form> 不会提交禁用的字段。参见：MDN: disabled

addEventListener("submit", (event) => {
    event.target.querySelectorAll("button").forEach(node => { node.disabled = true })
})
addEventListener("htmx:afterOnLoad", (event) => {
    event.target.querySelectorAll("button").forEach(node => { node.disabled = false })
})

或者，使用 hx-on：
- hx-on:submit= 'event.target.querySelectorAll("button").forEach(node => { node.disabled = true })'
- hx-on:htmx:afterOnLoad= 'event.target.querySelectorAll("button").forEach(node => { node.disabled = false })'
或者，使用 hyperscript： _="on submit toggle @disabled <button/> in me until htmx:afterOnLoad" 参见：Cookbook

Turbo Frames

htmx 将“Turbo Frames”的所有想法整合到基础属性中。不需要 <turbo-frame>。
懒加载：hx-trigger="load, submit" 参见：手册

Turbo Streams

htmx 将“Turbo Streams”的所有想法整合到基础属性中。不需要 <turbo-stream>，也不需要 <template>。
注意：Turbo Streams 可以在页面的任何位置执行多种操作（类似于 hx-select-oob 和 hx-swap-oob），而 Turbo Frames 仅更新 <turbo-frame> .. </turbo-frame> 内包裹的内容

Events

拦截或暂停事件。htmx:config-request 等同于 turbo:before-fetch-request 参见：手册
- htmx:config-request 与 htmx:configRequest 相同参见：事件命名

document.body.addEventListener('htmx:configRequest', (event) => {
    event.detail.headers['Authorization'] = `Bearer ${token}`
})

或者，使用 hx-trigger 条件：hx-trigger="submit[action(target)]"
- 目前无法解析异步调用。参见 issue
或者，使用 hx-on：hx-on:click="event.preventDefault(); action(this); htmx.trigger(this, 'ready')" hx-trigger="ready"
或者，使用 hyperscript： _="on submit halt the event action(target) trigger ready" hx-trigger="ready"
- 将解析异步调用，例如 fetch。参见：异步透明性

Stimulus

hx-on 提供了广泛用例的内联原生替代方案。
hyperscript 是 htmx 的近似模拟和官方配套项目，但两个项目完全分离，可以互斥使用，或与其他任何库一起使用。
其他选项，参见：htmx: Scripting