search

WebReflection / hyperHTML

A Fast & Light Virtual DOM Alternative
ISC License
3.07k stars 113 forks source link
alternative dom js lightweight manipulation performance template template-literals vanilla virtualdom

readme

hyper(HTML)

Maintainance Only

This module is great, works great, and served me greatly, but there's a pletora of modern, faster, more capable alternatives me, among many other OSS developers, offer so that if obvious bugs are proven to exist, these will be fixed, but there won't be a major release and I won't remove legacy support for stuff that, as previously mentioned, works just fine and it's battle-tested from IE to the latest Chrome.

Removing that legacy support brings pretty much nothing in terms of size too: this module is already smaller than 90% of alternatives out there, dropping 0.xK so that there's less code that, behind feature detection, is not even used in modern browsers, won't benefit anyone.

Thansk for your understanding and for not opening PRs which goal is to drop a check for legacy browsers ... these won't likely be merged ever as that'd be a major release update and I don't think anyone is interested in that.

📣 Community Announcement

Please ask questions in the dedicated discussions repository, to help the community around this project grow ♥

hyperHTML logo

A Fast & Light Virtual DOM Alternative.

donate Backers on Open Collective Sponsors on Open Collective WebReflection status

Coverage Status Build Status License: ISC Greenkeeper badge Blazing Fast

Following an overview of projects related, or inspired by, hyperHTML. For a deep comparison of current libraries, feel free to check this gist out.

µhtml

The latest, smallest, iteration of all best concept from this library since 2017, have been packaged in ~2.5K. If it's extreme minimalism and great DX that you are after, check uhtml out.

hypersimple

If you've just started with template literals based projects and you like components, or you'd like to understand what's hyperHTML capable of, give hypersimple a try 🎉

lighterhtml 💡

This little brother is "showing off" these days, claiming better performance and unprecedented ease of use.

GitHub Repository

Neverland 🌈🦄

If you like React hooks concept, don't miss this little wrap that adds 0.something overhead to the already lightweight hyperHTML, bringing in very similar concepts.

Blog Post

GitHub Repository

Haunted 🦇 🎃

If you also like React hooks mechanism and you'd like to combine these via hyperHTML or HyperHTMLElement, try haunted out!

Bundlers

You can require or import hyperHTML with any bundler and in different ways.

If requiring or importing from "hyperhtml" doesn't work, try requiring from "hyperhtml/cjs" for CommonJS friendly bundlers (WebPack), or "hyperhtml/esm" for ESM compatible bundlers (Rollup).

See HELPERS.md for a list of additional tools which can be helpful for building hyperHTML based web applications.

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Backers

Thank you to all our backers! 🙏 [Become a backer]

Contributors

This project exists thanks to all the people who contribute. [Contribute].

2.34 Highlights

V2.5 Highlights

V2 Highlights

Following most important changes in version 2:

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

Compatibility

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

Weakmap error on ie < 11

'@ungap/weakmap': object is not extensible

Babel freezes the template literals by spec but that causes problems with the weakmap polyfill. To fix this error add the fix explained on ungap/weakmap

HTML Syntax Highlight

If you are using Visual Studio Code you can install literally-html to highlight all literals handled by hyperHTML and others.

literally-html example

Prettier Templates

If you'd like to make your templates prettier than usual, don't miss this plugin: https://github.com/sgtpep/prettier-plugin-html-template-literals

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

In alternative, there is a pre-bundled require("hyperhtml/umd") or via unpkg as UMD module.