MAGETWO-33932: Add ability to initialize modules by selector

- Support initialization from a custom script tag

Author: Denys Rul

lib/web/mage/apply/main.js

@@ -3,38 +3,29 @@
  * See COPYING.txt for license details.
  */
 define([
-    'jquery',
     'underscore',
-    './registry',
-    'require'
-], function ($, _, registry, require) {
+    'jquery',
+    './scripts'
+], function (_, $, scripts) {
     'use strict';
 
-    var dataAttr        = 'data-mage-init',
-        nodeSelector    = 'script[type="mage/config"]';
+    var dataAttr = 'data-mage-init';
 
     /**
-     * Initializes components assigned to a specied element via data-* attribute.
+     * Initializes components assigned to a specfied 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) {
-        if (registry.has(el, component)) {
-            return;
-        }
-
-        registry.add(el, component);
-
-        require([component], function (callback) {
-            config = getConfig(el, config);
-
-            if (typeof callback === 'object') {
-                callback = callback[component];
+        require([component], function (fn) {
+            if (typeof fn === 'object') {
+                fn = fn[component];
             }
 
-            if (_.isFunction(callback)) {
-                callback(config, el);
+            if (_.isFunction(fn)) {
+                fn(config, el);
             } else if ($(el)[component]) {
                 $(el)[component](config);
             }
@@ -43,83 +34,63 @@ define([
 
     /**
      * Searches for elements which has 'data-mage-init' attribute.
+     *
      * @param {HTMLElement} [parent=document.body] - Optional node inside of which to perform search.
      * @returns {Array} An array of elements with 'data-mage-init' attribute.
      */
-    function getElements(parent) {
+    function getElems(parent) {
         var elems;
 
         parent = parent || document.body;
 
         elems = parent.querySelectorAll('[' + dataAttr + ']');
-        elems = Array.prototype.slice.call(elems);
+        elems = _.toArray(elems);
 
         if (parent.hasAttribute(dataAttr)) {
-            elems.push(parent);
+            elems.unshift(parent);
         }
 
         return elems;
     }
 
     /**
      * Parses elements 'data-mage-init' attribute as a valid JSON data.
+     * Note: data-mage-init attribute will be removed.
+     *
      * @param {HTMLElement} el - Element whose attribute should be parsed.
      * @returns {Object}
      */
     function getData(el) {
         var data = el.getAttribute(dataAttr);
 
-        return JSON.parse(data);
-    }
-
-    /**
-     * Searches for a components' configurational node.
-     * @param {HTMLElement} el - Will be used as a parentNode for configurational element.
-     * @param {Object|String} [config] - Initial config.
-     * @returns {Object} Components' config.
-     */
-    function getConfig(el, config) {
-        var node,
-            content;
+        el.removeAttribute(dataAttr);
 
-        if (el.tagName === 'SCRIPT') {
-            node = el;
-        } else {
-            node = el.querySelector(nodeSelector);
-
-            if (node && node.parentNode !== el) {
-                node = false;
-            }
-        }
-
-        config = config || {};
-        content = node ? JSON.parse(node.textContent) : {};
-
-        return _.extend(config, content);
+        return {
+            el: el,
+            data: JSON.parse(data)
+        };
     }
 
     return {
         /**
          * Initializes components assigned to HTML elements via [data-mage-init].
+         *
          * @param {HTMLElement} [ctx=document.body] - Optional node to search inside.
+         *
+         * @example Sample 'data-mage-init' declaration.
+         *      data-mage-init='{"path/to/component": {"foo": "bar"}}'
          */
         apply: function (ctx) {
-            var elems = getElements(ctx),
-                data;
-
-            elems.forEach(function (el) {
-                data = getData(el);
-
-                _.each(data, init.bind(this, el));
-            });
+            var virtual = scripts.process();
+
+            getElems(ctx)
+                .map(getData)
+                .concat(virtual)
+                .forEach(function (item) {
+                    _.each(item.data, init.bind(null, item.el));
+                });
         },
 
-        /**
-         * Intializes single element with a specified component and config.
-         * @param {HTMLElement} el - Element to initialize component on.
-         * @param {Object} config - Components' configuration.
-         * @param {String} component - Components' path.
-         */
         applyFor: init
     };
 });

lib/web/mage/apply/registry.js

@@ -0,0 +1,129 @@
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+define([
+    'underscore',
+    'jquery'
+], function (_, $) {
+    'use strict';
+
+    var scriptSelecotr = 'script[type="text/x-magento-init"]',
+        virtual = [];
+
+    /**
+     * Adds components to the virtula list.
+     *
+     * @param {Object} components
+     */
+    function addVirtual(components) {
+        virtual.push({
+            el: false,
+            data: components
+        });
+    }
+
+    /**
+     * Merges provided data with a current data
+     * of a elements' "data-mage-init" attribute.
+     *
+     * @param {Object} components - Object with compoenets and theirs configuration.
+     * @param {HTMLElement} elem - Element whose data should be modified.
+     */
+    function setData(components, elem) {
+        var data = elem.getAttribute('data-mage-init');
+
+        data = !!data ? JSON.parse(data) : {};
+        data = $.extend(true, data, components);
+        data = JSON.stringify(data);
+
+        elem.setAttribute('data-mage-init', data);
+    }
+
+    /**
+     * Search for the elements by privded selector and extends theirs data.
+     *
+     * @param {Object} components - Object with compoenets and theirs configuration.
+     * @param {String} selector - Selector for the elements.
+     */
+    function processElems(components, selector) {
+        var setFn,
+            elems;
+
+        if (selector === '*') {
+            addVirtual(components);
+        } else {
+            elems = document.querySelectorAll(selector);
+            setFn = setData.bind(null, components);
+
+            _.toArray(elems).forEach(setFn);
+        }
+    }
+
+    /**
+     * Searches for script tags whith a 'text/x-mage-init' type.
+     *
+     * @param {HTMLElement} [parent=document.body] - Optional node inside of which to perform search.
+     * @returns {Array} An array of elements script nodes.
+     */
+    function getNodes(parent) {
+        var elems;
+
+        parent = parent || document.body;
+
+        elems = document.querySelectorAll(scriptSelecotr);
+
+        return _.toArray(elems);
+    }
+
+    /**
+     * Parses content of a provided script node.
+     * Note: node will be removed from DOM.
+     *
+     * @param {HTMLScriptElement} node - Node to be processed.
+     * @returns {Object}
+     */
+    function getNodeData(node) {
+        var data = node.textContent;
+
+        node.parentNode.removeChild(node);
+
+        return JSON.parse(data);
+    }
+
+    return {
+        /**
+         * Parses 'script' tags with a custom type attribute and moves it's data
+         * to a 'data-mage-init' attribute of an elemennt found by provided selector.
+         * Note: All found script nodes would be removed from DOM.
+         *
+         * @param {HTMLElement} [ctx=document.body] - Optional node to search inside.
+         * @returns {Array} An array of components not assigned to the specific element.
+         *
+         * @example Sample declaration.
+         *      <script type="text/x-mage-init">
+         *          {
+         *              "body": {
+         *                  "path/to/component": {"foo": "bar"}
+         *              }
+         *          }
+         *      </script>
+         *
+         * @example Providing data without selector.
+         *      {
+         *          "*": {
+         *              "path/to/component": {"bar": "baz"}
+         *          }
+         *      }
+         */
+        process: function (ctx) {
+            getNodes(ctx)
+                .map(getNodeData)
+                .forEach(function (item) {
+                    _.each(item, processElems);
+                });
+
+            return virtual.splice(0, virtual.length);
+        }
+    };
+});

lib/web/mage/apply/scripts.js

@@ -2,18 +2,20 @@
  * Copyright © 2015 Magento. All rights reserved.
  * See COPYING.txt for license details.
  */
-/*jshint eqnull:true browser:true jquery:true expr:true */
+/*jshint eqnull:true browser:true expr:true */
 /*global require:true console:true*/
-(function (factory) {
+(function (root, factory) {
+    'use strict';
+
     if (typeof define === 'function' && define.amd) {
         define([
             'jquery',
             'mage/apply/main'
         ], factory);
     } else {
-        factory(jQuery);
+        factory(root.jQuery);
     }
-}(function ($, mage) {
+}(this, function ($, mage) {
     'use strict';
 
     /**
@@ -61,7 +63,7 @@
 
             forced  = !!forced;
             timeout = timeout || 0;
-            type    = type || "assign";
+            type    = type || 'assign';
 
             _redirect = function () {
                 window.location[type](type === 'reload' ? forced : url);
@@ -96,4 +98,4 @@
     });
 
     return $.mage;
-}));
+}));