Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 of 4 tasks
kweij opened this issue Dec 20, 2019 · 0 comments
Open
1 of 4 tasks

Comments

@kweij
Copy link

kweij commented Dec 20, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant