WebReflection / babel-plugin-transform-builtin-classes

A fix for the infamous Babel #4480 bug.
https://github.com/babel/babel/issues/4480
ISC License
43 stars 2 forks source link

Not working in Meteor. #11

Closed trusktr closed 6 years ago

trusktr commented 6 years ago

I'm trying to use this by adding a .babelrc file to my Meteor project:

{
    "plugins": [
        ["transform-builtin-classes", {
            "globals": ["HTMLElement"]
        }]
    ]
}

Meteor's Babel setup uses "@babel/plugin-transform-classes": "^7.0.0-beta.39",.

But, nothing happens. My Custom Elements still have the error I'm trying to avoid when HTMLElement is not called as new HTMLElement.

Maybe babel-plugin-transform-builtin-classes isn't working with the new @babel/plugin-transform-classes plugin, which is no longer named babel-plugin-transform-es2015-classes?

trusktr commented 6 years ago

I manually installed @babel/plugin-transform-classes, so babelrc is like

{
    "plugins": [
        "transform-classes",
        ["transform-builtin-classes", {
            "globals": ["HTMLElement"]
        }]
    ]
}

but no luck:

Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
trusktr commented 6 years ago

If you'd like to try seeing why it won't work in Meteor, it's really easy: just make a new Meteor project with the CLI,

meteor create foo
cd foo
# add above to .babelrc
npm i
npm i babel-plugin-transform-builtin-classes --save-dev
# write a custom elements and try to use it in the DOM, f.e. in main.js
meteor

and you'll get the error.

trusktr commented 6 years ago

Not sure where to start debugging this. I'd really like to get Custom Elements v1 working inside a Meteor app (i.e. using Meteor's build setup rather than transpiling them separately from the outside).

WebReflection commented 6 years ago

babel 7 has my transformer included in core

my transformer works like this

{
  "plugins": [
    // either the preset es2015 or at least the following
    "babel-plugin-transform-es2015-classes",
    ["babel-plugin-transform-builtin-classes", {
      "globals": ["HTMLElement"]
    }]
  ]
}

I don't know about the plugin "transform-classes" but I'm pretty sure it's not compatible with this transformer which works only with the Babel one.

If their "transform-classes" is special, I suggest you invert the transformation order.

I don't know otherwise how to help and since this made it into core I'm not really wasting too much time on this. PR welcome if you find a solution.

trusktr commented 6 years ago

Yep, just saw https://github.com/babel/babel/pull/7020! :)