🏷 Minimal JSX compatible html focused templating engine.
The lightweight JSX compatible templating engine. Perfect for creating html strings server side or in browser.
Check out set-dom, diffhtml or morphdom for React style diffing.
JSX is powerful compared to other templating engines but it has some warts. It has some abstractions that simply don't make sense for creating html (ala className). "VDO" provides a JSX interface that is specifically designed for rendering html, not DOM.
npm install vdo
/** @jsx vdo */
const vdo = require('vdo');
function MyPartial (attrs, children) {
return <span class="custom" data-value={attrs.value}/>;
}
const html = (
<div class="root">
<MyPartial value="1"/>
</div>
);
document.body.innerHTML = html;
element
is a vdo virtual element.vdo.isElement(<div/>); // true
// Use #markSafe instead of "innerHTML" when coming from react.
// This allows for mixes of safe and unsafe html in the same node.
const myHTMLStr = "<br/>";
const vNode = <div>{ vdo.markSafe(myHTMLStr) }</div>;
String(vNode); //-> <div><br/></div>
context
.// renderer must be a function that returns a virtual node.
function MyComponent (props, children, context) {
return (
<div>External data: { context }</div>
);
}
String(vdo.with(1, ()=> <MyComponent/>));
//-> "<div>External Data: 1</div>"
// Automatically called when using JSX.
let vNode = vdo.createElement("div", { editable: true }, "Hello World");
// Or call vdo directly
let vNode = vdo("div", { editable: true }, "Hello World");
// Render to string on the server.
vNode.toString(); // '<div editable="true">Hello World</div>';
/**
* @params type can also be a function (shown in example above).
*/
npm test
to run tests.Please feel free to create a PR!