Error uglifying / minifying extension code

Developers
1

Hi, i’m trying to build some custom behavior for the bpmn-js tool, i’m creating a panel to update the element properties and created this function for that:

export function setAttributes(modeler, element, data){
   modeler.invoke(function setAttributesHandler(elementRegistry, modeling){
     console.log(elementRegistry, modeling);
     modeling.updateProperties(element, data);
   });
}

the problem is when i uglify the code, the parameters for the callback function become just one letter each one, and the inject is not finding those parameters, then the question would be, what is the best approach to avoid this behavior (uglify is a most for my project)?, i’ve been looking on github, but i can’t find anything related.

thanks in advanced for your help.

Answer

You have to explicitly add the name information for injected services, as they get mangled during minification. One way to do this is using the Array notation: [ 'foo', 'bar', fn ].

A bit more elaborated example could look like that:

modeler.get('eventBus').invoke([ 'foo', 'bar', function(foo, bar) {
  ...
}]);

See details in this answer.

2

Well, i found out that i can add exceptions to the uglify JS plugin, so i did that, added elementRegistry and modeling to the mangle exceptions, and now everything is working as expected, if you have any other suggestions, you can share them here.

thanks

3

The issue here is that your code is not minification save.

Consider this example:

modeler.get('eventBus').invoke(function(foo, bar) {
   ...
});

The dependency injection container will locate and inject the services foo and bar here.

Minification / uglification will turn your code into the following:

a.get('eventBus').invoke(function(b, c) {
   ...
});

No more name information for the services is available (b and c are not available in the modeler).

To make your code minification save you have to explicitly attach the injectees names to the method:

modeler.get('eventBus').invoke([ 'foo', 'bar', function(foo, bar) {
   ...
}]);

Note the [ 'foo', 'bar', fn ].