https://github.com/trentmwillis/html-template-es-modules

A simple proof-of-concept for importing HTML Templates into ES Modules
https://github.com/trentmwillis/html-template-es-modules

es-modules esmodules html-templates service-workers

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/trentmwillis/html-template-es-modules
• Owner: trentmwillis
• Created: 2018-03-22T16:14:24.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-05-23T16:48:54.000Z (over 6 years ago)
• Last Synced: 2024-07-18T15:32:52.931Z (2 months ago)
• Topics: es-modules, esmodules, html-templates, service-workers
• Language: JavaScript
• Homepage:
• Size: 20.5 KB
• Stars: 43
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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`](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) to transparently transform HTML file responses into ES Modules that export an [`HTMLTemplateElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement).

## Example

Given [`hello-world.html`](./hello-world.html):

```html

Hello, world!

Coming at you live, from an HTML Template imported as an ES Module!

```


You can import it in [`hello-world.js`](./hello-world.js) like so:

```js

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`