What is mixin in Magento 2?

Question

• Does anyone know how Magento has implemented this functionality?
• What Magento custom mixins plugin is actually is ?

Answer 1

A mixin is a class whose methods are added to, or mixed in, with another class.

A base class includes the methods from a mixin instead of inheriting from it. This allows you to add to or augment the behavior of the base class by adding different mixins to it.

The following is an example of a mixin module that extends the target component with a function that introduces a new blockVisibility property to a column element.

File: OrangeCompany/Sample/view/base/web/js/columns-mixin.js

define(function () {
 'use strict';

 var mixin = {

     /**
      *
      * @param {Column} elem
      */
     isDisabled: function (elem) {
         return elem.blockVisibility || this._super();
     }
 };

 return function (target) { // target == Result that Magento_Ui/.../columns returns.
     return target.extend(mixin); // new result that all other modules receive
 };
});

Mixins are declared in the mixins property in the requirejs-config.js configuration file. This file must be created in the same area specific directory the mixin is defined in.

The mixins configuration in the requirejs-config.js associates a target component with a mixin using their paths.

Example

The following is an example of a requirejs-config.js file that adds the columns-mixins, defined in the previous example.

var config = {
 config: {
     mixins: {
         'Magento_Ui/js/grid/controls/columns': {
             'OrangeCompany_Sample/js/columns-mixin': true
         }
     }
 }
};

Mixin example in Magento: https://github.com/magento/magento2/blob/2.2/app/code/Magento/CheckoutAgreements/view/frontend/requirejs-config.js

Reference: https://devdocs.magento.com/guides/v2.2/javascript-dev-guide/javascript/js_mixins.html

Use of JS mixins as small example: https://webkul.com/blog/use-js-mixins-magento2/