How are signals implemented?
Hi all! Just saw Theo's latest on Vapor and got curious: how would one go about implementing signals? By that I mean how does Solid/Vapor tracks which elements called the signal to update later? I can see how that would happen in something like Svelte, which has a compiler, but from my understanding that's not how Vue/Solid do it, right? Then how can the framework figure out the which HTML element (or maybe it happens in the component level?) is associated with that specific function call (e.g.
I tried checking out how Solid's createSignal() works (https://github.com/solidjs/solid/blob/main/packages/solid/src/reactive/signal.ts#L1300), but I'm having a hard time figuring this out without a wider understanding of the framework, so I'm hoping y'all would be interested in figuring this out with me!
As expected, it looks to me quite a bit like your usual observer pattern (i.e.
As you prabably can infer, I'm waaay out of my depth here. I'm not nearly experienced enough with Solid (and possibly even with Typescript) to make sense of this (what even is the "root" being created here, in Solid? Does it have anything at all to do with what I assume "root" to be, coming from React?), so I was hoping we could learn together, as it'll probably take me quite a while playing with Solid and reading the source before I can grasp what's going on here on my own.
Also, I'm just using Solid as an example to learn about signals, so I'd be delighted if anyone knew of a simpler/more straightforward implementation of the concept we could use to figure it out (and then maybe come back to Solid knowing what to look for, to figure out whether it's similar or distinct).
count()I tried checking out how Solid's createSignal() works (https://github.com/solidjs/solid/blob/main/packages/solid/src/reactive/signal.ts#L1300), but I'm having a hard time figuring this out without a wider understanding of the framework, so I'm hoping y'all would be interested in figuring this out with me!
As expected, it looks to me quite a bit like your usual observer pattern (i.e.
this.observers.push(Listener)Listenerlistenerlistener = ListenerAs you prabably can infer, I'm waaay out of my depth here. I'm not nearly experienced enough with Solid (and possibly even with Typescript) to make sense of this (what even is the "root" being created here, in Solid? Does it have anything at all to do with what I assume "root" to be, coming from React?), so I was hoping we could learn together, as it'll probably take me quite a while playing with Solid and reading the source before I can grasp what's going on here on my own.
Also, I'm just using Solid as an example to learn about signals, so I'd be delighted if anyone knew of a simpler/more straightforward implementation of the concept we could use to figure it out (and then maybe come back to Solid knowing what to look for, to figure out whether it's similar or distinct).
GitHub
A declarative, efficient, and flexible JavaScript library for building user interfaces. - solidjs/solid
Solution
SolidJS uses its Reactivity to make fine-grained subscriptions which only update parts of the DOM on changes, instead of doing heavy DOM diffing.
Was this page helpful?
