Migrate to bem-core v4

.enb/make.js

@@ -131,7 +131,8 @@ module.exports = function(config) {
                     }],
                     [techs.engines.bemhtml, {
                         target : LIB_NAME + '.dev.bemhtml.js',
-                        sourceSuffixes : ['bemhtml.js', 'bemhtml']
+                        sourceSuffixes : ['bemhtml.js', 'bemhtml'],
+                        engineOptions : { elemJsInstances : true }
                     }],
                     [techs.engines.bhBundle, {
                         target : LIB_NAME + '.dev.bh.js',
@@ -291,7 +292,8 @@ module.exports = function(config) {
                 }] : [techs.engines.bemhtml, {
                     target : '.tmp.browser.bemhtml.js',
                     filesTarget : '.tmp.template.files',
-                    sourceSuffixes : ['bemhtml.js', 'bemhtml']
+                    sourceSuffixes : ['bemhtml.js', 'bemhtml'],
+                    engineOptions : { elemJsInstances : true }
                 }]
             ]);
 
@@ -305,7 +307,8 @@ module.exports = function(config) {
             ] : [
                 [techs.engines.bemhtml, {
                     target : '.tmp.bemhtml.js',
-                    sourceSuffixes : ['bemhtml.js', 'bemhtml']
+                    sourceSuffixes : ['bemhtml.js', 'bemhtml'],
+                    engineOptions : { elemJsInstances : true }
                 }],
                 [techs.html.bemhtml, { bemhtmlFile : '.tmp.bemhtml.js' }]
             ]);
@@ -403,7 +406,10 @@ module.exports = function(config) {
                 templateEngine : {
                     bemtreeTemplateTech : require('enb-bemxjst/techs/bemtree'),
                     templateTech : require('enb-bemxjst/techs/bemhtml'),
-                    templateOptions : { sourceSuffixes : ['bemhtml', 'bemhtml.js'] },
+                    templateOptions : {
+                        sourceSuffixes : ['bemhtml', 'bemhtml.js'],
+                        engineOptions : { elemJsInstances : true }
+                    },
                     htmlTech : require('enb-bemxjst/techs/bemjson-to-html'),
                     htmlTechOptionNames : { bemjsonFile : 'bemjsonFile', templateFile : 'bemhtmlFile' }
                 }
@@ -431,14 +437,16 @@ module.exports = function(config) {
                     bemhtml : {
                         tech : 'enb-bemxjst/techs/bemhtml',
                         options : {
-                            sourceSuffixes : ['bemhtml.js', 'bemhtml']
+                            sourceSuffixes : ['bemhtml.js', 'bemhtml'],
+                            engineOptions : { elemJsInstances : true }
                         }
                     },
                     bemhtmlEscaped : {
                         tech : 'enb-bemxjst/techs/bemhtml',
                         options : {
                             sourceSuffixes : ['bemhtml', 'bemhtml.js'],
                             engineOptions : {
+                                elemJsInstances : true,
                                 escapeContent : true
                             }
                         }

bower.json

@@ -23,7 +23,7 @@
     "!LICENSE.txt"
   ],
   "dependencies": {
-    "bem-core": "3.2.0"
+    "bem-core": "#5ee94751ce3eeb312ffaf96910ece0c31a76e74a"
   },
   "devDependencies": {
     "bem-pr": "~0.13.0"

common.blocks/attach/attach.js

@@ -4,16 +4,16 @@
 
 modules.define(
     'attach',
-    ['i-bem__dom', 'i-bem__internal', 'control', 'jquery', 'strings__escape'],
-    function(provide, BEMDOM, INTERNAL, Control, $, escape) {
+    ['i-bem-dom', 'i-bem__internal', 'control', 'button', 'jquery', 'strings__escape'],
+    function(provide, bemDom, INTERNAL, Control, Button, $, escape) {
 
 /**
  * @exports
  * @class attach
  * @augments control
  * @bem
  */
-provide(BEMDOM.decl({ block : this.name, baseBlock : Control }, /** @lends attach.prototype */{
+provide(bemDom.declBlock(this.name, Control, /** @lends attach.prototype */{
     onSetMod : {
         'disabled' : function(modName, modVal) {
             this.__base.apply(this, arguments);
@@ -32,11 +32,11 @@ provide(BEMDOM.decl({ block : this.name, baseBlock : Control }, /** @lends attac
     },
 
     _clear : function(data) {
-        var control = this.elem('control'),
+        var control = this._elem('control').domElem,
             name = control.attr('name'),
             tabIndex = control.attr('tabindex');
 
-        BEMDOM.replace(
+        bemDom.replace(
             control,
             '<input' +
                 ' class="' + control.attr('class') + '"' +
@@ -45,12 +45,11 @@ provide(BEMDOM.decl({ block : this.name, baseBlock : Control }, /** @lends attac
                 (tabIndex? ' tabindex="' + tabIndex + '"' : '') +
             '/>');
 
-        BEMDOM.destruct(this.elem('file'));
+        bemDom.destruct(this.findChildElem('file').domElem);
 
-        this.domElem.append(this.elem('no-file')); // use append because only detached before
+        this.domElem.append(this._elem('no-file').domElem); // use append because only detached before
 
         return this
-            .dropElemCache('control file')
             ._emitChange(data);
     },
 
@@ -59,7 +58,7 @@ provide(BEMDOM.decl({ block : this.name, baseBlock : Control }, /** @lends attac
     },
 
     _onChange : function() {
-        this.elem('no-file').detach();
+        this._elem('no-file').domElem.detach();
         this.getVal()?
             this
                 ._updateFileElem()
@@ -68,36 +67,36 @@ provide(BEMDOM.decl({ block : this.name, baseBlock : Control }, /** @lends attac
     },
 
     _emitChange : function(data) {
-        return this.emit('change', data);
+        return this._emit('change', data);
     },
 
     _updateFileElem : function() {
         var fileName = extractFileNameFromPath(this.getVal());
 
-        this.elem('file').length && BEMDOM.destruct(this.elem('file'));
+        this.findChildElem('file') && bemDom.destruct(this._elem('file').domElem);
 
-        BEMDOM.append(
+        bemDom.append(
             this.domElem,
             '<span class="' +
-                this.__self.buildClass('file') + '">' +
+                this.__self._buildClassName('file') + '">' +
                 '<span class="' +
-                    this.__self.buildClass('text') + '">' +
+                    this.__self._buildClassName('text') + '">' +
                     escape.html(fileName) +
                 '</span>' +
-                '<span class="' + this.__self.buildClass('clear') + '"/>' +
+                '<span class="' + this.__self._buildClassName('clear') + '"/>' +
             '</span>');
 
-        return this.dropElemCache('file');
+        return this;
     },
 
     _getButton : function() {
-        return this.findBlockInside('button');
+        return this.findChildBlock(Button);
     }
 }, /** @lends attach */{
-    live : function() {
-        this
-            .liveBindTo('clear', 'pointerclick', this.prototype._onClearClick)
-            .liveBindTo('control', 'change', this.prototype._onChange);
+    lazyInit : true,
+    onInit : function() {
+        this._domEvents('clear').on('pointerclick', this.prototype._onClearClick);
+        this._domEvents('control').on('change', this.prototype._onChange);
 
         return this.__base.apply(this, arguments);
     }

common.blocks/attach/attach.spec.js

@@ -1,23 +1,22 @@
 modules.define(
     'spec',
-    ['attach', 'i-bem__dom', 'jquery', 'BEMHTML', 'sinon'],
-    function(provide, Attach, BEMDOM, $, BEMHTML, sinon) {
+    ['attach', 'i-bem-dom', 'button', 'jquery', 'BEMHTML', 'sinon'],
+    function(provide, Attach, bemDom, Button, $, BEMHTML, sinon) {
 
 describe('attach', function() {
     var attach;
     beforeEach(function() {
         var bemJson = { block : 'attach', name : 'upload', button : 'file' };
-        attach = BEMDOM.init($(BEMHTML.apply(bemJson)).appendTo('body'))
-            .bem('attach');
+        attach = bemDom.init($(BEMHTML.apply(bemJson)).appendTo('body'))
+            .bem(Attach);
 
         // we need to replace input[@type=file] by input[@type=text] for tests
-        var input = attach.findElem('control');
-        input.replaceWith('<input class="attach__control" name="' + input.attr('name')  + '"/>');
-        attach.dropElemCache();
+        var input = attach.findChildElem('control').domElem;
+        bemDom.replace(input, '<input class="attach__control" name="' + input.attr('name')  + '"/>');
     });
 
     afterEach(function() {
-        BEMDOM.destruct(attach.domElem);
+        bemDom.destruct(attach.domElem);
     });
 
     describe('value', function() {
@@ -29,14 +28,14 @@ describe('attach', function() {
 
         it('should emit "change" event after input value changed', function() {
             var spy = sinon.spy();
-            attach.on('change', spy);
+            attach._events().on('change', spy);
             setFile('file.png');
             spy.should.have.been.calledOnce;
         });
 
         it('should properly extract file name', function() {
             setFile('\\usr\\local\\file.png');
-            attach.elem('text').text().should.be.equal('file.png');
+            attach._elem('text').domElem.text().should.be.equal('file.png');
         });
     });
 
@@ -50,7 +49,7 @@ describe('attach', function() {
         it('should emit "change" event after clear', function() {
             var spy = sinon.spy();
             setFile('file.png');
-            attach.on('change', spy);
+            attach._events().on('change', spy);
             attach.clear();
             spy.should.have.been.calledOnce;
             attach.clear();
@@ -61,23 +60,23 @@ describe('attach', function() {
             var spy = sinon.spy();
             attach.clear = spy;
             setFile('file.png');
-            attach.elem('clear').trigger('pointerclick');
+            attach._elem('clear').domElem.trigger('pointerclick');
             spy.should.have.been.calledOnce;
         });
     });
 
     describe('enable/disable', function() {
         it('should enable/disable button according to self "disabled" state', function() {
             attach.setMod('disabled');
-            attach.findBlockInside('button').hasMod('disabled').should.be.true;
+            attach.findChildBlock(Button).hasMod('disabled').should.be.true;
 
             attach.delMod('disabled');
-            attach.findBlockInside('button').hasMod('disabled').should.be.false;
+            attach.findChildBlock(Button).hasMod('disabled').should.be.false;
         });
     });
 
     function setFile(filePath) {
-        attach.elem('control')
+        attach._elem('control').domElem
             .val(filePath)
             .trigger('change');
     }

common.blocks/button/_focused/button_focused.bemhtml.js

@@ -1,3 +1,3 @@
 block('button').mod('focused', true).js()(function() {
-    return this.extend(applyNext(), { live : false });
+    return this.extend(applyNext(), { lazyInit : false });
 });

common.blocks/button/_focused/button_focused.bh.js

@@ -1,7 +1,7 @@
 module.exports = function(bh) {
 
     bh.match('button_focused', function(ctx, json) {
-        ctx.js(ctx.extend(json.js, { live : false }), true);
+        ctx.js(ctx.extend(json.js, { lazyInit : false }), true);
     });
 
 };

common.blocks/button/_togglable/button_togglable.js

@@ -9,7 +9,8 @@ modules.define('button', function(provide, Button) {
  * @class button
  * @bem
  */
-provide(Button.decl({ modName : 'togglable' }, /** @lends button.prototype */{
+
+provide(Button.declMod({ modName : 'togglable', modVal : '*' }, /** @lends button.prototype */{
     onSetMod : {
         'checked' : function(_, modVal) {
             this.__base.apply(this, arguments);

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

@@ -1,18 +1,18 @@
 modules.define(
     'spec',
-    ['button', 'i-bem__dom', 'jquery', 'dom', 'BEMHTML'],
-    function(provide, Button, BEMDOM, $, dom, BEMHTML) {
+    ['button', 'i-bem-dom', 'jquery', 'dom', 'BEMHTML'],
+    function(provide, Button, bemDom, $, dom, BEMHTML) {
 
 describe('button_togglable_check', function() {
     var button;
 
     beforeEach(function() {
-        button = BEMDOM.init($(BEMHTML.apply({ block : 'button', mods : { togglable : 'check' } })).appendTo('body'))
-            .bem('button');
+        button = bemDom.init($(BEMHTML.apply({ block : 'button', mods : { togglable : 'check' } })).appendTo('body'))
+            .bem(Button);
     });
 
     afterEach(function() {
-        BEMDOM.destruct(button.domElem);
+        bemDom.destruct(button.domElem);
     });
 
     describe('disabled', function() {

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

@@ -1,18 +1,18 @@
 modules.define(
     'spec',
-    ['button', 'i-bem__dom', 'jquery', 'dom', 'BEMHTML'],
-    function(provide, Button, BEMDOM, $, dom, BEMHTML) {
+    ['button', 'i-bem-dom', 'jquery', 'dom', 'BEMHTML'],
+    function(provide, Button, bemDom, $, dom, BEMHTML) {
 
 describe('button_togglable_radio', function() {
     var button;
 
     beforeEach(function() {
-        button = BEMDOM.init($(BEMHTML.apply({ block : 'button', mods : { togglable : 'radio' } })).appendTo('body'))
-            .bem('button');
+        button = bemDom.init($(BEMHTML.apply({ block : 'button', mods : { togglable : 'radio' } })).appendTo('body'))
+            .bem(Button);
     });
 
     afterEach(function() {
-        BEMDOM.destruct(button.domElem);
+        bemDom.destruct(button.domElem);
     });
 
     describe('disabled', function() {

common.blocks/button/_type/button_type_link.js

@@ -9,7 +9,7 @@ modules.define('button', function(provide, Button) {
  * @class button
  * @bem
  */
-provide(Button.decl({ modName : 'type', modVal : 'link' }, /** @lends button.prototype */{
+provide(Button.declMod({ modName : 'type', modVal : 'link' }, /** @lends button.prototype */{
     onSetMod : {
         'js' : {
             'inited' : function() {

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

@@ -1,7 +1,7 @@
 modules.define(
     'spec',
-    ['button', 'i-bem__dom', 'chai', 'jquery', 'BEMHTML'],
-    function(provide, Button, BEMDOM, chai, $, BEMHTML) {
+    ['button', 'i-bem-dom', 'chai', 'jquery', 'BEMHTML'],
+    function(provide, Button, bemDom, chai, $, BEMHTML) {
 
 var expect = chai.expect;
 
@@ -17,7 +17,7 @@ describe('button_type_link', function() {
     });
 
     afterEach(function() {
-        BEMDOM.destruct(button.domElem);
+        bemDom.destruct(button.domElem);
     });
 
     describe('url', function() {
@@ -35,7 +35,7 @@ describe('button_type_link', function() {
 
     describe('disabled', function() {
         it('should remove "href" attribute if disabled before init', function() {
-            BEMDOM.destruct(button.domElem); // we need to destruct default button from beforeEach
+            bemDom.destruct(button.domElem); // we need to destruct default button from beforeEach
             button = buildButton({
                 block : 'button',
                 mods : { type : 'link', disabled : true },
@@ -57,9 +57,9 @@ describe('button_type_link', function() {
     });
 
     function buildButton(bemjson) {
-        return BEMDOM.init($(BEMHTML.apply(bemjson))
+        return bemDom.init($(BEMHTML.apply(bemjson))
             .appendTo('body'))
-            .bem('button');
+            .bem(Button);
     }
 });
 

common.blocks/button/button.deps.js

@@ -1,5 +1,5 @@
 [{
-    mustDeps : { block : 'i-bem', elems : 'dom' },
+    mustDeps : 'i-bem-dom',
     shouldDeps : [
         {
             elems : ['text'],