magento / magento/m2-devtools

Component extending component with mixin, looses mixin after optimization

Open
#64 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
171
Forks
47
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue using vendor/magento/theme-frontend-luma/web/js/requirejs-config.js, web/js/ui-component-mixin, and Magento_Customer/js/view/customer. Compare the mixin behavior before and after running r.js with the bundle configuration. Done means the extending component retains the mixin property and initialization behavior after optimization.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js
Domain
build-system, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.