This library offers rich integration with the
htmlparser2 ecosystem. Thanks to the new TRE, you can process DOM nodes at parse time. It implies that the operation doesn't require a tree traversal contrary to legacy versions, and thus adds up very little overhead.
One important downside is that a DOM node next sibling won't have been parsed yet. However, the children and parent of this node are guaranteed to be attached to this node.
The API offers one prop,
domVisitors, which is a record of 3 optional fields:
Triggered when the root DOM
Documenthas been parsed, at the very end of the parsing phase.
Triggered when a DOM
Elementhas been parsed along with its children.
Triggered when a DOM
Textnode has been parsed along with its content.
Those callback should not return anything. Instead, you should change the node or its children in place, or just read its content for inspection purposes.
Two props can be used to ignore nodes.
ignoredDomTags is an array of lowercase tags to exclude, and
ignoreDomNode is a function taking every parsed DOM node and offering you to reject it by returning
true. Both props are processed at parse time.
ignoreDomNode is invoked, the passed node has not been attached to his parent yet. But the parent is given as a second argument.
This library provides
selectDomRoot prop to select a subtree to render. See example below:
selectDomRoot returns a falsy value, the initial root will be selected.
In some scenarios, you might want to inspect the DOM before rendering, and even perform asynchronous operations based on your findings. Use cases might involve, for example:
Fetching data from a Web API;
Pre-caching media assets.
To do so, we will take advantage of the composite rendering architecture and the dom source feature:
Let's note a few important details in this example:
RenderHTMLcomponent props pertaining to the Transient Render Engine layer such as
classesStyles(all styling props) and DOM related such as
The general recommendation for this three-layers rendering architecture is that the engine and configuration should be put near the top of your App to factor the cost of instantiating the engine. This is especially usefull for apps which will render hundreds to thousands of small snippets such as chat apps.