htmx 4.0: a Fetch-Based Rewrite, Built-In Morphing Swaps, and Explicit Attribute Inheritance

htmx 4.0：基于 Fetch 的重写、内置 Morphing 交换和显式属性继承

作者：Daniel Curtis · InfoQ 原文

摘要：htmx 4.0.0 发布，这是自 2024 年 2.0 以来的首个大版本，跳过了 3.0。新版本用 fetch() API 替换了 XMLHttpRequest，支持原生流式传输，并引入了基于 idiomorph 的内置 morphing 交换和 hx-partial 标签。属性继承现在显式化，需要 :inherited 后缀。事件名标准化为 htmx:phase:action 模式，历史记录不再快照 DOM。虽然社区反响热烈，但 .NET 和 Angular 开发者批评其混合了表现层和业务逻辑。4.0 在 npm 上以 next 标签发布，2.x 继续支持。

The htmx team has released htmx 4.0.0, the first major version of the hypermedia library since 2.0 arrived in 2024, landing after eight months of work and skipping version 3 entirely.

htmx 团队发布了 htmx 4.0.0，这是自 2024 年 2.0 版本以来该超媒体库的首个主要版本，历时八个月开发，完全跳过了 3.0 版本。

Creator Carson Gross, who had promised there would never be an htmx 3, summed up the leap to InfoWorld in a one word quote: "Oops."

创始人 Carson Gross 曾承诺永远不会有 htmx 3，他用一个词向 InfoWorld 总结了这次跳跃：“哎呀。”

htmx has swapped its long serving XMLHttpRequest transport for the modern fetch() API, a rewrite that unlocks native streaming while keeping the script around 14KB.

htmx 将其长期使用的 XMLHttpRequest 传输层换成了现代的 fetch() API，这次重写解锁了原生流式传输，同时保持脚本约 14KB。

For most developers the familiar hx-get and hx-post attributes behave exactly as before, but the move enables the two features the team is most excited about, which is built in morphing swaps powered by idiomorph, which preserve DOM state such as input focus during updates, and a new hx-partial tag that lets one response cleanly update several targets, a tidier take on out of band swaps.

对大多数开发者来说，熟悉的 hx-get 和 hx-post 属性行为与之前完全一致，但这一转变实现了团队最兴奋的两个特性：由 idiomorph 驱动的内置 morphing 交换，可在更新时保留 DOM 状态（如输入焦点），以及新的 hx-partial 标签，允许一个响应干净地更新多个目标，这是对带外交换的更整洁处理。

Attribute inheritance is now explicit, so parent attributes reach children only when marked with an :inherited suffix:

属性继承现在是显式的，因此父属性只有标记了 :inherited 后缀时才会传递给子元素：

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

A detailed DEV Community write up warns this is the trap to watch, because an hx-headers attribute passing a CSRF token to child elements silently stops working without :inherited and the server begins rejecting requests with a 403 while nothing looks broken.

DEV Community 上的一篇详细文章警告说这是需要注意的陷阱，因为传递 CSRF 令牌给子元素的 hx-headers 属性在没有 :inherited 的情况下会悄悄失效，服务器开始返回 403 拒绝请求，而表面上看不出任何问题。

Event names have also been standardised to a htmx:phase:action pattern, so htmx:afterRequestbecomes htmx:after:request, and history no longer snapshots the DOM into localStorage, instead refetching pages so third party scripts just work.

事件名称也已标准化为 htmx:phase:action 模式，因此 htmx:afterRequest 变成了 htmx:after:request，并且历史记录不再将 DOM 快照到 localStorage，而是重新获取页面，以便第三方脚本正常工作。

A Hacker News thread passed 700 points, with developers praising the Go, SQLite and htmx stack and how well AI assistants handle it, one noting that Claude "understands it and does it well", and the r/htmx release post drew over 300 upvotes.

Hacker News 上的一个帖子超过了 700 分，开发者们称赞 Go、SQLite 和 htmx 技术栈以及 AI 助手对它的良好处理，有人指出 Claude “理解它并且做得很好”，r/htmx 的发布帖获得了超过 300 个赞。

Elsewhere a .NET and Angular developer argued htmx forces you to mix presentation with business logic and another agreed and said their team is moving back to React.

另一方面，一位 .NET 和 Angular 开发者认为 htmx 迫使你将表现层与业务逻辑混合，另一位表示同意，并说他们的团队正在回归 React。

htmx 4.0 ships under npm's next tag rather than latest, so nobody on an unversioned CDN link is force upgraded, and 2.x stays supported indefinitely.

htmx 4.0 以 npm 的 next 标签发布，而不是 latest，因此使用无版本 CDN 链接的用户不会被强制升级，2.x 版本将无限期支持。

The team provides a command line checker that flags inheritance issues, renamed attributes and old events:

团队提供了一个命令行检查器，用于标记继承问题、重命名的属性和旧事件：

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

Beyond inheritance changes, there is also a new 60 second request timeout and a number of attribute renames, such as hx-disable becoming hx-ignore.

除了继承更改之外，还有新的 60 秒请求超时和一些属性重命名，例如 hx-disable 变为 hx-ignore。

These changes need applying with care.

这些更改需要谨慎应用。

A full What's New in htmx 4 guide is available, and dedicated skills files for LLM assisted upgrades.

提供了完整的《htmx 4 新特性》指南，以及用于 LLM 辅助升级的专用技能文件。

htmx is an open source library that adds AJAX, CSS transitions, WebSockets and server sent events directly to HTML through attributes, letting developers build modern interfaces with minimal JavaScript.

htmx 是一个开源库，通过属性将 AJAX、CSS 过渡、WebSocket 和服务器发送事件直接添加到 HTML 中，让开发者用最少的 JavaScript 构建现代界面。

It remains a flagship of the hypermedia movement, popular with Django, Go and Rails backends where server rendered HTML meets low client side complexity.

它仍然是超媒体运动的旗舰，在 Django、Go 和 Rails 后端中很受欢迎，这些后端将服务器渲染的 HTML 与低客户端复杂性相结合。

阅读理解

1. What is the primary purpose of the new :inherited suffix in htmx 4.0?

2. Why might a developer encounter a 403 error after upgrading to htmx 4.0?

3. What change was made to history handling in htmx 4.0?

温故复习 →每日一句 →