@ecopages/browser-router 0.2.0-alpha.25 → 0.2.0-alpha.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/browser-router",
-  "version": "0.2.0-alpha.25",
+  "version": "0.2.0-alpha.27",
   "description": "Client-side router for Ecopages with view transitions support",
   "keywords": [
     "ecopages",
@@ -35,7 +35,7 @@
     "morphdom": "^2.7.8"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-alpha.25"
+    "@ecopages/core": "0.2.0-alpha.27"
   },
   "types": "./src/index.d.ts"
 }

package/src/client/services/dom-swapper.d.ts

@@ -71,6 +71,7 @@ export declare class DomSwapper {
      * @returns Always `false` to tell morphdom to skip updating this element.
      */
     private replaceCustomElement;
+    private materializeCustomElement;
     /**
      * Replaces all deferred custom elements after morphdom has finished traversing.
      *

package/src/client/services/dom-swapper.js

@@ -235,9 +235,17 @@ class DomSwapper {
    * @returns Always `false` to tell morphdom to skip updating this element.
    */
   replaceCustomElement(fromEl, toEl, deferred) {
-    deferred.push({ from: fromEl, to: toEl });
+    deferred.push({ from: fromEl, to: toEl.cloneNode(true) });
     return false;
   }
+  materializeCustomElement(element) {
+    const materializedElement = document.createElement(element.localName);
+    for (const attr of element.attributes) {
+      materializedElement.setAttribute(attr.name, attr.value);
+    }
+    materializedElement.innerHTML = element.innerHTML;
+    return materializedElement;
+  }
   /**
    * Replaces all deferred custom elements after morphdom has finished traversing.
    *
@@ -249,11 +257,7 @@ class DomSwapper {
   flushDeferredCustomElementReplacements(deferred) {
     for (const { from, to } of deferred) {
       if (!from.isConnected) continue;
-      const newEl = document.createElement(to.tagName);
-      for (const attr of to.attributes) {
-        newEl.setAttribute(attr.name, attr.value);
-      }
-      newEl.innerHTML = to.innerHTML;
+      const newEl = this.materializeCustomElement(to);
       from.replaceWith(newEl);
     }
   }
@@ -268,6 +272,12 @@ class DomSwapper {
     const deferredReplacements = [];
     morphdom(document.body, newDocument.body, {
       getNodeKey: (node) => getBodyMorphKey(node, persistAttr),
+      onBeforeNodeAdded: (node) => {
+        if (node instanceof Element && this.isLightDomCustomElement(node)) {
+          return this.materializeCustomElement(node);
+        }
+        return node;
+      },
       onBeforeElUpdated: (fromEl, toEl) => {
         if (isPersisted(fromEl, persistAttr)) {
           return false;