Render across <template> element boundaries

[seanpdoyle]

Take, for example, a <template> that nests other <template> elements:

<template>
  <template>
    <div>{{x}}</div>
  </template>
</template>

<script type="module">
  import { TemplateInstance } from "@github/template-parts"

  const template = document.querySelector("template")
  const instance = new TemplateInstance(template, { x: "Hello world" })

  document.body.append(instance)
</script>

Prior to this change, the inner <template> element (and its child <div>) are unchanged and still render {{x}} as a text node.

This change aims to bring support for templating across <template> boundaries. To achieve this behavior, add explicit HTMLTemplateElement handling to the tree walking. When handling a <template> element, walk its content DocumentFragment, treating variables in the same as way as the outer <template> element.

Without this support, explicit iteration and replacement is necessary for each boundary:

const values = { x: "Hello world" }
const template = document.querySelector("template")
const instance = new TemplateInstance(template, values)

for (const nestedTemplate of instance.querySelectorAll("template")) {
  nestedTemplate.content.replaceChildren(new TemplateInstance(nestedTemplate, values))
}

[keithamus]

LGTM 👍

[keithamus]

@seanpdoyle the test runner is being a bit wonky, but I pulled locally (and rebased with main to get the updates) and it looks like the test is failing.

Would you kindly rebase this with main and try looking at the test failure? Thanks!

[seanpdoyle]

@keithamus I faced a similar set of failures locally. I was hoping that CI would execute and give me more information.

What steps might I be missing locally to run the suite?

[keithamus]

If you rebase you might find it fixed. I had the issues locally and simply updated all dependencies which got tests working again for me, so I assumed we had a bit of dependency rot.

[seanpdoyle]

@keithamus thank you for the guidance. I was able to successfully pass the suite locally. Could you enable CI?

[seanpdoyle]

@keithamus thank you for merging this and including it as part of the v0.6.4 release!

I'm trying to install that release from npm, but the latest available release is v0.5.4.

Is that deliberate? If not, are you able to release v0.6.4 to npm?