Component extending component with mixin, looses mixin after optimization
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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