Events & Refs

[00:00:00]
>> Let's pretend we wanted to track the mouse position on this div. Well, that's pretty easy to do. We basically use a convention of using camel case on DOM events, so on, and then the DOM event. So you can do on mouse move or let's see. It's funny we actually support both.

[00:00:19]
But let's do this one, onMouseMove = { handleMouseMove }. And handleMouseMove in this case is, we're just setting a signal that updates some x and y coordinates that we display in here. And the one we go in here, unsurprisingly, it works. So important thing to know is that our event handlers, they can be in line as well.

[00:00:39]
They pass the DOM event, and then you can read the event and set the appropriate data. We support a style tag, and it's a little bit different than you might have seen in some frameworks. It does support objects, but we actually rely on standard DOM properties. And this means that we don't camel case.

[00:01:15]
And instead, what we ended up doing is we put. I've got a couple extra brackets somewhere. There we go, some fun animation. We actually use stuff like the dash case for CSS. And this might seem like an interesting choice, and it also means pixels and whatnot. But it gives us a lot of control and flexibility here because the compiler will actually output individual style update commands for DOM, essentially per one of these.

[00:01:52]
So if say, one of them updates and then the other ones don't, it'll actually just update the specific CSS property independently of the other ones. And we can also support CSS variables this way, we can add --my-variable. And it's also lines with stuff like serverside rendering. It helps us with performance because, again, when you're serializing the stuff into the DOM, we don't wanna do all these camel case transformation.

[00:02:22]
So this is performance optimization. It gives you more flexibility and control, and it makes a difference on both the client and the server. But yeah, in this example, we're literally just using setInterval to blow up some text. Similarly dealing with classes, you can just use class in Solid, not class name or anything.

[00:02:50]
We support standard HTML properties. But we also have an interesting helper, which lets us kind of shortcut some of this stuff to do an object form. So for example, instead of doing this foo, selected or this, which is pretty common place, we can go ClassList, which uses the underlying ClassList property on the element, and let's us do something like selected when essentially current equals foo.

[00:03:27]
And again, this is just convenient when you wanna apply multiple styles. It's not a huge game changer here, sorry, it's an object. But it lets us get around certain amount of overhead. One thing that's becoming dreadfully clear to me is that the playground is much better than the tutorials, [LAUGH] because the tutorials seem to be having a little bit of an issue here.

[00:04:02]
Okay, And let me see here. Cuz, yeah, this is a selector thing where basically you're using mutual exclusive selectors in this thing. And essentially, I'm just going to pop this down into all of these. But yeah, it's just a convenience, it's not groundshaking. But it's a cool little feature to have, ClassList.

[00:04:37]
Yeah, it's baz and bar, yeah, baz and bar. There we go. Bar and baz. [LAUGH] There you go. [LAUGH] All right, still working, okay, good, good, good. And one of the cool side effects of it is that we can also use it for dynamic expressions. There's actually a little thing here on the side, but we can also choose what class it is.

[00:05:11]
We can use object notation for JavaScript and put a signal maybe in here. So you can actually change what the keys are, dynamically as well. So it's a nice little tool because you can kind of combine these objects and kind of describe more complicated logic with it. Refs give you a reference to a native element.

[00:05:34]
And in Solid you can do this in two ways. The easiest way and more straightforward way is to just create a variable, and it's just a normal variable, this let canvas. And then all we do is on our element. We go ref canvas here. And now you'll see our nice effect cuz we have reference to our Canvas and now one of the Solid logos here is getting animated with color.

[00:06:00]
But we also have a different way of using refs, right? This works really well when you wanna wait and use it in onMount. So once it's been connected to the DOM, see we're using our Canvas directly here. We can also just create a signal, which also works quite well.

[00:06:22]
Because sometimes, or really any function for that matter, we can use callback refs. And this gives us a little bit more control about how we assign the ref, which can be useful. So in this case, I'm gonna change this Canvas to, now it's gonna be a function, and then down here we can go setCanvas.

[00:06:48]
For an example like this, it's effectively the same thing. ref={ setCanvas }, and probably referencing Canvases function in multiple places. Here I am. Let's just update them all. And one more. Import createSignal. And we have the same effect again. So you have a couple of choices here, right?

[00:07:37]
You can always assign it directly to the element. But if you wanna keep your JSX together, you can just assign to a variable or use a signal if you wanna do some more dynamic stuff with it. Right, and similarly, we can actually forward our refs through components. And we don't actually need much of a special syntax for that, right?

[00:08:08]
Now, similar example where we have all this logic, and for some reason, I've broken the Canvas out into a different component. And in here, we have our Canvas element. All we need to do is Go ref, props.ref. And it's basically a special property. We know with props.ref, we can basically, if the ref is provided by the parent like it is here, which is just this Canvas variable again, we can forward it through.

[00:08:46]
And let's update this URL. Looks like this site is down. And there we go. We see our same Canvas effects. So even through components, we can forward refs simply by using the props.ref property.