useTheme & useMagicKeys Exercise

[00:00:00]
>> Ben Hong: You all have now gotten essentially a good overview of what composables are, what they're capable of, and some different patterns for implementing things. So what I have for you here is a fun challenge. We are first going to start by creating a use theme composable that allows you to switch between the different themes and you'll find this on the Settings page.

[00:00:21]
Then I want you to combine this with the viewus, which is already installed as a dependency in your app, the Use Magic Keys for a way to switch between different themes using just keyboard shortcuts. Your mission is to go explore the docs, okay? So you should know how to go through the use theme, go into the settings, but now you're going to want to figure out how you can combine that with Vue Uses Use Magic keys, which, by the way, one of my favorite things they did, which part of the reason I want you all to play with it and combine them.

[00:00:56]
And I'm kind of curious to see what you all wanna do or end up doing with that. That said, in the event you're like, eh, I don't know, I don't want to do that, then the exercise here is to use what you know about Composables. Pick something in Vue Use that looks like it might be fun or might apply to your project, and then basically combine those and then see how it works again.

[00:01:22]
What's fun about Composition API is that you have a lot of different ways to do it. So what I'm going to be proposing is one way of doing it, and then, you know, compare, contrast and see how it compares to yours. Okay, so first thing first, we look, actually, we can look at the docs in a second.

[00:01:39]
So first thing first, we know that we need to go ahead and abstract out the functionality that we see inside of Settings View, because this is ultimately where we see the theme being ultimately managed. And so my first instinct with this is to go ahead, as I think a lot of you did.

[00:01:56]
We just have a useTheme.ts, we don't need to get too fancy. And then I'm actually just gonna grab everything. I don't think there's kind of a point not to. And so what we do know is that here we are clearly watching some of this stuff. So honestly, at this point, to keep it easy, I am of the mind, I'm just gonna make all of these individual things that I can export.

[00:02:22]
I don't think I need a full store model just yet. Now, the tricky thing, though, is that this Watch Lifecycle Hook is not something that you can just like. You can't just like export this. That's not like a thing. And so what you need to do instead is to have a function that's basically something like use theme.

[00:02:40]
So this is where the factory does come into play. Because then you're basically saying when you initiate this, initiate the watch and then set it accordingly. And then to make sure this is working, we just need to import everything from the composable. So composable slash, use theme. Great.

[00:03:00]
All right, so what do we need? We need current theme and we need on theme change. Ooh, what was on theme change? Okay, looks like on theme change was most likely some sort of watch effect in that regard, so. Nope, that doesn't make. Okay, I know what it is.

[00:03:20]
So we need to actually set the setTheme. Yep. So we need to set the theme every time the select thing changes. And then why is it yelling at me now? Theme string is not available to parameter. What did I forget? onThemeChange. Yep, that did not exist, though.
>> Speaker 2: Aren't we doing it with the watcher?

[00:03:54]
>> Ben Hong: Yeah, that's kind of funny. So I don't. Yeah, so actually, you know what? I think now I remember. I think this is actually not relevant, this code, because we have a V model here already. So having a second function method on that is irrelevant. So, yeah, I think you're spot on on that.

[00:04:11]
So we have our themes here, which is great. Now everything's good. But I think you all know where I'm headed with this. If we go ahead and test this out right now inside of our app, okay? We're still up and running. Nothing is happening. And the reason for that is because we need the ability to watch the thing.

[00:04:29]
So this is where our use theme function is going to come into play here. So like this and then useTheme like that. And I think refresh. There you go. Now it works. Okay, so here's the question, right? We wanna now use the vueUse magic key. So we look at the magic keys and again, this thing, I just love it.

[00:04:57]
The fact that it just makes it like, look at that. If you push and it rotates. So it's like if you do vue and then shift, it'll rotate. I don't know. Great demo. Whoever came up with that. And so the fact that you can just name it by namespace.

[00:05:12]
This is great. Okay, so knowing this is how it's possible to be used. Let's see, how do I want to do this? You can export them out this way or we can just do it. Let's see. And then also we can do combinations here, right? So this, we can just plus them together.

[00:05:30]
Looks like this is another alternative as well to like use underscores. So I'm going to do something like control shift and then like a number to represent like the number to the correspond with the themes. So in my mind when I'm looking at this. So let me go ahead and I just need to grab this, actually, I'll just grab this right here for now.

[00:05:50]
I'm thinking, okay, so yes, this composable is responsible for changing the theme, but I'm now gonna have this different composable because now I'm doing reactivity with hotkeys. So for me I'm going to do one called use hotkeys. And then inside of here we're basically going to do. Let's see, how do we want to do this?

[00:06:11]
We need to instantiate it because ultimately what we need to do is be able to listen for it. And so I've read this, the docs on this and so there's actually this thing called whenever, which is a great, great utility function. Whenever this thing happens, this gets pressed.

[00:06:27]
Then do a callback function to do said thing. So this is where the composition starts to come into play. Right. So in my mind, so export function, use hotkey. Let's see, I'll say hot theme keys. That's what I'm gonna call it because that's what specifically these hotkeys do.

[00:06:45]
And so I'm gonna say const keys equals useMagicKeys(). And then just to make things a bit easier, then we'll basically say whenever keys dot and inside the control shift one then we get a function and what do we want this function to do? Well, I wanted to change themes, so I'm going to import my themes, let's see, set theme from my composable.

[00:07:13]
But I also need to be able to reference the themes themselves. So that way I should be able to do something like this. I need one of her too. Okay, and so in terms of where I want to listen to this, if you put this on the settings page, that means it only will work on there.

[00:07:35]
So my first instinct then is to go to the app view page and inside here is where I would say import use hot theme keys. And then here let's do use hot theme keys like that. Okay, so let me just do a couple real quick and see if this works.

[00:07:58]
We could obviously just loop it, but Just for now, for simplicity sake. Okay, Refresh. Okay. We go to the home and then control shift. 1, 2, 3, up. There we go. And it's shifting. I did in my demo, for some reason, the. It's not respecting the second theme.

[00:08:19]
I don't know why, to be honest with you. I'm hitting two and it's doing nothing, but it gives me the other ones. So that's something else to debug for another time. But this is, I guess, one version of how this might be implemented the way I was thinking of this.

[00:08:41]
And this is where the composition comes into play. Because what we've done is we've taken this use theme here, which definitely lives on the settings page right here, and it's doing all the watching at this level. But then Use Hotkeys only has to worry about setting the theme because we know that it's being watched elsewhere.

[00:09:01]
And then I guess from what we can see, it's reactively updating accordingly. So then I think that solves the multiple watchers thing that you were running into, right? So, yeah, how does that compare to some of the stuff you all tried?
>> Speaker 2: I did that cycler that just ran through the indexes of the theme and then gets back to zero.

[00:09:29]
>> Ben Hong: Nice. Yep, definitely more elegant than this, for sure. [LAUGH] Yeah, and so this kind of fun stuff. One thing I like about things like vueUse, right? Because something like Hotkeys is actually traditionally kind of a tricky thing to implement, right. If you're gonna do it from scratch.

[00:09:48]
And I do think as more and more we look at software where we're looking at keyboard accessibility and stuff, being able to let users customize their hotkeys and do all sorts of cool combinations of whatever they want so they can run whatever command they want. Like, I do think that opens the doorway for just all sorts of customization.

[00:10:04]
So personally, this is one of the reasons this is one of my favorite utilities that they provide, because then it just. It becomes so easy to allow users to determine what they wanna add. And then all of a sudden, boom, you have personalization to that degree. And so I can't stress this enough.

[00:10:20]
This is just one way to do it. We already heard doing more of a cyclical going through the themes. Again, this is very hard coded, but yeah, this is just wanted to have some separation of concerns. I mean, some people you could even theoretically all do within use theme as well.

[00:10:35]
It's just up to you. And so that's why it's very much. Programming is an art in that way as we decide what tools we want to use, how we want to architect things and what we think makes the most sense as a final shout out to the things that I also think you should consider whenever you have a chance for your apps.

[00:10:56]
So earlier you mentioned the useMedia player. So for those who in the was it using controls, right?
>> Speaker 2: Yeah.
>> Ben Hong: Yeah. So if ever you had to create like a video player, you have to, you know, if you ever done in the old days, you know, it's incredibly painful.

[00:11:13]
Usually there was like a dedicated library that did it all for you. This thing can break it down. I think I don't want the sound to come on. We can see that it has all these reactive properties of the time being set, duration is waiting, seeking, stall. Like just actually it even tells you how much is buffered.

[00:11:32]
It's just the level of thought that's gone into some of this stuff is wild. Honestly, just kudos to the team who spent the effort to do this.
>> Speaker 2: The whole tracks piece which lets you do the subtitles.
>> Ben Hong: Yeah.
>> Speaker 2: Or closed captions for the video is also super helpful for accessibility.

[00:11:52]
>> Ben Hong: Yeah. So this is a fun one again. So if you're ever doing like, eyedroppers is a fun one if you ever just wanna pick colors and then clipboard. Again, if you ever need access to user clipboard history, it's just use clipboard and then it's there. I mean it's that easy.

[00:12:11]
And then the one that though I think most of us basically need though is useref history. They also have a use debounce ref history in case it's too much and basically allowing you to then watch what happens to the count and then actually then track have some basic history.

[00:12:30]
Because undo and redo is a thing that I think users are becoming more and more used to being able to do as we see with emails and stuff like, do you want to undo what you just sent? So this kind of helper can be a lot of help for those of us that are like, actually how do we undo this?