{"id":16640421,"url":"https://github.com/loreanvictor/render-jsx","last_synced_at":"2025-03-21T15:32:12.144Z","repository":{"id":57353471,"uuid":"293623234","full_name":"loreanvictor/render-jsx","owner":"loreanvictor","description":"Tools for building JSX-based libraries / frameworks, also a super-thin and fast pure DOM renderer.","archived":false,"fork":false,"pushed_at":"2020-12-01T13:19:52.000Z","size":1241,"stargazers_count":38,"open_issues_count":6,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T02:44:38.253Z","etag":null,"topics":["abstraction","dom","frontend","javascript","jsx","typescript"],"latest_commit_sha":null,"homepage":"https://loreanvictor.github.io/render-jsx/","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/loreanvictor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"loreanvictor"}},"created_at":"2020-09-07T20:13:50.000Z","updated_at":"2024-10-22T16:28:09.000Z","dependencies_parsed_at":"2022-09-19T03:10:25.010Z","dependency_job_id":null,"html_url":"https://github.com/loreanvictor/render-jsx","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/loreanvictor%2Frender-jsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loreanvictor%2Frender-jsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loreanvictor%2Frender-jsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loreanvictor%2Frender-jsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/loreanvictor","download_url":"https://codeload.github.com/loreanvictor/render-jsx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244822723,"owners_count":20516154,"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":["abstraction","dom","frontend","javascript","jsx","typescript"],"created_at":"2024-10-12T07:08:49.033Z","updated_at":"2025-03-21T15:32:11.690Z","avatar_url":"https://github.com/loreanvictor.png","language":"TypeScript","funding_links":["https://github.com/sponsors/loreanvictor"],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"/render-jsx-logo.svg\" width=\"300\"/\u003e\n\n# Render-JSX\n\n[![tests](https://img.shields.io/github/workflow/status/loreanvictor/render-jsx/Test%20and%20Report%20Coverage?label=tests\u0026logo=mocha\u0026logoColor=green\u0026style=flat-square)](https://github.com/loreanvictor/render-jsx/actions?query=workflow%3A%22Test+and+Report+Coverage%22)\n[![coverage](https://img.shields.io/codecov/c/github/loreanvictor/render-jsx?logo=codecov\u0026style=flat-square)](https://codecov.io/gh/loreanvictor/render-jsx)\n[![version](https://img.shields.io/npm/v/render-jsx?logo=npm\u0026style=flat-square)](https://www.npmjs.com/package/render-jsx)\n\n\nTools for building JSX-based libraries / frameworks, also a super-thin and fast pure DOM renderer.\n\n```bash\nnpm i render-jsx\n```\n\n```tsx\n/** @jsx renderer.create */\n\nimport { CommonDOMRenderer } from 'render-jsx/dom';\n\nconst renderer = new CommonDOMRenderer();\nrenderer.render(\n  \u003cdiv\u003e\n    \u003cb\u003eHellow\u003c/b\u003e World!\n  \u003c/div\u003e\n).on(document.body);\n```\n[► TRY IT!](https://stackblitz.com/edit/render-jsx-demo)\n\n👉 [Read the Docs](https://loreanvictor.github.io/render-jsx/)\n\n\u003cbr\u003e\u003cbr\u003e\n\n# Overview\n\n[JSX](https://facebook.github.io/jsx/) is an syntax extension of JavaScript, \nallowing for XML-style representations within JavaScript. JSX needs to be transpiled (since it is an extension),\nwith transpilers such as [TypeScript](https://www.typescriptlang.org) or [Babel](https://babeljs.io).\nTranspilers in turn need to know what JSX should mean.\n\n**Render-JSX** provides abstraction for specifying that _meaning_ in a highly extensible way, allowing re-use\nof components and common JSX patterns across different domains.\nFor example, you can re-use your components (or your custom class-based component system) while rendering to DOM (client-side),\nto HTML string (server side), to native UI libraries, to custom input format of a PDF generator, etc.\n\n**Render-JSX** also comes with a super-thin and fast DOM renderer (which is mostly meant as a basis of more involved UI renderers). \nThis means you can use it to create simple web interfaces without any extra dependency.\n\n👉 [Read the Docs](https://loreanvictor.github.io/render-jsx/docs/overview)\n\n```\n                    ╭────────────────────╮     ╭────────────────────╮         \n                    │                    │     │                    │         \n                    │        App         │────▶│     Components     │╶╶╶╶╶╶╶╶╮\n                    │                    │╶╮   │                    │        ╷\n                    ╰────────────────────╯ ╷   ╰────────────────────╯        ╷\n                                │          ╷              │                  ╷\n                                ╰────╮     ╰╶╶╶╶╶╶╶╶╶╶╶╶╶ │ ╶╶╶╶╶╶╶╶╶╶╶╶╶╶╮  ╷\n                                     │                    │               ╷  ╷\n                      ╭────────────╮ ▼                    ▼               ╷  ╷\n                    ╭─│  Renderer  │────────────────────────────────╮     ╷  ╷\n                    │ ╰────────────╯                                │     ╷  ╷\n                    │      ╭─────────────────────────────────╮      │     ╷  ╷\n                    │      │                                 │      │     ╷  ╷\n                    │      │             Plugins             │╶╶╶╶╶╶╶╶╶╮  ╷  ╷\n                    │      │                                 │      │  ╷  ╷  ╷\n                    │      ╰─────────────────────────────────╯      │  ╷  ╷  ╷\n                    │                       │                       │  ╷  ╷  ╷\n                    │                       ▼                       │  ╷  ╷  ╷\n                    │      ╭─────────────────────────────────╮      │  ╷  ╷  ╷\n                    │      │                                 │      │  ╷  ╷  ╷\n                    │      │          Base Renderer          │      │  ╷  ╷  ╷\n                    │      │                                 │      │  ╷  ╷  ╷\n                    │      ╰─────────────────────────────────╯      │  ╷  ╷  ╷\n                    │                       │                       │  ╷  ╷  ╷\n                    ╰────────────────────── │ ──────────────────────╯  ╷  ╷  ╷\n                                            │                          ╷  ╷  ╷\n                                            ▼                          ▽  ▽  ▽\n                ╭──╮  ╭──╮  ╭──╮  ╭──╮  ╭──╮  ╭──╮  ╭──╮  ╭──╮  ╭──╮  ╭──╮  ╭──╮\n                │  ╰──╯  ╰──╯  ╰──╯  ╰──╯  ╰──╯  ╰──╯  ╰──╯  ╰──╯  ╰──╯  ╰──╯  │\n                │                                                              │\n                │                    Environment / Context                     │\n                │                                                              │\n```\n\n\u003cbr\u003e\u003cbr\u003e\n\n# Installation\n\nUse starter templates:\n- [JavaScript Starter Template](https://github.com/loreanvictor/render-jsx-starter-js)\n- [TypeScript Starter Template](https://github.com/loreanvictor/render-jsx-starter-ts)\n\nOr get the package:\n```\nnpm i render-jsx\n```\nAnd use the following pragmas in your `.jsx`/`.tsx` files:\n```\n/** @jsx renderer.create */\n/** @jsxFrag renderer.fragment */\n```\n👉 [Read the Docs](https://loreanvictor.github.io/render-jsx/docs/install)\n\n\u003cbr\u003e\u003cbr\u003e\n\n# Contribution\n\nThere are no contribution guidelines or issue templates currently, so just be nice (and also note that this is REALLY early stage).\nUseful commands for development / testing:\n```bash\ngit clone https://github.com/loreanvictor/render-jsx.git\n```\n```bash\nnpm i                   # --\u003e install dependencies\n```\n```bash\nnpm start               # --\u003e run `samples/index.tsx` on `localhost:3000`\n```\n```bash\nnpm test                # --\u003e run all tests\n```\n```bash\nnpm run cov:view        # --\u003e run tests and display the code coverage report\n```\n```bash\nnpm i -g @codedoc/cli   # --\u003e install CODEDOC cli (for working on docs)\n```\n```bash\ncodedoc install         # --\u003e install CODEDOC dependencies (for working on docs)\n```\n```bash\ncodedoc serve           # --\u003e serve docs on `localhost:3000/render-jsx` (from `docs/md/`)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floreanvictor%2Frender-jsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Floreanvictor%2Frender-jsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floreanvictor%2Frender-jsx/lists"}