Nautical Poseidon Mythology
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    bem-xjstpublic

    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

    install

    npm i bem-xjst

    Downloadslast 7 days

    1,183

    version

    8.9.3

    license

    MPL-2.0

    repository

    github.com

    last publish

    collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar