Package Exports
- diffhtml-prollyfill
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (diffhtml-prollyfill) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
diffHTML Prollyfill
Use directly in place of diffhtml.
The term prollyfill means I'd like to see it be a standard some day, but is
currently not under any consideration. Click here for the "prollyfill"
origin tweet.
Install
Assuming you want to install the latest version of diffHTML with the prollyfill:
npm install diffhtml@latest diffhtml-prollyfillThis architecture makes it easy to swap out versions of diffHTML to use with the prollyfill.
Documentation
Quick usage:
import { enableProllyfill } from 'diffhtml-prollyfill';
// Enable the prollyfill which exposes globals.
enableProllyfill();
// Diff the text contents into `<body>`.
document.body.diffOuterHTML = `<body>Hello world</body>`;Disclaimer: By calling this method, you are agreeing that it's okay for
diffHTML to modify your browser's HTMLElement constructor,
Element.prototype, the document object, and run some logic on your page
load event.
Element.prototype.diffOuterHTML
Scans for changes in attributes and text on the parent, and all child nodes.
document.querySelector('main').diffOuterHTML = '<new markup to diff/>';Element.prototype.diffInnerHTML
Only scans for changes in child nodes.
document.querySelector('main').diffInnerHTML = '<new child markup to diff/>';Element.prototype.diffElement
Compares the two elements for changes like outerHTML, if you pass { inner: true } as the second argument it will act like innerHTML.
var newElement = document.createElement('main');
newElement.innerHTML = '<div></div>';
document.querySelector('main').diffElement(newElement);Element.prototype.diffRelease
Cleans up after diffHTML and removes the associated worker.
var newElement = document.createElement('main');
newElement.innerHTML = '<div></div>';
document.querySelector('main').diffRelease(newElement);