Skip to content

backflip/htl-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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"]
      }
    ];
  }
}
  1. Create exemplary template.htl:
<h1 data-sly-use.page="./data">${page.title}</h1>
  1. Create exemplary data.js in same directory:
module.exports = class Data {
  use() {
    return {
      title: "Hello"
    };
  }
};
  1. 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

License

MIT