How much compiler magic does SolidJS use?
When I started learning SolidJS, a lot of things seemed like magic because I failed to read the explanation of how they worked (or there wasn't one).
Tracking Scopes
Reactivity of props
etc
These are not magic. I have learnt that tracking scopes work because when a reactive value is read it reads some kind of global state to find out what tracking scope called it and add the tracking scope as a dependency. Signals expose their reactivity with a getter, and props can hide the getter with an actual
get function because it is behind property access.
So when Vite builds my solidjs app, is there anything special going on to make SolidJS work?2 Replies
props can hide the getter with an actual get function because it is behind property access.this is most likely the biggest part of the solid magic and highly contested! a solidlike library
voby uses the regular jsx transform that ships with typescript, which practically means you have to do <Comp signal={signal} /> instead of <Comp value={signal()} /> and then resolve the signal in the child component.
And then there are some performance optimizations that are part of the custom babel transform too:
- It uses template cloning for the elements instead of document.createElement
- It does event delegation: the body receives events and they are then passed to the element instead of attaching the event handlers directly to the element
- It merges render effects: it bails out of finegrained updates in jsx based on some heuristicyou can see the transform in action in the solid playground
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template