Tag: ES Modules

I've migrated my Hugo blog's editor to Editor.js. It's a block-based editor, unlike classic editors, offering more flexibility and a Medium-like experience. Although I faced some challenges adapting the ES5 code from the NPM distribution (compared to the ES Modules examples), building the UI was relatively straightforward. Check out Editor.js for more details.

Hugo, by default, doesn't serve .mjs files with the correct MIME type, which is necessary for using ES modules. However, starting with v0.43, you can configure Hugo to serve .mjs files correctly by adding the 'mjs' suffix to the 'text/javascript' media type in your config file. This allows for proper local testing of ES modules, although hosting considerations might differ.

I'm exploring the best way to load web components, focusing on how to include styles and templates without creating uncontrolled blocking requests. I've experimented with using a single JavaScript file that encapsulates everything, including styles and a dynamically created template element. This approach avoids external requests but raises questions about extensibility and best practices. Should we revive HTML imports, embrace ES modules, or find a common model for handling templates and styles? Is inlining templates a reasonable solution? I'm looking for community input on how to balance performance and developer experience when deploying web components.