fix(semantic-dom-diff): normalize adjacent textNodes

.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.

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()) {

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

packages/semantic-dom-diff/test-web/chai-dom-equals.test.js

@@ -26,6 +26,12 @@ describe('lightDom', () => {
     assert.lightDom.notEqual(el, '<h2>Hey</h2>');
   });
 
+  it('can normalize adjacent textNodes when separated by comment', async () => {
+    const el = await fixture(`<div><span>Hello, <!--ignore-me-->world!</span></div>`);
+    expect(el).lightDom.to.equal('<span>Hello, world!</span>');
+    assert.lightDom.equal(el, '<span>Hello, world!</span>');
+  });
+
   it('passes along provided configuration', async () => {
     const el = await fixture('<div><p foo="bar">foo</p></div>');
     expect(el).lightDom.to.equal('<p>foo</p>', { ignoreAttributes: ['foo'] });

packages/semantic-dom-diff/test-web/get-diffable-html.test.js

@@ -182,9 +182,9 @@ describe('getDiffableHTML()', () => {
         <div>
           <!-- foo -->
           <span>
-            lorem
             <!-- foo -->
-            ipsum
+            lorem <!-- foo --> ipsum
+            <!-- foo -->
           </span>
           <!-- <div id="bar"></div> -->
         </div>
@@ -194,8 +194,7 @@ describe('getDiffableHTML()', () => {
       expect(html).to.equal(
         '<div>\n' +
         '  <span>\n' +
-        '    lorem\n' +
-        '    ipsum\n' +
+        '    lorem  ipsum\n' +
         '  </span>\n' +
         '</div>\n',
       );