Meteor-feature-requests: Support for native Custom Elements v1.

[trusktr]

Meteor transpiles all classes to non-native classes, but browsers that natively support Custom Elements v1 expect native classes, not transpiled classes, otherwise errors like the following happen:

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

because transpiled code does something like HTMLElement.call(this, ...) which is not allowed with Custom Elements v1 (the native implementations).

There's a really easy fix for this, using babel-plugin-transform-builtin-classes.

However, I can't get it to work, see this issue.

In previous project that currently use the older babel-plugin-transform-es2015-classes rather than the new @babel/plugin-transform-classes, this works great, and custom elements work in the native v1 implementations.

However, adding this plugin to Meteor in .babelrc doesn't seem to do anything.

I'm not sure if this is related to the new classes transform, or some other issue with Meteor's setup.

Maybe transform-builtin-classes has to run last, but Meteor is making it run first, or something? What could be the issue.

It'd be SUPER great to have this functionality built into Meteor, because, as you may know, Custom Elements v1 is here, and Meteor applications don't work with it. It would be great! 😃

[hwillson]

Have you seen https://github.com/meteor/meteor/pull/9439? It's coming in Meteor 1.6.2 and will make it MUCH easier to support modern browser functionality directly (while still retaining backwards compatibility for older browsers). Super exciting!

[trusktr]

I know, when developing with Meteor, one would want to use Blaze/React/Vue/etc to make components. But, there's reasons to use Custom Elements as well, in that they can then be used outside the Meteor application. Or, there might be 3rd party components in the form of Custom Elements and they need to be transpiled and to work in Meteor.

[trusktr]

Have you seen meteor/meteor#9439?

Ah, I missed that. That's good news then!

[trusktr]

@hwillson Guess what, babel-plugin-transform-builtin-classes was adopted into @babel/core: https://github.com/babel/babel/pull/7020

So, this should just work when Meteor uses the version that includes it.

[abernix]

That PR landed in Babel's -beta.36 and Meteor 1.6.1 shipped with -beta.38. Have you tried Meteor 1.6.1?

Be forewarned though, I'm not sure all the kinks are worked out, yet: https://github.com/meteor/meteor/issues/9598

[trusktr]

Yep, it doesn't seem to be working, so I've asked over at Babel to see if I'm using it wrong or if it's a bug.