Function name shortened, but not function call

[Lee Morgan]

There seems to be a problem with shortening names in some cases. Below is an example.

{
    addOnclick: function(){
        element.onclick = ()=>{this.foo("some string")};
    },

    foo: function(str){
        //do things
    }
}

I get: "this.foo is not a function"
What it looks like is happening is that it is changing the name of the function, but it is not changing the call to that function. It seems to do this everywhere that I have this format as far as I can tell. It works with browserify of course, but it breaks with tinyify.

[Renée]

There are some syntax errors in that snippet so I'm not sure if I'm reproducing it correctly. Name changes are done by terser, so you could try putting the actual code into https://try.terser.org/ and seeing if the same issue occurs.

[Lee Morgan]

Sorry for the terrible code. I fixed it up so that it should be good now. I tried it in Terser and it seems to do it correctly and looks fine to me.

[Lee Morgan]

I double checked with my own code, and as far as I can tell, it is working in Terser.

[Renée]

tinyify was depending on an older version of terser. I just published tinyify@3.0.0, could you try again with that?

[Lee Morgan]

Updated it to 3.0.0 but I am still having the same problem. Also, I checked with addEventListener and the same problem still occurs.

[Renée]

Hmm it might be a bit more complicated then 😞 I tried just bundling this with browserify + tinyify and it seemed OK:

window.x={
    addOnclick: function(){
        element.onclick = ()=>{this.foo("some string")};
    },

    foo: function(str){
        //do things
    }
}

so perhaps it needs a few more moving parts to show the issue. Could you share code that fully reproduces the problem? Something I can pass straight through browserify -p tinyify to see the issue? 🙂

[Lee Morgan]

Alright, so this one took me a while. Most things that I tried to do worked just fine. I created a repo with a very simple example of the problem. Note that I had to import from a module. If I did it in a single file, then it worked just fine.
https://github.com/MorganLee909/test-tinyify

[Renée]

Awesome, thanks. It looks like common-shakeify does not count the this.bar() call as a use of the exported bar function, and decides to remove it because it appears unused.

You can work around it until it's fixed by doing something like

var x = {
  foo: function() { /* snip */ },
  bar: function() { /* snip */ }
};
module.exports = x;

Then common-shakeify will not see the foo and bar properties as individual exports, and it will not shake the bar function out.

[Lee Morgan]

Awesome, thanks a lot, that's a pretty damn simple workaround. I appreciate the help a lot.