@open-wc/semantic-dom-diff - npm Package Compare versions

Comparing version 0.18.0 to 0.19.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.19.0](https://github.com/open-wc/open-wc/compare/@open-wc/semantic-dom-diff@0.18.0...@open-wc/semantic-dom-diff@0.19.0) (2020-10-03)
+
+
+### Features
+
+* **semantic-dom-diff:** diff options now process scoped elements ([caa1608](https://github.com/open-wc/open-wc/commit/caa16081e38cc4202a8300cf5637657a6ff11a3d))
+
+
+
+
+
 # [0.18.0](https://github.com/open-wc/open-wc/compare/@open-wc/semantic-dom-diff@0.17.10...@open-wc/semantic-dom-diff@0.18.0) (2020-09-11)
@@ -8,0 +19,0 @@

get-diffable-html.js

@@ -105,4 +105,14 @@ const DEFAULT_IGNORE_TAGS = ['script', 'style', 'svg'];
   /** @param {Node} node */
+  function getTagName(node) {
+    // Use original tag if available via data-tag-name attribute (use-case for scoped elements)
+    // See packages/scoped-elements for more info
+    if (node instanceof Element) {
+      return node.getAttribute('data-tag-name') || node.localName;
+    }
+    return node.nodeName.toLowerCase();
+  }
+
+  /** @param {Node} node */
   function shouldProcessChildren(node) {
-    const name = node.nodeName.toLowerCase();
+    const name = getTagName(node);
     return (
@@ -155,3 +165,3 @@ !ignoreTags.includes(name) &&
         }
-        return e.tags.includes(el.nodeName.toLowerCase()) && e.attributes.includes(attr.name);
+        return e.tags.includes(getTagName(el)) && e.attributes.includes(attr.name);
       });
@@ -183,11 +193,4 @@ };
   /** @param {Element} el */
-  function getLocalName(el) {
-    // Use original tag if available via data-tag-name attribute (use-case for scoped elements)
-    // See packages/scoped-elements for more info
-    return el.getAttribute('data-tag-name') || el.localName;
-  }
-
-  /** @param {Element} el */
   function printOpenElement(el) {
-    text += `${getIndentation()}<${getLocalName(el)}${getAttributesString(el)}>\n`;
+    text += `${getIndentation()}<${getTagName(el)}${getAttributesString(el)}>\n`;
   }
@@ -198,3 +201,3 @@
     // don't print this node if we should ignore it
-    if (node.nodeName === 'DIFF-CONTAINER' || ignoreTags.includes(node.nodeName.toLowerCase())) {
+    if (getTagName(node) === 'diff-container' || ignoreTags.includes(getTagName(node))) {
       return;
@@ -221,7 +224,7 @@ }
   function printCloseElement(el) {
-    if (getLocalName(el) === 'diff-container' || VOID_ELEMENTS.includes(getLocalName(el))) {
+    if (getTagName(el) === 'diff-container' || VOID_ELEMENTS.includes(getTagName(el))) {
       return;
     }
 
-    text += `${getIndentation()}</${getLocalName(el)}>\n`;
+    text += `${getIndentation()}</${getTagName(el)}>\n`;
   }
@@ -232,3 +235,3 @@
     // don't print this node if we should ignore it
-    if (ignoreTags.includes(node.nodeName.toLowerCase())) {
+    if (ignoreTags.includes(getTagName(node))) {
       return;
@@ -235,0 +238,0 @@ }

package.json

 {
   "name": "@open-wc/semantic-dom-diff",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "publishConfig": {
@@ -33,3 +33,3 @@ "access": "public"
   },
-  "gitHead": "078340940f7ec6a7e459b8a22bf00e2b5bddfaff"
+  "gitHead": "3b43a7f8fd03aecfd06908f3c316f6b6718d6e1f"
 }

README.md

@@ -295,5 +295,7 @@ ---
 
-You might want to ignore scoped elements when working with _Shadow DOM snapshots_, like so:
+Let's take this example going forward:
 
 ```js
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { LitElement } from 'lit-element';
 import { MyButton } from '@somewhere/my-button';
@@ -316,34 +318,45 @@
 window.customElements.define('my-element', MyElement);
+```
 
+Without a proper diffing, scoped elements will produce untestable Shadow DOM snapshots. A different chunk of random numbers is attached to these elements' tags, _every time_, like so:
+
+```html
+<my-element>
+  <p>
+    Here's my button
+  </p>
+  <my-button-23443 data-tag-name="my-button">
+    Hey!
+  </my-button-23443>
+</my-element>
+```
+
+Whether you want to ignore this tag entirely:
+
+```js
 it('renders correctly', async () => {
   const el = await fixture(`
-      <my-custom-element>
-      </my-custom-element>
+      <my-element>
+      </my-element>
   `);
 
-  expect(el).shadowDom.to.equalSnapshot({
-    ignoreTags: [el.constructor.getScopedTagName('my-button', el.constructor.scopedElements)],
-  });
+  expect(el).shadowDom.to.equalSnapshot({ ignoreTags: 'my-button' });
 });
 ```
 
-This example will save the following snapshot:
-
 ```html
-<my-custom-element>
+<my-element>
   <p>
     Here's my button
   </p>
-</my-custom-element>
+</my-element>
 ```
 
-However, what if you actually care about testing what goes into scoped elements?
+... or just take a whole Shadow DOM snapshot of it:
 
-In that case, scoped elements should not be ignored, but diffed in snapshots correctly with their original tag name instead. Our differ will take that into account when making Shadow DOM snapshots, by default. Following the previous example:
-
 ```js
 it('renders correctly', async () => {
   const el = await fixture(`
-      <my-custom-element>
-      </my-custom-element>
+      <my-element>
+      </my-element>
   `);
@@ -355,6 +368,4 @@
 
-This example will save this snapshot:
-
 ```html
-<my-custom-element>
+<my-element>
   <p>
@@ -366,16 +377,7 @@ Here's my button
   </my-button>
-</my-custom-element>
+</my-element>
 ```
 
-With the actual implementation of scoped elements, without ignoring its tags or if our differ wouldn't check them by default, the test snapshot would be produced with scoped element tags with different random numbers _every time_:
+We've got you covered! ;)
 
-```html
-<my-custom-element>
-  <p>
-    Here's my button
-  </p>
-  <my-button-23443 data-tag-name="my-button">
-    Hey!
-  </my-button-23443>
-</my-custom-element>
-```
+Notice how in both examples the diff has worked out the real name and produced a testable snapshot.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66916

increased by0.07%

Lines of code

673

increased by0.45%

Number of lines in readme file

380

increased by0.53%

No dependency changes