{"id":27103303,"url":"https://github.com/abstractn/abs-template","last_synced_at":"2026-02-20T22:40:49.123Z","repository":{"id":207570773,"uuid":"717887937","full_name":"Abstractn/abs-template","owner":"Abstractn","description":"Handlebars-like dynamic template compilation system","archived":false,"fork":false,"pushed_at":"2025-04-18T10:10:48.000Z","size":36,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-26T04:58:39.652Z","etag":null,"topics":["dynamic-html","frontend","handlebars","html","simple","template","template-partials"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Abstractn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2023-11-12T22:21:28.000Z","updated_at":"2025-04-18T10:08:46.000Z","dependencies_parsed_at":"2023-11-16T14:31:15.937Z","dependency_job_id":"509648c6-e1df-4961-be48-acd0e1c96ebb","html_url":"https://github.com/Abstractn/abs-template","commit_stats":null,"previous_names":["abstractn/abs-template"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/Abstractn/abs-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abstractn%2Fabs-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abstractn%2Fabs-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abstractn%2Fabs-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abstractn%2Fabs-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Abstractn","download_url":"https://codeload.github.com/Abstractn/abs-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abstractn%2Fabs-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29667093,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-20T19:49:36.704Z","status":"ssl_error","status_checked_at":"2026-02-20T19:44:05.372Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["dynamic-html","frontend","handlebars","html","simple","template","template-partials"],"created_at":"2025-04-06T16:52:50.448Z","updated_at":"2026-02-20T22:40:49.106Z","avatar_url":"https://github.com/Abstractn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Abs-Template\n\n[![npm version](https://badgen.net/npm/v/abs-template)](https://www.npmjs.com/package/abs-template) [![Install size](https://packagephobia.com/badge?p=abs-template)](https://packagephobia.com/result?p=abs-template)\n\n\n## Introduction:\n\nThis module offers a static class that can preprocess HTML `\u003ctemplate\u003e` nodes and print them in a somewhat dynamic way following an object with data inside it.\n\n\n## CDN:\n\nTypescript:\n```https://abstractn.github.io/lib/abs-template.ts```\n\nJavascript (with export):\n```https://abstractn.github.io/lib/abs-template.js```\n\nJavascript (without export):\n```https://abstractn.github.io/lib/abs-template.nx.js```\n\nBrowser iclusion:\n```\u003cscript src=\"https://abstractn.github.io/lib/abs-template.nx.js\"\u003e\u003c/script\u003e```\n\n\n## The Config object\n\nThere are two main methods to use from this class: the first one would be `.build()`.\nThis method takes a config object with all the necessary parameters inside it.\nHere's a deep example:\n\n```typescript\nAbsTemplate.build({\n  // node reference to the template to build\n  templateNode: document.querySelector('template#my-template'),\n\n  // a data object to compile the template with\n  templateData: {\n    myField: 'lorem ipsum'\n  },\n\n  // the output node to where the compiled template needs to be printed\n  printTargetNode: document.querySelector('.dynamic-template-container'),\n\n  // the position relative to `printTargetNode`\n  printMethod: AbsTemplatePrintMethod.BEFORE_END,\n\n  // change brackets used by the syntax if needed\n  bracketType: AbsTemplateBracketType.CURLY,\n})\n```\n\n\u003e NOTE on `printMethod`:\n\u003e I've created a custom enum to group all possible values but not that these are in reality the same ones used by the native method `Element.insertAdjacentElement()`\n\u003e (see [MDN's documentation here](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement) for more details)\n\nUnderneath `build()`'s logic there's `compile()`: if you need to just parse your template node and get the result without printing it immediately this will return the compiled HTML as a string.\n\n\n\n## Template Syntax\n\nYou can write double curly brackets to write a couple of neat things inside your HTML to make minimal logic and print data with it.\nAs of version 1.3 the brackets used by the syntax can be customized via config parameter with `bracketType: AbsTemplateBracketType` to avoid potential conflicts.\n\n\n### 1) Data\n\nStarting with an object defined from our code:\n\n```typescript\nconst myData = {\n  greeting: 'Hello',\n  user: {\n    firstName: 'John',\n    lastName: 'Doe'\n  }\n};\n```\n\nuse it in HTML with\n\n```html\n\u003ctemplate id=\"my-data-template\"\u003e\n  \u003cspan\u003e{{greeting}} {{user.firstName}} {{user.lastName}}\u003c/span\u003e\n\u003c/template\u003e\n```\n\nand after compilation it will turn into\n\n```html\n\u003cspan\u003eHello John Doe\u003c/span\u003e\n```\n\n\n### 2) Conditions\n\n`{{if condition}}...{{/if}}` and `{{if condition}}...{{else}}...{{/if}}` are the syntaxes that can decide wether the content of the condition will be printed or not for the first case and print either one content block or the other depending on the condition.\n\nThe accepted format for conditions are both a single variable that will be implicitly interpreted as a boolean check (much like a common `if()` from JS/TS code) or a set of two variables to evaluate with an operator in between them.\n\nThe list of all available operators is the following:\n- `==`\n- `==`\n- `===`\n- `!=`\n- `!==`\n- `\u003e`\n- `\u003e=`\n- `\u003c`\n- `\u003c=`\n- `\u0026\u0026`\n- `||`\n- `%`\n- `^`\n\n\nFor the example we'll change the data object a little:\n\n```typescript\nconst myData = {\n  visible: true\n};\n```\n\nand make a debug-like test template\n\n```html\n\u003ctemplate id=\"my-data-template\"\u003e\n  status:\n\n  {{if visible}}\n    \u003cspan\u003etrue\u003c/span\u003e\n  {{else}}\n    \u003cspan\u003efalse\u003c/span\u003e\n  {{/if}}\n\u003c/template\u003e\n```\n\nThe output will be\n\n```html\nstatus:\n\u003cspan\u003etrue\u003c/span\u003e\n```\n\n\u003e NOTE: full condition syntax strictly accepts only the following format: `\u003cparameter_1\u003e \u003coperator\u003e \u003cparameter_2\u003e`.\n\u003e Using parenthesis for grouping and/or multiple operators will not work.\n\n\n\n### 3) Loops\n\nIf our data object contains arrays inside it we can iterate on them using a `{{forEach item in array}}...{{/forEach}}`.\nHere's a simple list:\n\n```typescript\nconst myData = {\n  users: [\n    {\n      firstName: 'John',\n      lastName: 'Doe'\n    },\n    {\n      firstName: 'Alex',\n      lastName: 'Rodriguez'\n    },\n    {\n      firstName: 'Emily',\n      lastName: 'Turner'\n    }\n  ]\n};\n```\n\nand whatever HTML is contained inside the loop statement will be repeated for each item\n\n```html\n\u003ctemplate id=\"list-template\"\u003e\n  \u003ch4\u003eList of users\u003c/h4\u003e\n  \u003col\u003e\n    {{forEach user in users}}\n      \u003cli\u003e\n        \u003cdiv\u003eFirst name: {{user.firstName}}\u003c/div\u003e\n        \u003cdiv\u003eLast name: {{user.lastName}}\u003c/div\u003e\n      \u003c/li\u003e\n    {{/forEach}}\n  \u003c/ol\u003e\n\u003c/template\u003e\n```\n\nAnd this is how the list turned out after parsing:\n\n```html\n\u003ch4\u003eList of users\u003c/h4\u003e\n\u003col\u003e\n  \u003cli\u003e\n    \u003cdiv\u003eFirst name: John\u003c/div\u003e\n    \u003cdiv\u003eLast name: Doe\u003c/div\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cdiv\u003eFirst name: Alex\u003c/div\u003e\n    \u003cdiv\u003eLast name: Rodriguez\u003c/div\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cdiv\u003eFirst name: Emily\u003c/div\u003e\n    \u003cdiv\u003eLast name: Turner\u003c/div\u003e\n  \u003c/li\u003e\n\u003c/ol\u003e\n```\n\nAn important note to point out is that if you use an identifier for the list iterable that is already present inside the first level of the data object, the object outside of the list will not be accessible since the identifiers overlap and `forEach`'s scope takes priority.\n\n```typescript\nconst myData = {\n  item: 'OUTSIDE LIST',\n  list: [ 'INSIDE LIST' ]\n}\n```\n\n```html\n1. {{item}}\n\n{{forEach item in list}}\n  2. {{item}}\n{{/forEach}}\n\n3. {{item}}\n```\n\nThe output will be:\n```html\n1. OUTSIDE LIST\n2. INSIDE LIST\n3. OUTSIDE LIST\n```\n\n\n\n## KNOWN BUGS\n\n- ~~Same statements consecutively inside each other are probably not parsed correctly~~ Fixed in 1.2","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabstractn%2Fabs-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabstractn%2Fabs-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabstractn%2Fabs-template/lists"}