More improvements and better handling of void elements

tbranyen · Nov 25, 2022 · f87ce7f · f87ce7f
1 parent b15b05f
commit f87ce7f
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 16 deletions.
diff --git a/packages/diffhtml-static-sync/sync.js b/packages/diffhtml-static-sync/sync.js
@@ -5,7 +5,7 @@ process.env.NODE_ENV = 'production';
 
 let interval = null;
 const domNodes = new Map();
-const { html, outerHTML } = diffhtml;
+const { outerHTML, html } = diffhtml;
 
 window.staticSyncHandlers = new Set();
 window.staticSyncSocket = undefined;
@@ -80,16 +80,7 @@ function open() {
           ext === 'md'
         )
       ) {
-        const children = html(markup);
-
-        console.log(children, markup);
-
-        if (children.childNodes.length > 1) {
-          outerHTML(document.documentElement, children.childNodes[1]);
-        }
-        else {
-          outerHTML(document.documentElement, children);
-        }
+        outerHTML(document.documentElement, html(markup));
       }
       // All other files cause a full page reload.
       else {

diff --git a/packages/diffhtml-website/build/generate.js b/packages/diffhtml-website/build/generate.js
@@ -35,10 +35,14 @@ use({
   createTreeHook({ nodeName, childNodes }) {
     if (nodeName === 'mermaid') {
       if (childNodes[0].nodeType === Internals.NODE_TYPE.TEXT) {
-        mermaid.render('mermaid', childNodes[0].nodeValue.trim(), svg => {
-          // Replace with the newly rendered SVG
-          childNodes[0] = html(svg);
-        });
+        try {
+          mermaid.render('mermaid', childNodes[0].nodeValue.trim(), svg => {
+            // Replace with the newly rendered SVG
+            childNodes[0] = html(svg);
+          });
+        } catch (e) {
+          childNodes[0] = html`<pre>${e.stack}</pre>`;
+        }
       }
     }
   },

diff --git a/packages/diffhtml/lib/util/parse.js b/packages/diffhtml/lib/util/parse.js
@@ -377,12 +377,14 @@ export default function parse(html, options = {}) {
     // Close tags.
     const {
       0: fullCloseTagMatch,
+      3: closeTagName,
       index: closeTagIndex,
     } = closeTag.exec(html) || EMPTY.OBJ;
 
     // Look for closing tags
     if (closeTagIndex === i && fullCloseTagMatch) {
-      if (fullCloseTagMatch[1] === '/' && isNotRoot) {
+      const isVoidElement = voidElements.has(closeTagName);
+      if (fullCloseTagMatch[1] === '/' && isNotRoot && !isVoidElement) {
         resetPointer();
       }
       isOpen = false;

diff --git a/packages/diffhtml/test/util.js b/packages/diffhtml/test/util.js
@@ -914,6 +914,21 @@ describe('Util', () => {
       strictEqual(vTree.childNodes[3].nodeName, 'meta');
     });
 
+    it('will support closing void elements', () => {
+      const vTree = parse(`
+        <head>
+          <meta name="test"></meta>
+          <meta name="test2"></meta>
+        </head>
+      `);
+
+      strictEqual(vTree.childNodes[1].nodeName, 'head');
+      strictEqual(vTree.childNodes[1].childNodes[1].nodeName, 'meta');
+      strictEqual(vTree.childNodes[1].childNodes[1].attributes.name, 'test');
+      strictEqual(vTree.childNodes[1].childNodes[3].nodeName, 'meta');
+      strictEqual(vTree.childNodes[1].childNodes[3].attributes.name, 'test2');
+    });
+
     it('will support parsing malformed markup with not closing', () => {
       const vTree = parse(`<script>`);