feat(compiler): add support for external templates

[tripodsan]

first draft to implement #217

[github-actions]

This PR will trigger a minor release when merged.

[jantimon]

This looks really cool 👍

Just one small thing the JSPureTemplate has $scriptId which isn't used at all:

htlengine/src/compiler/JSPureTemplate.js

Lines 14 to 16 in a463b95

	module.exports = function main(runtime, $scriptId) {
	const $ = {

One bug I found is if a template file is using itself:

<template data-sly-template.headline="${@ text}">
  <sly data-sly-call="${headlineInner @ body=text}"/>
</template>

<template data-sly-template.headlineInner="${@ body}">
  <p>${body}</p>
</template>

Which generates:

  $.template('cdc516118141547c6c395bd7eaa740a3', 'headline', function* _template_cdc516118141547c6c395bd7eaa740a3_headline(args) { 
    const text = args[1]['text'] || '';
    let $t, $n = args[0];
    $.dom.text($n,"\n  ");
    const myModel = yield $.use($use_0, {});
    $.dom.text($n,"\n  ");
    $t = $.dom.create("h1",false,false);
    $.dom.text($n,"\n  ");
    yield $.call(headlineInner, [$n, {"body": text, }]); // <-- 🐛 headlineInner is not defined
    $.dom.text($n,"\n");
  });

  $.template('cdc516118141547c6c395bd7eaa740a3', 'headlineInner', function* _template_cdc516118141547c6c395bd7eaa740a3_headlineInner(args) { 
    const body = args[1]['body'] || '';
    let $t, $n = args[0];
    $.dom.text($n,"\n  ");
    $t = $.dom.create("p",false,false);
    $n = $.dom.push($n,$t);
    const var_1 = yield $.xss(body, "html");
    $.dom.append($n, var_1);
    $n = $.dom.pop($n);
    $.dom.text($n,"\n");
  });

[tripodsan]

One bug I found is if a template file is using itself:

this is indeed a problem... I'll see if we can fix it here or if we should create a follow up bug.

[tripodsan]

Just one small thing the JSPureTemplate has $scriptId which isn't used at all:

since it's not needed anymore, we could also use the default code template again....

[jantimon]

would it be possible to replace this part with const $ = runtime or const $ = runtime.templateHelpers()?

[tripodsan]

I guess :-)

[tripodsan]

let's tackle this in a separate PR

[codecov]

Codecov Report

Merging #219 into master will increase coverage by 0.30%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master     #219      +/-   ##
==========================================
+ Coverage   83.75%   84.06%   +0.30%     
==========================================
  Files          87       89       +2     
  Lines        3847     3909      +62     
==========================================
+ Hits         3222     3286      +64     
+ Misses        625      623       -2     

Impacted Files	Coverage Δ
src/compiler/Compiler.js	99.39% <100.00%> (+1.29%)	⬆️
src/compiler/DomHandler.js	100.00% <100.00%> (ø)
src/compiler/ExternalTemplateLoader.js	100.00% <100.00%> (ø)
src/compiler/JSCodeGenVisitor.js	98.33% <100.00%> (+0.41%)	⬆️
src/parser/commands/ExternalCode.js	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 998824a...4a0538e. Read the comment docs.

[tripodsan]

@jantimon Here, I added a test for a template that uses a template that is later defined in the same script. and it works now :-)

[jantimon]

Really cool 👍

[adobe-bot]

🎉 This PR is included in version 5.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀