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.

FAQs

What is @swimlane/dom-diff?

Is @swimlane/dom-diff popular?

Is @swimlane/dom-diff well maintained?

Package last updated on 02 Feb 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@swimlane/dom-diff