diff --git a/.changeset/itchy-suns-film.md b/.changeset/itchy-suns-film.md new file mode 100644 index 00000000..d98b7851 --- /dev/null +++ b/.changeset/itchy-suns-film.md @@ -0,0 +1,5 @@ +--- +'@open-wc/semantic-dom-diff': patch +--- + +Remove comments before creating the TreeWalking, so text nodes should not be splitted by them and treated as semantic. diff --git a/packages/semantic-dom-diff/get-diffable-html.js b/packages/semantic-dom-diff/get-diffable-html.js index a6f96347..2a5f37ad 100644 --- a/packages/semantic-dom-diff/get-diffable-html.js +++ b/packages/semantic-dom-diff/get-diffable-html.js @@ -92,9 +92,25 @@ export function getDiffableHTML(html, options = {}) { return ' '.repeat(depth); } - /** @param {Text} textNode */ - function printText(textNode) { - const value = textNode.nodeValue.trim(); + /** + * @param {Text} textNode + * @param {TreeWalker} walker + */ + function printText(textNode, walker) { + let value = ''; + let node = textNode; + + while (node && node instanceof Text) { + value += node.nodeValue; + + node = walker.nextSibling(); + } + + if (node) { + walker.previousSibling(); + } + + value = value.trim(); if (value !== '') { text += `${getIndentation()}${value}\n`; @@ -192,8 +208,11 @@ export function getDiffableHTML(html, options = {}) { text += `${getIndentation()}<${getTagName(el)}${getAttributesString(el)}>\n`; } - /** @param {Node} node */ - function onNodeStart(node) { + /** + * @param {Node} node + * @param {TreeWalker} walker + */ + function onNodeStart(node, walker) { // don't print this node if we should ignore it if (getTagName(node) === 'diff-container' || ignoreTags.includes(getTagName(node))) { return; @@ -207,7 +226,7 @@ export function getDiffableHTML(html, options = {}) { handledNodeStarted.add(node); if (node instanceof Text) { - printText(node); + printText(node, walker); } else if (node instanceof Element) { printOpenElement(node); } else { @@ -259,7 +278,7 @@ export function getDiffableHTML(html, options = {}) { // walk the dom and create a diffable string representation while (walker.currentNode) { const current = walker.currentNode; - onNodeStart(current); + onNodeStart(current, walker); // crawl children if we should for this node, and if it has children if (shouldProcessChildren(current) && walker.firstChild()) { diff --git a/packages/semantic-dom-diff/src/utils.js b/packages/semantic-dom-diff/src/utils.js index 94b698bc..3ba509b0 100644 --- a/packages/semantic-dom-diff/src/utils.js +++ b/packages/semantic-dom-diff/src/utils.js @@ -23,7 +23,7 @@ export const getOuterHtml = el => { }; /** - * For comparision we do not need the style scoping classes on polyfilled browsers + * For comparison we do not need the style scoping classes on polyfilled browsers * Rather naive approach for now - probably need to improve once we have failing cases. * * @param {Element} el Element you want to get the cleaned shadow dom diff --git a/packages/semantic-dom-diff/test-web/chai-dom-equals.test.js b/packages/semantic-dom-diff/test-web/chai-dom-equals.test.js index 104d698b..6c991d29 100644 --- a/packages/semantic-dom-diff/test-web/chai-dom-equals.test.js +++ b/packages/semantic-dom-diff/test-web/chai-dom-equals.test.js @@ -26,6 +26,12 @@ describe('lightDom', () => { assert.lightDom.notEqual(el, '

Hey

'); }); + it('can normalize adjacent textNodes when separated by comment', async () => { + const el = await fixture(`
Hello, world!
`); + expect(el).lightDom.to.equal('Hello, world!'); + assert.lightDom.equal(el, 'Hello, world!'); + }); + it('passes along provided configuration', async () => { const el = await fixture('

foo

'); expect(el).lightDom.to.equal('

foo

', { ignoreAttributes: ['foo'] }); diff --git a/packages/semantic-dom-diff/test-web/get-diffable-html.test.js b/packages/semantic-dom-diff/test-web/get-diffable-html.test.js index a369a0ec..73fa35c3 100644 --- a/packages/semantic-dom-diff/test-web/get-diffable-html.test.js +++ b/packages/semantic-dom-diff/test-web/get-diffable-html.test.js @@ -182,9 +182,9 @@ describe('getDiffableHTML()', () => {
- lorem - ipsum + lorem ipsum +
@@ -194,8 +194,7 @@ describe('getDiffableHTML()', () => { expect(html).to.equal( '
\n' + ' \n' + - ' lorem\n' + - ' ipsum\n' + + ' lorem ipsum\n' + ' \n' + '
\n', );