htl-loader

Webpack loader for HTL/Sightly templates. Based on @adobe/htlengine.

Installation

npm install --save htl-loader @adobe/htlengine

Usage

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);
`

Advanced

$3

| 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. |

$3

`js
{
module: {
rules: [
{
test: /\.htl$/,
use: [
{
loader: "htl-loader",
options: {
// Remove directives @adobe/htlengine does not understand
transformSource: source => {
const output = source
.replace(/data-sly-use\.templates?="(.*?)"/g, "")
.replace(
/]+data-sly-call=(["']).?\1.?><\/sly>/g,
""
);

return output;
},
// Allow for custom models in data from use directives
transformCompiled: (compiled, settings) => {
const output = compiled.replace(
/(new Runtime\(\);)/,
$1
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")
}
}
]
}
];
}
}
``

Contributors

- tripodsan

License

MIT