Htl-loader NPM

htl-loader

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

Installation

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

Usage

Add loader to webpack.config.js:

{
  module: {
    rules: [
      {
        test: /\.htl$/,
        use: ["htl-loader"]
      }
    ];
  }
}

Create exemplary template.htl:

<h1 data-sly-use.page="./data">${page.title}</h1>

Create exemplary data.js in same directory:

module.exports = class Data {
  use() {
    return {
      title: "Hello"
    };
  }
};

Import and run compiled template in your JavaScript:

import html from "./template.htl";
// <h1>Hello</h1>

document.body.insertAdjacentHTML("beforeend", html);

Advanced

Configuration options

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.

Example

{
  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(
                    /<sly[^>]+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")
            }
          }
        ]
      }
    ];
  }
}