DOM Renderingchevron_right
Custom Rendererschevron_right
linkCore Concepts
A Renderer provides baseline translation of JSX into a particular environment / context. For example you would have one renderer for rendering into DOM, one for iOS native UI, one for rendering into the shell, etc.
A Plugin provides additional functionality to a renderer. For example you can have a plugin that allows rendering
Observables, or one that injects specific configs for all components, etc.Renderers are immutable. Their behavior is customized by plugging plugins into some Base Renderer.
linkJSX Translation
In Render-JSX, JSX is translated into renderer.create(). Assuming renderer in scope is an instance of
a child class of Renderer, then for various operations (creating tagged nodes, leaf nodes, fragments, setting
properties, appending nodes together, etc.) it will first go over its provided plugins, and default to some
fallback behavior specified in the child class.
linkRenderer / Plugin Reusability
A renderer masks the API of its context / environment, allowing the application code, components and the plugins to be context / environment agnostic. For example, a plugin for rendering callbags can be fully environment agnostic (except for example that the environment has a concept of life-cycle), meaning it would be usable both for DOM rendering or for rendering native UI.
╭────────────────────╮ ╭────────────────────╮
│ │ │ │
│ │ │ │
│ App │────▶│ Components │╶╶╶╶╶╶╶╶╮
│ │╶╮ │ │ ╷
│ │ ╷ │ │ ╷
╰────────────────────╯ ╷ ╰────────────────────╯ ╷
│ ╷ │ ╷
│ ╷ │ ╷
╰────╮ ╰╶╶╶╶╶╶╶╶╶╶╶╶╶ │ ╶╶╶╶╶╶╶╶╶╶╶╶╶╶╮ ╷
│ │ ╷ ╷
╭────────────╮ │ │ ╷ ╷
│ │ ▼ ▼ ╷ ╷
╭─│ Renderer │────────────────────────────────╮ ╷ ╷
│ │ │ │ ╷ ╷
│ ╰────────────╯ │ ╷ ╷
│ │ ╷ ╷
│ ╭─────────────────────────────────╮ │ ╷ ╷
│ │ │ │ ╷ ╷
│ │ │ ╷ ╷
│ │ Plugins │╶╶╶╶╶╶╶╶╶╮ ╷ ╷
│ │ │ ╷ ╷ ╷
│ │ │ │ ╷ ╷ ╷
│ ╰─────────────────────────────────╯ │ ╷ ╷ ╷
│ │ │ ╷ ╷ ╷
│ │ │ ╷ ╷ ╷
│ ▼ │ ╷ ╷ ╷
│ ╭─────────────────────────────────╮ │ ╷ ╷ ╷
│ │ │ │ ╷ ╷ ╷
│ │ │ │ ╷ ╷ ╷
│ │ Base Renderer │ │ ╷ ╷ ╷
│ │ │ │ ╷ ╷ ╷
│ │ │ │ ╷ ╷ ╷
│ ╰─────────────────────────────────╯ │ ╷ ╷ ╷
│ │ │ ╷ ╷ ╷
│ │ │ ╷ ╷ ╷
│ │ │ ╷ ╷ ╷
╰────────────────────── │ ──────────────────────╯ ╷ ╷ ╷
│ ╷ ╷ ╷
│ ╷ ╷ ╷
▼ ▽ ▽ ▽
╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮
│ ╰──╯ ╰──╯ ╰──╯ ╰──╯ ╰──╯ ╰──╯ ╰──╯ ╰──╯ ╰──╯ ╰──╯ │
│ │
│ │
│ Environment / Context │
│ │
│ │
info NOTE
The application code, components and the plugins can directly utilize APIs of the environment (like DOM APIs), if they so choose to. In fact, in some situations, there is no other way. However this would mean that particular code would be aware of the environment / context and not usable in another one.