{"id":16125716,"url":"https://github.com/dy/template-parts","last_synced_at":"2025-03-18T13:30:55.735Z","repository":{"id":65374006,"uuid":"454074099","full_name":"dy/template-parts","owner":"dy","description":"Template Parts ponyfill","archived":false,"fork":false,"pushed_at":"2023-01-25T16:58:30.000Z","size":269,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-20T12:44:36.998Z","etag":null,"topics":["dom-parts","polyfill","ponyfill","template","template-instantiation","template-parts","templates"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-31T16:05:25.000Z","updated_at":"2023-12-17T19:34:49.000Z","dependencies_parsed_at":"2023-01-29T01:45:32.624Z","dependency_job_id":null,"html_url":"https://github.com/dy/template-parts","commit_stats":null,"previous_names":["spectjs/template-parts"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Ftemplate-parts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Ftemplate-parts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Ftemplate-parts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Ftemplate-parts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dy","download_url":"https://codeload.github.com/dy/template-parts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221377393,"owners_count":16808473,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom-parts","polyfill","ponyfill","template","template-instantiation","template-parts","templates"],"created_at":"2024-10-09T21:30:59.092Z","updated_at":"2025-03-18T13:30:55.728Z","avatar_url":"https://github.com/dy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**Deprecation notice**: [@github/template-parts](https://github.com/github/template-parts) is better upkept mainstream implementaion with types.\n\n# template-parts [![test](https://github.com/spectjs/template-parts/actions/workflows/test.yml/badge.svg)](https://github.com/spectjs/template-parts/actions/workflows/test.yml) [![npm version](https://img.shields.io/npm/v/template-parts)](http://npmjs.org/template-parts)\n\n\u003e Compact [template parts](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md#32-template-parts-and-custom-template-process-callback) ponyfill.\n\nDifference from [@github/template-parts](https://github.com/github/template-parts):\n\n- `\u003ctable\u003e\u003c!--{{ data }}--\u003e\u003c/table\u003e` support\u003csup\u003e\u003ca href=\"#tables\"\u003e*\u003c/a\u003e\u003c/sup\u003e ([#24](https://github.com/domenic/template-parts/issues/2)).\n- Standalone vanilla ESM, no tsc/tooling.\n\n\u003c!-- - [`\u003csvg width={{ width }}\u003e`](https://github.com/github/template-parts/issues/26) and other cases fixed. --\u003e\n\n## Usage\n\n```js\nimport { TemplateInstance } from 'template-parts'\n\nlet tpl = new TemplateInstance(templateElement, initParams, processor)\ntpl.update(newParams)\n\n// eg. immediate singleton template:\n// templateElement.replaceWith(tpl)\n```\n\n\u003cdetails id=\"spec-surface\"\u003e\n  \u003csummary\u003eSpec surface\u003c/summary\u003e\n\n```js\ninterface TemplateInstance : DocumentFragment {\n    void update(any state);\n};\n\ncallback TemplateProcessCallback = void (TemplateInstance, sequence\u003cTemplatePart\u003e, any state);\n\ndictionary TemplateProcessor {\n    TemplateProcessCallback processCallback;\n    TemplateProcessCallback? createCallback;\n};\n\ninterface TemplatePart {\n    readonly attribute DOMString expression;\n    attribute DOMString? value;\n};\n\ninterface AttributeTemplatePart : TemplatePart {\n    readonly attribute Element element;\n    readonly attribute DOMString attributeName;\n    readonly attribute DOMString attributeNamespace;\n    attribute boolean booleanValue;\n};\n\ninterface NodeTemplatePart : TemplatePart {\n    readonly attribute ContainerNode parentNode;\n    readonly attribute Node? previousSibling;\n    readonly attribute Node? nextSibling;\n    [NewObject] readonly NodeList replacementNodes;\n    void replace((Node or DOMString)... nodes);\n    void replaceHTML(DOMString html);\n};\n\ninterface InnerTemplatePart : NodeTemplatePart {\n    HTMLTemplateElement template;\n    attribute DOMString directive;\n};\n```\n\u003c/details\u003e\n\n\n### Tables\n\nDue to HTML quirk in table parsing, table fields should be wrapped into comment:\n\n```html\n\u003ctable\u003e\n  \u003c!--{{ thead }}--\u003e\n  \u003ctbody\u003e\n    \u003c!--{{ rows }}--\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\n## InnerTemplatePart\n\n_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.\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ctemplate directive=\"if\" expression=\"isActive\"\u003e{{x}}\u003c/template\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## processor\n\nDefault processor is _property identity, boolean attribute or function_:\n\n```js\nconst el = document.createElement('template')\nel.innerHTML = `\u003cdiv x={{x}} hidden={{hidden}} onclick={{onclick}}\u003e\u003c/div\u003e`\n\nconst tpl = new TemplateInstance(el, { x: 'Hello', hidden: false, onclick: () =\u003e {} })\nel.getAttribute('x') // 'Hello'\nel.hasAttribute('hidden') // false\nel.onclick // function\n```\n\n_Template Parts_ processor is interoperable with any standard processor, eg. [github/template-parts](https://github.com/github/template-parts).\n\n## See also\n\n* [templize](https://github.com/spectjs/templize) − elaborate expressions and reactive props processor for template-parts.\n\n## Alternatives\n\n* [@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.\n* [template-extensions](https://github.com/luwes/template-extensions) – friendly extended adoption of template parts. \n* [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.\n* [PolymerLabs/template-instantiation](https://github.com/PolymerLabs/template-instantiation) − implementation from Google with TemplateAssembly, TemplateRule and other extensions.\n* [template-instance](https://github.com/ar2r13/TemplateInstance)\n* [template-instantiation-prollyfill](https://www.npmjs.com/package/template-instantiation-prollyfill)\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://github.com/krsnzd/license\"\u003e🕉\u003c/a\u003e\u003cp\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdy%2Ftemplate-parts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdy%2Ftemplate-parts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdy%2Ftemplate-parts/lists"}