Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 5 days 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-10-27T10:45:11.153Z (17 days ago)
- Topics: es-modules, esmodules, html-templates, service-workers
- Language: JavaScript
- Homepage:
- Size: 20.5 KB
- Stars: 44
- 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`