https://github.com/ccjmne/template-element-loader
A webpack loader that lets you consume your HTML contents as actual <template> elements.
https://github.com/ccjmne/template-element-loader
custom-element element html loader template template-element template-tag webpack
Last synced: 3 months ago
JSON representation
A webpack loader that lets you consume your HTML contents as actual <template> elements.
- Host: GitHub
- URL: https://github.com/ccjmne/template-element-loader
- Owner: ccjmne
- License: mit
- Created: 2022-07-05T14:39:19.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-07-06T17:19:49.000Z (about 4 years ago)
- Last Synced: 2025-02-13T23:48:11.660Z (over 1 year ago)
- Topics: custom-element, element, html, loader, template, template-element, template-tag, webpack
- Language: TypeScript
- Homepage:
- Size: 723 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ``-element-loader
A [webpack](https://webpack.js.org/) loader that lets you consume your HTML contents as actual [`` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).
## Why?
It allows preprocessing of the contents of your template to speed up subsequent rendering when needed by saving CPU cycles on HTML parsing.
It's only relevant at all if you reuse that template multiple times; harmless otherwise.
## How-to
Usage example:
* `webpack.config.js`:
```javascript
rules: [{
test: /\.template\.html$/,
use: {
loader: 'template-element-loader',
options: {
removeComments: true, // or any of the HTMLMinifier options
},
},
}]
```
* `my-component.template.html`:
```html
Buttered Toast Recipe
- Choose your bread and place it in the toaster.
- Choose the toaster setting and set it off.
- Remove the toast.
- Butter your toast.
```
* `my-component.controller.ts`:
```typescript
import template from './my-component.template.html';
class MyElement extends HTMLElement {
constructor() {
super();
this
.attachShadow({ mode: 'closed' })
.appendChild(template.content.cloneNode(true));
}
}
```
## Options
This loader additionally minifies your HTML content using [HTMLMinifier](https://github.com/terser/html-minifier-terser).
You can refer to their [Options Quick Reference](https://github.com/terser/html-minifier-terser#options-quick-reference) table for guidance.
## TypeScript typings
If your project uses [TypeScript](https://www.typescriptlang.org/), we recommend you include something like the excerpt below to you typings:
* `declarations.d.ts`:
```typescript
declare module '*.template.html' {
const template: HTMLTemplateElement;
export default template;
}
```
## Licensing
Uses the **MIT** license.
> See [LICENSE](./LICENSE) for the complete text or [the MIT entry on TLDR Legal](https://tldrlegal.com/license/mit-license) for a quick summary.