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 code generation itself must create code that is "universal", with runtime rendering for different targets, whereas the "dom" rendering can be much more opinionated and specific.

SolidJS copied the pattern from Vue, defining a small set of primitive operations needed for building any sort of tree-like structure as required for user interfaces... "create object", "add/remove child", "set/remove property", and so on.

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, CHANGELOG, & implementation, links to dom-expressions, etc.

vite-plugin-inspect can be used to see the Babel plugin output, not visible in the playground for the universal renderer

Clone this wiki locally