VDO
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.
Why
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.
Features
- Minimal API.
- ~1kb min/gzip.
- No extra "data-react-id".
- No random span's.
- Allows any custom attribute (react only allows data-).
- Render nested arrays.
- Optimized for rendering html.
- Escaped values by default.
- JSX compatible.
Installation
Npm
npm install vdo
Example
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;
API
- isElement(element) : Tests if given
element
is a vdo virtual element.
vdo.isElement(<div/>);
- markSafe(html) : Marks html as safe as a VDO child node.
const myHTMLStr = "<br/>";
const vNode = <div>{ vdo.markSafe(myHTMLStr) }</div>;
String(vNode);
- with(context, renderer) : Gives all components inside a render function some external
context
.
function MyComponent (props, children, context) {
return (
<div>External data: { context }</div>
);
}
String(vdo.with(1, ()=> <MyComponent/>));
- createElement(type, props, children...) : Create a virtual node/component.
let vNode = vdo.createElement("div", { editable: true }, "Hello World");
let vNode = vdo("div", { editable: true }, "Hello World");
vNode.toString();
Contributions
- Use
npm test
to run tests.
Please feel free to create a PR!