matthewp / hyperHTML

A Fast & Light Virtual DOM Alternative

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

hyper(HTML)

donate Coverage Status Build Status License: ISC Greenkeeper badge

hyperHTML logo

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:

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');

About

A Fast & Light Virtual DOM Alternative

License:ISC License


Languages

Language:HTML 71.3%Language:JavaScript 27.9%Language:CSS 0.8%