Render-JSX

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);

► TRY IT!

👉 Read the Docs

Overview

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.

👉 Read the Docs

                    ╭────────────────────╮     ╭────────────────────╮         
                    │                    │     │                    │         
                    │        App         │────▶│     Components     │╶╶╶╶╶╶╶╶╮
                    │                    │╶╮   │                    │        ╷
                    ╰────────────────────╯ ╷   ╰────────────────────╯        ╷
                                │          ╷              │                  ╷
                                ╰────╮     ╰╶╶╶╶╶╶╶╶╶╶╶╶╶ │ ╶╶╶╶╶╶╶╶╶╶╶╶╶╶╮  ╷
                                     │                    │               ╷  ╷
                      ╭────────────╮ ▼                    ▼               ╷  ╷
                    ╭─│  Renderer  │────────────────────────────────╮     ╷  ╷
                    │ ╰────────────╯                                │     ╷  ╷
                    │      ╭─────────────────────────────────╮      │     ╷  ╷
                    │      │                                 │      │     ╷  ╷
                    │      │             Plugins             │╶╶╶╶╶╶╶╶╶╮  ╷  ╷
                    │      │                                 │      │  ╷  ╷  ╷
                    │      ╰─────────────────────────────────╯      │  ╷  ╷  ╷
                    │                       │                       │  ╷  ╷  ╷
                    │                       ▼                       │  ╷  ╷  ╷
                    │      ╭─────────────────────────────────╮      │  ╷  ╷  ╷
                    │      │                                 │      │  ╷  ╷  ╷
                    │      │          Base Renderer          │      │  ╷  ╷  ╷
                    │      │                                 │      │  ╷  ╷  ╷
                    │      ╰─────────────────────────────────╯      │  ╷  ╷  ╷
                    │                       │                       │  ╷  ╷  ╷
                    ╰────────────────────── │ ──────────────────────╯  ╷  ╷  ╷
                                            │                          ╷  ╷  ╷
                                            ▼                          ▽  ▽  ▽
                ╭──╮  ╭──╮  ╭──╮  ╭──╮  ╭──╮  ╭──╮  ╭──╮  ╭──╮  ╭──╮  ╭──╮  ╭──╮
                │  ╰──╯  ╰──╯  ╰──╯  ╰──╯  ╰──╯  ╰──╯  ╰──╯  ╰──╯  ╰──╯  ╰──╯  │
                │                                                              │
                │                    Environment / Context                     │
                │                                                              │

Installation

Use starter templates:

• JavaScript Starter Template
• TypeScript Starter Template

Or get the package:

npm i render-jsx

And use the following pragmas in your .jsx/.tsx files:

/** @jsx renderer.create */
/** @jsxFrag renderer.fragment */

👉 Read the Docs

Contribution

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.git

npm i                   # --> install dependencies

npm start               # --> run `samples/index.tsx` on `localhost:3000`

npm test                # --> run all tests

npm run cov:view        # --> run tests and display the code coverage report

npm 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/`)