Parcel: Bundling or using WebComponents in my project

[mhoyer]

🙋 It's a feature request!

🎛 Configuration (.babelrc, package.json, cli command)

package.json

{
  "dependencies": {
    "parcel-bundler": "^1.6.2"
  }
}

The command

parcel build --no-minify --no-cache

💻 Code Sample

index.js

class Button extends HTMLElement {
}

customElements.define('my-button', Button);

🤔 Expected Behavior

I expect to get control about the generated output format of my bundle. In case of bundling WebComponents, ES6 with class syntax would be a requirement.

See: https://github.com/w3c/webcomponents/issues/423

😯 Current Behavior

Besides all the surrounding module helpers and polyfills I found at the bottom this ES5 (or even ES3) babel-transpiled output (of the source from index.js above):

dist\a9bf72a9bf6a2917ff5dd97786ae7ea2.js

...
var Button = function (_HTMLElement) {
  _inherits(Button, _HTMLElement);

  function Button() {
    _classCallCheck(this, Button);

    return _possibleConstructorReturn(this, (Button.__proto__ || Object.getPrototypeOf(Button)).apply(this, arguments));
  }

  return Button;
}(HTMLElement);

customElements.define('my-button', Button);
...

💁 Possible Solution

I stepped into sources and found Asset.process() which calls JSAsset.generate() without any possibility to modify the Babel options from the outside.

Possible solution: also read potential .babelrc file if given?

🔦 Context

I am trying to create a small collection of Web Components for re-use in other projects.

Another scenario: e.g. I want to use existing Web Component libraries in my project - they won't work native as the class syntax seems to be a requirement for WCs.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.6.2 |
| Node | 8.10.0 x32 |
| npm/Yarn | yarn 1.5.1 |
| Operating System | Windows 10 x64 |

[davidnagli]

Possible solution: also read potential .bablerc file if given?

Parcel does read .babelrc! Are you experiencing something different?

[mhoyer]

Yes it does. But not for this final generate step or I am doing something wrong or misunderstand how babel works - I am usually using Typescript. 🤗

Can you give me a hint what a .babelrc file should look like? I tried it with this one:

{
  "presets": [ "env" ] 
}

[mhoyer]

You can simply set it up with this chain of commands:

mkdir parcel-issue-1049
cd parcel-issue-1049
yarn add [email protected]
echo 'class Button {}' > index.js
echo '{
  "presets": [ "env" ] 
}' > .babelrc

./node_modules/.bin/parcel build --no-minify --no-cache

tail dist/*.js | grep 'Button' --color -C10

[mhoyer]

I found a workaround here:

My .babelrc now looks like so (after yarn add babel-plugin-transform-custom-element-classes --dev):

{
    "plugins": [
        "transform-custom-element-classes"
    ]
}

At least the WebComponents now work - but this is just a patch, not a real fix. Hence, the generated .js output still does not contain my expected class keyword.

Side note

As I mentioned above, I am actually using Typescript under the hood. Thus, it's even more confusing, that in this case also babel is triggered when bundling with parcel. Especially when setting
the target in tsconfig.json to es6, but the output in the bundle is then transpiled further down to ES5 (or lower) because of babel.

Also in terms of performance this may not be necessary to push the source code through two transpilers? 😉

[gkjohnson]

Hey! Just thought I'd chime in and say I just ran into this issue, as well. It would be nice to have a built in solution, but thanks for posting the workaround!

[lastmjs]

I always run into this issue with Parcel, and I always give up. We just need the target of the transpilation to be set correctly, why does Parcel not honor the target property of our tsconfig.json files?

[lastmjs]

Perhaps with Babel 7 including built-in support for the TypeScript AST or whatever it does, we'll have a more elegant solution. I still think honoring the tsconfig.json seems very elegant.

[ko-dever]

Almost same issue here, instead I got an error NotSupportedError: Operation is not supported with the development server.

What is weird is if I my active file in my editor is my index.html and I save, Parcel reloads the server without any error. However, I my active file is one of my JS file (the entry point or the imported files) and I save, Parcel reloads without any error in the console but the above error in shown in my browser (Firefox 63.0.3 64-bit).

I tried all the solution provided, installing babel-plugin-transform-custom-element-classes and transform-es2015-classes (as indicated here) but none of them work in my case.

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.10.3
| Node | v11.3.0
| npm/Yarn | npm 6.4.1 / Yarn 1.12.3
| Operating System | macOS High Sierra 10.13.6

[FDiskas]

working example :barber:
parcel-webcomponents.zip