Magento 2: Extend mixin with mixin in custom theme

magento2-mixin-on-mixin.md

Input data

• initial widget Magento_Theme/js/view/breadcrumbs (vendor/magento/module-theme/view/frontend/web/js/view/breadcrumbs.js)
• native mixin that extends this widget: Magento_Catalog/js/product/breadcrumbs (vendor/magento/module-catalog/view/frontend/web/js/product/breadcrumbs.js)

Task

Extend methods of the mixin Magento_Catalog/js/product/breadcrumbs

Solution

• Declare your mixin in custom theme app/design/frontend/[Vendor]/[theme]/Magento_Catalog/requirejs-config.js file and associate it with the initial widget

var config = {
    config: {
        mixins: {
            'Magento_Theme/js/view/breadcrumbs': {
                'Magento_Catalog/js/product/breadcrumbs-mixin': true
            }
        }
    }
};

• In your custom mixin file app/design/frontend/[Vendor]/[theme]/Magento_Catalog/web/js/product/breadcrumbs-mixin.js define target mixin in define section

define([
    'jquery',
    'Magento_Catalog/js/product/breadcrumbs',
    'jquery/ui'
], function ($) {
    'use strict';
    return function (widget) {
        $.widget('mage.breadcrumbs', widget, {
            /**
             * {@inheritdoc}
             */
            _getCategoryCrumb: function (menuItem) {
                //do some custom stuff
                return this._super(menuItem);
            },
        });
        return $.mage.breadcrumbs;
    };
});

How does it work with components?