vhtml
Render JSX/Hyperscript to HTML strings, without VDOM
Need to use HTML strings (angular?) but want to use JSX? vhtml's got your back.
Installation
Via npm:
npm install --save vhtml
Usage
// import the library:; // tell babel to transpile JSX to h() calls:/** @jsx h */ // now render JSX to an HTML string!let items = 'one' 'two' 'three'; documentbodyinnerHTML = <div class="foo"> <h1>Hi!</h1> <p>Here is a list of itemslength items:</p> <ul> items </ul> </div>;
New: "Sortof" Components!
vhtml
intentionally does not transform JSX to a Virtual DOM, instead serializing it directly to HTML.
However, it's still possible to make use of basic Pure Functional Components as a sort of "template partial".
When vhtml
is given a Function as the JSX tag name, it will invoke that function and pass it { children, ...props }
.
This is the same signature as a Pure Functional Component in react/preact, except children
is an Array of already-serialized HTML strings.
This actually means it's possible to build compositional template modifiers with these simple Components, or even higher-order components.
Here's a more complex version of the previous example that uses a component to encapsulate iteration items:
let items = 'one' 'two'; const Item = <li id=index> <h4>item</h4> children </li>; console;
The above outputs the following HTML:
Hi! oneThis is item one! twoThis is item two!