trentmwillis / html-template-es-modules

A simple proof-of-concept for importing HTML Templates into ES Modules

HTML Template ES Modules

A simple, proof-of-concept for importing HTML files as HTML Templates into ES Modules. Made possible by using Service Workers to transparently transform HTML file responses into ES Modules that export an HTMLTemplateElement.

Example

Given hello-world.html:

<h1>Hello, world!</h1>
<p><em>Coming at you live, from an HTML Template imported as an ES Module!</em></p>

You can import it in hello-world.js like so:

import template from './hello-world.html';
console.log(template.toString()); // [object HTMLTemplateElement]

From there you can clone the template and insert it into the DOM! Or do whatever else you'd like with the element.

Running The Demo

To try out the demo, do the following:

• Clone the repo: git clone https://github.com/trentmwillis/html-template-es-modules.git
• Install dependencies in the repo: cd html-template-es-modules && npm install
• Run the server: npm run start

html-template-es-modules's Issues

Work with electron?

Hi, thanks for this concept.
I'm searching for a way to include separate html files in my electron project, so I can "design" them on there own. The html files are seperate pages I want to load in my content area with the help of a navbar.

But after I tried it in my project, I got the following error:

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec. - app.js:1

Would you please help me? :)