{"id":18537923,"url":"https://github.com/easywebapp/dom-renderer","last_synced_at":"2025-04-09T17:37:08.568Z","repository":{"id":57214758,"uuid":"168970997","full_name":"EasyWebApp/DOM-Renderer","owner":"EasyWebApp","description":"A light-weight DOM Renderer supports Web components standard \u0026 TypeScript language.","archived":false,"fork":false,"pushed_at":"2025-02-25T14:43:03.000Z","size":434,"stargazers_count":7,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-06T05:40:07.996Z","etag":null,"topics":["component","dom","ecmascript","html5","light-weight","render","web"],"latest_commit_sha":null,"homepage":"http://web-cell.dev/DOM-Renderer/","language":"TypeScript","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/EasyWebApp.png","metadata":{"files":{"readme":"ReadMe.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"custom":["https://paypal.me/TechQuery","https://tech-query.me/image/TechQuery-Alipay.jpg"]}},"created_at":"2019-02-03T17:16:53.000Z","updated_at":"2025-02-25T14:42:31.000Z","dependencies_parsed_at":"2024-06-21T14:17:18.831Z","dependency_job_id":"4de48f83-8242-45a8-add9-2751a750fc3f","html_url":"https://github.com/EasyWebApp/DOM-Renderer","commit_stats":{"total_commits":20,"total_committers":1,"mean_commits":20.0,"dds":0.0,"last_synced_commit":"11044cbfe9e479a918dea257188d75d5393868ef"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EasyWebApp%2FDOM-Renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EasyWebApp%2FDOM-Renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EasyWebApp%2FDOM-Renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EasyWebApp%2FDOM-Renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EasyWebApp","download_url":"https://codeload.github.com/EasyWebApp/DOM-Renderer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248078319,"owners_count":21044088,"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":["component","dom","ecmascript","html5","light-weight","render","web"],"created_at":"2024-11-06T19:41:13.363Z","updated_at":"2025-04-09T17:37:08.560Z","avatar_url":"https://github.com/EasyWebApp.png","language":"TypeScript","funding_links":["https://paypal.me/TechQuery","https://tech-query.me/image/TechQuery-Alipay.jpg"],"categories":[],"sub_categories":[],"readme":"# DOM Renderer\n\nA light-weight DOM Renderer supports [Web components][1] standard \u0026 [TypeScript][2] language.\n\n[![NPM Dependency](https://img.shields.io/librariesio/github/EasyWebApp/DOM-Renderer.svg)][3]\n[![CI \u0026 CD](https://github.com/EasyWebApp/DOM-Renderer/actions/workflows/main.yml/badge.svg)][4]\n\n[![NPM](https://nodei.co/npm/dom-renderer.png?downloads=true\u0026downloadRank=true\u0026stars=true)][5]\n\n[![Open in GitPod](https://gitpod.io/button/open-in-gitpod.svg)][6]\n\n## Feature\n\n-   input: [Virtual DOM][7] object in [JSX][8] syntax\n-   output: [DOM][9] object or [XML][10] string of [HTML][11], [SVG][12] \u0026 [MathML][13] languages\n-   run as: **Sync**, [Async][14], [Generator][15] functions \u0026 [Readable streams][16]\n\n## Usage\n\n### JavaScript\n\n#### Sync Rendering\n\n```js\nimport { DOMRenderer, VNode } from 'dom-renderer';\n\nconst newVNode = new DOMRenderer().patch(\n    new VNode({\n        tagName: 'body',\n        node: document.body\n    }),\n    new VNode({\n        tagName: 'body',\n        children: [\n            new VNode({\n                tagName: 'a',\n                props: { href: 'https://idea2.app/' },\n                style: { color: 'red' },\n                children: [new VNode({ text: 'idea2app' })]\n            })\n        ]\n    })\n);\nconsole.log(newVNode);\n```\n\n#### Async Rendering (experimental)\n\n```diff\nimport { DOMRenderer, VNode } from 'dom-renderer';\n\n-const newVNode = new DOMRenderer().patch(\n+const newVNode = new DOMRenderer().patchAsync(\n    new VNode({\n        tagName: 'body',\n        node: document.body\n    }),\n    new VNode({\n        tagName: 'body',\n        children: [\n            new VNode({\n                tagName: 'a',\n                props: { href: 'https://idea2.app/' },\n                style: { color: 'red' },\n                children: [new VNode({ text: 'idea2app' })]\n            })\n        ]\n    })\n);\n-console.log(newVNode);\n+newVNode.then(console.log);\n```\n\n### TypeScript\n\n[![Edit DOM Renderer example](https://codesandbox.io/static/img/play-codesandbox.svg)][17]\n\n#### `tsconfig.json`\n\n```json\n{\n    \"compilerOptions\": {\n        \"jsx\": \"react-jsx\",\n        \"jsxImportSource\": \"dom-renderer\"\n    }\n}\n```\n\n#### `index.tsx`\n\n##### Sync Rendering\n\n```tsx\nimport { DOMRenderer } from 'dom-renderer';\n\nconst newVNode = new DOMRenderer().render(\n    \u003ca href=\"https://idea2.app/\" style={{ color: 'red' }}\u003e\n        idea2app\n    \u003c/a\u003e\n);\nconsole.log(newVNode);\n```\n\n##### Async Rendering (experimental)\n\n```diff\nimport { DOMRenderer } from 'dom-renderer';\n\nconst newVNode = new DOMRenderer().render(\n    \u003ca href=\"https://idea2.app/\" style={{ color: 'red' }}\u003e\n        idea2app\n-    \u003c/a\u003e\n+    \u003c/a\u003e,\n+    document.body,\n+    'async'\n);\n-console.log(newVNode);\n+newVNode.then(console.log);\n```\n\n### Node.js \u0026 Bun\n\n#### `view.tsx`\n\n```tsx\nimport { DOMRenderer } from 'dom-renderer';\n\nconst renderer = new DOMRenderer();\n\nconst Hello = () =\u003e \u003ch1\u003eHello, JSX SSR!\u003c/h1\u003e;\n\nexport const generateStream = () =\u003e renderer.renderToReadableStream(\u003cHello /\u003e);\n```\n\n#### `index.ts`\n\n```js\nimport { Readable } from 'stream';\nimport { createServer } from 'http';\nimport 'dom-renderer/polyfill';\n\nimport { generateStream } from './view';\n\ncreateServer((request, response) =\u003e {\n    const stream = generateStream();\n\n    Readable.fromWeb(stream).pipe(response);\n}).listen(8080);\n```\n\n## Framework\n\n### Web components\n\n[![Edit MobX Web components](https://codesandbox.io/static/img/play-codesandbox.svg)][18]\n\n## Original\n\n### Inspiration\n\n[![SnabbDOM](https://github.com/snabbdom.png)][19]\n\n### Prototype\n\n[![Edit DOM Renderer](https://codesandbox.io/static/img/play-codesandbox.svg)][20]\n\n[1]: https://www.webcomponents.org/\n[2]: https://www.typescriptlang.org/\n[3]: https://libraries.io/npm/dom-renderer\n[4]: https://github.com/EasyWebApp/DOM-Renderer/actions/workflows/main.yml\n[5]: https://nodei.co/npm/dom-renderer/\n[6]: https://gitpod.io/?autostart=true#https://github.com/EasyWebApp/DOM-Renderer\n[7]: https://en.wikipedia.org/wiki/Virtual_DOM\n[8]: https://facebook.github.io/jsx/\n[9]: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\n[10]: https://developer.mozilla.org/en-US/docs/Web/XML\n[11]: https://developer.mozilla.org/en-US/docs/Web/HTML\n[12]: https://developer.mozilla.org/en-US/docs/Web/SVG\n[13]: https://developer.mozilla.org/en-US/docs/Web/MathML\n[14]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function\n[15]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*\n[16]: https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream\n[17]: https://codesandbox.io/s/dom-renderer-example-pmcsvs?autoresize=1\u0026expanddevtools=1\u0026fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2Findex.tsx\u0026theme=dark\n[18]: https://codesandbox.io/s/mobx-web-components-pvn9rf?autoresize=1\u0026fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2FWebComponent.ts\u0026moduleview=1\u0026theme=dark\n[19]: https://github.com/snabbdom/snabbdom\n[20]: https://codesandbox.io/s/dom-renderer-pglxkx?autoresize=1\u0026expanddevtools=1\u0026fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2Findex.ts\u0026theme=dark\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasywebapp%2Fdom-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feasywebapp%2Fdom-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasywebapp%2Fdom-renderer/lists"}