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 參考上找到

htmx 2.0 不再支援 IE，但 htmx 1.x 繼續支援 IE，並且在可預見的未來將會繼續支援。

#升級音樂

這是官方 htmx 1.x -> 2.x 升級音樂