Skip to content

SolidJS Universal Renderer

Scott Vorthmann edited this page May 3, 2023 · 4 revisions

In lieu of better documentation from SolidJS itself...

Rendering in SolidJS is essentially done at compile time, as you can see by exploring the "output" tab of the SolidJS Playground. Although a similar code transformation happens in React, the difference is that React generates code to construct a "virtual DOM" tree of regular objects, and then a reconciler converts virtual DOM changes to actual DOM changes. For React, the concept of rendering to a different target means switching to a different reconciler. Since SolidJS has no virtual DOM, the generated code itself must somehow create different code for different targets.

For many universal renderer use-cases, such as command-line interfaces or native UIs, the SolidJS Babel plugin is simply configured to generate: "universal" with a particular module specifier, and that module's render() function is then applied to the root component of the application. However, for something like solid-three, we actually want to use normal DOM for most of the application, with "islands" of 3D content within <Canvas/> components. This means we cannot simply use a single renderer module as the target for the Babel plugin... we need a combination.

This is where generate: "dynamic" comes into play. It allows you to specify a list of renderers, assigning tags to match for each. In this configuration, when the Babel plugin encounters a native tag (e.g. div or mesh, always lower camelCase), it simply decides which renderer to use for creating that object.

TODO: sample code, reference links to SolidJS docs, etc.

Clone this wiki locally