Skip to content
Open
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
47 changes: 0 additions & 47 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -165,53 +165,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>
```

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
5 changes: 2 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@
"cjs": "(cat src/idiomorph.js && echo \"\nmodule.exports = Idiomorph;\") > dist/idiomorph.cjs.js",
"esm": "(cat src/idiomorph.js && echo \"\nexport {Idiomorph};\") > dist/idiomorph.esm.js",
"gen-modules": "npm run-script amd && npm run-script cjs && npm run-script esm",
"dist": "cp -r src/* dist/ && cat src/idiomorph.js src/idiomorph-htmx.js > dist/idiomorph-ext.js && npm run-script gen-modules && npm run-script uglify && gzip -9 -k -f dist/idiomorph.min.js > dist/idiomorph.min.js.gz && exit",
"uglify": "uglifyjs -m eval -o dist/idiomorph.min.js dist/idiomorph.js && uglifyjs -m eval -o dist/idiomorph-ext.min.js dist/idiomorph-ext.js",
"dist": "cp -r src/* dist/ && npm run gen-modules && npm run uglify && gzip -9 -k -f dist/idiomorph.min.js > dist/idiomorph.min.js.gz && exit",
"uglify": "uglifyjs -m eval -o dist/idiomorph.min.js dist/idiomorph.js",
"format": "prettier --write .",
"format:check": "prettier --check .",
"typecheck": "tsc"
Expand All @@ -53,7 +53,6 @@
"chai-dom": "^1.11.0",
"chromedriver": "^131.0.5",
"fs-extra": "^9.1.0",
"htmx.org": "1.9.9",
"lcov-parse": "^1.0.0",
"mocha": "^11.0.1",
"prettier": "^3.4.2",
Expand Down
24 changes: 0 additions & 24 deletions src/idiomorph-htmx.js

This file was deleted.

186 changes: 0 additions & 186 deletions test/htmx-integration.js

This file was deleted.

12 changes: 0 additions & 12 deletions test/htmx/above.html

This file was deleted.

12 changes: 0 additions & 12 deletions test/htmx/below.html

This file was deleted.

Loading