TLDR: I want to tool to build and bundle a HTML file (with
<template>and<script>into a single JS file
I have a bone to pick with Web Components at the moment. Mainly tooling around bundling and the overall experience of creating them. All which lead to a hit in performance when using them.
One use case I come back to over and over is a markdown editor. I've cobbled together a working version of a simple-mde web component. You can see it for yourself in this gist. It's loosely based off this 5-year-old repo here — a repo filled with outdated build tools, gulp and bower.
The format for this component is fairly straightforward. It includes a <template> with a single nested <style> tag. And a single <script> tag that creates the HTMLElement and adds it to the DOM. The issue with this code is that both the CSS and JS have external dependencies, totaling 4. They load from CDNs, which comes with its host of pros and cons. At this point, we've agreed that it's best practice to pull down and minify all of this.
To make matters worse, the way I've built this file in HTML is unusable. There's no standard way to include HTML within a document. A couple of years back, browsers teased us with being able to do <link rel="include" href="/component.html">, which doesn't work anymore, is impossible to even find ever existed on the internet. Here's a post about it. Of course, this functionality can still be added via custom code.
But what I want is a way to take the WORKING file I created above for my simple-mde web component and convert that HTML file to a bundled and minified JS file. I want all of the dependencies to be bundled into the file, the <template> code to be converted to a string, and automatically add it to the DOM when the file loads. Finally, the <script> tag would be removed. All of this can be bundled as a single JS file, so the entire component is contained.
Why don't we have a way to bundle web components this way? 😤
Top comments (0)