Releases: bem/bem-xjst
v6.1.1
2016-03-24, v6.1.1, @miripiruni
Fix for calc position. Example:
// BEMJSON
{
block: 'wrap',
content: { block: 'inner' }
}//Template
block('*').cls()(function() {
return this.position;
});v6.1.0 result (bug):
<div class="wrap 1"><div class="inner 2"></div></div>v6.1.1 result (fixed):
<div class="wrap 1"><div class="inner 1"></div></div>- [
1cb9d149b7] - Merge pull request #216 from bem/issue_174 (Slava Oliyanchuk)
v6.1.0
2016-03-24, v6.1.0, @miripiruni
Pass BEMContext instance as argument to template body
Now you can write arrow functions in templates:
block('arrow').match((_, json) => json._myFlag).tag()('strong');- [
154a447662] - Merge pull request #200 from bem/feature/es6-adoption (Slava Oliyanchuk)
v6.0.1
2016-03-24, v6.0.1, @miripiruni
Fix rendering mixes for namesake elems
Should support mixing namesake elements of different blocks
Example. Template:
block('b1').elem('elem')(
mix()({ block: 'b2', elem: 'elem' })
);v6.0.0 result (bug):
<div class="b1__elem"></div>v6.0.1 result (fixed):
<div class="b1__elem b2__elem"></div>- [
82374951eb] - Docs: Update 6-templates-context.md (Alexander Savin) - [
63e49b26bc] - BEMHTML: fix rendering mixes for namesake elems (Alexey Yaroshevich) - [
7eedcf83a4] - Bench: fix bem-xjst api (miripiruni) - [
059ce55493] - Docs: Fix markdown (Slava Oliyanchuk) - [
4ed98646c0] - Docs: changelog updated (miripiruni)
v5.1.1
v5.1.1 is port of v6.0.1 fix
v6.0.0
Deprecated API
— once()
— this.isArray() (use Array.isArray)
— local()
Breaking changes: tag template should override tag in BEMJSON
Example. Template:
block('button').tag()('button');Data:
{ block: 'button', tag: 'a' }5.x result:
<a class="button"></a>6.x result:
<button class="button"></button>User can choose between tag in bemjson and custom value in templates.
block('b').tag()(function() {
return this.ctx.tag || 'strong';
});Data:
[ { block: 'b', tag: 'em' }, { block: 'b' } ]6.x result:
<em class="b"></em><strong class="b"></strong>v5.1.0: Improved mix behaviour
Related: bem/bem-core#805
+15 test cases
–1 bug
Fixed (degradation)
1. bemhtml should duplicate block class if mix several block with mods to elem in the same block.
Because block class must have for mix block with mods to block elem.
Example:
({
block: 'b',
content: {
elem: 'e',
mix: [
{ block: 'b', mods: { m1: 'v1' } },
{ block: 'b', mods: { m2: 'v2' } }
]
}
});4.3.4 result:
<div class="b"><div class="b__e b b_m1_v1 b b_m2_v2"></div></div>5.0.0 result:
<div class="b"><div class="b__e b b"></div></div>demo;
5.1.0 result:
<div class="b"><div class="b__e b b_m1_v1 b b_m2_v2"></div></div>Improved
2. bemhtml should not duplicate block class if mix is the same block with mods.
({
block: 'b',
mix: [
{ block: 'b', mods: { m1: 'v1' } },
{ block: 'b', mods: { m2: 'v2' } }
]
});4.3.4 result:
<div class="b b b_m1_v1 b b_m2_v2"></div>5.0.0 result:
<div class="b b b_m1_v1 b b_m2_v2"></div>5.1.0 result:
<div class="b b_m1_v1 b_m2_v2"></div>3. bemhtml should not duplicate elem class if mix is the same elem.
Weird case, but for completeness why not to check it
({
block: 'b',
elem: 'e',
mix: { elem: 'e' }
});4.3.4 result:
<div class="b__e b__e"></div>5.0.0 result:
<div class="b__e b__e"></div>5.1.0 result:
<div class="b__e"></div>4. bemhtml should not duplicate elem class if mix is the same block elem.
Weird case, but for completeness why not to check it.
({
block: 'b',
elem: 'e',
mix: { block: 'b', elem: 'e' }
});4.3.4 result:
<div class="b__e b__e"></div>5.0.0 result:
<div class="b__e b__e"></div>5.1.0 result:
<div class="b__e"></div>5. bemhtml should not duplicate elem class if mix the same elem to elem in block.
Weird case, but for completeness why not to check it.
({
block: 'b',
content: {
elem: 'e',
mix: { elem: 'e' }
}
});4.3.4 result:
<div class="b"><div class="b__e b__e"></div></div>5.0.0 result:
<div class="b"><div class="b__e b__e"></div></div>5.1.0 result:
<div class="b"><div class="b__e"></div></div>6. bemhtml should not duplicate elem class if mix is the same block elem with elemMods.
({
block: 'b',
elem: 'e',
mix: { elem: 'e', elemMods: { modname: 'modval' } }
});4.3.4 result:
<div class="b__e b__e b__e_modname_modval"></div>5.0.0 result:
<div class="b__e b__e b__e_modname_modval"></div>5.1.0 result:
<div class="b__e b__e_modname_modval"></div>7. bemhtml should not duplicate block elem elemMods class
({
block: 'b',
elem: 'e',
mix: { block: 'b', elem: 'e', elemMods: { modname: 'modval' } }
});4.3.4 result:
<div class="b__e b__e b__e_modname_modval"></div>5.0.0 result:
<div class="b__e b__e b__e_modname_modval"></div>5.1.0 result:
<div class="b__e b__e_modname_modval"></div>“Who cares” cases (zero cost but enjoyable)
Weird cases, but for completeness why not to check it.
8. bemhtml should duplicate block mods class if mix is the same block with mods.
But who cares? It’s pretty rare case.
To fix this we need to compare each key/value pairs. It’s too expensive.
I believe that developers should not want to do this.
({
block: 'b',
mods: { m: 'v' },
mix: { block: 'b', mods: { m: 'v' } }
});4.3.4 result:
<div class="b b_m_v b b_m_v"></div>5.0.0 result:
<div class="b b_m_v b b_m_v"></div>5.1.0 result:
<div class="b b_m_v b_m_v"></div>9. bemhtml should duplicate elem elemMod class
({
block: 'b',
content: {
elem: 'e',
elemMods: { modname: 'modval' },
mix: { elem: 'e', elemMods: { modname: 'modval' } }
}
});But who cares? It’s pretty rare case.
To fix this we need to compare each key/value pairs. It’s too expensive.
I believe that developers should not want to do this.
4.3.4 result:
<div class="b">
<div class="b__e b__e_modname_modval b__e b__e_modname_modval"></div>
</div>5.0.0 result:
<div class="b">
<div class="b__e b__e_modname_modval b__e b__e_modname_modval"></div>
</div>v4.3.4
Attention: revert commit from v4.3.3 [a48aeab5a6] - BEMHTML: should properly render attr values (miripiruni)
Skip mix item if falsy:
// BEMJSON
{
block: 'b1',
mix: [ null, '', false, undefined, 0, { block: 'b2' } ]
}
// Will render to:
'<div class="b1 b2"></div>'Commits:
- [
e8e468dce7] - BEMHTML: skip mix item if falsy (miripiruni)
5.0.0
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 ]
]v4.3.3
Should properly render attr values:
// BEMJSON
{
tag: 'input',
attrs: {
name: undefined, // will not render at all
value: null, // will not render
disabled: false, // will not render too
disabled: true, // will render as attr without value: disabled
value: 0, // will render as you expect: value="0"
placeholder: '' // will render as is: placeholder=""
}
}
// Result:
'<input disabled value="0" placeholder=""/>'Skip mix item if falsy:
// BEMJSON
{
block: 'b1',
mix: [ null, '', false, undefined, 0, { block: 'b2' } ]
}
// Will render to:
'<div class="b1 b2"></div>'Commits:
- [
a48aeab5a6] - BEMHTML: should properly render attr values (miripiruni) - [
e8e468dce7] - BEMHTML: skip mix item if falsy (miripiruni)
4.3.2
From this moment we have intelligible changelog. Hooray!
elem === '' means no elem. Example:
// BEMJSON:
{ block: 'b2', elem: '' }
// Result:
'<div class="b2"></div>'Now BEM-XJST will ignore empty string as modName and elemModName. Example:
// BEMJSON:
{ block: 'a', mods: { '': 'b' } }
// Result:
'<div class="a"></div>'
// BEMJSON:
{ block: 'a', elem: 'b', elemMods: { '': 'c' } }
// Result:
'<div class="a__b"></div>'Commits:
- [
41604e3567] - Port of 6c427cc (#152): class-builder:elem === ''means no elem (miripiruni) - [
62763e6b16] - Port of 0872a8b (#164): should ignore empty string as modName and elemModName (miripiruni) - [
e11506e010] - CHANGELOG.md added (miripiruni) - [
74055c9e23] - travis: Run tests on node 4 (Vladimir Grinenko)