Skip to content

Migration guide from 4.x to 5.x

Jump to bottom Edit New page
Slava Oliyanchuk edited this page Feb 12, 2016 · 4 revisions

5.0.0 release notes

Contents:

elemMatch are deprecated

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

BEM-XJST API changed

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

// v4.x
var bemxjst = require('bem-xjst');
// bemxjst are single render engine BEMHTML with compile() and generate() methods

// v5.x
var bemxjst = require('bem-xjst');
// Now bemjxst have two engine getters: bemhtml and bemtree
var bemhtml = bemxjst.bemhtml;

var templates = bemhtml.compile(...);
var HTML = templates.apply(/* BEMJSON */);

block+elemMods in BEMJSON

should not treat as mods if block exist.

{
  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>'

mods+elem in BEMJSON

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>'

Empty strings as elemName, modName, elemModName in BEMJSON will be ignored

{ block: 'b2', elem: '' }  // '<div class="b2"></div>'
{ block: 'a', mods: { '': 'b' } } // '<div class="a"></div>'
{ block: 'a', elem: 'b', elemMods: { '': 'c' } } // '<div class="a__b"></div>'

Compiler wrap method was dropped

It should be responsibility of bundler. ENB etc.

Attr values render

Breaking changes: false attrs will not render in HTML at all.

// BEMJSON
{
    tag: 'input',
    attrs: {
        'aria-checked': false, // will not render too, for Render use String lineral
        'aria-disabled': true,  // will render as attr without value: disabled 
    }
}
// v4.x
'<input aria-checked="false" aria-disabled="true" />'

// v5.x:
'<input aria-disabled/>'
Add a custom footer
Add a custom sidebar
Clone this wiki locally