{"id":22556049,"url":"https://github.com/munawwar/htmlizer","last_synced_at":"2025-04-10T05:25:43.890Z","repository":{"id":14920217,"uuid":"17644419","full_name":"Munawwar/htmlizer","owner":"Munawwar","description":"Knockout Templates for Node.js","archived":false,"fork":false,"pushed_at":"2016-10-24T07:27:07.000Z","size":192,"stargazers_count":9,"open_issues_count":0,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-01T19:09:52.387Z","etag":null,"topics":["knockoutjs","nodejs","template-language"],"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/Munawwar.png","metadata":{"files":{"readme":"README.md","changelog":"Changelog.txt","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":"2014-03-11T20:08:32.000Z","updated_at":"2024-06-12T16:02:47.000Z","dependencies_parsed_at":"2022-08-22T07:31:28.415Z","dependency_job_id":null,"html_url":"https://github.com/Munawwar/htmlizer","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Munawwar%2Fhtmlizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Munawwar%2Fhtmlizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Munawwar%2Fhtmlizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Munawwar%2Fhtmlizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Munawwar","download_url":"https://codeload.github.com/Munawwar/htmlizer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248162037,"owners_count":21057692,"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":["knockoutjs","nodejs","template-language"],"created_at":"2024-12-07T19:11:05.755Z","updated_at":"2025-04-10T05:25:43.869Z","avatar_url":"https://github.com/Munawwar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Htmlizer\n========\n\nGenerate HTML with templates that are valid HTML.\n\n`npm install htmlizer`\n\n### Why?\n\nMost templating languages doesn't ensure that the templates are valid HTML. Templates needs to be parsable for build tools like assetgraph-builder to able to 1. find assets (like images) for optimization 2. Translate text with their [data-i18n](https://github.com/assetgraph/assetgraph-builder#html-i18n-syntax) syntax.\n\nFor example consider this Mustache template: `\u003cdiv {{attributes}}\u003e\u003c/div\u003e`.\nThis looks sane, but is unfortunately not parsable by most HTML parsers.\n\nHere is another example: `\u003cdiv style=\"{{style}}\"\u003e\u003c/div\u003e`. Even though this is parsable, the text inside the style attribute is not valid CSS syntax and some parsers or server-side DOM libraries (used within build tools) could throw errors.\n\n### How?\n\nThe solution here is to use template syntax similar to KnockoutJS (in fact supports a subset of Knockout bindings).\n\nHence other use cases include, partially rendering a KO web page/app on the server-side for SEO purposes. \n\n## What's new in v2\n\n### Performance improvement\n\nWith v2, to speed up performance on nodejs, jsdom as a dependency has been removed and htmlizer instead compiles templates into JS functions to generate the output. v2 only supports server-side rendering (unlike v1).\n\nThe following are some of the implications due to this change:\n\n1. toDocumentFragment() method has been removed.\n2. $element KO binding context cannot be used anymore.\n3. template binding interface has changed.\n\nUsage\n-----\n\nRender template as HTML string:\n```\n(new Htmlizer('\u003ctemplate string\u003e')).toString(dataObject);\n```\n\nTemplate syntax\n-----\nSyntax is similar to KnockoutJS (in fact supports a subset of Knockout bindings).\n\n#### *text* binding:\n\n```\nTemplate: \u003cspan data-bind=\"text: mytext\"\u003e\u003c/span\u003e\n\nData: {mytext: 'test'}\n\nOutput: \u003cspan\u003etest\u003c/span\u003e\n```\n\n#### *attr* binding:\n\n```\nTemplate: \u003cspan data-bind=\"text: mytext, attr: {class: cls}\"\u003e\u003c/span\u003e\n\nData: {mytext: 'test', cls: 'btn btn-default'}\n\nOutput: \u003cspan class=\"btn btn-default\"\u003etest\u003c/span\u003e\n```\n\n#### *if* binding:\n```\nTemplate:\n\u003cdiv data-bind=\"if: show\"\u003e\n  This message won't be shown.\n\u003c/div\u003e\n\nData: {show: false}\n\nOutput: \u003cdiv\u003e\u003c/div\u003e\n```\n\n#### Containerless *if* binding:\n```\nTemplate:\n\u003cdiv\u003e\n  \u003c!-- ko if: count --\u003e\n    \u003cdiv id=\"results\"\u003e\u003c/div\u003e\n  \u003c!-- /ko --\u003e\n  \u003c!-- hz if: !count --\u003e\n    No results to display.\n  \u003c!-- /hz --\u003e\n\u003c/div\u003e\n\nData: {count: 0}\n\nOutput: \u003cdiv\u003eNo results to display.\u003c/div\u003e\n```\n\nNote: You can use either \"ko if:\" or \"hz if:\" to begin an *if* statement. And you may either use \"/ko\" or \"/hz\" to end an *if* statement.\n\n#### Containerless *text* binding:\n```\nTemplate:\n\u003cdiv\u003e\n  \u003c!-- ko text: msg --\u003e\u003c!-- /ko --\u003e\n\u003c/div\u003e\n\nData: {msg: 'Hello'}\n\nOutput: \u003cdiv\u003eHello\u003c/div\u003e\n```\n\n#### *foreach* binding:\n```\nTemplate:\n\u003cdiv data-bind=\"foreach: items\"\u003e\n    \u003cdiv data-bind=\"text: $data\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\nData:\n{\n  items: ['item 1', 'item 2', 'item 3']\n}\n\nOutput:\n\u003cdiv\u003e\n  \u003cdiv\u003eitem 1\u003c/div\u003e\n  \u003cdiv\u003eitem 2\u003c/div\u003e\n  \u003cdiv\u003eitem 3\u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Containerless *foreach* binding:\n```\nTemplate:\n\u003cdiv\u003e\n  \u003c!-- ko foreach: items --\u003e\n    \u003cdiv data-bind=\"text: name\"\u003e\u003c/div\u003e\n  \u003c!-- /ko --\u003e\n\u003c/div\u003e\n\nData:\n{\n    items: [{name: 'item 1'}, {name: 'item 2'}, {name: 'item 3'}]\n}\n\nOutput:\n\u003cdiv\u003e\n  \u003cdiv\u003eitem 1\u003c/div\u003e\n  \u003cdiv\u003eitem 2\u003c/div\u003e\n  \u003cdiv\u003eitem 3\u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### *html* binding:\n```\nTemplate:\n\u003cdiv data-bind=\"html: message\"\u003e\u003c/div\u003e\n\nData: {message: '\u003cb\u003eThis\u003c/b\u003e is a \u003cb\u003eserious message\u003c/b\u003e'}\n\nOutput: \u003cdiv\u003e\u003cb\u003eThis\u003c/b\u003e is a \u003cb\u003eserious message\u003c/b\u003e\u003c/div\u003e\n```\n\n#### *css* binding:\n```\nTemplate:\n\u003cdiv data-bind=\"css: {warning: isWarning}\"\u003e\u003c/div\u003e\n\nData: {isWarning: true}\n\nOutput: \u003cdiv class=\"warning\"\u003e\u003c/div\u003e\n```\n\n#### *style* binding:\n```\nTemplate:\n\u003cdiv data-bind=\"style: {fontWeight: bold ? 'bold' : 'normal'}\"\u003e\u003c/div\u003e\n\nData: {bold: false}\n\nOutput: \u003cdiv style=\"font-weight: normal;\"\u003e\u003c/div\u003e\n```\n\n#### *with* binding:\n```\nTemplate:\n\u003cdiv data-bind=\"with: obj\"\u003e\n    \u003cspan data-bind=\"text: val\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n\nData: {obj: {val: 10}}\n\nOutput:\n\u003cdiv\u003e\n    \u003cspan\u003e10\u003c/span\u003e\n\u003c/div\u003e\n```\n\n#### Containerless *with* binding:\n```\nTemplate:\n\u003c!-- ko with: obj --\u003e\n    \u003cspan data-bind=\"text: val\"\u003e\u003c/span\u003e\n\u003c!-- /ko --\u003e\n\nData: {obj: {val: 10}}\n\nOutput: \u003cspan\u003e10\u003c/span\u003e\n```\n\n#### *template* binding:\nWorks mostly like KO 3.0 - [documentation](http://knockoutjs.com/documentation/template-binding.html).\nSupports the following properties: name, data, if, foreach and as.\n\n```\nTemplate:\n\u003cdiv data-bind=\"template: { name: 'person-template', data: buyer }\"\u003e\u003c/div\u003e\n\u003cdiv data-bind=\"template: { name: 'person-template', foreach: [buyer] }\"\u003e\u003c/div\u003e\n\nsubtemplate.html:\n\u003ch3 data-bind=\"text: name\"\u003e\u003c/h3\u003e\n\u003cp\u003eCredits: \u003cspan data-bind=\"text: credits\"\u003e\u003c/span\u003e\u003c/p\u003e\n\nData:\n{\n    buyer: {\n        name: 'Franklin',\n        credits: 250\n    }\n}\n\nOutput:\n\u003cdiv\u003e\n    \u003ch3\u003e\u003cFranklin/h3\u003e\n    \u003cp\u003eCredits: \u003cspan\u003e250\u003c/span\u003e\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv\u003e\n    \u003ch3\u003e\u003cFranklin/h3\u003e\n    \u003cp\u003eCredits: \u003cspan\u003e250\u003c/span\u003e\u003c/p\u003e\n\u003c/div\u003e\n```\n\nTo make template work one must add the sub-templates to config as follows.\n\n```\n  var subtpl = require('fs').readFileSync('subtemplate.html').toString(), //load the file with the sub-templates.\n      cfg = {\n        templates: {\n          \"person-template\": subtpl\n        }\n      },\n      output = (new Htmlizer('\u003ctemplate string\u003e', cfg).toString(dataObject);\n```\n\n#### Binding Contexts\n\nSupports all but $element binding contexts documented for KO 3.0 [here](http://knockoutjs.com/documentation/binding-context.html).\n\n```\nTemplate:\n\u003cdiv data-bind=\"foreach: {data: items, as: 'obj'}\"\u003e\n    \u003c!-- ko foreach: subItems --\u003e\n        \u003cspan data-bind=\"text: obj.name\"\u003e\u003c/span\u003e\n        \u003cspan data-bind=\"text: $parent.name\"\u003e\u003c/span\u003e\n        \u003cspan data-bind=\"text: $index\"\u003e\u003c/span\u003e\n        \u003cspan data-bind=\"text: $data.name\"\u003e\u003c/span\u003e\n        \u003cspan data-bind=\"text: name\"\u003e\u003c/span\u003e\n        \u003cspan data-bind=\"text: $root === $parents[$parents.length - 1]\"\u003e\u003c/span\u003e\n    \u003c!-- /ko --\u003e\n\u003c/div\u003e\n\nData:\n{\n    items: [{\n        name: 'item1',\n        subItems: [{\n            name: 'subitem1'\n        }]\n    }]\n}\n\nOutput:\n\u003cdiv\u003e\n\n        \u003cspan\u003eitem1\u003c/span\u003e\n        \u003cspan\u003eitem1\u003c/span\u003e\n        \u003cspan\u003e0\u003c/span\u003e\n        \u003cspan\u003esubitem1\u003c/span\u003e\n        \u003cspan\u003esubitem1\u003c/span\u003e\n        \u003cspan\u003etrue\u003c/span\u003e\n\n\u003c/div\u003e\n```\n\nAvoiding conflict with KO\n-----\nUse case: If you intend to do a partial render with Htmlizer on the server side and the rest with KO on the client side, then you will need to seperate concerns (i.e. avoid conflicts with KO).\n\nTo avoid conflict with KnockoutJS, set noConflict config to true:\n```\nvar template = new Htmlizer('\u003ctemplate string\u003e', {noConflict: true});\n```\nBy default noConflict is assumed false. With noConflict = true, there are two main differences:\n\n- Bindings must be placed within data-htmlizer attribute.\n- Containerless statements with \"ko\" prefix will be ignored. Use \"hz\" prefix if you want Htmlizer to process it.\n\nKeep KO bindings\n-----\nFor certain use cases (like for SEO purpose without user agent sniffing), one would like to keep the bindings with the rendered output, so that KO on the client side can rewrite them. To keep KO bindings, set keepKOBindings config to true:\n```\nvar template = new Htmlizer('\u003ctemplate string\u003e', {keepKOBindings: true});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmunawwar%2Fhtmlizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmunawwar%2Fhtmlizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmunawwar%2Fhtmlizer/lists"}