Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebComponents connectedCallback gets mangled/minified #1170

Closed
xatian opened this issue Apr 7, 2022 · 3 comments · Fixed by #1524
Closed

WebComponents connectedCallback gets mangled/minified #1170

xatian opened this issue Apr 7, 2022 · 3 comments · Fixed by #1524
Labels
good first issue This issue is good for contributors who are getting started

Comments

@xatian
Copy link

xatian commented Apr 7, 2022

Bug report or Feature request?
Bug report?

Version (complete output of terser -V or specific git commit)
v5.12.1

Complete CLI command or minify() options used

{
  compress: {
    defaults:true,
    pure_getters:true,
  },
  ecma: 2020,
  mangle: {
    toplevel: true,
    properties: {
      keep_quoted: "strict"
    },
  },
  toplevel: true,
}

terser input

class Foo extends HTMLElement {
    public constructor () {
        super ();
    }
    public connectedCallback () {
    }
}

terser output or error

class D extends HTMLElement {
    constructor() {
        super()
    }
    ct() {}
}

Expected result

class D extends HTMLElement {
    constructor() {
        super()
    }
    connectedCallback() {}
}

connectedCallback is a reserved function name when using WebComponents yet terser seems not to care.
I tried using "reservedNames" but that seems to only work with variables and not with functions
I tried using "keep_fnames:/connectedCallback/" @ three locations (top-level, inside mangle, inside compress) --> no effect
I suppose I could fix my problem by abusing the "nameCache" but that is something I would like to avoid.

Thank you!

@xatian
Copy link
Author

xatian commented Apr 9, 2022

I "fixed" the issue by putting the function-name inside quotes --> like so:

class Foo extends HTMLElement {
    public constructor () {
        super ();
    }
    public "connectedCallback" () {
    }
}

This way the function-name is not touched and my problem goes away.

Still --> I think "connectedCallback" should be added to list of reserved (not to be mangled) function-names. If you don't agree you may just close this ticket.
Thank you!

@fabiosantoscode
Copy link
Collaborator

Hello! Thanks for reporting. The properties in this list aren't mangled by default:

https://github.com/terser/terser/blob/master/tools/domprops.js

And apparently connectedCallback isn't there indeed. A quick google of the webcomponents API revealed attributeChangedCallback which is also not present.

@fabiosantoscode fabiosantoscode added the good first issue This issue is good for contributors who are getting started label Jun 21, 2022
@FreyaHolmer
Copy link

I just lost hours due to this issue ;-; would be nice to have this properly fixed to not have others run into the same problem!

arilotter added a commit to arilotter/terser that referenced this issue Apr 27, 2024
fabiosantoscode pushed a commit that referenced this issue Apr 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue This issue is good for contributors who are getting started
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants