A clever compiler for BEM-specific templates with JavaScript syntax.
Install it by npm: npm install bem-xjst
.
var bemxjst = require('bem-xjst');
var bemhtml = bemxjst.bemhtml;
// Add templates
var templates = bemhtml.compile(function() {
block('b').content()('yay');
});
// Apply templates to data context in BEMJSON format and get result as HTML string
templates.apply({ block: 'b' });
// Result: <div class="b">yay</div>
var bemxjst = require('bem-xjst');
var bemtree = bemxjst.bemtree;
// Add templates
var templates = bemtree.compile(function() {
block('b').content()('yay');
});
// Apply templates to data context in BEMJSON format and get result as BEMJSON
templates.apply({ block: 'b' });
// Result: { block: 'b1', content: 'yay' }
CLI can be used for creation bundles. See Compiler generate.
$ bem-xjst --help
Usage:
bem-xjst [OPTIONS] [ARGS]
Options:
-h, --help : Help
-v, --version : Version
-e, --engine : Engine name (default: bemhtml, supported: bemhtml | bemtree)
-i INPUT, --input=INPUT : File with user templates (default: stdin)
-o OUTPUT, --output=OUTPUT : Output bundle file (default: stdout)
Compile input templates and return templates
object.
(See documentation below for its methods)
Generate output JavaScript code that might be transferred and executed in
browser to get the templates
object.
Run compiled templates on specified input context. Return resulting HTML output.
Add more BEM templates to the templates
instance. Might be called in runtime
to deliver more blocks declarations to the client.
var bemxjst = require('bem-xjst');
var templates = bemxjst.bemhtml.compile(function() {
block('b').tag()('a');
});
templates.apply({ block: 'b' });
// Return '<a class="b"></a>'
templates.compile(function() {
block('b').content()('Hi, folks!');
});
templates.apply({ block: 'b' });
// Return '<a class="b">Hi, folks!</a>'
Constructor of the this
object available in template bodies. Might be amended
to expose some functionality to the templates, or to add _flush method.
var bemxjst = require('bem-xjst');
var templates = bemxjst.bemhtml.compile('');
templates.BEMContext.prototype.myField = 'opa';
templates.compile(function() {
block('b').content()(function() {
return this.myField;
});
});
templates.apply({ block: 'b' });
// Return '<div class="b">opa</div>'
To run benchmarks:
cd bench/
npm install
node run.js -h
node run.js
Benchmarks could be run in --compare
mode to verify absence of regression
in comparison to previous bem-xjst version. Make sure that the
benchmarks/package.json
has the right git hash of bem-xjst
before running!
Code and documentation copyright 2016 YANDEX LLC. Code released under the Mozilla Public License 2.0.