bem-xjst v8.10.0
bem-xjst
Declarative template engine for the browser and server with regular JS syntax.
Features
Templates are extensible: they can be redefined or extended
You can redefine or extend just a particular part of output not only by simple redefinition via new templates but also using ‘modes’. E.g. it may be a tag name or its content.
block('link')({ tag: 'span' });
// The template sets tag to `span` for all `link` blocks.
// And tag mode can be redefined if any condition passed.
block('link').match((node, ctx) => ctx.url)({ tag: 'a' });
// The template sets tag to `a` only if block `link` have `url` field.
// Otherwise tag will be ‘span’ as previous template says.
Pattern matching
Templates are written using pattern matching for the values and structure of input data
block('list')({ tag: 'ul' });
block('item')({ tag: 'li' });
We can apply these two declarative-style templates templates to data:
{
block: 'list',
content: [
{
block: 'item',
content: {
block: 'list',
content: [
{ block: 'item', content: 'CSS' },
{ block: 'item', content: 'HTML' }
]
}
},
{
block: 'item',
content: {
block: 'list',
content: { block: 'item', content: 'JS' }
}
}
]
}
The result is:
<ul class="list">
<li class="item">
<ul class="list">
<li class="item">CSS</li>
<li class="item">HTML</li>
</ul>
</li>
<li class="item">
<ul class="list">
<li class="item">JS</li>
</ul>
</li>
</ul>
As you can see templates are as simple as CSS.
Automatic recursive traversing upon input data
In the example above you may have noticed that bem-xjst automaticaly traverses input data by content
fields. This behaviour is default feature of bem-xjst.
Default rendering
Built-in rendering behavior is used by default, even if the user didn’t add templates. Even without templates. For example from above it will be:
<div class="list">
<div class="item">
<div class="list">
<div class="item">CSS</div>
<div class="item">HTML</div>
</div>
</div>
<div class="item">
<div class="list">
<div class="item">JS</div>
</div>
</div>
</div>
That is more than half of the work ;) You will add the salt (couple of templates for tags) and the HTML-soup is very tasty!
No DSL, only JavaScript
Written in JavaScript, so the entire JavaScript infrastructure is available for checking code quality and conforming to best practices.
Since templates is a regular JavaScript code you can use automatic syntax validator from your editor and tools like JSHint/ESLint.
Runs on a server and client
You can use bem-xjst in any browser as well as in any JavaScript VM. We support Node.JS v0.10 and higher.
Tell me more
See documentation:
- About
- Quick Start
- API: usage, methods, signatures and etc
- Input data format: BEMJSON
- Templates syntax
- Templates context
- Runtime: processes for selecting and applying templates
Try it
Online sandbox
Online demo allows you to share code snippets, change versions and etc. Happy templating!
Install npm package
To compile bem-xjst, you need Node.js v0.10 or later, and npm.
npm install bem-xjst
Copy-paste example from quick start or see simple example from repository. Then read documentation and start experimenting with bem-xjst.
Is bem-xjst used in production?
Yes. A lot of projects in Yandex and Alfa-Bank, also in opensource projects based on bem-core and bem-components.
Benchmarks
See readme.
Runtime linter
See readme.
Static linter and migration tool for templates
See readme.
Links
- Documentation
- Changelog and releases notes
- Contributing guide
- Online demo (you can share code snippets)
- Twitter account: @bemxjst
- Migration guides for all major versions
3 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago