🐛 Fixes head dom diffing

fireship-io · Aug 23, 2022 · 9af14bb · 9af14bb
1 parent a07f81e
commit 9af14bb
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 81 deletions.
diff --git a/example/404.html b/example/404.html
@@ -1,24 +1,78 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" href="favicon.ico" type="image/png">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="/favicon.ico" type="image/png" />
     <title>Page Not Found</title>
 
     <style media="screen">
-      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
-      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
-      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
-      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
-      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
-      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
-      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
-      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
-      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      body {
+        background: #eceff1;
+        color: rgba(0, 0, 0, 0.87);
+        font-family: Roboto, Helvetica, Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+      }
+      #message {
+        background: white;
+        max-width: 360px;
+        margin: 100px auto 16px;
+        padding: 32px 24px 16px;
+        border-radius: 3px;
+      }
+      #message h3 {
+        color: #888;
+        font-weight: normal;
+        font-size: 16px;
+        margin: 16px 0 12px;
+      }
+      #message h2 {
+        color: #ffa100;
+        font-weight: bold;
+        font-size: 16px;
+        margin: 0 0 8px;
+      }
+      #message h1 {
+        font-size: 22px;
+        font-weight: 300;
+        color: rgba(0, 0, 0, 0.6);
+        margin: 0 0 16px;
+      }
+      #message p {
+        line-height: 140%;
+        margin: 16px 0 24px;
+        font-size: 14px;
+      }
+      #message a {
+        display: block;
+        text-align: center;
+        background: #039be5;
+        text-transform: uppercase;
+        text-decoration: none;
+        color: white;
+        padding: 16px;
+        border-radius: 4px;
+      }
+      #message,
+      #message a {
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+      }
+      #load {
+        color: rgba(0, 0, 0, 0.4);
+        text-align: center;
+        font-size: 13px;
+      }
       @media (max-width: 600px) {
-        body, #message { margin-top: 0; background: white; box-shadow: none; }
-        body { border-top: 16px solid #ffa100; }
+        body,
+        #message {
+          margin-top: 0;
+          background: white;
+          box-shadow: none;
+        }
+        body {
+          border-top: 16px solid #ffa100;
+        }
       }
     </style>
   </head>
@@ -28,7 +82,10 @@ <h2>404</h2>
       <h1>Page Not Found</h1>
       <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
       <h3>Why am I seeing this?</h3>
-      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
+      <p>
+        This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured
+        <code>public</code> directory.
+      </p>
     </div>
   </body>
 </html>
diff --git a/example/about/index.html b/example/about/index.html
@@ -1,42 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="../favicon.ico" type="image/png">
-    <meta name="description" content="The About Page">
-    <meta name="extra" content="test">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" type="image/png" />
+    <meta name="description" content="The About Page" />
+    <meta name="extra" content="test" />
     <title>About</title>
     <script defer type="module">
-        import flamethrower from '/flamethrower.js';
-        flamethrower({ prefetch: 'visible', log: true, pageTransitions: true });
+      import flamethrower from '/flamethrower.js';
+      flamethrower({ prefetch: 'visible', log: true, pageTransitions: true });
     </script>
 
     <script defer data-reload src="/script1.js"></script>
     <script defer src="/script2.js"></script>
 
     <style>
-        #heading {
-            color: blue;
-        }
+      #heading {
+        color: blue;
+      }
     </style>
-
-</head>
-<body>
+  </head>
+  <body>
     <h1 id="heading">About</h1>
-    <a href="/">Home</a> | 
-    <a href="#chapter">Heading</a> | 
-    <a href="https://google.com">External</a> |
+    <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>
     <script type="module">
-        const router = window.flamethrower;
-        document.getElementById('go').onclick = () => {
-            router.go('/');
-        };
+      const router = window.flamethrower;
+      document.getElementById('go').onclick = () => {
+        router.go('/');
+      };
 
-        document.getElementById('back').onclick = () => router.back();
+      document.getElementById('back').onclick = () => router.back();
     </script>
 
     <h3>Scripts</h3>
@@ -45,16 +42,16 @@ <h3>Scripts</h3>
     <p id="headCheck"></p>
     <p id="headCheck2">default text</p>
 
-    <div style="margin-top: 1000px;"></div>
+    <div style="margin-top: 1000px"></div>
     <h3 id="chapter">Heading</h3>
     <a href="/">Home</a>
-    <a href="/test">Test</a> | 
+    <a href="/test">Test</a> |
 
-    <div style="margin-top: 1000px;"></div>
+    <div style="margin-top: 1000px"></div>
 
     <script>
-        console.log('body script');
-        document.getElementById('bodyCheck').innerText = '✔️ body script works';
+      console.log('body script');
+      document.getElementById('bodyCheck').innerText = '✔️ body script works';
     </script>
-</body>
-</html>
+  </body>
+</html>
diff --git a/example/index.html b/example/index.html
@@ -1,28 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="favicon.ico" type="image/png">
-    <meta name="description" content="The Home Page">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" type="image/png" />
+    <meta name="description" content="The Home Page" />
     <title>Flamethrower</title>
     <script defer type="module">
-        import flamethrower from '/flamethrower.js';
-        flamethrower({ prefetch: 'visible', log: true, pageTransitions: true });
+      import flamethrower from '/flamethrower.js';
+      flamethrower({ prefetch: 'visible', log: true, pageTransitions: true });
     </script>
 
     <style>
-        #heading {
-            color: red;
-        }
+      #heading {
+        color: red;
+      }
     </style>
-
-</head>
-<body>
+  </head>
+  <body>
     <h1 id="heading">Home</h1>
-    <a href="/">Home</a> |
-    <a id="about" href="/about">About</a> |
+    <a href="/">Home</a> | <a id="about" href="/about">About</a> |
     <!-- <a id="test" data-cold href="/test">Test</a> #} -->
-</body>
-</html>
+  </body>
+</html>
diff --git a/example/test/index.html b/example/test/index.html
@@ -1,21 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="../favicon.ico" type="image/png">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" type="image/png" />
     <title>Test Page</title>
     <script defer type="module">
-        import flamethrower from '/flamethrower.js';
-        flamethrower({ prefetch: 'visible', log: true, pageTransitions: true });
+      import flamethrower from '/flamethrower.js';
+      flamethrower({ prefetch: 'visible', log: true, pageTransitions: true });
     </script>
-
-</head>
-<body>
+  </head>
+  <body>
     <h1 id="heading">Test Page</h1>
     <a href="/">home</a>
     <a href="/about">about</a>
-
-</body>
-</html>
+  </body>
+</html>
diff --git a/lib/dom.ts b/lib/dom.ts
@@ -25,7 +25,6 @@ export function mergeHead(nextDoc: Document): void {
   const getValidNodes = (doc: Document): Element[] => Array.from(doc.querySelectorAll('head>:not([rel="prefetch"]'));
   const oldNodes = getValidNodes(document);
   const nextNodes = getValidNodes(nextDoc);
-
   const { staleNodes, freshNodes } = partitionNodes(oldNodes, nextNodes);
 
   staleNodes.forEach((node) => node.remove());
@@ -38,21 +37,21 @@ function partitionNodes(oldNodes: Element[], nextNodes: Element[]): PartitionedN
   const freshNodes: Element[] = [];
   let oldMark = 0;
   let nextMark = 0;
-  while (oldMark < oldNodes.length && nextMark < nextNodes.length) {
+  while (oldMark < oldNodes.length || nextMark < nextNodes.length) {
     const old = oldNodes[oldMark];
     const next = nextNodes[nextMark];
-    if (old.isEqualNode(next)) {
+    if (old?.isEqualNode(next)) {
       oldMark++;
       nextMark++;
       continue;
     }
-    const oldInFresh = freshNodes.findIndex((node) => node.isEqualNode(old));
+    const oldInFresh = old ? freshNodes.findIndex((node) => node.isEqualNode(old)) : -1;
     if (oldInFresh !== -1) {
       freshNodes.splice(oldInFresh, 1);
       oldMark++;
       continue;
     }
-    const nextInStale = staleNodes.findIndex((node) => node.isEqualNode(next));
+    const nextInStale = next ? staleNodes.findIndex((node) => node.isEqualNode(next)) : -1;
     if (nextInStale !== -1) {
       staleNodes.splice(nextInStale, 1);
       nextMark++;