Skip to content

5.0.0
Compare
Choose a tag to compare
@miripiruni miripiruni released this 29 Jan 13:47
· 597 commits to master since this release
v5.0.0
0a06ea9

Migration guide from 4.x to 5.x

elemMatch are deprecated. Please use .elem('*').match(function() { ... }).

BEMHTML breaking changes: behavior mods and elemMods BEMJSON fields are changed.

BEM-XJST now should not treat mods as elemMods if block exist. Attention: this bug exists in 4.x only if elem placed into block.

// BEMJSON
{
  block: 'b',
  content: {
    block: 'b',
    elem: 'e',
    mods: { m: 'v' } // will be ignored because of elem
  }
}

// Result with v4.x
'<div class="b"><div class="b__e b__e_m_v"></div></div>'

// Result with v5.0.0
'<div class="b"><div class="b1__e1"></div></div>'

BEM-XJST should not treat elemMods as mods.

// BEMJSON
{
  block: 'b1',
  elemMods: { m1: 'v1' }
}

// Result with v4.x
'<div class="b1 b1_m1_v1"></div>'

// Result with v5.0.0
'<div class="b1"></div>'

API changed

BEM-XJST breaking changes: BEM-XJST now supports two template engines — BEMHTML for getting HTML output and BEMTREE for getting BEMJSON. By default BEM-XJST will use BEMHTML engine.
Usage example:

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.bemtree.apply({ block: 'b' });
// Result: { block: 'b1', content: 'yay' }

Changing elemMods in runtime

Now supports changing elemMods in runtime. Example:

// Template
block('b1').elem('e1').def()(function() {
  this.elemMods.a = 'b';
  return applyNext();
});
// BEMJSON
{ block: 'b1', elem: 'e1' }
// Result:
'<div class="b1__e1 b1__e1_a_b"</div>'

BEMTREE will return Boolean as is.

Example:

// Input BEMJSON
[
  true,
  { block: 'b1', content: true },
  [ { elem: 'e1', content: true }, true ]
]
// Output BEMJSON
[
  true,
  { block: 'b1', content: true },
  [ { elem: 'e1', content: true }, true ]
]
Assets 2