m2-devtools
m2-devtools copied to clipboard
Component extending component with mixin, looses mixin after optimization
This issue is a:
- [x] 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.