hyperhtml-adopt
v0.0.0
Published
Same hyperHTML, plus the .adopt(node) method
Downloads
3
Maintainers
Readme
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 regularcloneNode
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.