Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Removed:
* Move the htmx extension out of tree into [htmx-ext-morph](https://github.com/bigskysoftware/htmx-extensions/tree/main/src/morph). (@botandrose) #111

## [0.8.0] - 2026-09-05

* Removed:
Expand Down
53 changes: 0 additions & 53 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -161,59 +161,6 @@ The `head` object also offers callbacks for configuring head merging specifics.
All the behaviors specified above can be set to a different default by mutating the `Idiomorph.defaults` object, including
the `Idiomorph.defaults.callbacks` and `Idiomorph.defaults.head` objects.

### htmx

Idiomorph was created to integrate with [htmx](https://htmx.org) and can be used as a swapping mechanism by including
the `dist/idiomorph-ext.js` file in your HTML:

```html
<script src="https://unpkg.com/idiomorph/dist/idiomorph-ext.min.js"></script>
<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>
```

or by importing the "idiomorph/htmx" module:

```html
import "idiomorph/htmx";
```

Note that this file includes both Idiomorph and the htmx extension.

#### Configuring Morphing Behavior in htmx

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>
```

## Performance

Idiomorph is not designed to be as fast as either morphdom or nanomorph. Rather, its goals are:
Expand Down
2 changes: 1 addition & 1 deletion ROADMAP.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ This document outlines the development roadmap for Idiomorph. It provides a high
## Milestones

### 0.9.0
- [ ] Move idiomorph/htmx.js out of tree into an htmx extension https://github.com/bigskysoftware/idiomorph/issues/111
- [x] Move idiomorph/htmx.js out of tree into an htmx extension https://github.com/bigskysoftware/idiomorph/issues/111
- [ ] Settle input value semantics, and the subtree-skipping speedup they unblock https://github.com/bigskysoftware/idiomorph/issues/144
- [ ] Improve anonymous node matching, perhaps using Merkle trees, or fuzzy synthetic ids? https://github.com/bigskysoftware/idiomorph/issues/143
- [ ] Plugin system? https://github.com/bigskysoftware/idiomorph/issues/109
Expand Down
Loading
Loading