render-jsx

render pure dom using JSX

Usage no npm install needed!

<script type="module">
  import renderJsx from 'https://cdn.skypack.dev/render-jsx';
</script>

README

Render-JSX

tests coverage version

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:

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