bigskysoftware · botandrose · Feb 16, 2025
diff --git a/src/idiomorph/LICENSE b/src/idiomorph/LICENSE
@@ -0,0 +1,14 @@
+BSD Zero Clause License
+
+Copyright (c) 2023, Alexander Petros
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
diff --git a/src/idiomorph/README.md b/src/idiomorph/README.md
@@ -0,0 +1,55 @@
+This extension allows you to use [Idiomorph](https://github.com/bigskysoftware/idiomorph) as the swapping mechanism in htmx.
+
+## Install
+
+```html
+<script src="https://unpkg.com/[email protected]/idiomorph.js"></script>
+```
+
+## Usage
+
+```html
+<header>
+  <script src="https://unpkg.com/htmx.org@latest"></script>
+  <script src="https://unpkg.com/[email protected]"></script>
+  <script src="https://unpkg.com/[email protected]/idiomorph.js"></script>
+</header>
+
+<body>
+  <div hx-ext="morph">
+    <button hx-get="/example" hx-swap="morph:innerHTML">
+      Morph My Inner HTML
+    </button>
+
+    <button hx-get="/example" hx-swap="morph:outerHTML">
+      Morph My Outer HTML
+    </button>
+
+    <button hx-get="/example" hx-swap="morph">
+      Morph My Outer HTML
+    </button>
+  </div>
+</body>
+```
+
+## Configuring
+
+The Idiomorph extension for htmx supports three different syntaxes for specifying behavior:
+
+* `hx-swap='morph'` - This will perform a morph on the outerHTML of the target
+* `hx-swap='morph:outerHTML'` - This will perform a morph on the outerHTML of the target (explicit)
+* `hx-swap='morph:innerHTML'` - This will perform a morph on the innerHTML of the target (i.e. the children)
+* `hx-swap='morph:<expr>'` - In this form, `<expr>` can be any valid JavaScript expression.  The results of the expression
+   will be passed into the `Idiomorph.morph()` method as the configuration.
+
+The last form gives you access to all the configuration options of Idiomorph.  So, for example, if you wanted to ignore
+the input value in a given morph, you could use the following swap specification:
+
+```html
+  <button hx-get="/example" 
+          hx-swap="morph:{ignoreActiveValue:true}"
+          hx-target="closest form">
+      Morph The Closest Form But Ignore The Active Input Value
+  </button>
+```
+
diff --git a/src/idiomorph/idiomorph.js b/src/idiomorph/idiomorph.js
@@ -0,0 +1,24 @@
+(function() {
+  function createMorphConfig(swapStyle) {
+    if (swapStyle === "morph" || swapStyle === "morph:outerHTML") {
+      return { morphStyle: "outerHTML" };
+    } else if (swapStyle === "morph:innerHTML") {
+      return { morphStyle: "innerHTML" };
+    } else if (swapStyle.startsWith("morph:")) {
+      return Function("return (" + swapStyle.slice(6) + ")")();
+    }
+  }
+
+  htmx.defineExtension("idiomorph", {
+    isInlineSwap: function (swapStyle) {
+      let config = createMorphConfig(swapStyle);
+      return config?.morphStyle === "outerHTML" || config?.morphStyle == null;
+    },
+    handleSwap: function (swapStyle, target, fragment) {
+      let config = createMorphConfig(swapStyle);
+      if (config) {
+        return Idiomorph.morph(target, fragment.children, config);
+      }
+    },
+  });
+})()