{"id":30180987,"url":"https://github.com/streamich/xml-light","last_synced_at":"2025-08-12T08:06:51.076Z","repository":{"id":57401843,"uuid":"62210872","full_name":"streamich/xml-light","owner":"streamich","description":"Simple XML/HTML in JavaScript","archived":false,"fork":false,"pushed_at":"2018-01-05T09:31:34.000Z","size":7,"stargazers_count":2,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-25T15:12:22.093Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/streamich.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}},"created_at":"2016-06-29T08:50:36.000Z","updated_at":"2016-11-24T06:52:57.000Z","dependencies_parsed_at":"2022-09-15T18:31:56.617Z","dependency_job_id":null,"html_url":"https://github.com/streamich/xml-light","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/streamich/xml-light","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamich%2Fxml-light","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamich%2Fxml-light/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamich%2Fxml-light/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamich%2Fxml-light/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/streamich","download_url":"https://codeload.github.com/streamich/xml-light/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamich%2Fxml-light/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270024697,"owners_count":24514054,"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","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2025-08-12T08:06:24.234Z","updated_at":"2025-08-12T08:06:51.068Z","avatar_url":"https://github.com/streamich.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# xml-light\r\n\r\nSimple functions to generate XML/HTML in JavaScript.\r\n\r\nSuper compact package at less than 40 lines of code.\r\n\r\n## Virtual Hypertext\r\n\r\nUse the Virtual Hypertext `_` method.\r\n\r\n    _(tag: string, attributes: {}, ...children: string[]): string;\r\n    \r\nExample:\r\n\r\n```js\r\nvar xml = require('xml-light');\r\nvar _ = xml._;\r\n\r\nvar html =\r\n    _('div', {'class': 'wrapper'},\r\n        _('div', {'class': 'avatar'},\r\n            _('img', {src: '...'}),\r\n            _('span', {},\r\n                'Hello there'\r\n            ),\r\n            _('br')\r\n        )\r\n    );\r\nconsole.log(html);\r\n//\u003cdiv class=\"wrapper\"\u003e\u003cdiv class=\"avatar\"\u003e\u003cimg src=\"...\"/\u003e\u003cspan\u003eHello there\u003c/span\u003e\u003cbr/\u003e\u003c/div\u003e\u003c/div\u003e\r\n```\r\n\r\n## POJO\r\n\r\nCreate XML from a plain JavaScript Array object, where first element is the name\r\nof XML tag, the second is an object of attributes and the rest of the elements of \r\nthe array are its children nodes.\r\n\r\n    type VNode = [tag: string, attributes: {}, ...children: VNode[]];\r\n    xml(root: VNode, h = _);\r\n\r\nExample:\r\n\r\n```js\r\nvar xml = require('xml-light').xml;\r\n\r\nvar pojo =\r\n    ['div', {'class': 'wrapper'},\r\n        ['div', {'class': 'avatar'},\r\n            ['img', {src: '...'}],\r\n            ['span', null,\r\n                'Hello there'\r\n            ],\r\n            ['br'],\r\n        ],\r\n    ];\r\nconsole.log(xml(pojo));\r\n// \u003cdiv class=\"wrapper\"\u003e\u003cdiv class=\"avatar\"\u003e\u003cimg src=\"...\"/\u003e\u003cspan\u003eHello there\u003c/span\u003e\u003cbr/\u003e\u003c/div\u003e\u003c/div\u003e\r\n```\r\n\r\n## React\r\n\r\nThe second argument to the `xml` function is a virtual hypertext generator function, you can provide\r\n`React.createElement.bind(React)` to it to generate React virtual DOM.\r\n\r\nGenerate React Virtual DOM representations from POJO lists instead of using `React.createElement` or `.jsx`\r\nfiles and compiling them to `.js`. \r\n\r\n```js\r\nvar xml = require('xml-light').xml;\r\nvar react_dom = xml(\r\n    ['div', {className: 'test'},\r\n        ['span', null,\r\n            'Hello world!'\r\n        ]\r\n    ], React.createElement.bind(React)\r\n);\r\n```\r\n\r\nThis is equivalent to:\r\n\r\n```js\r\nvar react_dom = React.createElement('div', {className: 'test'},\r\n    React.createElement('span', null, 'Hello world!'));\r\n```\r\n\r\nYou might consider creating a *React Virtual Hypertext* method for convenience:\r\n\r\n```js\r\nReact.h = React.createElement.bind(React);\r\n\r\nvar react_dom = xml(\r\n    ['div', {className: 'test'},\r\n        ['span', null,\r\n            'Hello world!'\r\n        ]\r\n    ], React.h\r\n);\r\n```\r\n\r\nOr even:\r\n\r\n```js\r\nReact.xml = function(pojo) {\r\n    return xml(pojo, React.h);\r\n};\r\n```\r\n\r\nSo now, instead installing `.jsx` to `.js` compiler and writing your components in some weird `xml-js` mix language:\r\n\r\n```jsx\r\nvar CommentBox = React.createClass({\r\n    render: function() {\r\n        return (\r\n            \u003cdiv className=\"commentBox\"\u003e\r\n                Hello, world! I am a CommentBox.\r\n            \u003c/div\u003e\r\n        );\r\n    }\r\n});\r\n```\r\n\r\nYou can do everything in **100%** JavaScript:\r\n\r\n```jsx\r\nvar CommentBox = React.createClass({\r\n    render: function() {\r\n        React.xml(\r\n            // BONUS:\r\n            // You can now add plain comments to your React templates,\r\n            // without the required {/* */} syntax (in some places).           \r\n            ['div', {className: 'commentBox'},\r\n                'Hello, world! I am a CommentBox.'\r\n            ]\r\n        );\r\n    }\r\n});\r\n```\r\n\r\nTypeScript definitions for your extension:\r\n\r\n```ts\r\ndeclare namespace __React {\r\n    export var h: (...pojo: any[]) =\u003e React.ReactElement\u003cany\u003e;\r\n    export var xml: (pojo: any[]) =\u003e React.ReactElement\u003cany\u003e;\r\n}\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstreamich%2Fxml-light","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstreamich%2Fxml-light","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstreamich%2Fxml-light/lists"}