deep clone preserved nodes

example/about/index.html

@@ -36,6 +36,14 @@ <h1 id="heading">About</h1>
     <a href="/">Home</a> | <a href="#chapter">Heading</a> | <a href="https://google.com">External</a> |
     <button id="go">Go</button>
     <button id="back">Back</button>
+
+    <div id="keep" flamethrower-preserve>
+      <article>
+        <p>This text should be preserved when starting from about</p>
+      </article> 
+    </div>
+
+
     <script type="module">
       const router = window.flamethrower;
       document.getElementById('go').onclick = () => {

example/index.html

@@ -30,7 +30,13 @@
     <div id="load-bar"></div>
     <h1 id="heading">Home</h1>
     <a href="/">Home</a> | <a id="about" href="/about">About</a> |
-    <!-- <a id="test" data-cold href="/test">Test</a> #} -->
+
+    <div id="keep" flamethrower-preserve>
+      <article>
+        <p>This text should be preserved when starting from home</p>
+      </article> 
+    </div>
+
     <script>
       // test
       window.addEventListener('flamethrower:router:fetch-progress', ({ detail }) => {

lib/dom.ts

@@ -7,17 +7,6 @@ export function formatNextDocument(html: string): Document {
   return parser.parseFromString(html, 'text/html');
 }
 
-/**
- * @param {Element} target
- * @param {Element} source
- * Clone Attributes to new Node
- */
-function cloneAttributes(target: Element, source: Element) {
-  Array.from(source.attributes).forEach((attr) => {
-    target.setAttribute(attr.nodeName, attr.nodeValue);
-  });
-}
-
 /**
  * @param  {Document} nextDoc
  * Replace Body
@@ -27,18 +16,8 @@ export function replaceBody(nextDoc: Document): void {
   nodesToPreserve.forEach((oldDocElement) => {
     let nextDocElement = nextDoc.body.querySelector('[flamethrower-preserve][id="' + oldDocElement.id + '"]');
     if (nextDocElement) {
-      // same element found in next doc
-
-      // copy attributes
-      cloneAttributes(oldDocElement, nextDocElement);
-
-      // copy new child nodes
-      while (oldDocElement.firstChild) {
-        oldDocElement.removeChild(oldDocElement.firstChild);
-      }
-      nextDocElement.childNodes.forEach((node) => oldDocElement.appendChild(node));
-
-      nextDocElement.replaceWith(oldDocElement);
+      const clone = oldDocElement.cloneNode(true);
+      nextDocElement.replaceWith(clone);
     }
   });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flamethrower-router",
-  "version": "0.0.0-meme.10",
+  "version": "0.0.0-meme.11",
   "description": "Blazingly fast SPA-like router for static sites",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",