{"id":27393826,"url":"https://github.com/geooot/soul-patch","last_synced_at":"2025-04-13T22:16:02.071Z","repository":{"id":43873419,"uuid":"239040028","full_name":"geooot/soul-patch","owner":"geooot","description":"🐄 A HTML templator with angular like syntax. Generating HTML through means that are not efficient, or safe. Only really good for shady static site generation.","archived":false,"fork":false,"pushed_at":"2023-10-10T16:26:00.000Z","size":242,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T22:15:55.972Z","etag":null,"topics":["html","nodejs","template-language","templating-engine"],"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/geooot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-02-07T23:24:01.000Z","updated_at":"2022-06-07T21:41:41.000Z","dependencies_parsed_at":"2023-01-18T14:45:18.799Z","dependency_job_id":null,"html_url":"https://github.com/geooot/soul-patch","commit_stats":{"total_commits":27,"total_committers":2,"mean_commits":13.5,"dds":0.2222222222222222,"last_synced_commit":"82c8f1005b6761e0e30286647a0179c3ef0b301a"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geooot%2Fsoul-patch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geooot%2Fsoul-patch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geooot%2Fsoul-patch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geooot%2Fsoul-patch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geooot","download_url":"https://codeload.github.com/geooot/soul-patch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248788806,"owners_count":21161728,"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","nodejs","template-language","templating-engine"],"created_at":"2025-04-13T22:16:01.289Z","updated_at":"2025-04-13T22:16:02.060Z","avatar_url":"https://github.com/geooot.png","language":"TypeScript","readme":"# soul-patch\nA HTML templator with angular like syntax. Generating HTML through means that are not efficient, or safe. Only really good for shady static site generation.\n\nIf moustache and handlebars are real templating engines, then soul-patch is it's wierd distant cousin.\n\n## Installation\n```bash\n$ npm install @geooot/soul-patch\n```\n\n## Usage\n```javascript\nconst { renderPage } = require('@geooot/soul-patch');\nconst template = `\n    \u003cul sp-for=\"let i=0; i\u003c3; i++\"\u003e\n        \u003cli sp-assign=\"text: foo + someFunc(i), class: 'whatever'\"\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n`\nlet rendered = await renderPage({\n    input: template,\n    props: {\n        foo: \"The number is: \",\n        someFunc: (num) =\u003e num * 100\n    }\n});\n\nconsole.log(rendered);\n// Results in:\n// \u003cul\u003e\n//     \u003cli class=\"whatever\"\u003eThe number is: 0\u003c/li\u003e\n//     \u003cli class=\"whatever\"\u003eThe number is: 100\u003c/li\u003e\n//     \u003cli class=\"whatever\"\u003eThe number is: 200\u003c/li\u003e\n// \u003c/ul\u003e\n```\n\n## Operators\nOperators allow you to template html by adding special attributes to your HTML. Here are the available operators:\n\n### `sp-assign`\nThis property allows you to assign variables to HTML attributes and set HTML.\n    \n#### Example 1\n\nThis template:\n```html\n\u003cp sp-assign=\"text: someVariable, class: someBool ? 'text-green' : 'text-red'\"\u003eWhatever\u003c/p\u003e\n```\nResults in:\n```html\n\u003cp class=\"text-red\"\u003eI was a string assigned to someVariable\u003c/p\u003e\n```\n\n#### Example 2: Using innerHTML\nThis template:\n```html\n\u003cp sp-assign=\"innerHTML: markdownToHTML(markdownInAString)\"\u003e\u003c/p\u003e\n```\nResults in:\n```html\n\u003cp\u003e\u003ch1\u003eHere is some raw HTML being injected!!!\u003c/h1\u003e\u003cp\u003ewowzers\u003c/p\u003e\u003c/p\u003e\n```\n\n### `sp-for`\nDefines how you can create a loop of elements. \n\n#### Example 1: For loop\nThis template:\n```html\n\u003cul sp-for=\"let i=0; i\u003c10; i++\"\u003e\n  \u003cli sp-assign=\"text: i, class: 'whatever'\"\u003e\n    Anything can go here but it will probably be replaced on render\n  \u003c/li\u003e\n\u003c/ul\u003e\n```\nResults in:\n```html\n\u003cul\u003e\n  \u003cli class=\"whatever\"\u003e0\u003c/li\u003e \n  \u003cli class=\"whatever\"\u003e1\u003c/li\u003e \n  \u003cli class=\"whatever\"\u003e2\u003c/li\u003e \n  \u003cli class=\"whatever\"\u003e3\u003c/li\u003e \n  \u003cli class=\"whatever\"\u003e4\u003c/li\u003e \n  \u003cli class=\"whatever\"\u003e5\u003c/li\u003e \n  \u003cli class=\"whatever\"\u003e6\u003c/li\u003e \n  \u003cli class=\"whatever\"\u003e7\u003c/li\u003e \n  \u003cli class=\"whatever\"\u003e8\u003c/li\u003e \n  \u003cli class=\"whatever\"\u003e9\u003c/li\u003e \n\u003c/ul\u003e\n```\n\n#### Example 2: For each loop\nThis template\n```html\n\u003cdiv sp-for=\"item of listOfObjects\"\u003e\n  \u003cp sp-assign=\"text: item.name, id: item.id\"\u003eWhatever\u003c/p\u003e\n\u003c/div\u003e\n```\nResults in\n```html\n\u003cdiv\u003e\n  \u003cp id=\"someIdFoo\"\u003eFoo\u003c/p\u003e\n  \u003cp id=\"someIdBar\"\u003eBar\u003c/p\u003e\n  \u003cp id=\"someIdWiz\"\u003eWiz\u003c/p\u003e\n\u003c/div\u003e\n```\n\n### `sp-render-if`\nRenders an item if a certain condition is true\n\n#### Example\nThis template:\n```html\n\u003cp sp-render-if=\"10 \u003c 100\"\u003eTurns out 10 is less than 100 so this will render\u003c/p\u003e\n\u003cp sp-render-if=\"myIQ \u003e averageIQForAge(19)\"\u003eBut my IQ is below average so this will not render\u003c/p\u003e\n```\n\nResults in:\n```html\n\u003cp\u003eTurns out 10 is less than 100 so this will render\u003c/p\u003e\n```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeooot%2Fsoul-patch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeooot%2Fsoul-patch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeooot%2Fsoul-patch/lists"}