How to use Polymer with FuseBox

September 18, 2017 0 Comments

How to use Polymer with FuseBox

 

 

I first started using WebComponents and Polymer almost 3 years ago. At the time, WebComponents were still very much an idea, writing Polymer Elements in Dart was very much still a popular idea, and the library (now framework but soon to be a library again) was still more than half a year away from a production release. Regardless, as a developer who had gone from jQuery to Knockout to Durandal, I fell in love with the dream of WebComponents as a cross-browser spec for building framework agnostic UI components.

Fast-forward to today, and that dream is very close to a reality. WebComponents are not only ready, with support from 3 major browser vendors almost complete. They are almost ready to be used everywhere. Because I’m a huge fan of the simplicity, speed, and efficiency of FuseBox, I decided to publish an article detailing how to marry the two together.

This is for anyone who read Rob Dodson’s article about How to use Polymer with Webpack and thought it was awesome, but could’ve been even more awesome with FuseBox.

I’ve created a tiny demo project so you can follow along.

To get started create an empty project folder. Create a package.json folder in the root of the project with the following contents:

Install the dependencies using yarn.

yarn

Next, create your fuse.js config and add the following code. I've done my best to comment each section so if you're new to FuseBox you can grok what's going on.

This is a pretty standard FuseBox setup with exception for copying over the WebComponents polyfill. We’ll come back to that later.

Next, we’ll create our component hello-world.ts in the components directory with the following code.

src/components/hello-world.ts

One minor detail is that because we’re using TypeScript, the PolymerElement class doesn’t register correctly. To remedy this, add a typings.d.ts file to the src directory with the following content.

declare var Polymer: { Element: { new () } }

Then we’ll import that component intoindex.ts and define it using customElements.define.

src/index.ts

Finally, we’ll create an our HTML template file index.html with the following code.

src/index.html

The important parts to note are that we are using the custom-elements-es5-adapter to handle our transpiled components in browsers with native support and our use of $bundles to tell FuseBox where to inject the build files. As a last step copy webcomponents-lite.js into the src directory from node_modules/@webcomponents/webcomponentsjs.

Now we can run node fuse and be handsomely rewarded with our hello-world component rendering in the browser.

Just like that, you’ve successfully bundled your first Polymer component using FuseBox. While we could end here, remember that this solution will only work in Chrome & Safari.

The easiest solution would be to load the webcomponents-lite polyfill, but this solution would mean loading unnecessary dependencies to browsers that fully the spec.

The 2nd and better solution would be using webcomponents-loader to optionally load dependencies and then define our components after the WebComponentsReady event fires.

For the sake of this article I’ll choose option 3: using dynamic imports to load the polyfill if necessary; otherwise falling back to defining the components. Copy webcomponents-lite.js into our src director and then update the index.ts with the following code.

src/index.ts

If we detect that the Shadow DOM or Custom Element APIs are missing we will load the polyfill first and then load the components and define them. Otherwise, we just load and define them.

Unfortunately it looks like there is an issue with the resolution between some of the libraries that Polymer and FuseBox. Regardless, I was able to successfully install dependencies and build without relying on this flag.

Hopefully you now have a very good understanding of how to build Polymer with FuseBox easily. Both tools are providing significant value to the development community and using them together is a natural step towards building framework agnostic components.

Big thanks to Rob Dodson and his helpful article that I shamelessly adapted.

Happy Trails.


Tag cloud