Using Web Views for Extension UIs

[00:00:00]
>> Steve Kinney: All right, let's take a tour of one more example. And again, the goal here is that, a week from now, you're like, I could do that thing. And there's some niceties to this, yeah, it has to run in VS code. But you also have to worry about packaging and distributing entire electron app or anything along those lines.

[00:00:20]
You can kind of build tooling that you need, but the one other example I kind of want to show you, which is both super interesting. And then also, there are a few things you need to know that will save you a lot of time that I will never get back, is, well, what happens if we wanna show a UI in VS code, right?

[00:00:45]
We can do that as well. This is the same template that I used earlier. There are only a few different senses. I took an annoying evaluate regex function and put it in a different file so you don't have to deal with it. It has nothing to do with VS Code.

[00:01:14]
It just maps over some text with a regular expression. You can read it if you want, you don't want to, it's not that bad, it's 30 lines. And then I took an HTML file. The important part is, effectively, your HTML file has to be self-contained, right? So extensions are not allowed to access any kind of network or load any resources.

[00:01:46]
So it's basically means your script tags and stuff like that. It's got a HTML file with your CSS in it and your JavaScript in it. Now, does that mean you have to write all of that in that file? No, you just need some build tool that will then collapse in it.

[00:02:09]
There's a V plug in that does it, there's, I think, probably do it ES build to. You just need the end result to be one JavaScript file? A lot of the examples you will see on the internet. I actually just have a template string in the file with no syntax highlighting, and it's gross.

[00:02:28]
So I at least pulled it out into its own file so that the syntax highlighting is pretty, but if this was a more, really, real thing, again, there's a V plug in that will take, yeah, that way you can still use react. Or Svelte or Vue, or Angular, or whatever, but the end result has to be one portable HTML file.

[00:02:47]
Your build tools can handle that for you, right? I mean, you could even have a template string where you just pull in the CSS file and the compiled JavaScript file, and jam them in there too, right? But the end result is, no, you cannot put a script tag that then loads another file and link, perhaps, to slyles.css, it's all got to kind of be in one file, like this, which is why i broke it out into it's own file, because nobody wants to see that.

[00:03:19]
But one other thing that I did here that I want to point out, which is a lot of CSS variables that I did not define, right? And what happens is, when we will open up the inspector, and you'll see it in a second, when VS code goes to load the HTML file, it populates a bunch of CSS variables based on your theme, right?

[00:03:48]
So if you wanna make it look like Hot Dog Stand, you can put in whatever values you want. But if you wanna get like, what is the color of their VS code foreground? What is the color of their VS code editor background, those CSS variables will be set surrounding your HTML, right?

[00:04:08]
And so, you can hook into those and then, I didn't do a perfect job, cuz I got bored at some point, and I realized that styling CSS was not the most important thing I should be doing at that moment. It's close enough, but I'm pulling in basically the stuff from their VS Code theme and hopefully showing it roughly in a way that looks consistent, right?

[00:04:34]
Button active is a pressed background button, so on and so forth. Cool, all right, so that HTML file, nothing to see. There a bunch of CSS, a bunch of client side JavaScript, the way that it works. And this is where we go back to the few slides that I made, electron, or a lot of things, there are actually workers or anything along those lines.

[00:05:02]
You can send messages back and forth between the processes, right? That extensions main process is all the node goodness you could ever want. Doesn't know anything about the DOM. Your web view knows everything about the DOM and cannot access. Yeah, it's like a browser and a server, right?

[00:05:20]
But instead of fetch with HTTP calls, you send messages back and forth, right? And you could have multiple web views and they would all talk to the one node process. I could spin up these web views, call now. It's basically having a main thread and worker threads, right?

[00:05:40]
That was worth switching all the way back to keynote, right, I think so. So in this case, we have the send update, which is what's gonna happen when they hit the button or any of these input changes, and that's gonna post a message back to say, hey, run the evaluate regex command, here's some other data for you, right?

[00:06:02]
So just send a message back to node in my extension and run it, right? But other than that, this otherwise would have been like a form submit or a fetch request, right? Imagine it's a post request in this case, that metaphor is not wrong. But let's go back into the extension.

[00:06:21]
Okay, so given an extension ID, we've got activate, which is, we have this open command, which is we register the command and we open our little app, so on and so forth. This subscription will then unregistered the command when it gets deactivated. All right, and in here we go ahead and we create a web view panel, right?

[00:06:47]
Like some idea is literally, this is just a string, I don't know why I got fancy. And the title, so imagine the title element in an HTML file, that will be what's used in the tab, where it should load. So in this point, I'm gonna do it in view column 1.

[00:07:08]
You've got one could see what the other options are.
>> Steve Kinney: There's nine. The currently active 1 beside the currently active 1. Lots of choices, I chose one, why? I don't know. You can choose whether or not JavaScript can run at all, right, so maybe it's just a static page.

[00:07:35]
Maybe it's like, hey, give me the status or run this command, and I wanna see something giving me like, let's say if it was like, you wanted to do that web pack bundle analysis. And then, just show a chart of the biggest packages, that doesn't need any JavaScript.

[00:07:52]
And if you donate JavaScript, you could turn it off because especially if you find yourself like, yeah, you're running on their machine. It's all the scary parts of electron app and all the great parts at the same time, where you can load local things from, great, does get WebView content.

[00:08:12]
All that I'm doing there is I'm reading that HTML file that you saw, that's all I. And so, beyond that on the did receive message. You can see it here as well, which is, if it is that, evaluate regex 1, grab the other things off of there, call the function, send a message back with the results.

[00:08:37]
So all of the nodes stuff, we send it to the main process, we do the thing, we send it back. Kind of thing, anything you think about, the server and client totally works. It 100% makes it, let's do that, that's better, right, we can all see. So we're sending this stuff back and forth, and that is it, we're at 80 lines of code, but not a lot, right?

[00:09:04]
And so, with that, I explained it all before you get to see what the thing was. I did it on purpose because I'm a jerk, but it's fine. So here we've got an editor, you can see I'm in that extension development host, I've got the debugger.
>> Steve Kinney: And now we've got this new command, open regular expressionist, which is a little regex playground.

[00:09:30]
[LAUGH] See, I brought it all together. [LAUGH] All right, told you I was gonna do it though. So where you can test something and you can say,
>> Steve Kinney: And wherever the regex matches will highlight. And so, for all of the other fun stuff that you are doing, you can kind of see and test out your regex in VS code, and then grab whatever that pattern is and do something with it, right?

[00:10:02]
And you can see that mostly if I were to change the theme,
>> Steve Kinney: Because I'm using those CSS variables, we mostly fit into the aesthetic, right? And everything as well. But I have additional UI tools that I can kind of build and play with, right? And we can argue, did I have to send the entire string back to node?

[00:10:28]
No, but I was trying to make a point, right? Could I have probably done this all in the client? 100% I could have. But it is nice that now this is a tab that I can just use. Right, and again, we could have it just be a sidebar thing.

[00:10:43]
We could render it somewhere else if we really wanted to, but you can see that you could build full on experiences, and we could theoretically, obviously this is its own tab, but we could beforehand get access to the current document and do something with it. And you could find all sorts of different things that you wanna do.

[00:11:01]
I just picked something that mostly to make the joke, about regex, and, hook it all in. But you can build everything from that AI playground all the way up to, yeah, just simple little tools to maybe something that makes, a year or two. As we learn together today, cuz I did not know, Tamagotchi pets that live in your editor, right?

[00:11:24]
All of these are possible, and you can kind of extend this thing any way that you want from a wide variety of things, right? And like I said, do I expect that right now you know exactly what you wanna build. My hope is that, in a week, or a month, or six months, you're like, that thing.

[00:11:44]
>> Steve Kinney: I could do that, right? And we don't get a lot of those these days.