{"id":13479484,"url":"https://github.com/AntonioVdlC/html-template-tag","last_synced_at":"2025-03-27T09:32:44.751Z","repository":{"id":2799724,"uuid":"47476977","full_name":"AntonioVdlC/html-template-tag","owner":"AntonioVdlC","description":":page_facing_up: - ES6 Tagged Template for compiling HTML template strings","archived":false,"fork":false,"pushed_at":"2024-08-20T19:54:27.000Z","size":761,"stargazers_count":63,"open_issues_count":10,"forks_count":8,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-28T22:44:35.252Z","etag":null,"topics":["html-template","string-interpolation","template-string"],"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/AntonioVdlC.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-12-05T23:42:01.000Z","updated_at":"2024-10-28T09:55:16.000Z","dependencies_parsed_at":"2024-01-16T06:24:44.210Z","dependency_job_id":"8c2f5da3-d1f5-4a8b-9a9e-f38d26ab0401","html_url":"https://github.com/AntonioVdlC/html-template-tag","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntonioVdlC%2Fhtml-template-tag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntonioVdlC%2Fhtml-template-tag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntonioVdlC%2Fhtml-template-tag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntonioVdlC%2Fhtml-template-tag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AntonioVdlC","download_url":"https://codeload.github.com/AntonioVdlC/html-template-tag/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221962454,"owners_count":16908341,"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-template","string-interpolation","template-string"],"created_at":"2024-07-31T16:02:17.343Z","updated_at":"2025-03-27T09:32:44.744Z","avatar_url":"https://github.com/AntonioVdlC.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Libraries"],"sub_categories":["HTML"],"readme":"# html-template-tag\n\n[![version](https://img.shields.io/npm/v/html-template-tag.svg)](http://npm.im/html-template-tag)\n[![issues](https://img.shields.io/github/issues-raw/antoniovdlc/html-template-tag.svg)](https://github.com/AntonioVdlC/html-template-tag/issues)\n[![downloads](https://img.shields.io/npm/dt/html-template-tag.svg)](http://npm.im/html-template-tag)\n[![license](https://img.shields.io/npm/l/html-template-tag.svg)](http://opensource.org/licenses/MIT)\n\nES6 Tagged Template for compiling HTML template strings.\n\n## Installation\n\nThis package is distributed via npm:\n\n```\nnpm install html-template-tag\n```\n\n## Usage\n\n### String Interpolation\n\nAt its core, this module just performs simple ES6 string interpolation.\n\n```javascript\nvar html = require(\"html-template-tag\");\n// - or - import html from \"html-template-tag\";\n\nvar name = `Antonio`;\nvar string = html`Hello, ${name}!`;\n// \"Hello, Antonio!\"\n```\n\nNevertheless, it escapes HTML special characters without refraining its use in loops!\n\n```javascript\nvar html = require(\"html-template-tag\");\n// - or - import html from \"html-template-tag\";\n\nvar names = [\"Antonio\", \"Megan\", \"/\u003e\u003cscript\u003ealert('xss')\u003c/script\u003e\"];\nvar string = html`\n  \u003cul\u003e\n    ${names.map((name) =\u003e html` \u003cli\u003eHello, ${name}!\u003c/li\u003e `)}\n  \u003c/ul\u003e\n`;\n// \"\u003cul\u003e\u003cli\u003eHello, Antonio!\u003c/li\u003e\u003cli\u003eHello, Megan!\u003c/li\u003e\u003cli\u003eHello, /\u0026gt;\u0026lt;script\u0026gt;alert(\u0026#39;xss\u0026#39;)\u0026lt;/script\u0026gt;!\u003c/li\u003e\u003c/ul\u003e\"\n```\n\n### Skip autoscaping\n\nYou can use double dollar signs in interpolation to mark the value as safe (which means that this variable will not be escaped).\n\n```javascript\nvar name = `\u003cstrong\u003eAntonio\u003c/strong\u003e`;\nvar string = html`Hello, $${name}!`;\n// \"Hello, \u003cstrong\u003eAntonio\u003c/strong\u003e!\"\n```\n\n### HTML Template Pre-Compiling\n\nThis small module can also be used to pre-compile HTML templates:\n\n```javascript\nvar html = require(\"html-template-tag\");\n// - or - import html from \"html-template-tag\";\n\nvar data = {\n  count: 2,\n  names: [\"Antonio\", \"Megan\"],\n};\n\nvar template = ({ names }) =\u003e html`\n  \u003cul\u003e\n    ${names.map((name) =\u003e html` \u003cli\u003eHello, ${name}!\u003c/li\u003e `)}\n  \u003c/ul\u003e\n`;\n\nvar string = template(data);\n/* \n\t\"\n\t\u003cul\u003e\n\t\t\u003cli\u003eHello, Antonio!\u003c/li\u003e\n\t\t\u003cli\u003eHello, Megan!\u003c/li\u003e\n\t\u003c/ul\u003e\n\t\"\n*/\n```\n\n\u003e NB: The formating of the string literal is kept.\n\n### Interpolation inside URI attributes\n\nTo avoid XSS attacks, this package removes all interpolation instide URI attributes ([more info](https://cheatsheetseries.owasp.org/cheatsheets/XSS_Filter_Evasion_Cheat_Sheet.html)). This package also ensures that interpolations inside attributes are properly escaped.\n\n## License\n\nMIT\n\n## Thanks\n\nThe code for this module has been heavily inspired on [Axel Rauschmayer's post on HTML templating with ES6 template strings](http://www.2ality.com/2015/01/template-strings-html.html) and [Stefan Bieschewski's comment](http://www.2ality.com/2015/01/template-strings-html.html#comment-2078932192).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAntonioVdlC%2Fhtml-template-tag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAntonioVdlC%2Fhtml-template-tag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAntonioVdlC%2Fhtml-template-tag/lists"}