diffhtml-prollyfill
v1.0.0-beta.7
Published
Exposes an experimental browser API for diffHTML
Readme
<±/> diffHTML Prollyfill
Stable Version: 1.0.0-beta.7
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 --save diffhtml 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.ouerHTML = `<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 add some globals to window.
Element.prototype.outerHTML
Overrides the default outerHTML behavior to automatically apply a virtual
DOM to the outer contents.
document.querySelector('main').outerHTML = '<new markup to diff/>';Element.prototype.innerHTML
Overrides the default innerHTML behavior to automatically apply a virtual
DOM to the inner contents.
document.querySelector('main').innerHTML = '<new child markup to diff/>';Element.prototype.release
Cleans up a given DOM Node's association with diffHTML.
const newElement = document.createElement('main');
newElement.innerHTML = '<div></div>';
newElement.release();