htmx 1.x → htmx 2.x 迁移指南

本指南的目的是提供从 htmx 1.x 迁移到 htmx 2.x 的说明。我们非常重视向后兼容性，因此在大多数情况下，这些迁移应该只需要很少的工作，甚至不需要工作。

• 如果您在模块环境中使用 htmx，我们现在为所有三种主要的 JavaScript 模块类型提供模块类型特定文件
  • ESM 模块：/dist/htmx.esm.js
  • AMD 模块：/dist/htmx.amd.js
  • CJS 模块：/dist/htmx.cjs.js
  • /dist/htmx.js 文件仍然可以被浏览器加载
• 所有扩展都已从 htmx 核心发行版中删除，并单独发布。虽然许多 1.x 扩展将继续与 htmx 2 兼容，但您必须将 SSE 扩展升级到 2.x 版本，并且建议您将所有扩展升级到 2.x 版本。
• 如果您仍在使用传统的 hx-ws 和 hx-sse 属性，请升级到扩展版本
• 默认更改
  • 如果您想保留 1.0 版本中默认的“平滑滚动”行为，请将 htmx.config.scrollBehavior 还原为 'smooth'
  • 如果您希望 DELETE 请求使用表单编码的正文而不是参数，请将 htmx.config.methodsThatUseUrlParams 还原为 ["get"]（这有点奇怪，但根据规范，DELETE 应该像 GET 一样使用请求参数）。
  • 如果您想使用 htmx 进行跨域请求，请将 htmx.config.selfRequestsOnly 还原为 false
• 将任何 hx-on 属性转换为其 hx-on: 等价物

     <button hx-get="/info" hx-on="htmx:beforeRequest: alert('Making a request!')
                                   htmx:afterRequest: alert('Done making a request!')">
      Get Info!
     </button>
  

  变成

     <button hx-get="/info" hx-on:htmx:before-request="alert('Making a request!')"
                            hx-on:htmx:after-request="alert('Done making a request!')">
      Get Info!
     </button>
  Note that you must use the kebab-case of the event name due to the fact that attributes are case-insensitive in HTML.
  

• htmx.makeFragment() 方法现在始终返回 DocumentFragment，而不是 Element 或 DocumentFragment
• 如果您是扩展作者，并且您的扩展正在使用内部 API 中的 selectAndSwap 方法，该方法已被删除并替换为 swap 方法，该方法可从内部和公共 htmx API 中使用

要使用新方法进行交换，您只需使用

let content = "<div>Hello world</div>"; // this is HTML that will be swapped into target
let target = api.getTarget(child);
let swapSpec = api.getSwapSpecification(child);
api.swap(target, content, swapSpec);

swap 方法文档可在 JS API 参考 中找到

IE 在 htmx 2.0 中不再受支持，但 htmx 1.x 继续支持 IE 并且将在可预见的未来得到支持。

#升级音乐

这是官方的 htmx 1.x -> 2.x 升级音乐