How is an UI Component initialized in frontend?

dmitrii_fediuk · April 22, 2018, 4:50am

1. layout.run()

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js#L147-L168


/**
 * Application entry point.
 *
 * @param {Object} nodes
 * @param {Object} parent
 * @param {Boolean} cached
 * @param {Boolean} merge
 * @returns {Boolean|undefined}
 */
function run(nodes, parent, cached, merge) {
    if (_.isBoolean(merge) && merge) {
        layout.merge(nodes);


        return false;
    }


    if (cached) {
        cachedConfig[_.keys(nodes)[0]] = JSON.parse(JSON.stringify(nodes));
    }


    _.each(nodes || [], layout.iterator.bind(layout, parent));
}

An example of nodes:

{
	"doormall_shipping": {
		"component": "Doormall_Shipping/main",
		"displayArea": "doormall_shipping"
	},
	"price": {
		"component": "Magento_Tax/js/view/checkout/shipping_method/price",
		"displayArea": "price"
	},
	"delivery-date": {
		"config": {
			"deps": [
				"checkoutProvider"
			]
		},
		"component": "Aheadworks_OneStepCheckout/js/view/delivery-date",
		"displayArea": "delivery-date",
		"provider": "checkoutProvider",
		"children": {
			"delivery-date-fieldset": {
				"component": "uiComponent",
				"displayArea": "delivery-date-fieldset",
				"children": {
					"date": {
						"component": "Aheadworks_OneStepCheckout/js/view/delivery-date/date",
						"config": {
							"customScope": "deliveryDate",
							"template": "Aheadworks_OneStepCheckout/form/field",
							"elementTmpl": "Aheadworks_OneStepCheckout/form/element/date"
						},
						"dataScope": "deliveryDate.date",
						"label": "Delivery Date",
						"provider": "checkoutProvider",
						"sortOrder": "1"
					},
					"time": {
						"component": "Magento_Ui/js/form/element/select",
						"config": {
							"customScope": "deliveryDate",
							"template": "Aheadworks_OneStepCheckout/form/field"
						},
						"dataScope": "deliveryDate.time",
						"label": "Delivery Time",
						"provider": "checkoutProvider",
						"sortOrder": "2"
					}
				}
			}
		}
	}
}

2. layout.iterator()

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js#L171-L183


/**
 * Determines if node ready to be added or process it.
 *
 * @param {Object} parent
 * @param {Object|String} node
 */
iterator: function (parent, node) {
    var action = _.isString(node) ?
        this.addChild :
        this.process;


    action.apply(this, arguments);
},

An example of node:

{
	"component": "Doormall_Shipping/main",
	"displayArea": "doormall_shipping"
}

An example of parent:

{
	"children": {
		"doormall_shipping": {
			"component": "Doormall_Shipping/main",
			"displayArea": "doormall_shipping"
		},
		"price": {
			"component": "Magento_Tax/js/view/checkout/shipping_method/price",
			"displayArea": "price"
		},
		"delivery-date": {
			"config": {
				"deps": [
					"checkoutProvider"
				]
			},
			"component": "Aheadworks_OneStepCheckout/js/view/delivery-date",
			"displayArea": "delivery-date",
			"provider": "checkoutProvider",
			"children": {
				"delivery-date-fieldset": {
					"component": "uiComponent",
					"displayArea": "delivery-date-fieldset",
					"children": {
						"date": {
							"component": "Aheadworks_OneStepCheckout/js/view/delivery-date/date",
							"config": {
								"customScope": "deliveryDate",
								"template": "Aheadworks_OneStepCheckout/form/field",
								"elementTmpl": "Aheadworks_OneStepCheckout/form/element/date"
							},
							"dataScope": "deliveryDate.date",
							"label": "Delivery Date",
							"provider": "checkoutProvider",
							"sortOrder": "1"
						},
						"time": {
							"component": "Magento_Ui/js/form/element/select",
							"config": {
								"customScope": "deliveryDate",
								"template": "Aheadworks_OneStepCheckout/form/field"
							},
							"dataScope": "deliveryDate.time",
							"label": "Delivery Time",
							"provider": "checkoutProvider",
							"sortOrder": "2"
						}
					}
				}
			}
		}
	},
	"component": "Aheadworks_OneStepCheckout/js/view/shipping-method",
	"displayArea": "shippingMethod",
	"sortOrder": "6",
	"extendProvider": true,
	"deps": [
		"checkoutProvider"
	],
	"index": "shippingMethod",
	"name": "checkout.shippingMethod",
	"dataScope": "",
	"parentName": "checkout",
	"parentScope": "",
	"initChildCount": 3
}

3. layout.process()

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js#L185-L215


/**
 * Prepare component.
 *
 * @param {Object} parent
 * @param {Object} node
 * @param {String} name
 * @returns {Object}
 */
process: function (parent, node, name) {
    if (!parent && node.parent) {
        return this.waitParent(node, name);
    }


    if (node.nodeTemplate) {
        return this.waitTemplate.apply(this, arguments);
    }


    node = this.build.apply(this, arguments);


    if (!registry.has(node.name)) {
        this.addChild(parent, node)
            .manipulate(node)
            .initComponent(node);
    }


    if (node) {
        run(node.children, node);
    }


    return this;
},

An example of name: «doormall_shipping».

4A. layout.build()

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js#L217-L295


/**
 * Detailed processing of component config.
 *
 * @param {Object} parent
 * @param {Object} node
 * @param {String} name
 * @returns {Boolean|Object}
 */
build: function (parent, node, name) {
    var defaults    = parent && parent.childDefaults || {},
        children    = node.children,
        type        = getNodeType(parent, node),
        dataScope   = getDataScope(parent, node),
        component,
        extendDeps  = true,
        nodeName;


    node.children = false;
    node.extendProvider = true;


    if (node.config && node.config.provider || node.provider) {
        node.extendProvider = false;
    }


    if (node.config && node.config.deps || node.deps) {
        extendDeps = false;
    }


    node = utils.extend({
    }, types.get(type), defaults, node);


    nodeName = getNodeName(parent, node, name);


    if (registry.has(nodeName)) {
        component = registry.get(nodeName);
        component.children = children;


        return component;
    }


    if (extendDeps && parent && parent.deps && type) {
        node.deps = parent.deps;
    }


    _.extend(node, node.config || {}, {
        index: node.name || name,
        name: nodeName,
        dataScope: dataScope,
        parentName: utils.getPart(nodeName, -2),
        parentScope: utils.getPart(dataScope, -2)
    });


    node.children = children;
    node.componentType = node.type;


    delete node.type;
    delete node.config;


    if (children) {
        node.initChildCount = _.size(children);
    }


    if (node.isTemplate) {
        node.isTemplate = false;


        templates.set(node.name, node);
        registry.get(node.parentName, function (parentComp) {
            parentComp.childTemplate = node;
        });


        return false;
    }


    if (node.componentDisabled === true) {
        return false;
    }


    return node;
},

4B. layout.addChild()

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js#L425-L442


/**
 * Add provided child to parent.
 *
 * @param {Object} parent
 * @param {Object|String} child
 * @returns {Object}
 */
addChild: function (parent, child) {
    var name;


    if (parent && parent.component) {
        name = child.name || child;


        this.insert(name, parent.name, child.sortOrder);
    }


    return this;
},

4C. layout.manipulate()

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js#L370-L392


/**
 * Determines inserting strategy.
 *
 * @param {Object} node
 * @returns {Object}
 */
manipulate: function (node) {
    var name = node.name;


    if (node.appendTo) {
        this.insert(name, node.appendTo, -1);
    }


    if (node.prependTo) {
        this.insert(name, node.prependTo, 0);
    }


    if (node.insertTo) {
        this.insertTo(name, node.insertTo);
    }


    return this;
},

4D. layout.initComponent()

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js#L297-L314


    /**
     * Init component.
     *
     * @param {Object} node
     * @returns {Object}
     */
    initComponent: function (node) {
        if (!node.component) {
            return this;
        }


        loadDeps(node)
            .then(loadSource)
            .done(initComponent);


        return this;
    }
});

5. layout.loadDeps()

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js#L67-L100


/**
 * Load node dependencies on other instances.
 *
 * @param {Object} node
 * @returns {jQueryPromise}
 */
function loadDeps(node) {
    var loaded = $.Deferred(),
        loggerUtils = consoleLogger.utils;


    if (node.deps) {
        consoleLogger.utils.asyncLog(
            loaded,
            {
                data: {
                    component: node.name,
                    deps: node.deps
                },
                messages: loggerUtils.createMessages(
                    'depsStartRequesting',
                    'depsFinishRequesting',
                    'depsLoadingFail'
                )
            }
        );
    }


    registry.get(node.deps, function (deps) {
        node.provider = node.extendProvider ? deps && deps.name : node.provider;
        loaded.resolve(node);
    });


    return loaded.promise();
}

6. layout.loadSource()

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js#L102-L128


/**
 * Load node component file via requirejs.
 *
 * @param {Object} node
 * @returns {jQueryPromise}
 */
function loadSource(node) {
    var loaded = $.Deferred(),
        source = node.component;


    consoleLogger.info('componentStartLoading', {
        component: node.component
    });


    require([source], function (constr) {
        consoleLogger.info('componentFinishLoading', {
            component: node.component
        });
        loaded.resolve(node, constr);
    }, function () {
        consoleLogger.error('componentLoadingFail', {
            component: node.component
        });
    });


    return loaded.promise();
}

7. layout.initComponent()

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js#L130-L145


/**
 * Create a new component instance and set it to the registry.
 *
 * @param {Object} node
 * @param {Function} Constr
 */
function initComponent(node, Constr) {
    var component = new Constr(_.omit(node, 'children'));


    consoleLogger.info('componentStartInitialization', {
        component: node.component,
        componentName: node.name
    });


    registry.set(node.name, component);
}

8. element.initialize()

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/lib/core/element/element.js#L97-L111


/**
 * Initializes model instance.
 *
 * @returns {Element} Chainable.
 */
initialize: function () {
    this._super()
        .initObservable()
        .initModules()
        .initStatefull()
        .initLinks()
        .initUnique();


    return this;
},

dmitrii_fediuk · April 22, 2018, 7:24am