拡張機能

htmxは、提供するコアハイパーメディアインフラストラクチャを強化するための拡張機能をサポートしています。拡張機能メカニズムは、新しい機能を追加するためのコアライブラリへの圧力を軽減し、ハイパーメディア制御の一般化という主な目的に集中できるようにします。

htmxの拡張機能を作成することに興味がある場合は、htmx拡張機能の構築を参照してください。

htmxの拡張機能は、2つのカテゴリに分類されます

コア拡張機能

名前説明
head-supporthtmxリクエストでheadタグ情報（スタイルなど）をマージするためのサポートを提供します
htmx-1-compathtmx 2のほとんどの動作変更をhtmx 1のデフォルトに戻します。
idiomorphhtmxチームによって作成されたidiomorphモーフィングライブラリに基づくmorphスワップ戦略を提供します。
preloadこの拡張機能を使用すると、ユーザーがリクエストする前にHTMLフラグメントをブラウザのキャッシュにロードできるため、追加のページがユーザーにほぼ瞬時にロードされるように見えます。
response-targetsこの拡張機能を使用すると、異なるHTTP応答コードを受信したときにスワップされる異なるターゲット要素を指定できます。
sseHTMLから直接Server Sent Eventsのサポートを提供します。
wsHTMLから直接Webソケットサーバーとの双方向通信を提供します。

コミュニティ拡張機能

名前説明
ajax-headerhtmxによって作成されたすべてのリクエストにX-Requested-Withヘッダーを追加します
alpine-morphAlpine.jsには軽量なmorphプラグインが搭載されており、この拡張機能を使用すると、htmxでスワップメカニズムとして使用できます。これは、htmxによってスワップされたAlpineコンポーネント全体でAlpineの状態を保持するために必要です。
class-toolsclass-tools拡張機能を使用すると、classesまたはdata-classes属性を使用して、要素のオンまたはオフにスワップされるCSSクラスを指定できます。
client-side-templatesこの拡張機能は、JSON/XMLリクエストの応答を、DOMにスワップされる前にクライアント側のテンプレートを介してHTMLに変換することをサポートします。
debugこの拡張機能には、console.debug関数を使用するか、DEBUG:プレフィックス付きのconsole.log関数を使用するか、いずれかの方法で、要素上のすべてのhtmxイベントをログに記録します。
disable-elementこの拡張機能は、リクエストをトリガーする要素で設定されている場合、htmxリクエスト中に要素を無効にします。この機能は、hx-disabled-elt属性を介してhtmxのコアの一部になっていることに注意してください。
event-headerこの拡張機能は、リクエストにTriggering-Eventヘッダーを追加します。ヘッダーの値は、リクエストをトリガーしたイベントのJSONシリアル化されたバージョンです。
include-valsinclude-vals拡張機能を使用すると、include-vals属性を使用して、リクエストに値をプログラムで含めることができます。この属性の値は、JavaScriptオブジェクトリテラルのフィールドとして評価される1つ以上の名前/値ペアです。
json-enc-customこの拡張機能はjson-encと同様に機能しますが、name属性を使用するだけで、JSONオブジェクト、リストの埋め込み、またはインデックスの処理など、非常に複雑な構造を可能にします。
json-encこの拡張機能は、パラメーターをurl形式ではなくJSON形式でエンコードします。
loading-statesこの拡張機能を使用すると、リクエストが進行中の間、要素の無効化、CSSクラスの追加と削除など、ロード状態を簡単に管理できます。
morphdom-swapmorphdomモーフィングライブラリに基づくmorphスワップ戦略を提供します。
multi-swapこの拡張機能を使用すると、HTML応答からマークされた複数の要素をスワップできます。また、各要素に使用するスワップ方法を選択することもできます。
no-cacheこの拡張機能は、HTMXにクライアントキャッシュをバイパスして新しいリクエストを作成させます。サーバー側のキャッシュをバイパスするために、hx-no-cacheヘッダーも追加されます。
path-depsこの拡張機能は、intercooler.js依存関係メカニズムに触発された、パスに基づいた要素間の依存関係の表現をサポートします。
path-paramsこの拡張機能は、リクエストパラメーターを使用してパス変数を設定します。使用されたパラメーターは削除されるため、クエリ文字列または本文で送信されなくなります。
remove-me指定された間隔の後に要素を削除できます。
replace-paramsこの拡張機能は、リクエストパラメーターを使用して既存のパラメーターを置き換えます。指定された値が空の文字列の場合、パラメーターは削除されます。この拡張機能は、ページネーションや検索のように、すべてのパラメーターをリセットするのではなく、少数のパラメーターのみを置き換えたい場合に役立ちます。
restoredhx-boostの使用中に、戻るボタンのイベントが検出されるたびにイベントをトリガーします
safe-noncesafe-nonce拡張機能を使用すると、既知の信頼できるインラインスクリプトを安全に返すことができるようにすることで、アプリケーション/Webサイトのセキュリティを向上させ、XSSの問題を回避するのに役立ちます
signalrSignalRを介した双方向リアルタイム通信を提供します。