Tools for building JSX-based libraries / frameworks, also a super-thin and fast pure DOM renderer.
npm i render-jsx/** @jsx renderer.create */
import { CommonDOMRenderer } from 'render-jsx/dom';
const renderer = new CommonDOMRenderer();
renderer.render(
<div>
<b>Hellow</b> World!
</div>
).on(document.body);JSX is an syntax extension of JavaScript, allowing for XML-style representations within JavaScript. JSX needs to be transpiled (since it is an extension), with transpilers such as TypeScript or Babel. Transpilers in turn need to know what JSX should mean.
Render-JSX provides abstraction for specifying that meaning in a highly extensible way, allowing re-use of components and common JSX patterns across different domains. For example, you can re-use your components (or your custom class-based component system) while rendering to DOM (client-side), to HTML string (server side), to native UI libraries, to custom input format of a PDF generator, etc.
Render-JSX also comes with a super-thin and fast DOM renderer (which is mostly meant as a basis of more involved UI renderers). This means you can use it to create simple web interfaces without any extra dependency.
╭────────────────────╮ ╭────────────────────╮
│ │ │ │
│ App │────▶│ Components │╶╶╶╶╶╶╶╶╮
│ │╶╮ │ │ ╷
╰────────────────────╯ ╷ ╰────────────────────╯ ╷
│ ╷ │ ╷
╰────╮ ╰╶╶╶╶╶╶╶╶╶╶╶╶╶ │ ╶╶╶╶╶╶╶╶╶╶╶╶╶╶╮ ╷
│ │ ╷ ╷
╭────────────╮ ▼ ▼ ╷ ╷
╭─│ Renderer │────────────────────────────────╮ ╷ ╷
│ ╰────────────╯ │ ╷ ╷
│ ╭─────────────────────────────────╮ │ ╷ ╷
│ │ │ │ ╷ ╷
│ │ Plugins │╶╶╶╶╶╶╶╶╶╮ ╷ ╷
│ │ │ │ ╷ ╷ ╷
│ ╰─────────────────────────────────╯ │ ╷ ╷ ╷
│ │ │ ╷ ╷ ╷
│ ▼ │ ╷ ╷ ╷
│ ╭─────────────────────────────────╮ │ ╷ ╷ ╷
│ │ │ │ ╷ ╷ ╷
│ │ Base Renderer │ │ ╷ ╷ ╷
│ │ │ │ ╷ ╷ ╷
│ ╰─────────────────────────────────╯ │ ╷ ╷ ╷
│ │ │ ╷ ╷ ╷
╰────────────────────── │ ──────────────────────╯ ╷ ╷ ╷
│ ╷ ╷ ╷
▼ ▽ ▽ ▽
╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮
│ ╰──╯ ╰──╯ ╰──╯ ╰──╯ ╰──╯ ╰──╯ ╰──╯ ╰──╯ ╰──╯ ╰──╯ │
│ │
│ Environment / Context │
│ │
Use starter templates:
Or get the package:
npm i render-jsx
And use the following pragmas in your .jsx/.tsx files:
/** @jsx renderer.create */
/** @jsxFrag renderer.fragment */
There are no contribution guidelines or issue templates currently, so just be nice (and also note that this is REALLY early stage). Useful commands for development / testing:
git clone https://github.com/loreanvictor/render-jsx.gitnpm i # --> install dependenciesnpm start # --> run `samples/index.tsx` on `localhost:3000`npm test # --> run all testsnpm run cov:view # --> run tests and display the code coverage reportnpm i -g @codedoc/cli # --> install CODEDOC cli (for working on docs)codedoc install # --> install CODEDOC dependencies (for working on docs)codedoc serve # --> serve docs on `localhost:3000/render-jsx` (from `docs/md/`)