Handle Internal Class renames

[artfiedler]

It would be nice if this transformer could also determine internal class names via the entry points and mangle them, if mangling like terser is not feasible then possibly just map class names and the export.classname to a prefixed random set of characters, like cl$AZa

[timocov]

It would be nice if this transformer could also determine internal class names via the entry points and mangle them, if mangling like terser is not feasible then possibly just map class names and the export.classname to a prefixed random set of characters, like cl$AZa

Don't the tools like terser or uglifyes support internal classes renaming?

[timocov]

@artfiedler Or I misunderstood something? Can you please elaborate a bit please?

P.S: thanks for good testing the transformer. Good to know that someone else uses it as well 😂

[artfiedler]

You're welcome! Thanks for developing this.

It's not working in my project LOL... Maybe I'm missing an option but... Here is a basic version my case... I have an exposed api that calls into the internal api.

Notice testProperties is not mangled, even though its unreachable in global scope

var exposedApi = {};
(function(api) {
  var internalApi = {};
  (function(exports){
	  exports.testProperties = void 0;
      var testProperties = (function () {
          function testProperties() {
              this._internal_thank = 0;
              this._internal_you = 0;
              this._internal_painInTheButton0 = 0;
              this._internal_painInTheButton1 = 0;
              this._internal_painInTheButton2 = 0;
          }
          return testProperties;
      }());
      exports.testProperties = testProperties;
      var test = new testProperties();
      test._internal_thank = 0;
      test._internal_you = 0;
      for (var i = 0; i < 3; i++)
          test['painInTheButton0' + i] = i;
      var totalThanks = test._internal_thank + 1;
      var totalForYou = test["_internal_you"] + 0;
      var button1Result = test._internal_painInTheButton1;
      var button2Result = test['painInTheButton' + 2];
      var button3Result = test['painInTheButton3'];
  })(internalApi);
  
  api.doSomething = function() {
    var tp = new internalApi.testProperties();
    return tp._internal_thank;
  };
  
})(exposedApi);

Well. It would work if I didn't have the regex filter, however when I don't use that filter I run into A LOT of issues with 3rd party libs and builtin's etc... enough to give up and search for your solution :) It would work if the classnames were prefixed with internal though, no need to make a custom mangle just would need it prefixed and terser would take care of the rest.

[timocov]

@artfiedler can you provide repo with repro of this issue? It looks weird and I don't think that we need to discuss how to minify JS properly - we need to start from TypeScript first IMO.

We use this transformer in https://github.com/tradingview/lightweight-charts with rollup and terser to minify JS and it seems that no exceeded class names in the bundle:

• unminified version: https://unpkg.com/[email protected]/dist/lightweight-charts.standalone.development.js
• monified version: https://unpkg.com/[email protected]/dist/lightweight-charts.standalone.production.js

I just don't understand what generates var internalApi = {}; (function(exports){})(internalApi);, is it namespaces?

[artfiedler]

Nothing "generates" the internal api object other than the programmer programs a class to define the exposed api. I'm not really going to go and build a fake project just to do exactly what that sample up above does... Basically what happens is all the private module code gets placed inside a closure so it can mediate the access to the exposed api.

Maybe rollup does something similar for you, but I don't use rollup, so I don't know... there seems to be a new module type or packager system every 6 months so I don't keep following the edge and stick with what I know and works ... lol

[timocov]

I'm not really going to go and build a fake project just to do exactly what that sample up above does...

I'm sorry, but without that example it'd be hard to "fix" this issue. I understand your concern, without additional information and samples (which I use as test cases to pin the behavior) it might be impossible to get correct what are you proposing here.

And actually, it looks like the issue due transpiling rather than JS itself (which we trying to solve in this transformer). If you change output form es5 to es6+ you'll get other output, which might be handled by minifier correctly (but as I said - we can't check it without repro).

[artfiedler]

I'll try and get you a small sample, but keep in mind javascript compiles as typescript ;)