magento / m2-devtools

Helpful in-browser debugging/inspection tools for the Magento 2 Front-End
Open Software License 3.0
172 stars 48 forks source link

Component extending component with mixin, looses mixin after optimization #64

Open kweij opened 4 years ago

kweij commented 4 years ago

This issue is a:

Environment

Question Answer
Magento version 2.3.3
Browser + version OSX Chrome 79.0.3945.79
node.js version (node -v) 10.18.0
npm version (npm -v) 6.7.0

Description

Title tries to say it al, but it's a tricky construction. I've prepared a M2.3.3 example with the following additions to the core after a clean install including this module and npm i -S requirejs. I've applied changes in the luma theme directory just to setup a simple example without side effects:

vendor/magento/theme-frontend-luma/web/js/requirejs-config.js

var config = {
    config: {
        mixins: {
            "Magento_Ui/js/lib/core/collection": {
                "js/ui-component-mixin": true
            }
        }
    }
};

vendor/magento/theme-frontend-luma/web/js/ui-component-mixin

define(
    [],
    function () {
        'use strict';

        return function (target) {
            return target.extend({
                defaults: {
                    TESTETTSTETSTSTTETETSTETSE: '##############################################################'
                },

                initialize: function () {
                    this._super();
                    console.log('init mixin on uiComponent, extended by this:', this);
                    return this;
                }
            });
        };
    }
);

Expected result:

Before running r.js I get a lot of loggin in the console (16) and the example component that extends Magento_Ui/js/lib/core/collection that I check: Magento_Customer/js/view/customer in the header ("Default welcome msg!") show to have the property "TESTETTSTETSTSTTETETSTETSE" upon inspection (with the Knockout context Chrome plugin).

Actual result:

After running r.js -o bundle.js .... I get only 6 log entries in the console (of only plain Magento_Ui/js/lib/core/collection component, not the ones extending it). Also using the same inspection on Magento_Customer/js/view/customer in the header ("Default welcome msg!") does not show the property "TESTETTSTETSTSTTETETSTETSE"

Possible solutions:

I wish I knew, because this method of bundling, the plugin that generates the build.js, is the absolute best and it delivers a great performance boost.