What does the "initUnique" Method setup in uiElement Objects?

[alanstorm]

In Magento 2's uiElement objects, one of the initialization methods is named initUnique

initialize: function () {
    this._super()
        .initObservable()
        .initModules()
        .initStatefull()
        .initLinks()
        .initUnique();

    return this;
},

The init functions usually setup some feature or magic in the uiElement objects. For example, the initLinks method sets up the imports/exports default.

However, after examining the source of initUnique

initUnique: function () {
    var update = this.onUniqueUpdate.bind(this),
        uniqueNs = this.uniqueNs;

    this.hasUnique = this.uniqueProp && uniqueNs;

    if (this.hasUnique) {
        this.source.on(uniqueNs, update, this.name);
    }

    return this;
},

The onUniqueUpdate callback it sets up in the source property it binds and sets up if certain object properties are populated.

onUniqueUpdate: function (name) {
    var active = name === this.name,
        property = this.uniqueProp;

    this[property](active);
}

and the related setUnique method

#File: vendor/magento/module-ui/view/base/web/js/lib/core/element/element.js
setUnique: function () {
    var property = this.uniqueProp;

    if (this[property]()) {
        this.source.set(this.uniqueNs, this.name);
    }

    return this;
},

It's still not clear what this "unique" object feature does, or how a uiElement object needs to be configured for the "unique" feature to take effect.

It seems related to the source property, which is populated during the call to initModules

initModules: function () {
    var modules = this.modules || {};

    _.each(modules, function (name, property) {
        this[property] = this.requestModule(name);
    }, this);

    if (!_.isFunction(this.source)) {
        this.source = registry.get(this.provider);
    }

    return this;
},

but there's too many loose threads to know what, if anything, is being kept or made unique, or if "unique" is a red herring and this feature actually does something else.

I'm hoping someone else here knows and can shed some light on the matter with a plain english explanation of what this feature does in the UI Component system.

[omiroshnichenko]

When you configure your component you can specify modules(components) that you want to use.

defaults: {
    ...
    modules: {
        '<local property name>': '<name of component>'
    }
}

At the moment of instantiating your component initModules method will be called and will make request to registry for modules(components) that you specify in configuration. Also, inside this method, will be requested provider component and assigned to the source property.

What "unique" feature do? I will explain on tab and area example. We have configured form that have several tabs and tab areas. We will have several instances of the same tab class. We want to identify what tab is active and get reference(or name) to active instance. So, we are going to tab class and declare uniqueNs property(path in source object) and uniqueProp (name of the current component property).  Example:

defaults: {
    ...
    uniqueNs: "params.activeTab",
    uniqueProp: "active"
}

In initUnique creates listener on change uniqueNs property in source and passed callback onUniqueUpdate. You can call setUnique method that will check if property active, of called instance, is truthy and will set to source, under uniqueNs, name of the instance. After that, all tabs instances will receive uniqueNs changes and will call onUniqueUpdate callback. Inside callback we will compare current and active instance name, and will change active property of each  tab instance.