Webpack loader for HTL/Sightly templates
npm install htl-loaderWebpack loader for HTL/Sightly templates. Based on @adobe/htlengine.
npm install --save htl-loader @adobe/htlengine
See ./example.
1. Add loader to webpack.config.js:
``js`
{
module: {
rules: [
{
test: /\.htl$/,
use: ["htl-loader"]
}
];
}
}
2. Create exemplary template.htl:
`html`${page.title}
3. Create exemplary data.js in same directory:
`js`
module.exports = class Data {
use() {
return {
title: "Hello"
};
}
};
4. Import and run compiled template in your JavaScript:
`js
import html from "./template.htl";
// Hello
document.body.insertAdjacentHTML("beforeend", html);
`
| Name | Default | Description |
| :-------------------------------------------------------- | :------ | :-------------------------------------------------------- |
| globalName | htl | Name of the runtime global variable. |transformSource
| | null | Function invoked before compiling the htl. |transformCompiled
| | null | Function invoked after compiling the htl. |data
| | {} | Runtime global. |includeRuntime
| | true | Include runtime and evaluate template during compilation. |runtimeVars
| | [] | Add (global) runtime variable names during compilation. |moduleImportGenerator
| | null | Use custom module import generator. |scriptResolver
| | null | Use custom script resolver. |templateLoader
| | null | Use custom template loader. |
`js@adobe/htlengine
{
module: {
rules: [
{
test: /\.htl$/,
use: [
{
loader: "htl-loader",
options: {
// Remove directives does not understand
transformSource: source => {
const output = source
.replace(/data-sly-use\.templates?="(.*?)"/g, "")
.replace(
/
""
);
return output;
},
// Allow for custom models in data from use directives$1
transformCompiled: (compiled, settings) => {
const output = compiled.replace(
/(new Runtime\(\);)/,
const originalUse = runtime.use.bind(runtime);
runtime.use = function(uri, options) {
const settings = Object.assign({
model: '${settings.model}'
}, options);
return originalUse(uri, settings);
}
);
return output;
},
useDir: path.resolve(__dirname, "../src/htlmocks")
}
}
]
}
];
}
}
``