DOM Renderingchevron_right
Custom Rendererschevron_right
linkUsage Overview
Render-JSX can be used in two main ways: as a thin and fast DOM renderer, and as a basis for creating extensible custom JSX renderers and rendering plugins.
linkDOM Renderer
Render-JSX comes with a CommonDOMRenderer class which enables rendering pure DOM elements
on the document. It also has base DOM renderer and rendering plugins that allow for basic DOM rendering
either on client or server side.
1linkimport { CommonDOMRenderer } from 'render-jsx/dom';
2linkimport { ref } from 'render-jsx/common';
3link
4linkconst renderer = new CommonDOMRenderer();
5linkconst span = ref();
6link
7linkrenderer
8link .render(<div>You've been here for <span _ref={span}/> seconds.</div>)
9link .on(document.body);
10link
11linklet s = 0;
12linkspan.$.textContent = `${s}`;
13linksetInterval(() => { s++; span.$.textContent = `${s}`; }, 1000);
linkQuick Access
linkCustom Plugins and Renderers
Imagine you want to be able to render callbags in your JSX. You can do that by writing a rendering plugin for it:
1linkimport { AppendPlugin, Plugin } from 'render-jsx/plugin';
2linkimport { LiveRendererLike } from 'render-jsx';
3link
4linkimport pipe from 'callbag-pipe';
5linkimport subscribe from 'callbag-subscribe';
6link
7link
8linkexport class CallbagAppendPlugin<Node> // --> this plugin can be applied to any node type
9link extends Plugin<Node, LiveRendererLike<Node>> // --> but the renderer must be live-like (understand life-cycle hooks)
10link implements AppendPlugin<Node> {
11link
12link priority() { return Plugin.PriorityFallback; }
13link
14link append(target: any, host: Node) {
15link if (typeof target === 'function') { // --> appending a function (perhaps callbag) is requested
16link const renderer = this.renderer(); // --> get the renderer
17link const leaf = renderer.leaf(); // --> create a leaf node
18link
19link renderer.hook(leaf, { // --> add life-cycle hook to the leaf
20link bind: () => pipe( // --> when it is bound
21link target, // --> start listening to the target
22link subscribe(v => renderer.setContent(leaf, v?.toString())) // --> and set its value as the leaf's content
23link )
24link });
25link
26link renderer.append(leaf, host); // --> now append this leaf to the host
27link return true;
28link }
29link
30link return false;
31link }
32link}
33link
You can now plug this plugin into any JSX renderer that supports life-cycle hooks to render
callbags, including the aforementioned CommonDOMRenderer:
1linkimport { CommonDOMRenderer } from 'render-jsx/dom';
2linkimport interval from 'callbag-interval';
3link
4linkimport { CallbagAppendPlugin } from './callbag-append.plugin';
5link
6linkconst renderer = new CommonDOMRenderer().plug(() => new CallbagAppendPlugin<Node>());
7link
8linkrenderer
9link .render(<div>You've been here for {interval(1000)} seconds.</div>)
10link .on(document.body);