Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@swimlane/dom-diff

Package Overview
Dependencies
Maintainers
40
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@swimlane/dom-diff

diffing chunks of dom or HTML for semantic equality

  • 1.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
40
Created
Source

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

FAQs

Package last updated on 02 Feb 2021

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc