From f87ce7fd82a095f1fab1f3ab95a6150ae6c35db6 Mon Sep 17 00:00:00 2001 From: Tim Branyen Date: Fri, 25 Nov 2022 14:35:53 -0800 Subject: [PATCH] More improvements and better handling of void elements --- packages/diffhtml-static-sync/sync.js | 13 ++----------- packages/diffhtml-website/build/generate.js | 12 ++++++++---- packages/diffhtml/lib/util/parse.js | 4 +++- packages/diffhtml/test/util.js | 15 +++++++++++++++ 4 files changed, 28 insertions(+), 16 deletions(-) diff --git a/packages/diffhtml-static-sync/sync.js b/packages/diffhtml-static-sync/sync.js index ccfe9622..6bfdee0a 100644 --- 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 index a24bcf19..67bbed94 100644 --- 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`
${e.stack}
`; + } } } }, diff --git a/packages/diffhtml/lib/util/parse.js b/packages/diffhtml/lib/util/parse.js index 4b7fef8b..996efe34 100644 --- 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 index ca87b18c..c22e0a8a 100644 --- 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(` + + + + + `); + + 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(`