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).
GitHub
solid/packages/solid/src/reactive/signal.ts at main · solidjs/solid
A declarative, efficient, and flexible JavaScript library for building user interfaces. - solidjs/solid
Solution:
Learn Reactive Programming with SolidJS | Course by the Creator of ...
SolidJS uses its Reactivity to make fine-grained subscriptions which only update parts of the DOM on changes, instead of doing heavy DOM diffing.
Jump to solution
13 Replies
Neto
Neto•9mo ago
SolidJS
YouTube
Intro to SolidJS reactivity (in 5 minutes)
An introduction video that walks you through Solid's reactivity in under 5 minutes.
Neto
Neto•9mo ago
(in theory) the algo to handle that is quite simple and easy the tricky part is making a good dx-wise most of the time you have a compiler for that (svelte, solid, vue vapor)
Neto
Neto•9mo ago
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
Neto
Neto•9mo ago
you can take the compiled output, or build locally, and track everything from there
Solution
Neto
Neto•9mo ago
Learn Reactive Programming with SolidJS | Course by the Creator of ...
SolidJS uses its Reactivity to make fine-grained subscriptions which only update parts of the DOM on changes, instead of doing heavy DOM diffing.
Neto
Neto•9mo ago
the preview is quite nice to understand a little bit more
lilak
lilak•9mo ago
oh, so they all use compilers, then? okay, I can see how that would work.
Neto
Neto•9mo ago
Yep most of the current solutions have compiling svelte, react (to some degree), solid, angular
lilak
lilak•9mo ago
nice resource, kinda knew that already but a great explainer regardless Okay, you kinda lost me with React and Svelte side by side there... I'm fairly familiar with Svelte and React (and Next.js and SvelteKit) from that list, and although the DX is fairly similar, their build steps are quite different, right? From my experience/understanding, the build step in React-based frameworks usually packages (i.e. bundle, minify, code-split, etc.) the transpiled TS/JSX without really rewriting it, while Svelte's build step rewrites a lot of code from the .svelte files, somewhat like what TS does. Honestly, writing this I've realized I haven't had to understand what my React framework is actually doing when it builds since the dreadful days of CRA and Webpack, so maybe I'm misunderstanding/underestimating how much of a compiler framworks like Next.js really are? Or is Solid somewhere in between React and Svelte in that sense? Where it does some inspection of the source to figure out where the sinal's being called but won't rewrite your code as agressively as something like Svelte
lilak
lilak•9mo ago
Okay, awesome, I think this is exactly what I wanted to know -> https://frontendmasters.com/courses/reactivity-solidjs/creating-a-signal-from-scratch/
Learn Creating a Signal from Scratch – Reactivity with SolidJS
Ryan creates a reactive signal from scratch. A global context array is used to store a list of observers that are subscribed to the signal. When the signal is updated, each observer's execute function …
lilak
lilak•9mo ago
And taught by the man himself! Thanks a lot for the resource :)
lilak
lilak•9mo ago
Seems like I'll have to buy the course to get my answers haha 🥲
ryansolid
ryansolid•8mo ago
I can answer the question Sorry took me a few days to notice. Generally Solid is mostly runtime. The only compile time trick we use is in the JSX where we look to see if you call a function (or access a property) and then we compile it to a getter/createEffect instead of just setting the value. So rather than looking at it like between Svelte and React.. it might be more like .. more React than React Atleast where things are heading with them. Signals are independent of rendering and have a defined behavior that is pretty out in the open. Very what you see is what you get. There are tradeoffs to that as you need to be aware of function wrappers a bit. But on the magical scale I'd say we are the least magical.
Want results from more Discord servers?
Add your server