viperHTML
hyperHTML lightness, ease, and performance, for the server.
Don't miss the viperHTML version of Hacker News
Live: https://viperhtml-164315.appspot.com/
Repo: https://github.com/WebReflection/viper-news
Same API without DOM constrains
Similar to its browser side counterpart, viperHTML
parses the template string once, decides what is an attribute, what is a callback, what is text and what is HTML, and any future call to the same render will only update parts of that string.
The result is a blazing fast template engine that makes templates and renders shareable between the client and the server.
Seamlessly Isomorphic
No matter if you use ESM or CommonJS, you can use hypermorphic to load same features on both client and server.
// ESM example (assuming bundlers/ESM loaders in place); // CommonJS exampleconst bind wire = ;
Automatically Sanitized HTML
Both attributes and text nodes are safely escaped on each call.
const viperHTML = ; var render` <!-- attributes and callbacks are safe --> <a href="" onclick="" > <!-- also text is always safe --> <!-- use Arrays to opt-in HTML --> <span> </span> </a>`; var a = text: 'Click "Me"' html: '<strong>"HTML" Me</strong>' href: 'https://github.com/WebReflection/viperHTML' e; // associate the link to an object of info// or simply use viperHTML.wire();var link = viperHTML; console;
The resulting output will be the following one:
<!-- attributes and callbacks are safe --> <!-- also text is always safe --> Click "Me" <!-- HTML goes in as it is --> "HTML" Me
Usage Example
const viperHTML = ; { return render` <div> <h1>Hello, world!</h1> <h2>It is .</h2> </div> `;} // for demo purpose only,// stop showing tick result after 6 seconds;
The Extra viperHTML Feature: Asynchronous Partial Output
Clients and servers inevitably have different needs, and the ability to serve chunks on demand, instead of a whole page at once, is once of these very important differences that wouldn't make much sense on the client side.
If your page content might arrive on demand and is asynchronous,
viperHTML
offers an utility to both obtain performance boots,
and intercepts all chunks of layout, as soon as this is available.
viperHTML.async()
Similar to a wire, viperHTML.async()
returns a callback that must be invoked right before the template string,
optionally passing a callback that will be invoked per each available chunk of text, as soon as this is resolved.
// the viewconst pageLayout = render`<!doctype html><html> <head></head> <body></body></html>`; // the viper async renderconst asyncRender = viperHTML; // dummy server for one view only ;
Handy Patterns
Following a list of handy patterns to solve common issues.
HTML in template literals doesn't get highlighted
True that, but if you follow a simple (render, model)
convetion,
you can just have templates as html files.
<!-- template/tick.html --> Hello, ${model.name}! It is ${new Date().toLocaleTimeString()}.
At this point, you can generate as many views as you want through the following step
#!/usr/bin/env bash mkdir -p view
As result, the folder view
will now contain a tick.js
file as such:
module render`<!-- template/tick.html --><div> <h1>Hello, !</h1> <h2>It is .</h2></div>`;
You can now use each view as modules.
const view = tick: ; // show the result in consoleconsole;