Skip to content

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

@kweij

Description

@kweij

This issue is a:

  • Bug
  • Feature suggestion
  • Documentation issue
  • Other (Please Specify)

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions