v8.1.0

New modes: mods(), elemMods(), addMods(), addElemMods().

mods

/**
 * @param {function|Object} mods
 */
mods()(mods)

Hash for modifiers of block.

Example:

block('link').mods()({ type: 'download' });
block('link').mods()(function() { return { type: 'download' }; });

Value from mods() mode rewrite value from BEMJSON.

By default returns this.mods.

// BEMJSON:
{ block: 'b' }

// Template:
block('b').def()(function() {
    return apply('mods');
});

The result is {}.

You can use addMods() mode to add modifiers. addMods() is shortcut of mods():

addMods()({ theme: 'dark' }); // This is equivalent to following:
mods()(function() {
    this.mods = this.extend(applyNext(), { theme: 'dark' });
    return this.mods;
});

elemMods

/**
 * @param {function|Object} elemMods
 */
elemMods()(elemMods)

Hash for modifiers of element.

Example:

block('link').elemMods()({ type: 'download' });
block('link').elemMods()(function() { return { type: 'download' }; });

Value from elemMods() mode rewrite value from BEMJSON.

By default returns this.mods.

// BEMJSON:
{ block: 'b', elem: 'e' }

// Template:
block('b').elem('e').def()(function() {
    return apply('mods');
});

The result is {}.

You can use addElemMods mode to add modifiers for element. addElemMods is
shortcut of elemMods:

addElemMods()({ theme: 'dark' }); // This is equivalent to following:
elemMods()(function() {
    this.elemMods = this.extend(applyNext(), { theme: 'dark' });
    return this.elemMods;
});

Commits:

• [07417ca5a1] - Semantic: introduce mods(), addMods(), elemMods(), addElemMods() (miripiruni)
• [6bcbaaad4d] - BEMHTML: misc optimizations (miripiruni)

v8.0.0

2016-09-23 v8.0.0, @miripiruni

Changes in modes behaviour

• Now mix(), js(), attrs() modes will replace BEMJSON values.
• If you want extend BEMJSON value in the modes please use applyNext().
• In all the modes applyNext() will return BEMJSON value if it exists.
• If you want add mix, js or attrs now you can use addMix(), addJs() or addAttrs() modes.

More about new behaviour you can read in documentation.

escapeContent: true by default

If you want to mantain backward capabitity you can set escapeContent: false manualy.

Notice that applyCtx(…) and this.reapply(…) returns strings. It means that if result will be escaped if contains HTML tags.

How to migrate from 7.x to 8.x?

1. You need to replace mix() to addMix() and attrs() to addAttrs(). Behaviour will be the same.
2. If you develop common library you must use add*-modes as users may need to extend template values via BEMJSON.
3. You should use mix() or attrs() to override third-party code (for example from block library) to skip mixes or attributes that you don’t need

Commits:

• [299a72663d] - BEMHTML: Set default value of escapeContent to true (fix for #323) (miripiruni)
• [de8f13c8a2] - Merge pull request #311 from bem/issue-261__semantic-changes-in-modes (Slava Oliyanchuk)
• [3de409279f] - Docs: spelling fixed (miripiruni)
• [a12b3634bc] - BEMXJST: Tree.methods cleanup (miripiruni)
• [722028a6fa] - BEMHTML: codestyle (miripiruni)
• [d3b28e0065] - BEMHTML: more tests about add*() modes (miripiruni)
• [6ea96d2e9e] - BEMHTML: addMix fixed (miripiruni)
• [88f290df7d] - Docs: spelling fixed (miripiruni)
• [76428b6b09] - Semantic: introduce addJs (miripiruni)
• [b7c89c94e4] - Semantic: introduce addAttrs (miripiruni)
• [2835877ced] - Semantic: introduce addMix (miripiruni)
• [ffb3e36252] - Semantic: change behaviour of mix, js и attrs modes (miripiruni)

v7.3.1

2016-09-22 v7.3.1, @miripiruni

New runtime lint cases:

• check block, elem, modifier names and modifier values
• check if mixed entity has the same modifier

New benchmark test with histogram graph any revision compare and no dependencies.

Commits:

• [b26bdf6045] - Docs: modes in BEMTREE (fix for #335) (miripiruni)
• [4f41cb41b7] - Runtime lint: check block, elem, modifier names and modifier values (miripiruni)
• [6daa6fe7ea] - Runtime lint: check mix the same elemMods (miripiruni)
• [9a128aa330] - Runtime lint: check mix the same mods (miripiruni)
• [7c6ce3abe2] - Docs: example improved (miripiruni)
• [bf385ec6d0] - Bench: port of new benchmark test from v6.x (miripiruni)

v7.3.0

Compare v7.2.0...v7.3.0

1. Support mod() and elemMod() without second argument

/**
 * @param {String} modName name of the block modifier
 * @param {String|Boolean} [modVal] value of the block modifier
 */
mod(modName, modVal)

If second argument of mod() was omited then templates with any
non-empty value of modifier will be applied.

block('a').mod('size').tag()('span');

Template will be applied to BEMJSON node if block equals to 'a' and
'size' modifier exists (equals neither to undefined nor to '' nor to false
nor to null).

{ block: 'a', mods: { size: true } },
{ block: 'a', mods: { size: 's' } },
{ block: 'a', mods: { size: 0 } }

But templates will not be applied to entities:

{ block: 'a', mods: { theme: 'dark' /* no `size` modifier */ } },
{ block: 'a', mods: {} },
{ block: 'a', mods: { size: '', } },
{ block: 'a', mods: { size: undefined } },
{ block: 'a', mods: { size: false } },
{ block: 'a', mods: { size: null } }

The same for elemMod() mode.

2. Runtime lint warning for class and data-bem attributes in attrs field in BEMJSON or attrs() template result.

BEMJSON:

// class in attrs
{ block: 'class-attr-bemjson', attrs: { id: 'test', class: 'jquery' } },
{ block: 'class-attr-tmpl' },

// 'data-bem' in attrs
{ block: 'databem-attr-bemjson', attrs: { 'data-bem': { block: 'a', js: true } } },
{ block: 'databem-attr-tmpl' }

Templates:

block('class-attr-tmpl').attrs()(function() {
    return { class: 'wrong' };
});

block('databem-attr-tmpl').attrs()(function() {
    return { 'data-bem': 'wrong' };
});

Now with such templates or such BEMJSON you will get warnings:

BEM-XJST WARNING: looks like you’re trying to set HTML class from attrs field in BEMJSON. Please use cls() mode for it. See documentation: https://github.com/bem/bem-xjst/blob/master/docs/en/5-templates-syntax.md#cls
ctx: {"block":"class-attr-tmpl"}
attrs: {"class":"wrong"}

BEM-XJST WARNING: looks like you’re trying to set data-bem attribute from attrs field in BEMJSON. Please use js() mode for it. See documentation: https://github.com/bem/bem-xjst/blob/master/docs/en/5-templates-syntax.md#js
ctx: {"block":"databem-attr-bemjson","attrs":{"data-bem":{"block":"a","js":true}}}
attrs: {"data-bem":{"block":"a","js":true}}

BEM-XJST WARNING: looks like you’re trying to set data-bem attribute from attrs field in BEMJSON. Please use js() mode for it. See documentation: https://github.com/bem/bem-xjst/blob/master/docs/en/5-templates-syntax.md#js
ctx: {"block":"databem-attr-bemjson","attrs":{"data-bem":{"block":"a","js":true}}}
attrs: {"data-bem":{"block":"a","js":true}}

BEM-XJST WARNING: looks like you’re trying to set data-bem attribute from attrs field in BEMJSON. Please use js() mode for it. See documentation: https://github.com/bem/bem-xjst/blob/master/docs/en/5-templates-syntax.md#js
ctx: {"block":"databem-attr-tmpl"}
attrs: {"data-bem":"wrong"}

Commits:

• [61e555bddf] - Merge pull request #346 from bem/issue-274__mods-wildcard (Slava Oliyanchuk)
• [6a9625d0b9] - Merge pull request #349 from bem/issue-212__attrs-runtime-lint (Slava Oliyanchuk)
• [53dbfef63d] - Merge pull request #347 from bem/del-mod (Slava Oliyanchuk)
• [5f5221f603] - Fixed #274: Support mod(m) and elemMod(em) without second argument (miripiruni)
• [9aacd9105b] - Runtime lint: Warning about class or data-bem in attrs (miripiruni)

v7.2.0

2016-09-13 v7.2.0, @miripiruni

By turning on runtimeLint option you can get warnings about wrong templates or input data.
About these warnings you can read migration guide.

var bemxjst = require('bem-xjst');
var bemhtml = bemxjst.bemhtml;

var templates = bemhtml.compile(function() {
  block('b').content()('yay');

  block('mods-changes').def()(function() {
    this.ctx.mods.one = 2;
    return applyNext();
  });
}, { runtimeLint: true });

var html = templates.apply([
  { block: 'b' },

  // boolean attributes
  { block: 'b', attrs: { one: true, two: 'true' } },

  // mods for elem
  { block: 'c', elem: 'e', mods: { test: 'opa' } },

  // changes in this.ctx.mods
  { block: 'mods-changes', mods: { one: '1', two: '2' } }
]);

As usual you get result of applying templates in html variable. But in
addition of this you can catch wargings in STDERR:

BEM-XJST WARNING: boolean attribute value: true in BEMJSON: { block: 'b', attrs: { one: true, two: 'true' } }
Notice what bem-xjst behaviour changed: https://github.com/bem/bem-xjst/releases/tag/v4.3.3

BEM-XJST WARNING: mods for elem in BEMJSON: { block: 'c', elem: 'e', mods: { test: 'opa' } }
Notice what bem-xjst behaviour changed: https://github.com/bem/bem-xjst/releases/tag/v5.0.0

BEM-XJST WARNING: looks like someone changed ctx.mods in BEMJSON: { block: 'mods-changes', mods: { one: 2, two: '2' } }
old value of ctx.mod.one was 1
Notice that you should change this.mods instead of this.ctx.mods in templates

Commits:

• [0e0486a230c] - Runtime lint (miripiruni)

v6.6.0

2016-09-13 v6.6.0, @miripiruni

By turning on runtimeLint option you can get warnings about wrong
templates or input data.
About these warnings you can read migration guide.

var bemxjst = require('bem-xjst');
var bemhtml = bemxjst.bemhtml;

var templates = bemhtml.compile(function() {
  block('b').content()('yay');

  block('mods-changes').def()(function() {
    this.ctx.mods.one = 2;
    return applyNext();
  });
}, { runtimeLint: true });

var html = templates.apply([
  { block: 'b' },

  // boolean attributes
  { block: 'b', attrs: { one: true, two: 'true' } },

  // mods for elem
  { block: 'c', elem: 'e', mods: { test: 'opa' } },

  // changes in this.ctx.mods
  { block: 'mods-changes', mods: { one: '1', two: '2' } }
]);

As usual you get result of applying templates in html variable. But in
addition of this you can catch wargings in STDERR:

BEM-XJST WARNING: boolean attribute value: true in BEMJSON: { block: 'b', attrs: { one: true, two: 'true' } }
Notice what bem-xjst behaviour changed: https://github.com/bem/bem-xjst/releases/tag/v4.3.3

BEM-XJST WARNING: mods for elem in BEMJSON: { block: 'c', elem: 'e', mods: { test: 'opa' } }
Notice what bem-xjst behaviour changed: https://github.com/bem/bem-xjst/releases/tag/v5.0.0

BEM-XJST WARNING: looks like someone changed ctx.mods in BEMJSON: { block: 'mods-changes', mods: { one: 2, two: '2' } }
old value of ctx.mod.one was 1
Notice that you should change this.mods instead of this.ctx.mods in templates

Commits:

• [f5b920eca0] - Runtime lint (miripiruni)

v7.1.0

You can use appendContent and prependContent modes to add child nodes to content.

block('quote')(
    prependContent()('“'), // add some things before actual content
    appendContent()('”'), // add content to the end
    appendContent({ block: 'link' }); // add more content to the end
);

{ block: 'quote', content: 'I came, I saw, I templated.' }

Result:

<div class="quote">“I came, I saw, I templated.”<div class="link"></div></div>

appendContent() and prependContent() is a shortcuts to content() + applyNext():

// appendContent() is the same as:
content()(function() {
    return [
        applyNext(),
        'additional content'
    ];
});

// prependContent() is the same as:
content()(function() {
    return [
        'additional content',
        applyNext()
    ];
});

Commits:

• [b59973d5b2] - Merge pull request #337 from bem/content-mods (Slava Oliyanchuk)
• [bfc4e09c0c] - Tests: identify test is slow on Travis. Accuracy changed. (miripiruni)

v7.0.4

2016-09-09 v7.0.4, @miripiruni

Functions this.xmlEscape(), this.attrEscape() and this.jsAttrEscape() optimized. See PR #328.

Commits:

• [fb9b96ec6a] - Merge pull request #328 from bem/faster-escaping (Slava Oliyanchuk)
• [3e80b00c1f] - Utils: faster escaping functions (see issue #327) (miripiruni)
• [d53646f2c3] - Merge pull request #330 from bem/greenkeeper-mocha-3.0.2 (Slava Oliyanchuk)
• [5c1d93eea4] - chore(package): update mocha to version 3.0.2 (greenkeeperio-bot)
• [442aaecffa] - Merge pull request #325 from bem/coverage-badge (Slava Oliyanchuk)
• [0636def423] - Match: unused code removed (miripiruni)
• [36860b9421] - Deps: ^ added (miripiruni)
• [0a031dbfa8] - Coverage: move _compile method to fixtures.js (miripiruni)
• [15fcf1a60c] - Coverage: more (miripiruni)
• [9294f767f1] - Coverage: this.identify (miripiruni)
• [371e94b16a] - Coverage bundles with source maps (miripiruni)
• [f68ecd8a55] - Istanbul test coverage (miripiruni)
• [faac9c5bb0] - Bench: support bem-xjst 7.x (miripiruni)

v4.4.0

New option production. When it set to true bem-xjst will render bemjson even
if one template contains error.

Example:

var template = bemxjst.compile(function() {
  block('b1').attrs()(function() {
    var attrs = applyNext();
    attrs.undef.foo = 'bar';
    return attrs;
  });
}, { production: true });
var html = template.apply({ block: 'page', content: { block: 'b1' } });

html will equals <div class="page"></div>.

Also in production mode bem-xjst will produce error messages to STDERR.

$node index.js 1> stdout.txt 2> stderr.txt

$ cat stdout.txt
<div class="page"></div>

$ cat stderr.txt
BEMXJST ERROR: cannot render block b1, elem undefined, mods {}, elemMods {} [TypeError: Cannot read property 'undef' of undefined]

Commits:

• [8b3369f270] - Merge pull request #299 from bem/trycatch-for-4.x (Slava Oliyanchuk)

v7.0.3

2016-07-29 v7.0.3, @miripiruni

Fixed bug with { html: '' }. In 7.0.2 result is [object Object]. In 7.0.3: ''.

Commits:

• [bc28643520] - BEMXJST: work with empty string in html field (miripiruni)
• [5bd2476ae5] - Docs: variable name fixed (miripiruni)