Does for the DOM and VDOMs what JSX does for JavaScript. Adds interpolation and custom directives to your HTML.
- (optional) Load your front-end library that uses a virtual DOM, e.g.
preact. - Compile your HTML containg template literals and attribute directives into a VDOMx object.
- Render your VDOMx using attribute and state data plus a target HTMLElement or hand in an
hfunction pass the results to a VDOM renderer, e.g.preact.
The example below can be found in the examples directory. You can also try it out.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/preact/dist/preact.js"></script>
<script src="../index.js"></script>
</head>
<body>
<p>The template below would normally not be visible</p>
<template id="message" style:style="${attributes[this].fontWeight}">
<br> Hello, ${name||"Anonymous"}!
<br> <ul vx-forentries="${favorite-colors}">
<br> <li style:style="color:${value}">${value}</li>
<br> </ul>
<br></template>
<template id="message">
<p>Hello,<span style:style="font-weight:${attributes[this].fontWeight}"> ${name||"Anonymous"}!</span></p>
<ul vx-forentries="${favoriteColors}">
<li style:style="color:${value}">${value}</li>
</ul>
</template>
<p>Below are the interpolated values rendered using preact and vdomx itself with {attributes:{style:{fontWeight:"bold"}},state:{name:"Joe",favoriteColors:["blue","green"]}} as the replacement object.</p>
<p><div id="preact"></div></p>
<p><div id="vdomx"></div></p>
<script>
const vdom = vdomx.compile(document.getElementById("message")),
data = {attributes:{style:{fontWeight:"bold"}},state:{name:"Joe",favoriteColors:["blue","green"]}};
vdom.render(data,document.getElementById("vdomx"));
preact.render(vdom.render(data,preact.h),document.getElementById("preact"));
</script>
</body>
</html>Note the use of vx-forentries, this is a smart directive that can take either an object or an array as an argument. The variables entry, key, value, index and object will be avilable to all template literals within scope. In the case of an array key and index will always have the same value, except index will be an integer. In the case of an object, index will be the position of the key in the object. entry will be an array of the from [key,value]. The scope is any DOM nodes lower in the tree than the element in which the directive is declared.
MIT
2018-07-01 v0.0.5 Simplified template resolution for components.
2018-06-27 v0.0.4 Corrected example directory structure.
2018-06-27 v0.0.3 Enhanced documentation and example.
2018-06-27 v0.0.2 All core functionality in place
2018-06-25 v0.0.1 Initial public release