# htl-loader

> Webpack loader for HTL/Sightly templates

Latest version **4.1.0** (published 2022-03-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install htl-loader
pnpm add htl-loader
yarn add htl-loader
bun add htl-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.1.0 |
| Published | 2022-03-13 |
| First published | 2019-09-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Thomas Jaggi @backflip |
| Maintainers | backflip |
| Keywords | htl, sightly |

## Links

- npm: https://www.npmjs.com/package/htl-loader
- Repository: https://github.com/backflip/htl-loader
- Homepage: https://github.com/backflip/htl-loader#readme
- Issues: https://github.com/backflip/htl-loader/issues
- npm.io page: https://npm.io/package/htl-loader

## Recent versions

- 4.1.0 (latest) — 2022-03-13
- 4.0.0 — 2022-01-03
- 3.0.2 — 2020-08-16
- 3.0.1 — 2020-08-14
- 3.0.0 — 2020-08-14
- 2.1.0 — 2020-05-08
- 2.0.1 — 2020-02-26
- 2.0.0 — 2020-02-22
- 1.1.0 — 2019-09-25
- 1.0.1 — 2019-09-20
- 1.0.0 — 2019-09-20

## README

# htl-loader

Webpack loader for HTL/Sightly templates. Based on [`@adobe/htlengine`](https://www.npmjs.com/package/@adobe/htlengine).

## Installation

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

## Usage

See [./example](./example).

1. Add loader to `webpack.config.js`:

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

2. Create exemplary `template.htl`:

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

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";
// <h1>Hello</h1>

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

## Advanced

### Configuration options

| Name                                                      | Default | Description                                               |
| :-------------------------------------------------------- | :------ | :-------------------------------------------------------- |
| [`globalName`](./test/build.test.js#L77-L86)              | `htl`   | Name of the runtime global variable.                      |
| `transformSource`                                         | `null`  | Function invoked before compiling the htl.                |
| `transformCompiled`                                       | `null`  | Function invoked after compiling the htl.                 |
| [`data`](./test/build.test.js#L61-L69)                    | `{}`    | Runtime global.                                           |
| [`includeRuntime`](./test/build.test.js#L96-L107)         | `true`  | Include runtime and evaluate template during compilation. |
| [`runtimeVars`](./test/build.test.js#L109-L124)           | `[]`    | Add (global) runtime variable names during compilation.   |
| [`moduleImportGenerator`](./test/build.test.js#L126-L145) | `null`  | Use custom module import generator.                       |
| [`scriptResolver`](./test/build.test.js#L81-L98)          | `null`  | Use custom script resolver.                               |
| [`templateLoader`](./test/build.test.js#L100-L119)        | `null`  | Use custom template loader.                               |

### Example

```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(
                    /<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](https://github.com/tripodsan)

## License

[MIT](http://www.opensource.org/licenses/mit-license)

---
_Source: https://npm.io/package/htl-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._