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:

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

2. Create exemplary template.htl:

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

3. Create exemplary data.js in same directory:

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

4. 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")
            }
          }
        ]
      }
    ];
  }
}

Contributors

• tripodsan

License

MIT