{"id":15497399,"url":"https://github.com/heapwolf/txl","last_synced_at":"2025-04-22T21:45:25.817Z","repository":{"id":66203374,"uuid":"95325507","full_name":"heapwolf/txl","owner":"heapwolf","description":"All your html templating needs in under 10 lines of JS.","archived":false,"fork":false,"pushed_at":"2017-07-12T13:11:27.000Z","size":6,"stargazers_count":62,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T19:11:15.339Z","etag":null,"topics":[],"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/heapwolf.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":"2017-06-24T22:13:56.000Z","updated_at":"2024-09-18T11:08:55.000Z","dependencies_parsed_at":"2023-03-01T09:30:46.427Z","dependency_job_id":null,"html_url":"https://github.com/heapwolf/txl","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/heapwolf%2Ftxl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heapwolf%2Ftxl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heapwolf%2Ftxl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heapwolf%2Ftxl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heapwolf","download_url":"https://codeload.github.com/heapwolf/txl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250330542,"owners_count":21412995,"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":[],"created_at":"2024-10-02T08:33:23.312Z","updated_at":"2025-04-22T21:45:25.792Z","avatar_url":"https://github.com/heapwolf.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![development sponsored by voltra.co](https://img.shields.io/badge/Development%20sponsored%20by-Voltra.co-yellow.svg)](https://voltra.co/)\n\n# SYNOPSIS\nAll your html templating needs in under 10 lines of JS.\n\n# USAGE\n\n## BASICS\nThe `Template` function takes a string and returns a function that takes your\ntemplate \"locals\".\n\n```js\nconst txl = require('txl')\nconst template = txl('\u003ch1\u003e${name}\u003c/h1\u003e')\n\nconsole.log(template({ name: 'Glen' }))\nconsole.log(template({ name: 'Henry' }))\n```\n\n```html\n\u003ch1\u003eGlen\u003c/h1\u003e\n\u003ch1\u003eHenry\u003c/h1\u003e\n```\n\nBecause the `txl` function takes a string, you can read its contents from\nanother file — separation of concerns.\n\n## ITERATION\nThe `${...}` part of a template string is an expression. So you can use any\nexpression (anything that results in a value), such as `1 + foo`, `map()`,\n`filter`, etc.\n\n#### index.js\n```js\nconst txl = require('txl')\nconst fs = require('fs')\n\nconst t = txl(fs.readFileSync('./index.template'))\n\nt({ list: [1,2,3] })\n```\n\n```html\n\u003cul\u003e\n  ${ list.map(n =\u003e `\u003cli\u003e${n}\u003c/li\u003e`).join('') }\n\u003c/ul\u003e\n```\n\n```html\n\u003cul\u003e\n  \u003cli\u003e1\u003c/li\u003e\n  \u003cli\u003e2\u003c/li\u003e\n  \u003cli\u003e3\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n## MIXINS\nYou can pass anything into the \"locals\" for a template, including functions.\nThis means you can do mixins!\n\n#### index.js\n\n```js\nconst Template = require('txl')\nconst fs = require('fs')\n\nconst t = Template(fs.readFileSync('./index.template'))\nconst m = Template(fs.readFileSync('./mixin.template'))\n\nt({ names: ['Glen', 'Henry'] li: m })\n```\n\n#### index.template\n\n```html\n\u003cul\u003e\n  ${ list.map(name =\u003e li({ name })).join('') }\n\u003c/ul\u003e\n```\n\n#### mixin.template\n\n```html\n\u003cli class=\"name\"\u003e${name}\u003c/li\u003e\n```\n\n#### output\n```html\n\u003cul\u003e\n  \u003cli class=\"name\"\u003eGlen\u003c/li\u003e\n  \u003cli class=\"name\"\u003eHenry\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n## PLUGINS, FILTERS (CONDITIONALS)\nLet's say you want to show a block of content based on a condition, you could\ndo this with short-circuit evaluation in some cases, or you could make a simple\nplugin! A plugin is just a function...\n\n```js\nconst txl = require('txl')\nconst template = txl(fs.readFileSync('./index.template'))\n\n// a function that takes a boolean value and a string.\nconst IF = (b, s) =\u003e b ? s : ''\n\n// pass in our values and our plugins\ntemplate({ foo: 100, IF })\n```\n\n```html\n\u003csection\u003e\n  ${ IF(foo \u003e 100, `\n    \u003cdiv\u003e This is only rendered if foo is equal to 10.\n    \u003c/div\u003e\n  `) }\n\u003c/section\u003e\n```\n\n```html\n\u003csection\u003e\n\u003c/section\u003e\n```\n\n## DOM DIFFING \u0026 PATCHING\nGenerally, you should be able to target nodes directly by using the\n`querySelector` method. In some cases, you may feel like applying a\nlarge change-set to a node. In this case, you could use [morphdom][1]!\n\n```js\nconst morph = require('morphdom')\nconst txl = requre('txl')\n\nconst template = txl('\u003cdiv\u003e${count}\u003c/div\u003e')\nconst someNode = document.querySelector('.some-node')\n\nlet n = 10\n\nwhile (n--) {\n  morph(someNode, template({ count: n }))\n}\n```\n\n## SECURITY\nYou may be concerned with escaping depending on where your data comes from\nor how it is stored. In this case there are a lot of really nice modules. For\ninstance [he][2] is a well maintained and very robust encoder/decoder.\n\n[1]:https://github.com/patrick-steele-idem/morphdom\n[2]:https://github.com/mathiasbynens/he\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheapwolf%2Ftxl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheapwolf%2Ftxl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheapwolf%2Ftxl/lists"}