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.

Building components? do yourself a favor and use

JSFiddle Demo

---

Installation

Via npm:

npm install --save vhtml

---

Usage

// import the library:importhfrom'vhtml';// tell babel to transpile JSX to h() calls:/** @jsx h */// now render JSX to an HTML string!letitems=['one','two','three'];document.body.innerHTML=(<divclass="foo"><h1>Hi!</h1><p>Here is a list of {items.length} items:</p><ul>{items.map(item=>(<li>{item}</li>))}</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:

letitems=['one','two'];constItem=({ item, index, children })=>(<liid={index}><h4>{item}</h4>{children}</li>);console.log(<divclass="foo"><h1>Hi!</h1><ul>{items.map((item,index)=>(<Item{...{ item, index }}>
This is item {item}!
</Item>))}</ul></div>);

The above outputs the following HTML:

<divclass="foo"><h1>Hi!</h1><ul><liid="0"><h4>one</h4>This is item one!
</li><liid="1"><h4>two</h4>This is item two!
</li></ul></div>