linkDOM Renderer Extensibility

You can add custom plugins to CommonDOMRenderer using .plug() method, extending its functionality:

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

2linkimport interval from 'callbag-interval';

3link

4linkimport { CallbagAppendPlugin } from './callbag-append.plugin';

5linkconst renderer = new CommonDOMRenderer().plug(() => new CallbagAppendPlugin<Node>());

6link

7linkrenderer

8link  .render(<div>You've been here for {interval(1000)} seconds.</div>)

9link  .on(document.body);

info IMPORTANT

A renderer's plugins cannot be changed after it was created. .plug() method returns a new renderer with the additional plugins plugged in.

linkCustom Renderers

CommonDOMRenderer is itself a LiveDOMRenderer with some plugins plugged in. You can basically re-create it like the following:

1linkimport { LiveRendererLike } from 'render-jsx';

2linkimport { LiveDOMRenderer } from 'render-jsx/dom';

3linkimport { LiveComponentProcessor, FunctionalComponentPlugin } from 'render-jsx/component/plugins';

4linkimport { FragmentLifeCycleMarkerComponentProcessor } from 'render-jsx/dom/component';

5linkimport { RefPlugin, ContentPropPlugin } from 'render-jsx/common/plugins';

6linkimport {

7link  EventHandlerPlugin,

8link  InputStatePlugin,

9link  OptionObjectValuePlugin,

10link  StylePlugin,

11link  ClassPlugin

12link} from 'render-jsx/dom/plugins';

13link

14link

15linkfunction myCommonRenderer() {

16link  return new LiveDOMRenderer().plug(

17link    () => new FunctionalComponentPlugin<Node, LiveRendererLike<Node>>(), // --> enables functional components

18link    () => new LiveComponentProcessor<Node>(),                            // --> enables life-cycle hooks for functional components

19link    () => new FragmentLifeCycleMarkerComponentProcessor(),               // --> enables specifying fragment life-cycle markers

20link

21link    () => new RefPlugin<Node>(),                                         // --> enables the `_ref` attribute

22link    () => new ContentPropPlugin<Node>(),                                 // --> enables the `_content` attribute

23link

24link    () => new EventHandlerPlugin(),                                      // --> enables functions as event handlers

25link    () => new InputStatePlugin(),                                        // --> enables `_state` attribute on inputs

26link    () => new OptionObjectValuePlugin(),                                 // --> enables `_value` attribute on options

27link    () => new ClassPlugin(),                                             // --> enables arrays and toggle maps for classes

28link    () => new StylePlugin(),                                             // --> enables style objects

29link  );

30link}

info NOTICE

Note that LiveDOMRenderer is specifically for environments where the DOM is alive (i.e. receiving and reacting to events, changing, etc.). For more static rendering (like SSR) you should use the parent class DOMRenderer as the basis of your custom renderers.