linkCustom Renderers

You can create custom renderers by extending Renderer class:

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

2link

3link

4linkexport class DummyRenderer extends Renderer<any, DummyRenderer> {

5link  fallbackCreate(tag: any) {

6link    return { tag, props: {}, children: [] };

7link  }

8link

9link  fallbackAppend(target: any, host: any) {

10link    if (target.tag === 'FRAGMENT') {

11link      target.children.forEach(child => this.append(child, host));

12link    } else {

13link      host.children.push(target);

14link    }

15link  }

16link

17link  fallbackSetProp(node: any, prop: string, target: any) {

18link    node.props[prop] = target;

19link  }

20link

21link  fallbackSetContent(node: any, target: any) {

22link    if (node.tag === 'LEAF') {

23link      node.content = target;

24link    }

25link  }

26link

27link  fallbackFragment() { return 'FRAGMENT'; }

28link  fallbackLeaf() { return { tag: 'LEAF', } }

29link

30link  renderOn(target: any, host: any): void { throw Error('NOT SUPPORTED!'); }

31link  renderAfter(target: any, ref: any): void { throw Error('NOT SUPPORTED!'); }

32link  renderBefore(target: any, ref: any): void { throw Error('NOT SUPPORTED!'); }

33link

34link  remove() {}

35link

36link  clone(...plugins) { return new DummyRenderer(...plugins); }

37link}

linkLive Renderers

Sometimes the tree described by the JSX is alive, i.e. its nodes have life-cycles. In such environments it is recommended that your custom renderer also implements LiveRendererLike interface, as that would allow plugins and components to tap into life-cycle of nodes and provide more reactive-style features.

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

2link

3linkexport class MyRenderer extends Renderer<N> implements LiveRenderer<N> {

4link  // ...

5link

6link  hook(node: N, hook: LifeCycleHook) {

7link    //

8link    // --> somehow attach given life cycle hook to the node

9link    //

10link  }

11link}

info INFO

The hook parameter in this example has the following type signature:

1linkinterface LifeCycleHook {

2link  bind?(): void;

3link  clear?(): void;

4link}

The bind() callback, if provided, should be invoked when the node is attached and becomes alive (which is typically after when it is created), and clear() should be invoked when the node is detached (i.e. removed and is basically garbage now).