virtual-dom-handlebars v0.0.5
Virtual DOM Handlebars
Compile Handlebars templates to javascript that returns a Virtual DOM.
Turn this:
{{#each messages}}
<div class="mood-{{currentMood}}">
<h1>{{title}}</h1>
<p>{{content}}</p>
</div>
{{/each}}into (essentially) this:
(function(context) {
return [Runtime.callHelper('each', context.messages, {}, function(context, options){
return h('div', {className: 'mood-' + context.currentMood}, [
h('h1', context.title),
h('p', context.content)
]);
})];
})Implementation
The end-game is a set of javascript (.js) files that define functions that return a virtual-dom tree dictated by the corresponding handlebars template (and a provided context). First install.
npm install --save virtual-dom-handlebars virtual-domCompiled templates assume both a virtual-hyperscript h() function and a virtual-dom-handlebars Runtime
are defined. See an example gulpfile.js to learn how
to automate this file header.
var Runtime = require('virtual-dom-handlebars');
var h = require('virtual-dom');Assign compiled templates (they're functions) to variables and call them to generate a virtual-dom tree.
var templates = [
index: require('templates/compiled/index.js'),
login: require('templates/compiled/login.js')
];Compile Examples
Output compiled javascript to stdout
vbars < my-template.hbsCompile a haml handlebars template to a javascript file
haml my-template.haml | vbars > my-template.jsCompile your handlebars with node
var compile = require('virtual-dom-handlebars/compile');
var javascript = compile('<h1>{{title}}</h1><p>{{message}}</p>');Gulp.js
See gulp-virtual-dom-handlebars.
Stability
Experimental
Roadmap
- Escape output by default
- HTML attribute style arguments
- Add support for
{{> (subexpression) otherContext}} - Add support for
{{else helper context args}} - Add support for
{{{no-escape}}}content - Add support for
{{! comments }}
Changelog
v0.0.5 Bug Fix
Important bug fix for adjacent blocks within a block. Thanks to vincentracine for reporting it.
v0.0.2 Partials!
Support for partials with the format {{> partialName [context] [args] }}.