README

@swimlane/dom-diff

This library acts as a base project for diffing chunks of dom or HTML for semantic equality.

Used in:

@swimlane/cy-dom-diff

API

`getDiffableHTML`

Takes a snippet of HTML and returns a semantically similar diffable HTML snippet.

import { getDiffableHTML } from '@swimlane/dom-diff';

const h = `
<head></head>
<div z="1" a="2" x>
  <h1 z="3">Hello</h1>
  <h2>World</h2>
  <svg>SVG ignored</svg>
  <script>scripts also ignored</script>
  <style>styles also ignored</style>
  <!-- comments ignored too -->
</div>`;

getDiffableHTML(h, {
  ignoreAttributes: [{ tags: ['h1'], attributes: ['z'] }]
});

// <div
//   a="2"
//   x
//   z="1"
// >
//   <h1>
//     Hello
//   </h1>
//   <h2>
//     World
//   </h2>
// </div>

`dom`

Template tag that takes a snippet of HTML and returns a regular expression.

Follows rules defined in https://github.com/Hypercubed/lit-regex

import { dom } from '@swimlane/dom-diff';

dom`<h1>Hello ${/[\w-]+/}</h1>`;

// /^<h1>\n  Hello [\w-]+\n<\/h1>$/

`diff`

Takes a regular expression generated by dom and a string generated from getDiffableHTML returning a representation of the difference.

import { diff, dom, getDiffableHTML } from '@swimlane/dom-diff';

const h = getDiffableHTML('<div>Hello 123</div>');
const r = dom`<div>Hello ${/[a-zA-Z]+/}</div>`;

diff(r, h);

//   <div>
//  -  Hello \${/[a-zA-Z]+/}
//  +  Hello 123
//   </div>

Release

Checkout main (git checkout main)
Pull from origin (git pull origin main)
Examine CHANGELOG.md to determine next version (X.Y.Z)
Run np (npm run np) and follow the prompts

License

Distributed under the MIT License. See LICENSE for more information.

Credits

@swimlane/dom-diff is a Swimlane open-source project; we believe in giving back to the open-source community by sharing some of the projects we build.

Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.

Usage no npm install needed!