Improve morph support for <template> elements

Closes [bigskysoftware#15][] When morphing `<template>` elements, treat the [DocumentFragment][] instances returned from the [HTMLTemplateElement.content][] properties as `morphChildren` methods' `newParent` and `oldParent` variables. That way, descendant nodes can be iterated across the connected-disconnected boundary. [bigskysoftware#15]: bigskysoftware#15 [DocumentFragment]: [HTMLTemplateElement.content]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content
seanpdoyle · Apr 12, 2024 · f5b02eb · f5b02eb
1 parent f75fba1
commit f5b02eb
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 6 deletions.
diff --git a/dist/idiomorph-ext.js b/dist/idiomorph-ext.js
@@ -110,7 +110,7 @@ var Idiomorph = (function () {
          * @returns {boolean}
          */
         function ignoreValueOfActiveElement(possibleActiveElement, ctx) {
-            return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement;
+            return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement && possibleActiveElement !== document.body;
         }
 
         /**
@@ -177,6 +177,10 @@ var Idiomorph = (function () {
          * @param ctx the merge context
          */
         function morphChildren(newParent, oldParent, ctx) {
+            if (newParent instanceof HTMLTemplateElement && oldParent instanceof HTMLTemplateElement) {
+              newParent = newParent.content;
+              oldParent = oldParent.content;
+            }
 
             let nextNewChild = newParent.firstChild;
             let insertionPoint = oldParent.firstChild;
@@ -860,7 +864,7 @@ var Idiomorph = (function () {
     htmx.defineExtension('morph', {
         isInlineSwap: function(swapStyle) {
             let config = createMorphConfig(swapStyle);
-            return config.swapStyle === "outerHTML" || config.swapStyle == null;
+            return config?.morphStyle === "outerHTML" || config?.morphStyle == null;
         },
         handleSwap: function (swapStyle, target, fragment) {
             let config = createMorphConfig(swapStyle);

diff --git a/dist/idiomorph-ext.min.js b/dist/idiomorph-ext.min.js
diff --git a/dist/idiomorph-htmx.js b/dist/idiomorph-htmx.js
@@ -12,7 +12,7 @@
     htmx.defineExtension('morph', {
         isInlineSwap: function(swapStyle) {
             let config = createMorphConfig(swapStyle);
-            return config.swapStyle === "outerHTML" || config.swapStyle == null;
+            return config?.morphStyle === "outerHTML" || config?.morphStyle == null;
         },
         handleSwap: function (swapStyle, target, fragment) {
             let config = createMorphConfig(swapStyle);

diff --git a/dist/idiomorph.amd.js b/dist/idiomorph.amd.js
@@ -179,6 +179,10 @@ var Idiomorph = (function () {
          * @param ctx the merge context
          */
         function morphChildren(newParent, oldParent, ctx) {
+            if (newParent instanceof HTMLTemplateElement && oldParent instanceof HTMLTemplateElement) {
+              newParent = newParent.content;
+              oldParent = oldParent.content;
+            }
 
             let nextNewChild = newParent.firstChild;
             let insertionPoint = oldParent.firstChild;

diff --git a/dist/idiomorph.cjs.js b/dist/idiomorph.cjs.js
@@ -177,6 +177,10 @@ var Idiomorph = (function () {
          * @param ctx the merge context
          */
         function morphChildren(newParent, oldParent, ctx) {
+            if (newParent instanceof HTMLTemplateElement && oldParent instanceof HTMLTemplateElement) {
+              newParent = newParent.content;
+              oldParent = oldParent.content;
+            }
 
             let nextNewChild = newParent.firstChild;
             let insertionPoint = oldParent.firstChild;

diff --git a/dist/idiomorph.esm.js b/dist/idiomorph.esm.js
@@ -177,6 +177,10 @@ var Idiomorph = (function () {
          * @param ctx the merge context
          */
         function morphChildren(newParent, oldParent, ctx) {
+            if (newParent instanceof HTMLTemplateElement && oldParent instanceof HTMLTemplateElement) {
+              newParent = newParent.content;
+              oldParent = oldParent.content;
+            }
 
             let nextNewChild = newParent.firstChild;
             let insertionPoint = oldParent.firstChild;

diff --git a/dist/idiomorph.js b/dist/idiomorph.js
@@ -110,7 +110,7 @@ var Idiomorph = (function () {
          * @returns {boolean}
          */
         function ignoreValueOfActiveElement(possibleActiveElement, ctx) {
-            return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement;
+            return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement && possibleActiveElement !== document.body;
         }
 
         /**
@@ -177,6 +177,10 @@ var Idiomorph = (function () {
          * @param ctx the merge context
          */
         function morphChildren(newParent, oldParent, ctx) {
+            if (newParent instanceof HTMLTemplateElement && oldParent instanceof HTMLTemplateElement) {
+              newParent = newParent.content;
+              oldParent = oldParent.content;
+            }
 
             let nextNewChild = newParent.firstChild;
             let insertionPoint = oldParent.firstChild;

diff --git a/dist/idiomorph.min.js b/dist/idiomorph.min.js
diff --git a/dist/idiomorph.min.js.gz b/dist/idiomorph.min.js.gz
diff --git a/src/idiomorph.js b/src/idiomorph.js
@@ -177,6 +177,10 @@ var Idiomorph = (function () {
          * @param ctx the merge context
          */
         function morphChildren(newParent, oldParent, ctx) {
+            if (newParent instanceof HTMLTemplateElement && oldParent instanceof HTMLTemplateElement) {
+              newParent = newParent.content;
+              oldParent = oldParent.content;
+            }
 
             let nextNewChild = newParent.firstChild;
             let insertionPoint = oldParent.firstChild;

diff --git a/test/core.js b/test/core.js
@@ -185,6 +185,14 @@ describe("Core morphing tests", function(){
         initial.outerHTML.should.equal("<div></div>");
     });
 
+    it('can morph a template tag properly', function()
+    {
+      let initial = make("<template data-old>Foo</template>");
+      let final = make("<template data-new>Bar</template>");
+      Idiomorph.morph(initial, final);
+      initial.outerHTML.should.equal(final.outerHTML);
+    });
+
     it('ignores active element when ignoreActive set to true', function()
     {
         let initialSource = "<div><div id='d1'>Foo</div><input id='i1'></div>";