Repository files navigation

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.

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

AFast & Light Virtual DOM Alternative.

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

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 greatDX that you are after, checkuhtml out.

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

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

GitHub Repository

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

If you also like React hooks mechanism and you'd like to combine these via hyperHTML orHyperHTMLElement, tryhaunted out!

You can require or importhyperHTML 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).

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

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

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

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

• the new?boolean=${value} syntax fromµhtml has landed inhyperHTML too. Feel free toread this long discussion to better understandwhy this syntax is necessary.

• <self-closing /> tags for both custom elements and any other as well 🎉

Following most important changes in version 2:

• fully rewritten, andconsumable, asES2015 Module
• usable via CDN as bundled globalhyperHTML 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 asstyle attribute, fully compatible withPreact implementation
• improved performance in numerous ways
• custom elements V0 and V1 are now fully, and properly, supported throughdocument.importNode and/or regularcloneNode tested against common polyfills
• back to 4.6K thanks torollup and its ability to merge all the things together like it was already in V1

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

The easiest way to describehyperHTML is throughan example.

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

• Zero dependencies, no polyfills needed, and it fits in about4.6KB (minified + brotli)
• Uses directly native DOM, no virtual DOM involved
• Designed fortemplate 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

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

'@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 onungap/weakmap

If you are using Visual Studio Code you can installliterally-html to highlight all literals handled byhyperHTML and others.

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

Please ask anything you'd like to know inStackOverflow using the taghyperhtml so that others can benefit from answers and examples.

You can read more on thishyperHTML vs lit-html comparison.

npminstallhyperhtml

If your bundler does not work with the following:

// ES6importhyperHTMLfrom'hyperhtml';// CJSconsthyperHTML=require('hyperhtml');

You can try any of these other options.

importhyperHTMLfrom'hyperhtml/esm';// orimport{hyper,wire,bind,Component}from'hyperhtml/esm';// orimporthyperHTMLfrom'https://unpkg.com/hyperhtml?module';consthyperHTML=require('hyperhtml/cjs').default;// orconst{hyper, wire, bind, Component}=require('hyperhtml/cjs');

In alternative, there is a pre-bundledrequire("hyperhtml/umd") or via unpkg asUMD module.