Merge remote-tracking branch 'magento2ce/develop' into MAGETWO-33537

lib/web/mage/apply/main.js

@@ -13,7 +13,7 @@ define([
         nodeSelector = '[' + dataAttr + ']';
 
     /**
-     * Initializes components assigned to a specfied element via data-* attribute.
+     * Initializes components assigned to a specified element via data-* attribute.
      *
      * @param {HTMLElement} el - Element to initialize components with.
      * @param {Object|String} config - Initial components' config.
@@ -21,6 +21,7 @@ define([
      */
     function init(el, config, component) {
         require([component], function (fn) {
+
             if (typeof fn === 'object') {
                 fn = fn[component];
             }
@@ -65,11 +66,29 @@ define([
             _.toArray(nodes)
                 .map(getData)
                 .concat(virtuals)
-                .forEach(function (item) {
-                    _.each(item.data, init.bind(null, item.el));
+                .forEach(function (itemContainer) {
+                    var configStack,
+                        element = itemContainer.el;
+
+                    _.each(itemContainer.data, function (obj, key) {
+                            if (obj.mixins) {
+                                require(obj.mixins, function () {
+                                    for (var i = 0, len = arguments.length; i < len; i++) {
+                                        $.extend(true, itemContainer.data[key], arguments[i](itemContainer.data[key], element));
+                                    }
+
+                                    delete obj.mixins;
+                                    _.each(itemContainer.data, init.bind(null, element));
+                                })
+                            } else {
+                                _.each(itemContainer.data, init.bind(null, element));
+                            }
+
+                        }
+                    );
+
                 });
         },
-
         applyFor: init
     };
 });

lib/web/mage/apply/scripts.js

@@ -28,23 +28,30 @@ define([
      * Merges provided data with a current data
      * of a elements' "data-mage-init" attribute.
      *
-     * @param {Object} components - Object with compoenets and theirs configuration.
+     * @param {Object} components - Object with components and theirs configuration.
      * @param {HTMLElement} elem - Element whose data should be modified.
      */
     function setData(components, elem) {
         var data = elem.getAttribute(dataAttr);
 
         data = !!data ? JSON.parse(data) : {};
+        _.each(components, function(obj, key) {
+            if (_.has(obj, 'mixins')) {
+                data[key].mixins = data[key].mixins || [];
+                data[key].mixins = data[key].mixins.concat(obj.mixins);
+                delete obj.mixins;
+            }
+        });
+
         data = $.extend(true, data, components);
         data = JSON.stringify(data);
-
         elem.setAttribute(dataAttr, data);
     }
 
     /**
      * Search for the elements by privded selector and extends theirs data.
      *
-     * @param {Object} components - Object with compoenets and theirs configuration.
+     * @param {Object} components - Object with components and theirs configuration.
      * @param {String} selector - Selector for the elements.
      */
     function processElems(components, selector) {