dy / template-parts

Template Parts ponyfill

template-parts

Compact template parts ponyfill.

Difference from @github/template-parts:

• InnerTemplatePart support.
• More complete spec API surface.
• <table><!--{{ data }}--></table> support^* (#24).
• Single vanilla ESM, no tooling.

Usage

import { TemplateInstance } from 'template-parts'

let tpl = new TemplateInstance(templateElement, initParams, processor)
tpl.update(newParams)

// eg. immediate singleton template:
// templateElement.replaceWith(tpl)

Spec surface

interface TemplateInstance : DocumentFragment {
    void update(any state);
};

callback TemplateProcessCallback = void (TemplateInstance, sequence<TemplatePart>, any state);

dictionary TemplateProcessor {
    TemplateProcessCallback processCallback;
    TemplateProcessCallback? createCallback;
};

interface TemplatePart {
    readonly attribute DOMString expression;
    attribute DOMString? value;
};

interface AttributeTemplatePart : TemplatePart {
    readonly attribute Element element;
    readonly attribute DOMString attributeName;
    readonly attribute DOMString attributeNamespace;
    attribute boolean booleanValue;
};

interface NodeTemplatePart : TemplatePart {
    readonly attribute ContainerNode parentNode;
    readonly attribute Node? previousSibling;
    readonly attribute Node? nextSibling;
    [NewObject] readonly NodeList replacementNodes;
    void replace((Node or DOMString)... nodes);
    void replaceHTML(DOMString html);
};

interface InnerTemplatePart : NodeTemplatePart {
    HTMLTemplateElement template;
    attribute DOMString directive;
};

Tables

Due to HTML quirk in table parsing, table fields should be wrapped into comment:

<table>
  <!--{{ thead }}-->
  <tbody>
    <!--{{ rows }}-->
  </tbody>
</table>

InnerTemplatePart

Template parts recognize inner templates as InnerTemplatePart, expecting directive and expression attributes.

<template>
  <div>
    <template directive="if" expression="isActive">{{x}}</template>
  </div>
</template>

processor

Default processor is property identity, boolean attribute or function:

const el = document.createElement('template')
el.innerHTML = `<div x={{x}} hidden={{hidden}} onclick={{onclick}}></div>`

const tpl = new TemplateInstance(el, { x: 'Hello', hidden: false, onclick: () => {} })
el.getAttribute('x') // 'Hello'
el.hasAttribute('hidden') // false
el.onclick // function

Template Parts processor is interoperable with any standard processor, eg. github/template-parts.

See also

• templize − elaborate expressions and reactive props processor for template-parts.

Alternatives

• @github/template-parts − viable Template Parts implementation, doesn't closely follow spec in secondary details, but provides reliable ground.
• template-extensions – fiendly extended adoption of template parts.
• template-instantiation-polyfill − closely follows the Template Instantiation spec algorithm, but is not recommended by author.
• PolymerLabs/template-instantiation − implementation from Google with TemplateAssembly, TemplateRule and other extensions.
• template-instance
• template-instantiation-prollyfill

🕉