1.0.0-beta.7 • Published 7 years ago

diffhtml-prollyfill v1.0.0-beta.7

Weekly downloads
1
License
MIT
Repository
-
Last release
7 years ago

<±/> 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-prollyfill

This 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();