MAGETWO-38867: Create mixin for declarative widget description

Author: Ihor Melnychenko

lib/web/mage/apply/main.js

@@ -13,14 +13,15 @@ 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.
      * @param {String} component - Components' path.
      */
     function init(el, config, component) {
         require([component], function (fn) {
+
             if (typeof fn === 'object') {
                 fn = fn[component];
             }
@@ -32,31 +33,7 @@ define([
             }
         });
     }
-    /**
-     * Initializes mixins assigned to a specfied component.
-     *
-     * @param {Object} mixinList - object contains mixins list.
-     * @param {Object} itemContainer - object with component config and DOM element link.
-     * @return {Promise}
-     */
-    function initMixins(mixinList, itemContainer){
-        var configStack,
-            element = itemContainer.el,
-            result = $.Deferred();
-
-        _.each(mixinList, function (mixinArray, componentName) {
-            configStack = itemContainer.data[componentName];
-            require(mixinArray, function(){
-                for (var i = 0, len = arguments.length; i < len; i++){
-                    $.extend(true, configStack, arguments[i](configStack, element));
-                }
-
-                result.resolve(itemContainer);
-            });
-        });
 
-        return result;
-    }
     /**
      * Parses elements 'data-mage-init' attribute as a valid JSON data.
      * Note: data-mage-init attribute will be removed.
@@ -90,21 +67,27 @@ define([
                 .map(getData)
                 .concat(virtuals)
                 .forEach(function (itemContainer) {
-                    var mixins = itemContainer.data.mixins;
-                    delete itemContainer.data.mixins;
+                    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));
+                            }
+
+                        }
+                    );
 
-                    if (mixins) {
-                        $.when(
-                            initMixins(mixins, itemContainer)
-                        ).then(function (mergedItemContainer) {
-                            _.each(
-                                mergedItemContainer.data,
-                                init.bind(null, mergedItemContainer.el)
-                            )
-                        });
-                    } else {
-                        _.each(itemContainer.data, init.bind(null, itemContainer.el));
-                    }
                 });
         },
         applyFor: init

lib/web/mage/apply/scripts.js

@@ -28,39 +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),
-            iterator;
+        var data = elem.getAttribute(dataAttr);
 
         data = !!data ? JSON.parse(data) : {};
-
-        if(components.mixins) {
-            data.mixins = data.mixins || {};
-
-            for(iterator in components.mixins){
-                if(!data.mixins[iterator]) {
-                    data.mixins[iterator] = components.mixins[iterator].slice();
-                }else {
-                    data.mixins[iterator] = data.mixins[iterator].concat(components.mixins[iterator]);
-                }
+        _.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;
             }
-
-            delete components.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) {