This library can be used with webpack to parse and import HTML templates to be used with infuse.host.
To be able to use infuse-loader in your webpack project you must first install it:
npm install --save-dev infuse-loader
Then, you need to modify your webpack configuration file to use infuse-loader for HTML files:
const path = require('path');
module.exports = {
context: __dirname,
devServer: {
contentBase: [path.resolve(__dirname, 'dist')]
},
entry: './src/index.js',
mode: 'development',
module: {
rules: [{
test: /\.html$/,
use: [{ loader: 'infuse-loader' }]
}],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
Lets say you want to define a custom element to use as a page header. You would write the HTML file with template for the custom element. We'll call this file header.html.
<template>
<h1>${ host.pageTitle }</p>
</template>
Then, you simply import that template into an ES module where you define the custom element:
// Import template and Infuse.Host.
import headerTemplate from './header.html';
import * as Infuse from 'path/to/infuse.host/src/infuse.js';
// Extend `Infuse.Host` to define a class for the new custom element.
class CustomHeader extends Infuse.Host {
// `Infuse.Host` uses `this.template` to obtain the parsed template to clone/infuse.
get template() {
return headerTemplate;
}
// This is the property used in the template.
get pageTitle() {
return 'Page Title';
}
}
// Define the custom element using the `CustomHeader` class.
window.customElements.define('custom-header', CustomHeader);
Whenever the <custom-header>
element is used on the page (after this module has been loaded by
the browser), Infuse.Host
will clone and infuse the template and add the resulting fragment to
the custom element, which will result in:
<custom-header>
<h1>Page Title</h1>
</custom-header>
The first template in an HTML file is used as the default value in the import statement. In the
previous example, the HTML file contained only one template, which was imported as headerTemplate
.
When using HTML files with multiple template elements (including nested templates), you can use the
template ID to access different templates in an import statement. By default, infuse.host uses the
data-tid
as the name of the template ID attribute. This attribute is added to the template element
(if it doesn't have it already) when a template is parsed. You can add this attribute to your
templates to uniquely identify them. You can use the default attribute name (data-tid
) or you can
use a different attribute name by setting the templateId
configuration
option in your webpack config file:
module.exports = {
/* Other webpack configuration options. */
module: {
rules: [{
test: /\.html$/,
use: [{
loader: 'infuse-loader',
// infuse.host configuration options
options: {
templateId: 'id'
}
}]
}]
},
/* Other webpack configuration options. */
};
You can then optionally add the id
attribute to your templates. For instance:
<template>
<table>
<thead>
<tr>
<th>Index</th>
<th>ISBN</th>
<th>Title</th>
<th>Author</th>
</tr>
</thead>
<tbody>
<template id="rowTemplate" for="book, index" each="${ host.getBooksArray() }">
<tr>
<td>${ index }</td>
<td>${ book.isbn }</td>
<td>${ book.title }</td>
<td>${ book.author }</td>
</tr>
</template>
</tbody>
</table>
</template>
<template id="headerTemplate">
<h1>${ host.pageTitle }</p>
</template>
The first template element is still used as the default value in the import statement, but you can
access other templates using their id
, for instance:
import firstTemplate, { rowTemplate, headerTemplate } from './template.html';
All the configuration options that you can pass to infuse-loader, in your webpack config file, are listed in the infuse.host web site.