htl-to-js 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 htl-to-js contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,489 @@
+# htl-to-js
+
+[![npm version](https://img.shields.io/npm/v/htl-to-js.svg)](https://www.npmjs.com/package/htl-to-js)
+[![license](https://img.shields.io/npm/l/htl-to-js.svg)](./LICENSE)
+
+Webpack loader and CLI that transpiles AEM HTL (Sightly) templates into JavaScript functions returning template literals.
+
+```js
+import { createAccordion } from '../../jcr_root/apps/mysite/components/accordion/accordion.html';
+```
+
+---
+
+## Installation
+
+```bash
+npm install --save-dev htl-to-js
+```
+
+Requires Node.js >= 18.
+
+---
+
+## Storybook setup (webpack5)
+
+Add the loader rule in `.storybook/main.js`. Since Storybook config files are often ESM, use `createRequire` to resolve the loader path:
+
+```js
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+
+const config = {
+  // ...
+  async webpackFinal(config) {
+    config.module.rules.push({
+      test: /\.html$/,
+      include: /jcr_root[\\/]apps/,   // only AEM component HTML
+      use: require.resolve('htl-to-js/loader'),
+    });
+    return config;
+  }
+};
+
+export default config;
+```
+
+If your Storybook config uses CommonJS:
+
+```js
+module.exports = {
+  async webpackFinal(config) {
+    config.module.rules.push({
+      test: /\.html$/,
+      include: /jcr_root[\\/]apps/,
+      use: require.resolve('htl-to-js/loader'),
+    });
+    return config;
+  }
+};
+```
+
+---
+
+## HTL directive support
+
+| Directive | Behavior |
+|---|---|
+| `data-sly-use.name="..."` | Becomes a function parameter |
+| `data-sly-test="${cond}"` | Conditional rendering via ternary |
+| `data-sly-test.varName="${cond}"` | Conditional + assigns result to variable |
+| `data-sly-repeat.item="${list}"` | Loop: repeats the **whole element** per item |
+| `data-sly-list.item="${list}"` | Loop: outer tag rendered once, **inner content** repeated |
+| `data-sly-element="${expr}"` | Dynamic tag name (falls back to original tag) |
+| `data-sly-unwrap` / `data-sly-unwrap="${cond}"` | Strips wrapper tag (always or conditionally) |
+| `data-sly-set.varName="${expr}"` | Local variable declaration |
+| `data-sly-text="${expr}"` | Replaces element inner content with expression |
+| `data-sly-attribute.name="${expr}"` | Dynamic named attribute (null omits, true → valueless) |
+| `data-sly-attribute="${obj}"` | Object spread as multiple attributes |
+| `data-sly-template.name="${ @ params }"` | Named export function |
+| `data-sly-call="${tmpl @ p=v}"` | Invokes a template function |
+| `data-sly-resource="${expr}"` | Slot via `_includes` map |
+| `data-sly-include="./file.html"` | Delegates to `_includes` map |
+| `<sly>` | Transparent wrapper — only children are rendered |
+
+Both `data-sly-repeat` and `data-sly-list` support bare forms (without `.varName`) that default to `item` as the iteration variable. They also provide a `${itemList}` status object with `index`, `count`, `first`, `last`, `odd`, and `even` properties.
+
+### Expression conversions
+
+| HTL | Generated JS |
+|---|---|
+| `${expr @ context='html'}` | `${expr}` (context options stripped) |
+| `${'string' @ i18n}` | `${_i18n?.['string'] ?? 'string'}` (dictionary lookup) |
+| `${list.size}` | `${list.length}` |
+| `${obj.jcr:title}` | `${obj?.['jcr:title']}` |
+| `${tags @ join=', '}` | `${(tags).join(', ')}` |
+| `${'pattern {0}/{1}' @ format=[a, b]}` | `${a + '/' + b}` |
+| `${key in obj}` | `${(obj && key in obj)}` (null-safe) |
+
+### HTML escaping
+
+Attribute values are automatically escaped via the `_htlAttr` helper:
+- `&` → `&amp;`, `<` → `&lt;`, `>` → `&gt;`, `"` → `&quot;`
+- Object values are serialized with `JSON.stringify`
+- `null`/`undefined` produce an empty string
+
+Dynamic named attributes (`data-sly-attribute.name`) use `_htlDynAttr`:
+- `null`/`false` → attribute omitted entirely
+- `true` → valueless boolean attribute (e.g. `disabled`)
+- Other values → `name="escaped-value"`
+
+### AEM implicit objects
+
+The following AEM implicit objects are automatically detected and added as optional parameters with safe defaults:
+
+| Object | Default |
+|---|---|
+| `wcmmode` | `{ edit: false, disabled: true, preview: false }` |
+| `properties` | `{}` |
+| `pageProperties` | `{}` |
+| `inheritedPageProperties` | `{}` |
+| `component` | `{}` |
+| `currentDesign` | `{}` |
+| `currentStyle` | `{}` |
+| `currentPage` | `{}` |
+| `resource` | `{}` |
+| `model` | `{}` |
+| `_includes` | `{}` |
+| `_i18n` | `{}` |
+| `request` | `{ requestPathInfo: { selectorString: '', suffix: '', resourcePath: '' }, contextPath: '' }` |
+
+Variables declared via `data-sly-use.X` are always included as parameters. Any other free variables referenced in directive expressions are also detected and added as parameters with `{}` defaults.
+
+### Automatic attribute stripping
+
+The following AEM author-mode and analytics attributes are stripped by default:
+
+- `data-cmp-data-layer` — analytics data layer JSON
+- `data-placeholder-text` — author mode placeholder
+- `data-panelcontainer` — author mode panel container
+- `data-component-name` — AEM component tracking
+- `data-region-id` — analytics region tracking
+- `data-emptytext` — author mode empty text
+
+> **Note:** `data-cmp-hook-*` attributes are **not** stripped by default because the AEM Core Components site JS uses them at runtime.
+
+### Other features
+
+- **Void elements** (`<br>`, `<img>`, `<input>`, etc.) are rendered as self-closing tags
+- **HTL block comments** (`<!--/* ... */-->`) are stripped from output
+- **Regular HTML comments** (`<!-- ... -->`) are preserved
+- **Self-closing `<sly/>`** is expanded automatically
+- **camelCase variable names** are preserved through parse5's lowercasing
+- **Reserved words** (`class`, `for`) are escaped to `_class`, `_for` in generated JS
+
+---
+
+## Generated output
+
+Given `accordion.html`:
+
+```html
+<div data-sly-use.accordion="com.example.Accordion"
+     class="cmp-accordion ${properties.theme}"
+     id="${accordion.id}">
+  <div data-sly-repeat.item="${accordion.items}"
+       data-sly-test="${accordion.items.size > 0}">
+    <span>${item.title}</span>
+  </div>
+</div>
+```
+
+The loader generates:
+
+```js
+// AUTO-GENERATED from accordion.html — DO NOT EDIT
+
+const _htlAttr = (v) => v == null ? '' : (typeof v === 'object' ? JSON.stringify(v).replace(/"/g, '&quot;') : String(v).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'));
+const _htlDynAttr = (name, val) => { ... };
+const _htlSpreadAttrs = (obj) => { ... };
+
+const createAccordion = ({ accordion = {}, properties = {} } = {}) => {
+  return /* html */`<div class="cmp-accordion ${_htlAttr(properties?.theme)}" id="${_htlAttr(accordion?.id)}">${(accordion?.items?.length > 0) ? `${((accordion?.items) || []).map((item, _i, _arr) => { if (item == null) return ''; const itemList = { index: _i, count: _i + 1, first: _i === 0, last: _i === _arr.length - 1, odd: (_i + 1) % 2 !== 0, even: (_i + 1) % 2 === 0 }; return `<div><span>${(item?.title) ?? ''}</span></div>`; }).join('')}` : ''}</div>`;
+};
+module.exports = { createAccordion };
+```
+
+### Named templates (`data-sly-template`)
+
+Files that define named templates generate one export per template:
+
+```html
+<!-- template/default.html -->
+<template data-sly-template.default="${ @ model }">
+  <a class="template" href="${model.url}">
+    <h3>${model.title}</h3>
+  </a>
+</template>
+```
+
+Generates:
+
+```js
+const createDefault = ({ model = {} } = {}) => {
+  return /* html */`<a class="template" href="${_htlAttr(model?.url)}">
+    <h3>${(model?.title) ?? ''}</h3>
+  </a>`;
+};
+module.exports = { createDefault };
+```
+
+---
+
+## `data-sly-resource` (slots)
+
+`data-sly-resource` loads a child JCR node at runtime in AEM — there is no equivalent in Storybook. The loader converts it to an `_includes` slot:
+
+```html
+<!-- HTL -->
+<sly data-sly-resource="${'header'}"></sly>
+
+<!-- With @path fallback -->
+<sly data-sly-resource="${@ path=model.path}"></sly>
+```
+
+```js
+// Generated
+${_includes?.['header']?.() ?? ''}
+${_includes?.[model?.path]?.() ?? ''}
+```
+
+Pass content via `_includes` in your story args:
+
+```js
+export const Default = {
+  args: {
+    _includes: {
+      header: () => '<nav>Navigation</nav>',
+    }
+  }
+}
+```
+
+---
+
+## `data-sly-call`
+
+Calls a named template passing parameters. The binding declared via `data-sly-use` becomes a function parameter — pass the imported template module as its value.
+
+```html
+<!-- HTL -->
+<sly data-sly-use.template="default.html"
+     data-sly-call="${template.default @ model=item}"></sly>
+```
+
+Generated:
+
+```js
+${require('./default.html').createDefault?.({ model: item, _includes }) ?? ''}
+```
+
+When the host element is not `<sly>`, the call output is wrapped in that element:
+
+```html
+<div class="wrapper" data-sly-call="${myFn @ text='Hi'}"></div>
+```
+
+```js
+<div class="wrapper">${myFn?.({ text: 'Hi', _includes }) ?? ''}</div>
+```
+
+In the story, pass the imported template function:
+
+```js
+import { createDefault } from '../default.html';
+
+export const Default = {
+  args: {
+    template: { default: createDefault },
+    item: { title: 'Card Title', url: '/path' },
+  }
+}
+```
+
+---
+
+## `data-sly-include`
+
+Includes another HTL file at runtime. The loader generates a slot in the `_includes` map.
+
+```html
+<!-- Literal path -->
+<sly data-sly-include="./header.html"></sly>
+
+<!-- Dynamic path -->
+<sly data-sly-include="${model.templatePath}"></sly>
+```
+
+Generated:
+
+```js
+// Literal path
+${_includes['./header.html']?.() ?? ''}
+
+// Dynamic path
+${_includes[model?.templatePath]?.() ?? ''}
+```
+
+In the story:
+
+```js
+import { createHeader } from '../header.html';
+
+export const Default = {
+  args: {
+    _includes: {
+      './header.html': createHeader,
+      './footer.html': () => '<footer>Footer content</footer>',
+    }
+  }
+}
+```
+
+---
+
+## i18n (internationalization)
+
+HTL expressions with `@ i18n` are converted into runtime dictionary lookups. Pass a JSON dictionary via the `_i18n` parameter to translate strings:
+
+```html
+<!-- HTL -->
+<span>${'Read more' @ i18n}</span>
+<a title="${'Go home' @ i18n}" href="/">...</a>
+```
+
+Generated:
+
+```js
+<span>${_i18n?.['Read more'] ?? 'Read more'}</span>
+<a title="${_htlAttr(_i18n?.['Go home'] ?? 'Go home')}" href="/">...</a>
+```
+
+In the story, pass the dictionary as `_i18n`:
+
+```js
+import dict from './i18n/es.json';
+
+export const Spanish = {
+  args: {
+    _i18n: dict,
+  }
+}
+```
+
+Example `i18n/es.json`:
+
+```json
+{
+  "Read more": "Leer más",
+  "Go home": "Ir al inicio",
+  "Title": "Título"
+}
+```
+
+When no dictionary is passed (or when a key is missing), the original string is used as fallback.
+
+---
+
+## `data-sly-repeat` vs `data-sly-list`
+
+Both iterate over a list, but they differ in what gets repeated:
+
+| | `data-sly-repeat` | `data-sly-list` |
+|---|---|---|
+| **Repeats** | The entire host element | Only inner content |
+| **Outer tag** | Rendered once per item | Rendered once total |
+
+```html
+<!-- repeat: <li> repeated per item -->
+<li data-sly-repeat.item="${items}">${item}</li>
+
+<!-- list: <ul> once, <li> repeated per item -->
+<ul data-sly-list.item="${items}"><li>${item}</li></ul>
+```
+
+Both support:
+- Null items are automatically skipped
+- A `${itemList}` status object with `index`, `count`, `first`, `last`, `odd`, `even`
+- Combined `data-sly-test.var` + `data-sly-repeat` on the same element (test var is hoisted before the loop in a scoped IIFE)
+
+---
+
+## Options
+
+Both the `transpile()` function and the webpack loader accept the following options:
+
+### `omitAttrs`
+
+Array of regular expressions matching attribute names to exclude from output.
+
+**Override in webpack loader:**
+
+```js
+config.module.rules.push({
+  test: /\.html$/,
+  include: /jcr_root[\\/]apps/,
+  use: {
+    loader: require.resolve('htl-to-js/loader'),
+    options: {
+      omitAttrs: [
+        /^data-cmp-data-layer$/,
+        /^data-my-custom-attr/,
+      ]
+    }
+  }
+});
+```
+
+Pass `omitAttrs: []` to disable filtering entirely.
+
+### `modelTransforms`
+
+Object mapping use-class patterns to property injections. Enables build-time property merging based on the `data-sly-use` class name.
+
+---
+
+## Programmatic API
+
+```ts
+import { transpile } from 'htl-to-js';
+import fs from 'fs';
+
+const source = fs.readFileSync('accordion.html', 'utf8');
+const jsModule = transpile(source, {
+  filename: 'accordion.html',
+  omitAttrs: [],
+});
+
+console.log(jsModule);
+```
+
+---
+
+## CLI
+
+Generate `.template.js` files alongside their `.html` source:
+
+```bash
+npx htl-gen "src/**/*.html"
+```
+
+Watch mode:
+
+```bash
+npx htl-gen --watch "components/**/*.html"
+```
+
+Output files are placed next to the source:
+```
+accordion.html  →  accordion.template.js
+card/default.html  →  card/default.template.js
+```
+
+---
+
+## Known limitations
+
+- **`data-sly-include` with args** — passing parameters to included files (`@ wcmmode=wcmmode`) is not supported; only the path is used.
+- **`data-sly-call` across files** — the called template must be imported and passed explicitly via args; cross-file resolution at build time is not supported unless the file is declared via `data-sly-use`.
+- **Java expressions** in `data-sly-use` — the class path is ignored; the binding name becomes a function parameter.
+- **`data-sly-use` with `@` defaults** — the default values are extracted as destructuring defaults, but complex expressions are not supported.
+
+---
+
+## Development
+
+Written in TypeScript. Source in `src/`, compiled to `dist/`.
+
+```bash
+npm run build           # compile TypeScript
+npm test                # run 111 Jest tests
+npm run test:watch      # watch mode
+npm run test:coverage   # with coverage
+```
+
+---
+
+## License
+
+[MIT](./LICENSE)

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = require("./transpiler/index");
+const glob_1 = require("glob");
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
+const args = process.argv.slice(2);
+if (!args.length || args.includes('--help') || args.includes('-h')) {
+    console.log(`
+htl-gen — transpile HTL templates to JS template string functions
+
+Usage:
+  htl-gen <glob>            Transpile matching files once
+  htl-gen --watch <glob>    Watch and re-transpile on changes
+
+Examples:
+  htl-gen "components/**/*.html"
+  htl-gen accordion.html
+  htl-gen --watch "src/**/*.html"
+`);
+    process.exit(0);
+}
+const watchMode = args.includes('--watch') || args.includes('-w');
+const patternArg = args.find(a => !a.startsWith('-'));
+if (!patternArg) {
+    console.error('Error: no glob pattern provided.');
+    process.exit(1);
+}
+const pattern = patternArg;
+function processFile(file) {
+    try {
+        const source = node_fs_1.default.readFileSync(file, 'utf8');
+        const output = (0, index_1.transpile)(source, { filename: file });
+        const outFile = file.replace(/\.html$/, '.template.js');
+        node_fs_1.default.writeFileSync(outFile, output, 'utf8');
+        console.log(`✓  ${node_path_1.default.relative(process.cwd(), file)} → ${node_path_1.default.basename(outFile)}`);
+    }
+    catch (err) {
+        console.error(`✗  ${node_path_1.default.relative(process.cwd(), file)}: ${err.message}`);
+    }
+}
+async function main() {
+    const files = await (0, glob_1.glob)(pattern, { absolute: true });
+    if (!files.length) {
+        console.warn(`No files matched: ${pattern}`);
+        process.exit(0);
+    }
+    for (const file of files)
+        processFile(file);
+    if (watchMode) {
+        console.log(`\nWatching ${files.length} file(s) for changes…\n`);
+        for (const file of files) {
+            node_fs_1.default.watch(file, () => {
+                console.log(`↻  ${node_path_1.default.relative(process.cwd(), file)} changed`);
+                processFile(file);
+            });
+        }
+    }
+}
+main(); // NOSONAR
+//# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { transpile } from './transpiler/index';

package/dist/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transpile = void 0;
+var index_1 = require("./transpiler/index");
+Object.defineProperty(exports, "transpile", { enumerable: true, get: function () { return index_1.transpile; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,4CAA+C;AAAtC,kGAAA,SAAS,OAAA"}

package/dist/loader.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Webpack loader for HTL templates.
+ *
+ * Configuration (webpack.config.js or .storybook/main.js):
+ *
+ *   module: {
+ *     rules: [{
+ *       test: /\.html$/,
+ *       include: /jcr_root[\\/]apps/,
+ *       use: 'htl-to-js/loader',
+ *     }]
+ *   }
+ *
+ * Then in your Storybook stories:
+ *
+ *   import { createAccordion } from '../path/to/accordion.html';
+ */
+declare function htlLoader(this: any, source: string): string;
+export = htlLoader;

package/dist/loader.js

@@ -0,0 +1,32 @@
+"use strict";
+const index_1 = require("./transpiler/index");
+/**
+ * Webpack loader for HTL templates.
+ *
+ * Configuration (webpack.config.js or .storybook/main.js):
+ *
+ *   module: {
+ *     rules: [{
+ *       test: /\.html$/,
+ *       include: /jcr_root[\\/]apps/,
+ *       use: 'htl-to-js/loader',
+ *     }]
+ *   }
+ *
+ * Then in your Storybook stories:
+ *
+ *   import { createAccordion } from '../path/to/accordion.html';
+ */
+function htlLoader(source) {
+    this.cacheable(true);
+    const options = this.getOptions ? this.getOptions() : {};
+    try {
+        return (0, index_1.transpile)(source, { filename: this.resourcePath, ...options });
+    }
+    catch (err) {
+        this.emitError(new Error(`[htl-to-js] ${this.resourcePath}: ${err.message}`));
+        return 'module.exports = {};';
+    }
+}
+module.exports = htlLoader;
+//# sourceMappingURL=loader.js.map

package/dist/loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.js","sourceRoot":"","sources":["../src/loader.ts"],"names":[],"mappings":";AAAA,8CAA+C;AAE/C;;;;;;;;;;;;;;;;GAgBG;AACH,SAAS,SAAS,CAAY,MAAc;IAC1C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAErB,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAEzD,IAAI,CAAC;QACH,OAAO,IAAA,iBAAS,EAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;IACxE,CAAC;IAAC,OAAO,GAAQ,EAAE,CAAC;QAClB,IAAI,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,eAAe,IAAI,CAAC,YAAY,KAAK,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAC9E,OAAO,sBAAsB,CAAC;IAChC,CAAC;AACH,CAAC;AAED,iBAAS,SAAS,CAAC"}