Spreads & Directives

[00:00:00]
>> Spreads are a way that we can dynamically add multiple properties from an object. Maybe those properties change and pass them down through our children. And it also has a convenience factor cuz sure, we could pass each of these things individually, right? And to be fair, this can be more optimized because we can impact each change independently when we do that.

[00:00:23]
But sometimes, we don't know all the variables that are gonna come through. So in those cases, it's easier sometimes to just use the syntax and we get the same result of our info here. And our info components literally just taking these props and just writing us a nice message.

[00:00:51]
The thing that always to remember with spreads is, they work as is great in the JSX. But we have to remember that when we're passing stuffs to those spreads merging objects to use those helpers that we showed earlier to make sure you don't lose reactivity. And the last binding syntax, this one doesn't come out too often.

[00:01:12]
But it is an interesting addition that we added to the JSX language. Refs are great, but sometimes you wanna package up more advanced behavior with them. And the way we can do that is something we call a directive and some frameworks like Svelte call them actions and Angular calls them directives.

[00:01:38]
I can't remember what Vue calls them. But essentially, we have this ability to kind of add some custom DOM logic. So let's say on this modal class, we wanted it to have click outside behavior. You wanted to add this behavior so that it closed whenever you click outside the modal.

[00:01:55]
Well, we can define that here, right? And this is where we basically implement that click outside logic. And the way we do this is creating this function that has a signature. It takes the element and it takes an accessor. And essentially, let's think here. If we wanna click outside, what we're gonna do is we're gonna make some kind of click handler.

[00:02:22]
And we can do this by essentially checking if the element contains the event target, right? So, and it's a, Right, and we actually are gonna give the ability for our click outside to be enabled to be toggled on and off. So we're also gonna check if our accessor which is a function, it's always a function regardless.

[00:02:48]
Sorry, it's writing off the side of the screen here, is has a truthy value. And then if there's a click handler here, we're going to. On our document.body, add an event listener to the click that uses this click handler. It's also important that we clean up after ourselves here.

[00:03:17]
So we're also going to add in onCleanup. Again, because this is all part of Solid's rendering, we can do this anywhere and we're gonna go, we're gonna remove our event listener that we just added onClick. And this is basically our directive that we just wrapped up some simple JavaScript behavior.

[00:03:41]
Then, here, we import our function. We go to our div and go use colon. So this is namespace thing, click or is it clickOutside? And by default, it's a Boolean, so this will just work. But we can also for our implementation here, toggle it. So that we're only managing it when the modal is visible, right?

[00:04:13]
And set show to false. And if everything works properly, we're gonna have a modal. Clicking in, it's fine, but when we click out of it, sorry. If we click out of it, okay, we can there. Typo, my bad. Contains, isn't it? Yeah, there's an S, there we go.

[00:04:39]
We open it, click in it, nothing happens. We click out of it and we get another error. Cuz I forgot to put click on the click handler, beautiful, all right. This is in clicking, fine, click out, close. And we basically have basic modal behavior, that we can add to really any DOM element by just including this directive.

[00:05:05]
So as I said, it's just syntactic sugar over ref, but it's kind of a nice convenience to be able to kind of packaged up these behaviors as well. We've seen a lot of this usage and things like custom form libraries where they'll have some custom hooks and then they'll have some custom directives and it kind of like all ties together.

[00:05:26]
So there's a lot we can do with the JSX language, right? And that is basically it for the specific syntaxes.