htmx 4.0 发布：改用 Fetch API 重写，内置 DOM Morphing Swap，并明确属性继承规则

htmx 团队发布了 htmx 4.0.0。这是继 2024 年 htmx 2.0 发布以来，该超媒体库的首个主版本更新。新版本历经八个月开发，直接跳过了 3.0 版本。htmx 创始人 Carson Gross 曾承诺永远不会有 htmx 3.0。当 InfoWorld 问及此次版本跨越时，他用一个词概括了这一变化：“Oops”（哎呀）。

htmx 已将长期使用的 XMLHttpRequest 传输机制替换为现代 fetch() API。这次重写支持原生流式传输，同时将脚本体积控制在约 14KB。对大多数开发者而言，熟悉的 hx-get 和 hx-post 属性仍然保持原有行为。不过，这一改动也为团队最期待的两项功能提供了基础：一是基于 idiomorph 实现的内置 Morphing Swap，在更新 DOM 时保留输入框焦点等状态；二是新增 hx-partial 标签，使单个响应能够简洁地更新多个目标元素，为带外交换（OOB Swap）提供了一种更整洁的实现方式。

属性继承现在采用显式机制：只有在属性名后添加 :inherited 后缀，父元素上的属性才会传递给子元素。

<div hx-confirm:inherited="Are you sure?"> <button hx-delete="/item/1">Delete</button></div>

DEV Community 上的一篇详细文章提醒开发者，这可能是升级过程中最需要警惕的问题。例如，原本通过 hx-headers 属性向子元素传递 CSRF Token 的实现，如果没有添加 :inherited，就会悄无声息地失效。服务器随后会以 403 状态码拒绝请求，但从表面上看，代码似乎并没有任何异常。

事件名称也统一为 htmx:phase:action 格式。例如，htmx:afterRequest 现在变为 htmx:after:request。此外，历史记录不再将 DOM 快照保存到 localStorage，而是通过重新获取页面来恢复历史记录，从而确保第三方脚本能够正常工作。

Hacker News 上的一篇讨论帖获得了超过 700 赞。开发者称赞了 Go、SQLite 和 htmx 技术栈，以及 AI 助手对这一技术栈的良好支持。一位开发者指出，Claude“理解它，而且做得很好”。与此同时，r/htmx 上的版本发布帖也获得了超过 300 个赞。

另一方面，一位使用 .NET 和 Angular 的开发者认为，htmx 迫使开发者将表现层与业务逻辑混合在一起。另一位开发者也表达了类似看法，并表示其团队正准备迁回 React。

htmx 4.0 通过 npm 的 next 标签发布，而非 latest，因此，使用未指定版本的 CDN 链接的用户不会被强制升级。2.x 版本也将继续获得支持，且没有设定终止时间。

htmx 团队还提供了一个命令行检查工具，用于识别属性继承问题、属性重命名以及旧版事件名称：

npx htmx.org@4.0.0 upgrade-check -- ./templates

除了属性继承规则的变化外，新版本还引入了 60 秒的请求超时时间，并对多个属性进行了重命名，例如 hx-disable 更名为 hx-ignore。这些变更都需要谨慎处理。htmx 团队提供了完整的 htmx 4 新特性指南，以及专门面向 LLM 辅助升级的 Skills 文件。

htmx 是一个开源库，可以通过 HTML 属性直接为页面添加 AJAX、CSS 过渡效果、WebSocket 和服务器发送事件（Server-Sent Events，SSE）能力，让开发者只需要写一点 JavaScript 就能构建现代化界面。htmx 仍然是超媒体（Hypermedia）运动的代表性项目之一，在采用 Django、Go 和 Rails 等后端技术的开发者中颇受欢迎。这些技术栈通过服务端渲染 HTML，在降低客户端复杂度的同时构建现代 Web 界面。

查看英文原文：htmx 4.0: a Fetch-Based Rewrite, Built-In Morphing Swaps, and Explicit Attribute Inheritance