diff --git a/README.md b/README.md index a1280de..a798ee1 100644 --- a/README.md +++ b/README.md @@ -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 - -
- - - - - - - -
-``` - -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:'` - In this form, `` 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 - -``` - ## Performance Idiomorph is not designed to be as fast as either morphdom or nanomorph. Rather, its goals are: diff --git a/package.json b/package.json index 832006e..e7a0af3 100644 --- a/package.json +++ b/package.json @@ -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" @@ -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", diff --git a/src/idiomorph-htmx.js b/src/idiomorph-htmx.js deleted file mode 100644 index cabbe5d..0000000 --- a/src/idiomorph-htmx.js +++ /dev/null @@ -1,24 +0,0 @@ -(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("morph", { - 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); - } - }, - }); -})(); diff --git a/test/htmx-integration.js b/test/htmx-integration.js deleted file mode 100644 index eb5b8fe..0000000 --- a/test/htmx-integration.js +++ /dev/null @@ -1,186 +0,0 @@ -describe("Tests for the htmx integration", function () { - function makeServer() { - var server = sinon.fakeServer.create(); - htmx.config.defaultSettleDelay = 0; - server.fakeHTTPMethods = true; - return server; - } - - beforeEach(function () { - this.server = makeServer(); - clearWorkArea(); - }); - - afterEach(function () { - this.server.restore(); - }); - - function makeForHtmxTest(htmlStr) { - let elt = make(htmlStr); - getWorkArea().appendChild(elt); - htmx.process(elt); - return elt; - } - - it("keeps the element stable in an outer morph", function () { - this.server.respondWith( - "GET", - "/test", - "", - ); - let initialBtn = makeForHtmxTest( - "", - ); - initialBtn.click(); - this.server.respond(); - let newBtn = document.getElementById("b1"); - initialBtn.should.equal(newBtn); - initialBtn.classList.contains("bar").should.equal(true); - }); - - it("keeps the element live in an outer morph", function () { - this.server.respondWith( - "GET", - "/test", - "", - ); - this.server.respondWith( - "GET", - "/test2", - "", - ); - let initialBtn = makeForHtmxTest( - "", - ); - - initialBtn.click(); - this.server.respond(); - let newBtn = document.getElementById("b1"); - initialBtn.should.equal(newBtn); - initialBtn.classList.contains("bar").should.equal(true); - initialBtn.classList.contains("doh").should.equal(false); - - initialBtn.click(); - this.server.respond(); - newBtn = document.getElementById("b1"); - initialBtn.should.equal(newBtn); - initialBtn.classList.contains("bar").should.equal(false); - initialBtn.classList.contains("doh").should.equal(true); - }); - - it("keeps the element stable in an outer morph w/ explicit syntax", function () { - this.server.respondWith( - "GET", - "/test", - "", - ); - let initialBtn = makeForHtmxTest( - "", - ); - initialBtn.click(); - this.server.respond(); - let newBtn = document.getElementById("b1"); - initialBtn.should.equal(newBtn); - initialBtn.classList.contains("bar").should.equal(true); - }); - - it("keeps the element live in an outer morph w/explicit syntax", function () { - this.server.respondWith( - "GET", - "/test", - "", - ); - this.server.respondWith( - "GET", - "/test2", - "", - ); - let initialBtn = makeForHtmxTest( - "", - ); - - initialBtn.click(); - this.server.respond(); - let newBtn = document.getElementById("b1"); - initialBtn.should.equal(newBtn); - initialBtn.classList.contains("bar").should.equal(true); - initialBtn.classList.contains("doh").should.equal(false); - - initialBtn.click(); - this.server.respond(); - newBtn = document.getElementById("b1"); - initialBtn.should.equal(newBtn); - initialBtn.classList.contains("bar").should.equal(false); - initialBtn.classList.contains("doh").should.equal(true); - }); - - it("keeps elements stable in an inner morph", function () { - this.server.respondWith( - "GET", - "/test", - "", - ); - let div = makeForHtmxTest( - "
", - ); - let initialBtn = document.getElementById("b1"); - div.click(); - this.server.respond(); - let newBtn = document.getElementById("b1"); - initialBtn.should.equal(newBtn); - initialBtn.classList.contains("bar").should.equal(true); - }); - - it("keeps elements stable in an inner morph w/ long syntax", function () { - this.server.respondWith( - "GET", - "/test", - "", - ); - let div = makeForHtmxTest( - "
", - ); - let initialBtn = document.getElementById("b1"); - div.click(); - this.server.respond(); - let newBtn = document.getElementById("b1"); - initialBtn.should.equal(newBtn); - initialBtn.classList.contains("bar").should.equal(true); - }); - - it("keeps the element stable in an outer morph with oob-swap", function () { - this.server.respondWith( - "GET", - "/test", - "", - ); - let div = makeForHtmxTest( - "
", - ); - let initialBtn = document.getElementById("b1"); - div.click(); - this.server.respond(); - let newBtn = document.getElementById("b1"); - initialBtn.should.equal(newBtn); - initialBtn.innerHTML.should.equal("Bar"); - }); - - /* Currently unable to test innerHTML style oob swaps because oob-swap syntax uses a : which conflicts with morph:innerHTML - it("keeps the element stable in an inner morph with oob-swap", function () { - this.server.respondWith( - "GET", - "/test", - "
", - ); - let div = makeForHtmxTest( - "
", - ); - let initialBtn = document.getElementById("b1"); - div.click(); - this.server.respond(); - let newBtn = document.getElementById("b1"); - initialBtn.should.equal(newBtn); - initialBtn.innerHTML.should.equal("Bar"); - }); - */ -}); diff --git a/test/htmx/above.html b/test/htmx/above.html deleted file mode 100644 index ffba0c3..0000000 --- a/test/htmx/above.html +++ /dev/null @@ -1,12 +0,0 @@ -
-

Above...

-

- -

-
-
- -
\ No newline at end of file diff --git a/test/htmx/below.html b/test/htmx/below.html deleted file mode 100644 index 751f9f2..0000000 --- a/test/htmx/below.html +++ /dev/null @@ -1,12 +0,0 @@ -
- -
-
-

Below...

-

- -

-
\ No newline at end of file diff --git a/test/htmx/htmx-demo.html b/test/htmx/htmx-demo.html deleted file mode 100644 index 445038b..0000000 --- a/test/htmx/htmx-demo.html +++ /dev/null @@ -1,138 +0,0 @@ - - - htmx/idiomorph demo - - - - - - - - - - -
-
-

Above...

-
-
- -
-
- - - - \ No newline at end of file diff --git a/test/htmx/htmx-demo2.html b/test/htmx/htmx-demo2.html deleted file mode 100644 index 60b3870..0000000 --- a/test/htmx/htmx-demo2.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - -
-
-

Above...

-

- -

-
-
- -
-
- - - \ No newline at end of file diff --git a/test/index.html b/test/index.html index f835d73..f74a747 100644 --- a/test/index.html +++ b/test/index.html @@ -23,11 +23,9 @@

Mocha Test Suite

- - - @@ -53,7 +50,7 @@

Mocha Test Suite

Work Area
-
+    
       Output Here...
     
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs index 70b3431..bf96b53 100644 --- a/web-test-runner.config.mjs +++ b/web-test-runner.config.mjs @@ -19,8 +19,6 @@ let config = { - - @@ -28,7 +26,7 @@ let config = { Work Area
-
+      
         Output Here...