Single Web Component Project

[00:00:00]
>> Brewery App. If you traveled to a new town sometimes it's nice to go local brewery and mkdir called demos and I'm gonna cd demos. Great, nothing in here. Okay, let me make that bigger. There you go. So we we're gonna use our first command line tool. I should point out this whole day, we have not used a single build tool.

[00:00:35]
We have been yanking packages off of cc ends. We could have done it in our local computer. We have not used a single build tool that we've been authoring web components. And we can build kinda sophisticated stuff without even touching any type of tooling whatsoever. All the tooling stuff kinda happens at this end, this end of the writing, authoring and even the production stuff is that whole next level of bundling and splitting and everything.

[00:01:06]
So, when we're here, there's actually, I think the question came up maybe inside conversations here. But just, is there like a create react app for web components? Something that just kinda does [LAUGH] shows me how things work and there is, there's actually a few project scaffolds like VTAZ1 is pretty good.

[00:01:32]
But one thing when I was showed was from this open WC group, that it's really pretty good. And I'll just show how it works here. I'm not really trying to build a dependency on a tool. That's not the goal here, but I think this provides a really good sort of leap frog to a few steps into maybe a more mature project.

[00:01:54]
And give us inspiration how we might need to structure our project to achieve a production goal. But npm init open-wc, and this gonna give you kind of that little yomen style interview, [LAUGH] what are you trying to do here? So we're gonna scaffold a new project and I'm actually going to pause here or say you should pause you get an application or web component.

[00:02:20]
We're gonna do application. But I'm gonna show you the web component stuff, just so we can vibe out what that does. And then, I'll switch back here and I'll redo it and spit out an application, okay? So what's cool is now it asks you, what do you want to add?

[00:02:37]
Do you wanna add Linton? Heck yeah, I do. Do you wanna add testing? You bet, I do. Do I want a whole entire storybook? Sure, why not, it's free. [LAUGH] Would you like to use TypeScript? No, [LAUGH] what is the name of your web component? I have been calling a custom alert all day.

[00:02:55]
And then it gives you a kind of a scaffold of what it's going to spit out and you can kind of see we get a storybook, we get some VS code extension recommendations. We get a in that when you open VS code, it's gonna say hey, do you want to install the probably lit plugin is basically what it's going to install.

[00:03:14]
Or if you're using prettier or don't have prettier or something else to say, do you want prettier, do you want just any kind of test runner format or stuff. And this is gonna create a web component for us, and it's gonna create a story which is what storybook uses.

[00:03:29]
An this is gonna create a test, custom alert test, and that's actually the part I wanna show you cuz it blew my mind. And then a custom-alert.js, I think that's just the the app quote-unquote, that's gonna call this, right? And then an index probably calls the customer that calls that what.

[00:03:51]
And then a dev server and a test runner, yes?
>> Is there a way to do this if you wanna do a few components or start a library? Could you go through the same thing or is this really for just, I wanna offer this one
>> This-
>> Or whatever

[00:04:05]
>> Yeah, this one is like one, and I was kind of like I wish it could do multiple and maybe I'll like work on PR in that. And they have this upgrade concept and I found that didn't really work at the time I was kinda exploring this. But you could spit out two projects and then manual merge or something like that it wouldn't be the end of the world.

[00:04:31]
Because in theory we're making Legos, they're all isolated, encapsulated, reusable so we can maybe copy-paste that stuff in pretty efficiently. So okay, we're gonna write to disk and then we're going to install with NPM and it may take some time to install, but through the power of technology, it'll go quickly.

[00:04:55]
But yeah, my experience with, I wish this could just like okay, new component, okay, new component, okay, cuz that would be how I use it, just rapid fire component generation, okay? Al lright, so then I'm going to follow what it says. Custom-alert, and then I'm going to actually open it in code.

[00:05:20]
Yes, I trust the authors. All right here we go. [LAUGH] Always trust strangers. All right, here we go, we'll make that a little bigger. And then npm run dev, I think is what it said or what did it tell me to do, npm run start. There we go, npm start.

[00:05:42]
Okay, so now I have a demo, right? Fired up over here. Okay, cool, Hello World Nr.5 increment number 10. Okay, cool, it has a built us a custom element. And if you look in here, custom alert. So this is sort of just our element, I could copy paste all the code we wrote today and plop it in here.

[00:06:13]
This is totally something I could do. It's basically the component we just wrote. But what I wanted to show you in the test, right? Actually comes with some cool tests. That's a problem for me, when I create something I'm not like, yeah, I'm just itching to set up the tests on that.

[00:06:34]
So it's fun to have something like pre-mades. And kind of, even if they're there, I can I change the component and then break it. And then when the browser turns red, I get upset, so emotionally disturbed, so I try to fix it. But one cool test that it runs is it passes the accessibility audit.

[00:06:58]
So it will actually mount your fixture of your HTML component, and then it'll expect the shadow DOM to be accessible. So if you do anything, if you just have this test, awesome, and this is a feature, I think of chi, and so it's built on this thing called web test runner.

[00:07:16]
I can show you the package.json real quick. But, yeah, so web dev server, web dev server storybook, web test runner and web test runner is just I think a wrapper around play, right? And then I think it uses Chi Syntax or runs Chi tests and stuff like that and maybe Jasmine too.

[00:07:39]
Now, I'm just making up tea names and [LAUGH] feeling insecure. But Mocha Chi, but it will, anyway, I thought that was cool, cuz I don't do enough accessibility testing in my life, and here it is right out of the box. And anyway, this is just for your inspiration.

[00:08:00]
You can like look at it, there's another cool thing in here custom element manifest. That's what this custom-element.json is. It's a small thing, but it's kind of like a registry for your custom element that you then can use to build story books and stuff like that. It's all cool, but it's probably in the advanced talk.

[00:08:17]
And so let's clear this and then we're gonna go back to our demos directory, and then we're going to build our app, right? And then again, this is just sort of like to leapfrog us into a few, no, I messed up. Okay, we're gonna to leapfrog into this.

[00:08:36]
We're gonna do a new project. We're gonna do a whole application, we're gonna do linting. We're gonna do testing, we're gonna do demoing, we're gonna do building, and that's kind of the feature we want, right? We wanna see what this looks like if we're going to and I'm gonna call it brewery app.

[00:08:53]
We wanna see what this looks like in production. I'm gonna call it brewery app and then it's gonna make me a brewery app and then it's gonna say do you wanna write this? Yes, and I'm gonna npm install. And it's gonna go out and fetch the Internet to put it on my computer.