htmx 1.x → htmx 2.x 移行ガイド

このガイドの目的は、htmx 1.x から htmx 2.x に移行するための手順を提供することです。当社は下位互換性を非常に重視しているため、ほとんどの場合、この移行はほとんどまたはまったく作業を必要としません。

• モジュール設定で htmx を使用している場合、主要な JavaScript モジュールタイプの 3 つすべてにモジュールタイプの特定のファイルを現在提供しています
  • 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() メソッドは、現在 常に Element または DocumentFragment ではなく DocumentFragment を返します
• 拡張機能の作成者であり、拡張機能が内部 API から selectAndSwap メソッドを使用している場合、そのメソッドは削除され、内部 htmx API とパブリック htmx API の両方で利用できる swap メソッドに置き換えられました

新しいメソッドを使用してスワップするには、次のコードを使用するだけです

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 アップグレード音楽です