{"id":20129377,"url":"https://github.com/ryanmorr/templar","last_synced_at":"2025-04-09T16:10:22.011Z","repository":{"id":11634654,"uuid":"70187518","full_name":"ryanmorr/templar","owner":"ryanmorr","description":"A simple and versatile DOM templating engine","archived":false,"fork":false,"pushed_at":"2024-01-19T19:12:48.000Z","size":1386,"stargazers_count":5,"open_issues_count":15,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-14T13:07:30.905Z","etag":null,"topics":["dom","javascript","template","ui"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryanmorr.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-06T19:47:25.000Z","updated_at":"2024-01-18T21:41:02.000Z","dependencies_parsed_at":"2024-11-13T20:45:33.916Z","dependency_job_id":null,"html_url":"https://github.com/ryanmorr/templar","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanmorr%2Ftemplar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanmorr%2Ftemplar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanmorr%2Ftemplar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanmorr%2Ftemplar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanmorr","download_url":"https://codeload.github.com/ryanmorr/templar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065283,"owners_count":21041871,"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","javascript","template","ui"],"created_at":"2024-11-13T20:33:59.051Z","updated_at":"2025-04-09T16:10:21.994Z","avatar_url":"https://github.com/ryanmorr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# templar\n\n[![Version Badge][version-image]][project-url]\n[![License][license-image]][license-url]\n[![Build Status][build-image]][build-url]\n\n\u003e A simple and versatile DOM templating engine\n\n## Install\n\nDownload the [CJS](https://github.com/ryanmorr/templar/raw/master/dist/cjs/templar.js), [ESM](https://github.com/ryanmorr/templar/raw/master/dist/esm/templar.js), [UMD](https://github.com/ryanmorr/templar/raw/master/dist/umd/templar.js) versions or install via NPM:\n\n``` sh\nnpm install @ryanmorr/templar\n```\n\n## Usage\n\nTemplate syntax is similar to your standard mustache templates with double curly braces (`{{` `}}`) serving as delimiters to internal logic. The tokens found between the delimiters are the reference point for the value of its place in the template:\n\n```javascript\nimport templar from '@ryanmorr/templar';\n\n// Create a new template\nconst tpl = templar('\u003cdiv id=\"{{id}}\"\u003e{{content}}\u003c/div\u003e');\n\n// Set the id and content\ntpl.set('id', 'foo');\ntpl.set('content', 'bar');\n\n// Append to the DOM\ntpl.mount(document.body);\n```\n\n## API\n\n### `templar(tpl, data?)`\n\nCreate a new template by providing a template string and optionally provide a data object to set default values:\n\n```javascript\nconst tpl = templar('\u003cdiv id=\"{{foo}}\"\u003e{{bar}}\u003c/div\u003e', {\n    foo: 'abc',\n    bar: 123\n});\n```\n\n------\n\n### `set(token, value?)`\n\nSet the value of a token and trigger the template to dynamically update with the new value. You can also provide an object literal to set multiple tokens at once:\n\n```javascript\nconst tpl = templar('\u003cdiv id=\"{{foo}}\"\u003e{{bar}} {{baz}}\u003c/div\u003e');\n\n// Set a single value\ntpl.set('foo', 'aaa');\n\n// Set multiple values\ntpl.set({\n    bar: 'bbb',\n    baz: 'ccc'\n});\n```\n\nSupports basic interpolation with strings and numbers:\n\n```javascript\nconst tpl = templar('\u003cdiv id=\"{{foo}}\"\u003e{{bar}}\u003c/div\u003e');\n\ntpl.set('foo', 'aaa');\ntpl.set('bar', 123);\n```\n\nDOM nodes are also supported, including text nodes, elements, document fragments, and HTML strings:\n\n```javascript\nconst tpl = templar('\u003cdiv\u003e{{foo}} {{bar}} {{baz}}\u003c/div\u003e');\n\ntpl.set('foo', document.createElement('div'));\ntpl.set('bar', document.createDocumentFragment());\ntpl.set('baz', '\u003cstrong\u003ebold\u003c/strong\u003e');\n```\n\nSet CSS styles as a string or object:\n\n```javascript\nconst tpl = templar('\u003cdiv style=\"{{style}}\"\u003e\u003c/div\u003e');\n\ntpl.set('style', 'width: 10px; height: 10px');\ntpl.set('style', {width: '20px', height: '20px'});\n```\n\nAdd and remove event listeners:\n\n```javascript\nconst tpl = templar('\u003cbutton onclick={{onClick}}\u003eClick Me!\u003c/button\u003e');\n\ntpl.set('onClick', (e) =\u003e {\n    // Handle the click event\n});\n```\n\nYou can even nest templates within templates:\n\n```javascript\nconst div = templar('\u003cdiv\u003e{{content}}\u003c/div\u003e');\nconst em = templar('\u003cem\u003e{{text}}\u003c/em\u003e');\n\ndiv.set('foo', em);\nem.set('text', 'some text');\n```\n\nBy default, HTML strings are automatically parsed into DOM nodes. To prevent this and escape HTML characters instead, prefix a token with an ampersand (\u0026):\n\n```javascript\nconst tpl = templar('\u003cdiv\u003e{{\u0026foo}}\u003c/div\u003e');\n\ntpl.set('foo', '\u003ci\u003efoo\u003c/i\u003e'); //=\u003e \u0026lt;i\u0026gt;foo\u0026lt;/i\u0026gt;\n```\n\n------\n\n### `get(token)`\n\nGet the current value of a token:\n\n```javascript\nconst tpl = templar('\u003cdiv id=\"{{foo}}\"\u003e\u003c/div\u003e', {foo: 123});\n\ntpl.get('foo'); //=\u003e 123\n```\n\n------\n\n### `mount(parent)`\n\nAppend the template to an element:\n\n```javascript\nconst tpl = templar('\u003cdiv\u003e{{foo}}\u003c/div\u003e');\n\ntpl.mount(document.body);\n```\n\n------\n\n### `unmount()`\n\nRemove the template from its parent element:\n\n```javascript\nconst tpl = templar('\u003cdiv\u003e{{foo}}\u003c/div\u003e');\n\ntpl.mount(document.body);\ntpl.unmount();\n```\n\n------\n\n### `on(name, callback)`\n\nSubcribe a callback function to a custom event (mount, unmount, change, attributechange). Returns a function capable of removing the listener.\n\n```javascript\nconst tpl = templar('\u003cdiv\u003e{{foo}}\u003c/div\u003e');\n\ntpl.on('mount', (element) =\u003e {\n    // Executed when the template is appended to an element\n});\n\ntpl.on('unmount', () =\u003e {\n    // Executed when the template is removed from an element\n});\n\ntpl.on('change', (element) =\u003e {\n    // Executed when the contents of an element are updated\n});\n\nconst off = tpl.on('attributechange', (element, oldValue, newValue) =\u003e {\n    // Executed when an attribute changes\n    off(); // Remove custom event listener\n});\n```\n\n## License\n\nThis project is dedicated to the public domain as described by the [Unlicense](http://unlicense.org/).\n\n[project-url]: https://github.com/ryanmorr/templar\n[version-image]: https://img.shields.io/github/package-json/v/ryanmorr/templar?color=blue\u0026style=flat-square\n[build-url]: https://github.com/ryanmorr/templar/actions\n[build-image]: https://img.shields.io/github/actions/workflow/status/ryanmorr/templar/node.js.yml?style=flat-square\n[license-image]: https://img.shields.io/github/license/ryanmorr/templar?color=blue\u0026style=flat-square\n[license-url]: UNLICENSE","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanmorr%2Ftemplar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanmorr%2Ftemplar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanmorr%2Ftemplar/lists"}