htmx イディオモーフ拡張

イディオモーフは、htmx の作成者が作成した DOM モーフィングアルゴリズムです。DOM モーフィングは、既存の DOM ツリーを、可能な限り多くの既存の DOM のノードを再利用する方法で、別の DOM ツリーの形に「モーフィング」するプロセスです。ツリーを切り替えるときにノードを保持することで、2 つの状態間のよりスムーズな遷移を作成できます。

イディオモーフ拡張を含めることで、イディオモーフモーフィングアルゴリズムをスワッピング戦略として使用できます。

インストール

<script src="https://unpkg.com/idiomorph@0.3.0/dist/idiomorph-ext.min.js"></script>

使い方

イディオモーフ拡張を参照したら、morph という名前でボディに登録してから、morph、morph:outerHTML、または morph:innerHTML をスワップ戦略として使用するからです。

morph & morph:outerHTML は、ターゲット要素とその子要素をモーフィングします。
morph:innerHTML は、ターゲットには触れずに、要素の内部の子のみをモーフィングします。

<body hx-ext="morph">

    <button hx-get="/example" hx-swap="morph">
        Morph My Outer HTML
    </button>

    <button hx-get="/example" hx-swap="morph:outerHTML">
        Morph My Outer HTML
    </button>
    
    <button hx-get="/example" hx-swap="morph:innerHTML">
        Morph My Inner HTML
    </button>

</body>