Webpack loader for HTL/Sightly templates
npm install htl-template-loader!npm version
!license
!travis tests
!last commit
!pull requests
!commits
Webpack loader for HTL/Sightly data-sly-template templates. Based on @adobe/htlengine.
npm install --save htl-template-loader @adobe/htlengine
1. Add loader to webpack.config.js:
``js`
{
module: {
rules: [
{
test: /\.htl$/,
use: ["htl-template-loader"],
},
];
}
}
2. Create a template file template.htl:
`html`Hello World
3. Import render method
`js
import renderMain from './demo.html';
// Render the entire file
console.log(await renderMain());
`
1. Add loader to webpack.config.js:
`js`
{
module: {
rules: [
{
test: /\.htl$/,
use: ["htl-template-loader"],
},
];
}
}
2. Create a template file template.htl:
`html`
Hello ${name}!
3. Import render method
`js
import { render } from './demo.html';
// If no template name is given use the first exported data-sly-template
console.log(await render({ name: 'Alex' }));
// To call a specific template pass the name as first parameter
console.log(await render('greeter', { name: 'Alex' }));
`
The @adobe/htl-engine ships with a scriptResolver to align with the AEM template resolution logic.
The templateRoot option allows to specify a base folder to lookup relative template paths like example/headline.htl.
The following example would look up example/headline.htl in /my-project/templates/example/headline.htl:
`html`
data-sly-call="${headline.headline @ text=text}"
/>
`js`
{
module: {
rules: [
{
test: /\.htl$/,
use: {
loader: "htl-template-loader",
options: {
templateRoot: "/my-project/templates",
},
},
},
];
}
}
htl-template-loader provides optional typescript typings.*.htl
If you would like to define that all files export the htl-template-loader functions you can use:
`ts`
declare module "*.htl" {
export const {
render,
renderMain,
getTemplate,
getTemplates,
getTemplateNames,
}: typeof import("htl-template-loader/types");
export default renderMain;
}
This will give you autocomplete and type detection:
`ts`
import { render } from "./demo.html";
console.log(await render({ name: "Alex" }));
Unfortunately the htl-template-loader is not able to extract the typings for a specific template.
However you can define the template parameters by hand:
`ts
import { getTemplate } from "./demo.html";
const greetTemplate = getTemplate<{ name: string }>("greet");
console.log(await greetTemplate({ name: "Alex" }));
`
htl-template-loader allows to define models which can be used inside a template
`html`
${myModel.salutation} ${text}
Define the model for com.foo.core.models.myModel and execute the template:
`ts`
import { render } from "./demo.html";
render(
{ text: "Alex" },
{
models: { "com.foo.core.models.myModel": { salutation: "hi" } },
}
);
htl-template-loader allows to define global variables which can be used inside a template
`html`
${text}
Edit mode
Live mode
Define the data for wcmmode.edit and execute the template:
`ts``
import { render } from "./demo.html";
render(
{ text: "Alex" },
{
globals: { wcmmode: { edit: true } },
}
);
Since 5.0 the changelog can be found here https://github.com/jantimon/htl-template-loader/releases
Old changelog entries can be found here https://github.com/jantimon/htl-template-loader/blob/b47c6d242903f5ab75c2f7f0935a4e2431dafd1d/CHANGELOG.md