{"id":16187339,"url":"https://github.com/fiatjaf/tempreites","last_synced_at":"2025-10-16T06:38:20.758Z","repository":{"id":12456931,"uuid":"15119222","full_name":"fiatjaf/tempreites","owner":"fiatjaf","description":"One-file semantic DSL-free templates direto da roça for the browser and server.","archived":false,"fork":false,"pushed_at":"2019-08-07T20:30:00.000Z","size":3126,"stargazers_count":34,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-12T13:21:28.284Z","etag":null,"topics":["html","regular-expression","template"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fiatjaf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-12-11T21:18:04.000Z","updated_at":"2024-01-05T14:34:19.000Z","dependencies_parsed_at":"2022-09-01T23:31:37.642Z","dependency_job_id":null,"html_url":"https://github.com/fiatjaf/tempreites","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fiatjaf%2Ftempreites","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fiatjaf%2Ftempreites/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fiatjaf%2Ftempreites/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fiatjaf%2Ftempreites/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fiatjaf","download_url":"https://codeload.github.com/fiatjaf/tempreites/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234152721,"owners_count":18787675,"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":["html","regular-expression","template"],"created_at":"2024-10-10T07:21:30.919Z","updated_at":"2025-09-25T04:32:22.739Z","avatar_url":"https://github.com/fiatjaf.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### [DEMO](http://jsfiddle.net/fiatjaf/mSEZ6/)\n### [Comparison with Mustache](http://jsperf.com/tempreites-vs-mustache/4)\n\n# Tempreites\n\nCrude string templating without any syntax, just semantic HTML.\n\n**Disclaimer**: This is old, slow, buggy and not recommended. It's here just for historical reasons. It was my first public library and published on http://microjs.com/.\n\n## Usage\n\nGet this as a string,\n\n```html\n\u003cdiv id=\"austrianeconomics\"\u003e\n  \u003ch1 class=\"title\"\u003e\u003c/h1\u003e\n  \u003cul id=\"theories\"\u003e\n    \u003cli\u003e\n      \u003cspan class=\"author\"\u003e\u003c/span\u003e\n      \u003cspan\u003e\n        \u003ca class=\"theory\"\n           data-bind-here=\"href\"\n           data-bind-there=\"url\"\u003e\n        \u003c/a\u003e\n      \u003c/span\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\nattach data to it,\n\n```javascript\nvar data = {\n  title: 'Austrian economists and their theories',\n  theories: [\n    { author: 'Menger', theory: 'Subjective value', url: '/subj' },\n    { author: 'Hayek', theory: 'Austrian Business Cycle Theory', url: '/abct' },\n    { author: 'Kirzner', theory: 'Sheer ignorance and entrepreneurship', url: '/entre' },\n  ]\n}\n\ntempreites.render(template, data)\n```\n\nget this back:\n\n```html\n\u003cdiv id=\"austrianeconomics\"\u003e\n  \u003ch1 class=\"title\"\u003e\u003c/h1\u003e\n  \u003cul id=\"theories\"\u003e\n    \u003cli\u003e\n      \u003cspan class=\"author\"\u003eMenger\u003c/span\u003e\n      \u003cspan\u003e\n        \u003ca class=\"theory\"\n           data-bind-here=\"href\"\n           data-bind-there=\"url\"\n           href=\"/subj\"\u003e\n          Subjective value\n        \u003c/a\u003e\n      \u003c/span\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003cspan class=\"author\"\u003eHayek\u003c/span\u003e\n      \u003cspan\u003e\n        \u003ca class=\"theory\"\n           data-bind-here=\"href\"\n           data-bind-there=\"url\"\n           href=\"/abct\"\u003e\n          Austrian Business Cycle Theory\n        \u003c/a\u003e\n      \u003c/span\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003cspan class=\"author\"\u003eKirzner\u003c/span\u003e\n      \u003cspan\u003e\n        \u003ca class=\"theory\"\n           data-bind-here=\"href\"\n           data-bind-there=\"url\"\n           href=\"/entre\"\u003e\n          Sheer ignorance and entrepreneurship\n        \u003c/a\u003e\n      \u003c/span\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n## Features\n\n* __Semantic data binding__ - No need for \u003c%=foo%\u003e or {{foo}} assignments\n* __Collection rendering__ - No need for hand-written loops\n* __Valid HTML templates__ - Write templates as a part of the HTML, in plain HTML\n* __View logic in JavaScript__ - No crippled micro-template language, just plain JavaScript functions\n\n## TODOs:\n\n* _Basic optmization_\n* _Read some `data-` attr to see in which element arrays of data will duplicate_\n\n## Installation\n\n```\nnpm install tempreites\n```\n\nOr download the [file](https://raw.github.com/fiatjaf/tempreites/master/dist/tempreites.js) and include it anywhere.\n\n---\n\n## Documentation\n\nConsidering a `data` object like this:\n```javascript\nvar data = {\n  name: 'Miyamoto',\n  link: '/miyamoto',\n  completeName: {\n    first: 'Shigeru'\n    last: 'Miyamoto'\n  },\n  sons: [{ name: 'Mario', show: true }, { name: 'Luigi', show: false }]\n  show: true\n}\nTempreites.render(template, data)\n```\n\n#### Binding values\n\nUse a `class` or an `id` at the target element with the value of the key in your `data` object.\n```html\n\u003ch1 class=\"name\"\u003e\u003c/h1\u003e\n```\n\n#### Nested objects\n\nUse a `class` or an `id` at some element with the value of the parent key in your `data` object, then use a `class` or `id` with the child key anywhere inside the parent element.\n```html\n\u003cdiv id=\"name\"\u003e\n  \u003ch1\u003e\n    \u003cspan class=\"last\"\u003e\u003c/span\u003e, \u003cspan class=\"first\"\u003e\u003c/span\u003e\u003c/h1\u003e\n  \u003c/h1\u003e\n\u003c/div\u003e\n```\n\n#### Nested lists\n\nUse a `class` or an `id` at the element immediattely before the element you want to be repeated with the list values, then use a `class` or `id` with the child key anywhere inside it.\n```html\n\u003cdiv id=\"sons\"\u003e\n  \u003cp class=\"name\"\u003e\u003c/p\u003e\n\u003c/div\u003e\n```\n\n#### Binding values to attributes\n\nUse the `data-bind` attribute with the special syntax \"javascriptObjectAttrName - \u003e htmlElementAttrNameToBindTo\". If you want to bind to more than one attr, write the other bindings at the same `data-bind`, separated by a `|`:\n```html\n\u003cheader\u003e\n  \u003ch1 id=\"name\"\u003e\u003c/h1\u003e\n  \u003cimg data-bind=\"url -\u003e src | name -\u003e alt\"\u003e\n\u003c/header\u003e\n```\n\n#### Conditional showing of elements\n\nUse the `data-show-if` attr naming a key at the `data` object which will be tested for deciding if the element\nwill be shown or not.\n```html\n\u003cdiv id=\"miyamoto\" data-show-if=\"show\"\u003e\n  \u003cul class=\"sons\"\u003e\n    \u003cli class=\"name\" data-show-if=\"show\"\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n#### Pre-compiling templates\n\nCall the `compile` function to get a pre-compiled template to which you can just pass the data later.\n```javascript\nvar tpr = Tempreites.compile('\u003cdiv class=\"u\"\u003e\u003c/div\u003e')\ntpr.render({u: 'a'})\ntpr.render({u: 'b'})\n```\n\n---\n\nInspired by [Plates](https://github.com/flatiron/plates) and [Transparency](https://github.com/leonidas/transparency/), but simplified and more useful.\n\n---\n\nWritten with regular expressions, como se fazia antigamente lá na roça.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffiatjaf%2Ftempreites","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffiatjaf%2Ftempreites","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffiatjaf%2Ftempreites/lists"}