https://github.com/dy/template-parts
Template Parts ponyfill
https://github.com/dy/template-parts
dom-parts polyfill ponyfill template template-instantiation template-parts templates
Last synced: about 1 year ago
JSON representation
Template Parts ponyfill
- Host: GitHub
- URL: https://github.com/dy/template-parts
- Owner: dy
- Created: 2022-01-31T16:05:25.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-01-25T16:58:30.000Z (over 3 years ago)
- Last Synced: 2024-10-20T12:44:36.998Z (over 1 year ago)
- Topics: dom-parts, polyfill, ponyfill, template, template-instantiation, template-parts, templates
- Language: JavaScript
- Homepage:
- Size: 263 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
**Deprecation notice**: [@github/template-parts](https://github.com/github/template-parts) is better upkept mainstream implementaion with types.
# template-parts [](https://github.com/spectjs/template-parts/actions/workflows/test.yml) [](http://npmjs.org/template-parts)
> Compact [template parts](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md#32-template-parts-and-custom-template-process-callback) ponyfill.
Difference from [@github/template-parts](https://github.com/github/template-parts):
- `` support* ([#24](https://github.com/domenic/template-parts/issues/2)).
- Standalone vanilla ESM, no tsc/tooling.
## Usage
```js
import { TemplateInstance } from 'template-parts'
let tpl = new TemplateInstance(templateElement, initParams, processor)
tpl.update(newParams)
// eg. immediate singleton template:
// templateElement.replaceWith(tpl)
```
Spec surface
```js
interface TemplateInstance : DocumentFragment {
void update(any state);
};
callback TemplateProcessCallback = void (TemplateInstance, sequence, 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:
```html
```
## InnerTemplatePart
_Template parts_ recognize inner templates as [_InnerTemplatePart_](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md#33-conditionals-and-loops-using-nested-templates), expecting `directive` and `expression` attributes.
```html
{{x}}
```
## processor
Default processor is _property identity, boolean attribute or function_:
```js
const el = document.createElement('template')
el.innerHTML = `
`
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](https://github.com/github/template-parts).
## See also
* [templize](https://github.com/spectjs/templize) − elaborate expressions and reactive props processor for template-parts.
## Alternatives
* [@github/template-parts](https://github.com/github/template-parts) − viable Template Parts implementation, doesn't closely follow spec in secondary details, but provides reliable ground.
* [template-extensions](https://github.com/luwes/template-extensions) – friendly extended adoption of template parts.
* [template-instantiation-polyfill](https://github.com/bennypowers/template-instantiation-polyfill#readme) − closely follows the Template Instantiation spec algorithm, but [is not recommended](https://github.com/bennypowers/template-instantiation-polyfill/pull/2#issuecomment-1004110993) by author.
* [PolymerLabs/template-instantiation](https://github.com/PolymerLabs/template-instantiation) − implementation from Google with TemplateAssembly, TemplateRule and other extensions.
* [template-instance](https://github.com/ar2r13/TemplateInstance)
* [template-instantiation-prollyfill](https://www.npmjs.com/package/template-instantiation-prollyfill)