Lit 2.0 is here!

greetings friends welcome um quite an exciting one today we've got an update for lit element um it's been quite a long time since one of these um and here it is uh the names change for a start it's called lit now um so there's even there's a whole new repo um and a whole new npm got a new website new name new logo um quite a lot of changes in here um but not many braking changes thankfully i'm gonna upgrade today um and that's gonna be quite straightforward i'm hoping um but yeah there's there's a few exciting things in there highlights for me would be the ssr ability um so i'm gonna be able to serve aside render these hopefully because he's using um it's basing that on a declarative shadow dom i did a video on declarative shadows on recently uh put a link to that here um but yeah that's pretty cool um there was a i watched the the stream um and they had a demo for eleventy um so my website is really gatsby um but i might try and do an 11 21 just to see if i can get this um scroll to top component working in there that would be quite fun uh right um before we jump in though um if you find yourself enjoying the video feel free to click that subscribe below change the alert icon to all and you'll get updates for future videos all right let's jump in uh there's the website but um i'm mainly going to be looking at dating today so let's just pull this over here we'll close lit for the moment so here's my scroll to top web component written with a lit element now because this new repository it's actually just called lit so we're going to be importing from lit i wonder if i'm still going to if this is going to be fixed or i'm still going to have a problem there we'll see um one of the things that does change is that the um one of the breaking changes is that these decorators are no longer in the main package um so people not using them don't have to pay the cost for those so i think we need to import those um from a different package we'll see we should get an error coming up for that so that will help us when i was watching the stream as well i did notice um two things that i learned one i now know why this property which i was hoping would work just by adding the attributes um so if i if i look at this what this one does is change it into a 3d flip card and if i look at my component at the moment i i need to have fancy equals true if i scroll down now i've already broken it actually all right let me just put that back a second because i just want to show this while we're here um put that back to there and if i scroll down so now it's doing a nice 3d spin um but what i wanted was not to have to say fancy equals to and just have the presence of the attribute work and at the moment it just that nukes it doesn't work it's not doing the fancy um spin but that's because my property here although i've declared it as a boolean here i haven't done it in the uh decorator and that's what the ellen hooks into so i need to say i need to tell it in there if it's type boolean now it will work just on the presence of it so if i scroll down now we'll see it spins in so it's honoring this without having to say equals true so that was a cool thing to learn um right let's go back let me um let me change that over to lit so that's gonna break it um and is that gonna be yeah i need to pull another one so if i look at my file here i'm going to stop the um snowpack for the moment i'll just make this full screen so you can easily see it um so what do i need to do i need to do the import of property and the import of custom element and they're now going to come from one of the sub packages so [Music] it will be lit i guess decorators um i'm not really that knowledgeable of how these sub package imports work do i do i need to actually specify the file itself yeah i mean it's it's not it's noticing that i can't pull these in i've got squigglies there so that's pretty cool on typescript so i know that there you go can my cs ignore go does it no still if i change my module resolution maybe that will go if i go into ts config and say mode resolution no it should then find that i guess still giving me squigglies can i find lit oh well i haven't actually installed lit yet so that would be a thing so let's do um npm install lit all right uh now does that help yeah okay no no so type scripts and everything is working well there now so it always was i think i just didn't have this um specified correctly all right this get this seems to be working i have done this before and that is the syntax i guess is it it looks happy right in terms of upgrading then because there's no breaking changes apart from this i'm hoping that is going to just work for us so let's do an mpx snow pack dev and get rid of that that one and then if i scroll down okay we're in that is still working we're using the smaller faster new lit package one other thing that i noticed on the stream as well was when you're declaring these if you don't want it to be external you don't want to create an attribute um you can set them as state i think so i my my activate when i want and also um and also fancy but this show toast i only want to be internal so i think we can just call this state is it a capitalist as you know it's probably it's a little less but i've got i've got to pull it in i guess um state in there now that means that the upgrade is confusion of of being able to specify this as an attribute and that is still working pretty nice okay so i'm pretty happy with that what would i do um just make this slightly bigger like so um so what where are we we've changed a few things so let's get those into github upgrade to lit 2.0 and push those up then i can do an npm version patch okay and an npm publish like so ah i did rebuild my pc the other day and so i am not logged into npm npm ad user i can't remember how to do any of this um what's it gonna ask for my username [Music] i have no idea not a clue what that would be um all right so i'm going to push that up later when i find my password um but in terms of the upgrade that's pretty straightforward i'm looking forward to doing a few more videos there's there's um new directive abilities there's new controllers uh there's ssr um so hopefully that one i wanna i wanna definitely do a video on that uh yeah so quite a few things to come there all right i hope that was interesting i'll give you a thumbs up if so thumbs down if not thanks very much for watching and catch you next time [Music] you

Channel: A shot of code

Views: 2,333

Rating: 5 out of 5

Keywords:

Id: UNOE54BYy7Q

Length: 10min 43sec (643 seconds)

Published: Thu Apr 22 2021