linkOverview

JSX is an XML-style syntax extension for JavaScript. It was created for describing DOM layouts intertwined with JavaScript values and logic, and can be used for description of any tree-based data:

1linkconst orgTree =                                                                                       // --> JavaScript

2link  <Org name={myOrg.name}>                                                                             {/* --> JSX */}

3link    {                                                                                                 // --> interpolate JS code

4link      myOrg.departments.map(department =>                                                             // --> JavaScript

5link        <Department name={department.name}>                                                           {/* --> JSX */}

6link          {                                                                                           // --> interpolate JS code

7link            department.people.map(person =>                                                           // --> JavaScript

8link              <Person name={person.name} role={person.role} />                                        // --> JSX

9link            );                                                                                        // --> JavaScript

10link          }                                                                                           {/* --> interpolate JS code */}

11link        </Department>                                                                                 // --> JSX

12link      );                                                                                              // --> JavaScript

13link    }                                                                                                 {/* --> interpolate JS code*/}

14link  </Org>;                                                                                             // --> JSX

As an extension, JSX needs to be transpiled to JavaScript. Transpilers such as TypeScript or Babel can properly turn JSX into JavaScript code, however they need to know what the JSX syntax means, i.e. are the JSX trees to be interpreted as HTML strings, as DOM elements, or some custom data type.

Render-JSX provides tools and abstractions for specifying that meaning in a highly extensible way. That is done through Renderers, which determine the baseline type and context to which the JSX is translated into, for example whether it is DOM elements, native UI components, input format of a particular PDF generator, etc.

The extensibility of these renderers is encapsulated in Plugins. Each plugin can extend part of the rendering (or JSX translation) process and add functionality, without necessarily being aware of the nature of the renderer. This means you can use the same plugin to add functional component support to a DOM renderer and a PDF renderer, or the exact same plugins for rendering Observables regardless of whether you are using an HTML renderer or a native UI renderer.

Using JSX for DOM rendering is the most common use case. As a result, Render-JSX comes with a simple and low-level DOM renderer. This renderer sits directly on top of DOM APIs and is pretty thin, and can be used either to write simple applications or as a basis for more involved rendering/UI frameworks/tools.

1linkimport { CommonDOMRenderer } from 'render-jsx/dom';

2linkimport { ref } from 'render-jsx/common';

3link

4linkconst renderer = new CommonDOMRenderer();

5linkconst list = ref();

6linkconst input = ref<HTMLInputElement>();

7link

8linkfunction Todo({title}) {

9link  const li = ref<HTMLElement>();

10link  return <li _ref={li}>

11link    <div>{title}</div>

12link    <button onclick={() => li.$.remove()}>X</button>

13link  </li>

14link}

15link

16linkrenderer.render(

17link  <div>

18link    <h1>Todos:</h1>

19link    <ol _ref={list}/>

20link    <input type="text" _ref={input}/>

21link    <button onclick={() => {

22link      renderer.render(<Todo title={input.$.value}/>).on(list.$);

23link      input.$.value = '';

24link    }}>Add</button>

25link  </div>

26link).on(document.body);