lilak
TTCTheo's Typesafe Cult
•Created by lilak on 3/4/2024 in #questions
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.
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) in line 1292), but I still can't figure out how that would eventually map out to the DOM. Like, Listener is a global (line 54), which is assigned to listener when creating a root (line 142)... But in line 173 it's just listener = Listener??? 💀
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).29 replies