GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - briancavalier/hyperHTML: A Fast & Light Virtual DOM Alternative

BranchesTags
Open more actions menu
 
 

Latest commit

 

History

506 Commits
506 Commits

Folders and files

NameName
Last commit message
Last commit date
cjs
cjs
 
 
coverage
coverage
 
 
esm
esm
 
 
logo
logo
 
 
test
test
 
 
.gitignore
.gitignore
 
 
.npmignore
.npmignore
 
 
.travis.yml
.travis.yml
 
 
CHANGELOG.md
CHANGELOG.md
 
 
LICENSE.txt
LICENSE.txt
 
 
README.md
README.md
 
 
babel-plugins.json
babel-plugins.json
 
 
index.js
index.js
 
 
min.js
min.js
 
 
package.json
package.json
 
 
rollup.config.js
rollup.config.js
 
 

Repository files navigation

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:

  • 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.

About

A Fast & Light Virtual DOM Alternative

Resources

Readme
ISC license
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.