mage

Author: magiccart

mage/apply/main.js

@@ -0,0 +1,114 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'underscore',
+    'jquery',
+    './scripts'
+], function (_, $, processScripts) {
+    'use strict';
+
+    var dataAttr = 'data-mage-init',
+        nodeSelector = '[' + dataAttr + ']';
+
+    /**
+     * 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) {
+            var $el;
+
+            if (typeof fn === 'object') {
+                fn = fn[component].bind(fn);
+            }
+
+            if (_.isFunction(fn)) {
+                fn = fn.bind(null, config, el);
+            } else {
+                $el = $(el);
+
+                if ($el[component]) {
+                    // eslint-disable-next-line jquery-no-bind-unbind
+                    fn = $el[component].bind($el, config);
+                }
+            }
+            // Init module in separate task to prevent blocking main thread.
+            setTimeout(fn);
+        }, function (error) {
+            if ('console' in window && typeof window.console.error === 'function') {
+                console.error(error);
+            }
+
+            return true;
+        });
+    }
+
+    /**
+     * 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);
+
+        el.removeAttribute(dataAttr);
+
+        return {
+            el: el,
+            data: JSON.parse(data)
+        };
+    }
+
+    return {
+        /**
+         * Initializes components assigned to HTML elements via [data-mage-init].
+         *
+         * @example Sample 'data-mage-init' declaration.
+         *      data-mage-init='{"path/to/component": {"foo": "bar"}}'
+         */
+        apply: function (context) {
+            var virtuals = processScripts(!context ? document : context),
+                nodes = document.querySelectorAll(nodeSelector);
+
+            _.toArray(nodes)
+                .map(getData)
+                .concat(virtuals)
+                .forEach(function (itemContainer) {
+                    var element = itemContainer.el;
+
+                    _.each(itemContainer.data, function (obj, key) {
+                            if (obj.mixins) {
+                                require(obj.mixins, function () { //eslint-disable-line max-nested-callbacks
+                                    var i, len;
+
+                                    for (i = 0, len = arguments.length; i < len; i++) {
+                                        $.extend(
+                                            true,
+                                            itemContainer.data[key],
+                                            arguments[i](itemContainer.data[key], element)
+                                        );
+                                    }
+
+                                    delete obj.mixins;
+                                    init.call(null, element, obj, key);
+                                });
+                            } else {
+                                init.call(null, element, obj, key);
+                            }
+
+                        }
+                    );
+
+                });
+        },
+        applyFor: init
+    };
+});

mage/apply/scripts.js

@@ -0,0 +1,124 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'underscore',
+    'jquery'
+], function (_, $) {
+    'use strict';
+
+    var scriptSelector = 'script[type="text/x-magento-init"]',
+        dataAttr = 'data-mage-init',
+        virtuals = [];
+
+    /**
+     * Adds components to the virtual list.
+     *
+     * @param {Object} components
+     */
+    function addVirtual(components) {
+        virtuals.push({
+            el: false,
+            data: components
+        });
+    }
+
+    /**
+     * Merges provided data with a current data
+     * of a elements' "data-mage-init" attribute.
+     *
+     * @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] = data[key] || {};
+                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 components and theirs configuration.
+     * @param {String} selector - Selector for the elements.
+     */
+    function processElems(components, selector) {
+        var elems,
+            iterator;
+
+        if (selector === '*') {
+            addVirtual(components);
+
+            return;
+        }
+
+        elems = document.querySelectorAll(selector);
+        iterator = setData.bind(null, components);
+
+        _.toArray(elems).forEach(iterator);
+    }
+
+    /**
+     * 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);
+    }
+
+    /**
+     * Parses 'script' tags with a custom type attribute and moves it's data
+     * to a 'data-mage-init' attribute of an element found by provided selector.
+     * Note: All found script nodes will be removed from DOM.
+     *
+     * @returns {Array} An array of components not assigned to the specific element.
+     *
+     * @example Sample declaration.
+     *      <script type="text/x-magento-init">
+     *          {
+     *              "body": {
+     *                  "path/to/component": {"foo": "bar"}
+     *              }
+     *          }
+     *      </script>
+     *
+     * @example Providing data without selector.
+     *      {
+     *          "*": {
+     *              "path/to/component": {"bar": "baz"}
+     *          }
+     *      }
+     */
+    return function () {
+        var nodes = document.querySelectorAll(scriptSelector);
+
+        _.toArray(nodes)
+            .map(getNodeData)
+            .forEach(function (item) {
+                _.each(item, processElems);
+            });
+
+        return virtuals.splice(0, virtuals.length);
+    };
+});