Support bem-xjst 8.x

.enb/make.js

@@ -453,7 +453,10 @@ module.exports = function(config) {
                         tech : 'enb-bemxjst/techs/bemhtml',
                         options : {
                             sourceSuffixes : ['bemhtml.js', 'bemhtml'],
-                            engineOptions : { elemJsInstances : true }
+                            engineOptions : {
+                                elemJsInstances : true,
+                                escapeContent : false
+                            }
                         }
                     },
                     bemhtmlEscaped : {

.jshint-groups.js

@@ -62,23 +62,27 @@ module.exports = {
                     'applyCtx',
                     'applyNext',
                     'attrs',
+                    'addAttrs',
                     'bem',
                     'block',
                     'cls',
                     'content',
+                    'appendContent',
+                    'prependContent',
                     'def',
                     'elem',
                     'js',
+                    'addJs',
                     'local',
                     'match',
                     'mix',
+                    'addMix',
                     'mod',
                     'mode',
                     'tag',
                     'wrap',
                     'replace',
-                    'extend',
-                    'once'
+                    'extend'
                 ]
             },
             includes : ['*.blocks/**/*.bemhtml.js']

common.blocks/attach/__control/attach__control.bemhtml.js

@@ -2,7 +2,7 @@ block('attach').elem('control')(
 
     tag()('input'),
 
-    attrs()(function() {
+    addAttrs()(function() {
         var attrs = { type : 'file' },
             attach = this._attach;
 

common.blocks/button/_togglable/button_togglable_check.bemhtml.js

@@ -1,3 +1,4 @@
-block('button').mod('togglable', 'check').attrs()(function() {
-    return this.extend(applyNext(), { 'aria-pressed' : String(!!this.mods.checked) });
+block('button').mod('togglable', 'check').addAttrs()(function() {
+    return this.extend({ 'aria-pressed' : String(!!this.mods.checked) },
+        applyNext());
 });

common.blocks/button/_togglable/button_togglable_radio.bemhtml.js

@@ -1,3 +1,3 @@
-block('button').mod('togglable', 'radio').attrs()(function() {
-    return this.extend(applyNext(), { 'aria-pressed' : String(!!this.mods.checked) });
+block('button').mod('togglable', 'radio').addAttrs()(function() {
+    return { 'aria-pressed' : String(!!this.mods.checked) };
 });

common.blocks/button/_type/button_type_link.bemhtml.js

@@ -1,7 +1,7 @@
 block('button').mod('type', 'link')(
     tag()('a'),
 
-    attrs()(function() {
+    addAttrs()(function() {
         var ctx = this.ctx,
             attrs = { role : 'link' };
 
@@ -10,7 +10,7 @@ block('button').mod('type', 'link')(
             attrs['aria-disabled'] = 'true' :
             attrs.href = ctx.url;
 
-        return this.extend(applyNext(), attrs);
+        return attrs;
     }),
 
     mod('disabled', true)

common.blocks/button/button.bemhtml.js

@@ -13,14 +13,15 @@ block('button')(
     js()(true),
 
     // NOTE: mix below is to satisfy interface of `control`
-    mix()({ elem : 'control' }),
+    addMix()({ elem : 'control' }),
 
-    attrs()(
+    addAttrs()(
         // Common attributes
         function() {
             var ctx = this.ctx,
+                a = applyNext(),
                 attrs = {
-                    role : 'button',
+                    role : (a && a.role) || 'button',
                     tabindex : ctx.tabIndex,
                     id : ctx.id,
                     title : ctx.title
@@ -43,7 +44,7 @@ block('button')(
 
             this.mods.disabled && (attrs.disabled = 'disabled');
 
-            return this.extend(applyNext(), attrs);
+            return attrs;
         })
     ),
 

common.blocks/checkbox-group/checkbox-group.bemhtml.js

@@ -1,11 +1,11 @@
 block('checkbox-group')(
     tag()('span'),
 
-    attrs()({ role : 'group' }),
+    addAttrs()({ role : 'group' }),
 
     js()(true),
 
-    mix()([{ block : 'control-group' }]),
+    addMix()([{ block : 'control-group' }]),
 
     content()(function() {
         var mods = this.mods,

common.blocks/checkbox/__control/checkbox__control.bemhtml.js

@@ -1,7 +1,7 @@
 block('checkbox').elem('control')(
     tag()('input'),
 
-    attrs()(function() {
+    addAttrs()(function() {
         // NOTE: don't remove autocomplete attribute, otherwise js and DOM may be desynced
         var attrs = { type : 'checkbox', autocomplete : 'off' },
             ctx = this.ctx;

common.blocks/checkbox/__text/checkbox__text.bemhtml.js

@@ -1,4 +1,4 @@
 block('checkbox').elem('text')(
     tag()('span'),
-    attrs()({ role : 'presentation' })
+    addAttrs()({ role : 'presentation' })
 );

common.blocks/control-group/control-group.bemhtml.js

@@ -1 +1 @@
-block('control-group').attrs()({ role : 'group' });
+block('control-group').addAttrs()({ role : 'group' });

common.blocks/icon/icon.bemhtml.js

@@ -1,6 +1,6 @@
 block('icon')(
     tag()('span'),
-    attrs()(function() {
+    addAttrs()(function() {
         var attrs = {},
             url = this.ctx.url;
         if(url) attrs.style = 'background-image:url(' + url + ')';

common.blocks/image/image.bemhtml.js

@@ -1,11 +1,11 @@
 block('image')(
-    attrs()({ role : 'img' }),
+    addAttrs()({ role : 'img' }),
 
     tag()('span'),
 
     match(function() { return typeof this.ctx.content === 'undefined'; })(
         tag()('img'),
-        attrs()(function() {
+        addAttrs()(function() {
             var ctx = this.ctx;
             return this.extend(applyNext(),
                 {

common.blocks/input/__control/input__control.bemhtml.js

@@ -1,7 +1,7 @@
 block('input').elem('control')(
     tag()('input'),
 
-    attrs()(function() {
+    addAttrs()(function() {
         var input = this._input,
             attrs = {
                 id : input.id,

common.blocks/link/_pseudo/link_pseudo.bemhtml.js

@@ -1,6 +1,6 @@
 block('link').mod('pseudo', true).match(function() { return !this.ctx.url; })(
     tag()('span'),
-    attrs()(function() {
+    addAttrs()(function() {
         return this.extend(applyNext(), { role : 'button' });
     })
 );

common.blocks/link/link.bemhtml.js

@@ -11,9 +11,9 @@ block('link')(
     js()(true),
 
     // NOTE: mix below is to satisfy interface of `control`
-    mix()([{ elem : 'control' }]),
+    addMix()([{ elem : 'control' }]),
 
-    attrs()(function() {
+    addAttrs()(function() {
         var ctx = this.ctx,
             attrs = { role : 'link' },
             tabIndex;

common.blocks/menu/__group/menu__group.bemhtml.js

@@ -1,7 +1,7 @@
 block('menu').elem('group')(
-    attrs()({ role : 'group' }),
+    addAttrs()({ role : 'group' }),
     match(function() { return typeof this.ctx.title !== 'undefined'; })(
-        attrs()(function() {
+        addAttrs()(function() {
             return this.extend(applyNext(), {
                 'aria-label' : undefined,
                 'aria-labelledby' : this.generateId()

common.blocks/menu/__item/menu__item.bemhtml.js

@@ -5,15 +5,16 @@ block('menu').elem('item')(
         elemMods.disabled = elemMods.disabled || this._menuMods.disabled;
         return applyNext();
     }),
-    js()(function() {
+    addJs()(function() {
         return { val : this.ctx.val };
     }),
-    attrs()(function(){
+    addAttrs()(function(){
         var elemMods = this.elemMods,
             menuMode = this._menuMods && this._menuMods.mode,
-            role = menuMode?
+            a = applyNext(),
+            role = (a && a.role) || (menuMode?
                         (menuMode === 'check'? 'menuitemcheckbox' : 'menuitemradio') :
-                        'menuitem',
+                        'menuitem'),
             attrs = {
                 role : role,
                 id : this.ctx.id || this.generateId(),

common.blocks/menu/menu.bemhtml.js

@@ -46,10 +46,12 @@ block('menu')(
             attrs['aria-disabled'] = 'true' :
             attrs.tabindex = 0;
 
-        return attrs;
+        // extend in backwards order:
+        // bemjson has more priority
+        return this.extend(attrs, applyNext());
     }),
     js()(true),
-    mix()({ elem : 'control' }),
+    addMix()({ elem : 'control' }),
     mod('disabled', true)
         .js()(function() {
             return this.extend(applyNext(), { tabIndex : 0 });

common.blocks/modal/modal.bemhtml.js

@@ -1,15 +1,15 @@
 block('modal')(
     js()(true),
 
-    mix()(function() {
+    addMix()(function() {
         return {
             block : 'popup',
             js : { zIndexGroupLevel : this.ctx.zIndexGroupLevel || 20 },
             mods : { autoclosable : this.mods.autoclosable }
         };
     }),
 
-    attrs()({
+    addAttrs()({
         role : 'dialog',
         'aria-hidden' : 'true'
     }),

common.blocks/popup/popup.bemhtml.js

@@ -9,5 +9,5 @@ block('popup')(
             zIndexGroupLevel : ctx.zIndexGroupLevel
         };
     }),
-    attrs()({ 'aria-hidden' : 'true' })
+    addAttrs()({ 'aria-hidden' : 'true' })
 );

common.blocks/progressbar/progressbar.bemhtml.js

@@ -7,7 +7,7 @@ block('progressbar')(
         return { val : this._val };
     }),
 
-    attrs()(function() {
+    addAttrs()(function() {
         return {
             role : 'progressbar',
             'aria-valuenow' : this._val + '%' /* NOTE: JAWS doesn't add 'percent' automatically */

common.blocks/radio-group/radio-group.bemhtml.js

@@ -1,11 +1,11 @@
 block('radio-group')(
     tag()('span'),
 
-    attrs()({ role : 'radiogroup' }),
+    addAttrs()({ role : 'radiogroup' }),
 
     js()(true),
 
-    mix()([{ block : 'control-group' }]),
+    addMix()([{ block : 'control-group' }]),
 
     content()(function() {
         var mods = this.mods,

common.blocks/radio/__control/radio__control.bemhtml.js

@@ -1,7 +1,7 @@
 block('radio').elem('control')(
     tag()('input'),
 
-    attrs()(function() {
+    addAttrs()(function() {
         // NOTE: don't remove autocomplete attribute, otherwise js and DOM may be desynced
         var ctx = this.ctx,
             attrs = {

common.blocks/radio/__text/radio__text.bemhtml.js

@@ -1,6 +1,6 @@
 block('radio').elem('text')(
     tag()('span'),
-    attrs()(function() {
+    addAttrs()(function() {
         return { role : 'presentation' };
     })
 );

common.blocks/select/__button/select__button.bemhtml.js

@@ -34,7 +34,7 @@ block('select').elem('button')(
 );
 
 block('button').elem('text').match(function() { return this._select; })(
-    attrs()(function() {
+    addAttrs()(function() {
         return { id : this._selectTextId };
     })
 );

common.blocks/select/__control/select__control.bemhtml.js

@@ -1,6 +1,6 @@
 block('select').elem('control')(
     tag()('input'),
-    attrs()(function() {
+    addAttrs()(function() {
         return {
             type : 'hidden',
             name : this._select.name,

common.blocks/select/select.bemhtml.js

@@ -40,7 +40,7 @@ block('select')(
         });
     }),
 
-    js()(function() {
+    addJs()(function() {
         var ctx = this.ctx;
         return {
             name : ctx.name,

common.blocks/textarea/textarea.bemhtml.js

@@ -3,9 +3,9 @@ block('textarea')(
     tag()('textarea'),
 
     // NOTE: mix below is to satisfy interface of `control`
-    mix()({ elem : 'control' }),
+    addMix()({ elem : 'control' }),
 
-    attrs()(function() {
+    addAttrs()(function() {
         var ctx = this.ctx,
             attrs = {
                 id : ctx.id,

package.json

@@ -42,7 +42,7 @@
     "enb-bem-specs": "^0.11.0",
     "enb-bem-techs": "^2.2.1",
     "enb-bem-tmpl-specs": "^1.3.0",
-    "enb-bemxjst": "^7.0.5",
+    "enb-bemxjst": "^8.5.2",
     "enb-bh": "^1.2.0",
     "enb-borschik": "^2.4.0",
     "enb-magic-factory": "^0.5.0",

touch.blocks/input/__control/input__control.bemhtml.js

@@ -1,6 +1,6 @@
 block('input').elem('control')(
 
-    attrs()(function() {
+    addAttrs()(function() {
         return this.extend({
             autocomplete : 'off',
             autocorrect : 'off',