bem-xjst (eXtensible JavaScript Templates): declarative template engine for the browser and server
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bench Bench: support v8.x (Fix #449) May 16, 2017
bin
docs
examples Examples: source maps in Node.js Sep 27, 2017
lib
migration
runtime-lint
scripts
test
.editorconfig
.gitignore
.jscsrc
.jshintrc
.travis.yml
AUTHORS
CHANGELOG.md
CONTRIBUTING.md
ISSUE_TEMPLATE.md
LICENSE.txt
PULL_REQUEST_TEMPLATE.md
README.md
README.ru.md
book.json
index.js
package-lock.json
package.json

README.md

bem-xjst

Declarative template engine for the browser and server with regular JS syntax.

NPM version Build Status Dependency Status devDependency Status Coverage Status

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:

  1. About
  2. Quick Start
  3. API: usage, methods, signatures and etc
  4. Input data format: BEMJSON
  5. Templates syntax
  6. Templates context
  7. 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