bhanditz / hyperhtml

A Fast & Light Virtual DOM Alternative

hyper(HTML)

A Fast & Light Virtual DOM Alternative available for NodeJS and NativeScript too.

---

V2 Highlights

Following most important changes in version 2:

• fully rewritten, and consumable, as ES2015 Module
• usable via CDN as bundled global hyperHTML variable
• restructured in modules, utilities, helpers, and commented all over for simplified contribution
• removed .escape and .adopt, either useless or unstable. hyperHTML.adopt will be implemented as module a part
• added support for objects as style attribute, fully compatible with Preact implementation
• improved performance in numerous ways
• custom elements V0 and V1 are now fully, and properly, supported through document.importNode and/or regular cloneNode tested against common polyfills
• back to 4.6K thanks to rollup and its ability to merge all the things together like it was already in V1

Documentation

A proper documentation full of examples can be found in viperhtml.js.org.

Basic Example

The easiest way to describe hyperHTML is through an example.

// this is hyperHTML
function tick(render) {
  render`
    <div>
      <h1>Hello, world!</h1>
      <h2>It is ${new Date().toLocaleTimeString()}.</h2>
    </div>
  `;
}
setInterval(tick, 1000,
  hyperHTML(document.getElementById('root'))
);

Features

• Zero dependencies, no polyfills needed, and it fits in about 4.6KB (minified + brotli)
• Uses directly native DOM, no virtual DOM involved
• Designed for template literals, a templating feature built in to JS
• Compatible with plain DOM elements and plain JS data structures
• Also compatible with Babel transpiled output, hence suitable for every browser you can think of

Compatibility

IE9+ , iOS8+ , Android 4+ and every modern Mobile or Desktop Browser. You can verify directly through the following links:

• 100% code coverage for browsers natively compatible with string literals
• 100% code coverage for IE9+ and browsers that need transpiled code

Questions ?

Please ask anything you'd like to know in StackOverflow using the tag hyperhtml so that others can benefit from answers and examples.

hyper or lit ?

You can read more on this hyperHTML vs lit-html comparison.

installation?

npm install hyperhtml

If your bundler does not work with the following:

// ES6
import hyperHTML from 'hyperhtml';

// CJS
const hyperHTML = require('hyperhtml');

You can try any of these other options.

import hyperHTML from 'hyperhtml/esm';
// or
import {hyper, wire, bind, Component} from 'hyperhtml/esm';
// or
import hyperHTML from 'https://unpkg.com/hyperhtml?module';


const hyperHTML = require('hyperhtml/cjs').default;
// or
const {hyper, wire, bind, Component} = require('hyperhtml/cjs');