intercooler.js → htmx 移行ガイド

このガイドの目的は、

対応付け：Intercooler で利用可能な同等の htmx 属性、ヘッダー、イベント、メソッドなどをマップすること
回避策の提供：htmx コアに直接的な対応がない場合（通常は htmx 拡張機能またはhyperscript を使用）に、同じ/類似の結果を得るための回避策を提供すること
ギャップの強調：コア htmx、既存の拡張機能、またはhyperscript を使用して（まだ）エレガントに解決できない点を強調すること

#始める前に

Intercooler の目的と htmx の目的の違いに留意することが重要です。

Intercooler は、ほとんどの機能にカスタム HTML 属性を提供しようとしました。これは、より長い属性リスト（その多くは便宜的なもの、またはクライアント側中心の性質のものと説明できる）に明らかです。

htmx は、コアを小さく保つというアプローチに従っており、利用可能な属性の数は少なく、ほとんどがコンテンツの読み込みと交換に焦点を当てています。

この機能は、主に 2 つの方法で拡張されています。

拡張機能。htmx 拡張機能フレームワークにより、特定の機能を実現するためのカスタム拡張機能/プラグインが可能です。その一例として、Intercooler に組み込まれている依存関係メカニズムがありますが、htmx コアには存在しません。拡張機能を通じて利用可能です。また、Intercooler ではすぐに利用できなかった新しい動作を可能にする他の拡張機能もあります。例えば、preload 拡張機能
バニラ JavaScript、alpine.js、またはhyperscript を使用した htmx イベントシステム。Hyperscript は、HyperTalk を参考に HTML に埋め込むように設計された、小さくオープンなスクリプト言語であり、htmx の連携プロジェクトです。

htmx には、Intercooler にない機能も含まれています。これは、このガイドの範囲外です。

最後に、これはまだ開発中であり、時間の経過とともに変更される可能性があることに注意してください。

#移行情報

このガイドの残りの部分は、表のセットとして構成されており、それぞれが Intercooler の一般的な機能領域を htmx の同等物にマップしようと試みています。

#属性

注記：特定の Intercooler 属性（主にクライアント側固有の属性、例：ic-action と関連属性）には、htmx の直接的な同等物はありません。代わりに、hyperscript（http://hyperscript.org を参照）と呼ばれる小さく表現力豊かな言語があり、HTML に埋め込むように設計されており、htmx とシームレスに連携します。これにより、特にクライアント側中心の Intercooler 属性の一部と同じ動作を、より柔軟でオープンな方法で実現できます。

hyperscript に関する htmx ドキュメントを参照して、実践的な例と、hyperscript の背後にある考え方についてさらに詳しく知ることができます。

Intercooler	htmx
`ic-action`	なし。Hyperscript を使用してください。例：`<button _="on click add .clicked">私に「clicked」クラスを追加</button>`。hyperscript に関する htmx ドキュメントとhyperscript ドキュメントを参照して、さらに例を確認してください。
`ic-action-target`	なし。Hyperscript ターゲット式を使用してください。例：`<div _="on click set .button.style.color to 'red'">すべてのボタンを赤色に設定</div>`
`ic-add-class`	なし。Hyperscript を使用してください。例：`<button _="on click add .clicked">私に「clicked」クラスを追加</button>`。hyperscript に関する htmx ドキュメントとhyperscript ドキュメントを参照して、さらに例を確認してください。
`ic-append-from`	なし。例えば`hx-get` と`hx-swap`（値は`beforeend`）を使用して同等の機能を実現できます。
`ic-attr-src`	なし。直接的な同等機能は存在しません（検討中）
`ic-confirm`	`hx-confirm`
`ic-delete-from`	`hx-delete`
`ic-deps`	`hx-trigger="path-deps"` と `path-deps="/foo/bar"` を一緒に使用します。（`path-deps` 拡張機能が必要です）
`ic-disable-when-doc-hidden`	なし。直接的な同等機能は存在しません（検討中）
`ic-disable-when-doc-inactive`	なし。直接的な同等機能は存在しません（検討中）
`ic-enhance`	`hx-boost`
`ic-fix-ids`	なし。直接的な同等機能は存在しません（検討中）
`ic-get-from`	`hx-get`
`ic-global-include`	なし。`hx-include` を使用して同様の機能を実現できます。
`ic-global-indicator`	なし。`hx-indicator` を使用して同様の機能を実現できます。
`ic-history-elt`	`hx-history-elt`
`ic-include`	`hx-include`
`ic-indicator`	`hx-indicator`
`ic-limit-children`	なし。直接的な同等機能は存在しません（検討中）
`ic-local-vars`	直接的な同等物はありません。`hx-vars` を使用して促進できます。
`ic-on-beforeSend`	なし。イベント（例：`htmx:beforeRequest`）と組み合わせてHyperscript を使用してください。hyperscript に関する htmx ドキュメントとhyperscript ドキュメントを参照して、さらに例を確認してください。
`ic-on-beforeTrigger`	なし。イベント（例：`htmx:beforeRequest`）と組み合わせてHyperscript を使用してください。hyperscript に関する htmx ドキュメントとhyperscript ドキュメントを参照して、さらに例を確認してください。
`ic-on-complete`	なし。イベント（例：`htmx:afterRequest`）と組み合わせてHyperscript を使用してください。hyperscript に関する htmx ドキュメントとhyperscript ドキュメントを参照して、さらに例を確認してください。
`ic-on-error`	なし。イベント（例：`htmx:afterRequest`）と組み合わせてHyperscript を使用してください。hyperscript に関する htmx ドキュメントとhyperscript ドキュメントを参照して、さらに例を確認してください。
`ic-on-success`	なし。イベント（例：`htmx:afterRequest`）と組み合わせてHyperscript を使用してください。hyperscript に関する htmx ドキュメントとhyperscript ドキュメントを参照して、さらに例を確認してください。
`ic-patch-to`	`hx-patch`
`ic-pause-polling`	なし。`ロードポーリング` のような手法を使用できます。
`ic-poll`	なし。スケジュールされたロードをトリガーすることで同等の機能を実現できます。例：`<div hx-get="/news" hx-trigger="every 2s"></div>`。ポーリングに関するドキュメントを参照してください。
`ic-poll-repeats`	なし。スケジュールされたロードをトリガーすることで同等の機能を実現できます。例：`<div hx-get="/news" hx-trigger="every 2s"></div>`。ポーリングに関するドキュメントを参照してください。
`ic-post-errors-to`	なし。イベントを介してエラーをトラップし、`htmx.logger` メカニズムを介してログに記録できます。
`ic-post-to`	`hx-post`
`ic-prepend-from`	値が`beforeend` に設定された`hx-swap` 属性を使用して、同じ結果を得ることができます。
`ic-prompt`	`hx-prompt`
`ic-push-url`	`hx-push-url`
`ic-push-params`	htmx では、`GET` の場合、パラメータは自動的にプッシュされます。
`ic-put-to`	`hx-put`
`ic-remove-after`	なし。hyperscript に関する htmx ドキュメントを参照して、hyperscript を使用した実装方法の例を確認してください。
`ic-remove-class`	なし。Hyperscript を使用してください。例：`<button class="red" _="on click remove .red">私から「red」クラスを削除</button>`。hyperscript に関する htmx ドキュメントとhyperscript ドキュメントを参照して、さらに例を確認してください。
`ic-replace-target`	値が`outerHTML` に設定された`hx-swap` 属性を使用して、同じ結果を得ることができます。
`ic-scroll-offset`	なし。直接的な同等機能は存在しません。
`ic-scroll-to-target`	`hx-swap` 属性の`scroll` 修飾子と`show` 修飾子を参照してください。
`ic-select-from-response`	`hx-select`
`ic-src`	なし。トリガーと組み合わせて`hx-get` を使用するか、`path-deps` 拡張機能を使用してください。
`ic-sse-src`	`hx-sse`
`ic-style-src`	なし。直接的な同等機能は存在しません（検討中）
`ic-swap-style`	`hx-swap`
`ic-switch-class`	なし。_hyperscript に関する htmx ドキュメントを参照して、_hyperscript と`htmx:beforeOnLoad` イベントを使用した実装方法の例を確認してください。
`ic-target`	`hx-target`
`ic-transform-response`	なし。`client-side-templates` 拡張機能により、mustache、handlebars、またはnunjucks のようなテンプレートエンジンを使用して JSON レスポンスを変換できます。
`ic-transition-duration`	なし。htmx の交換メカニズムと CSS トランジションの性質を利用することで、同等の機能を実現できます。
`ic-trigger-delay`	`hx-trigger` と修飾子を使用してください。
`ic-trigger-from`	`from:` 節を使用して`hx-trigger` を使用してください。
`ic-trigger-on`	`hx-trigger`
`ic-verb`	なし。デフォルトでは、htmx は実際の HTTP メソッドを送信します。ただし、`method-override` 拡張機能を使用して、非`GET` 動詞を`POST` に変更できます。

#リクエストパラメータ

Intercooler	htmx
`ic-request`	なし。`HX-Request`ヘッダーを使用してください。
`_method`	なし。`method-override` エクステンションと、それが提供する`X-HTTP-Method-Override`ヘッダーを使用してください。
`ic-element-id`	なし
`ic-element-name`	なし
`ic-target-id`	なし。`HX-Target`ヘッダーを使用してください。
`ic-trigger-id`	なし。`HX-Trigger`ヘッダーを使用してください。
`ic-trigger-name`	なし。`HX-Trigger-Name`ヘッダーを使用してください。
`ic-current-url`	なし。`HX-Current-URL`ヘッダーを使用してください。
`ic-prompt-value`	なし。`HX-Prompt`ヘッダーを使用してください。

#リクエストヘッダー

Intercooler	htmx
`X-IC-Request`	`HX-Request`
`X-HTTP-Method-Override`	`X-HTTP-Method-Override`

#レスポンスヘッダー

Intercooler	htmx
`X-IC-Trigger`	`HX-Trigger`、`HX-Trigger-After-Settle`、`HX-Trigger-After-Swap`。詳細はドキュメントを参照してください。
`X-IC-Refresh`	`HX-Refresh`
`X-IC-Redirect`	`HX-Redirect`
`X-IC-Script`	なし。直接的な同等機能は存在しません（検討中）
`X-IC-CancelPolling`	なし。ポーリングをキャンセルするには、HTTPレスポンスコード`286`で応答してください。
`X-IC-ResumePolling`	なし。直接的な同等機能は存在しません。
`X-IC-SetPollInterval`	なし。ロードポーリングを使用している場合、異なるロード間隔を含むコンテンツで応答します。
`X-IC-Open`	なし。直接的な同等機能は存在しません（検討中）
`X-IC-PushURL`	`HX-Push`
`X-IC-Remove`	なし。直接的な同等機能は存在しません（検討中）
`X-IC-Title`	なし。直接的な同等機能は存在しません（検討中）
`X-IC-Title-Encoded`	なし。直接的な同等機能は存在しません（検討中）
`X-IC-Set-Local-Vars`	なし。直接的な同等機能は存在しません（検討中）

#イベント

注記：すべてのhtmxイベントは、キャメルケースとケバブケースの両方で発生します。

Intercooler	htmx
`log.ic`	なし。`htmx.logger`で同等の機能を実現できます。`イベントとログ`ドキュメントを参照してください。
`beforeAjaxSend.ic`	`htmx:configRequest`
`beforeHeaders.ic`	なし。直接的な同等機能は存在しません（検討中）
`afterHeaders.ic`	なし。直接的な同等機能は存在しません（検討中）
`beforeSend.ic`	`htmx:beforeRequest`
`success.ic`	`htmx:afterOnLoad`
`after.success.ic`	ほぼ同等なもの：`htmx:beforeSwap`
`error.ic`	`htmx:sendError` または `htmx:sseError` または `htmx:responseError` または `htmx:swapError` または `htmx:onLoadError` (未定)
`complete.ic`	`htmx:afterRequest`
`onPoll.ic`	直接的な同等物はありません。ロードポーリングを使用する場合、[`htmx:load` イベント]を使用できる可能性があります。
`handle.onpopstate.ic`	`htmx:historyRestore` (未定)
`elementAdded.ic`	`htmx:load`
`pushUrl.ic`	未定
`beforeHistorySnapshot.ic`	`htmx:beforeHistorySave`

#JavaScript APIメソッド

Intercooler	htmx
`Intercooler.refresh(eltOrPath)`	`PathDeps.refresh()` (`path-deps` エクステンションが必要です)
`Intercooler.triggerRequest(elt, handler)`	`htmx.trigger()`
`Intercooler.processNodes(elt)`	`htmx.process()`
`Intercooler.closestAttrValue(elt, attr)`	`htmx.closest()` は任意のセレクターで使用できます。
`Intercooler.verbFor(elt)`	なし。直接的な同等機能は存在しません（検討中）
`Intercooler.isDependent(elt1, elt2)`	なし。直接的な同等機能は存在しません（検討中）
`Intercooler.getTarget(elt1)`	なし。直接的な同等機能は存在しません（検討中）
`Intercooler.processHeaders(elt, xhr)`	なし。直接的な同等機能は存在しません（検討中）
`Intercooler.ready(func(elt))`	`htmx.onLoad()`
`LeadDyno.startPolling(elt)`	なし。直接的な同等機能は存在しません（検討中）
`LeadDyno.stopPolling(elt)`	なし。直接的な同等機能は存在しません（検討中）

#メタタグ

Intercooler	htmx
`<meta name="intercoolerjs:use-data-prefix" content="true"/>`	なし。メタタグを指定せずに`data-`プレフィックスを使用できます。htmxは、このようにhtmx属性を自動的に認識します。例：`<a data-hx-post="/click">Click Me!</a>`
`<meta name="intercoolerjs:use-actual-http-method" content="true"/>`	なし。デフォルトでは、htmxは実際のHTTPメソッドを送信します。ただし、`method-override`エクステンションを使用して、すべてのGET以外のリクエストの動詞をPOSTに変更できます。