This Week in Svelte (22 Dec 2023) - SvelteKit 2.0.6, handling peerDependencies, action params

[Music] [Music] welcome everybody to this weekend's felt my name is enrio and joining me is Paulo Paulo he oh ho we are in Santa mode yes welcome to this weekend's felt at this show we like to talk about things that happen around the spelt ecosystem and happenings on Discord including the change log quickx a Community Showcase followed with discussions and some Q&A that is the agenda and let's start with the thing you're all here here for the change log take a look at this so let's start with some substantial changes to spel Kit last week spel Kit 2.0 was released and this week has been an aggressive rush to send out some patches and they have been very responsive and people have been filing issues and they've been closing really quickly so let's see what kind of patches you have in store today there were several almost too many patches honestly like if I scroll down the change lck here there's spell kit 2011 all the way to 206 but also many adapter changes mostly cleanup related stuff they switched um in the main repository the master branch has been renamed to the main branch things like that cleanup tasks so noteworthy changes I I will highlight is first off trailing slash handling in adapters in kit some folks have experienced bugs related to trailing slashes appearing when they shouldn't and that has been fixed in editions before 206 I think it was an early patch back in 2011 and stuff let's highlight that fjs kit there we go yes so very early on I almost can't scroll to it but that's okay trust me the trailing slashes are patched yeah I think I also experienced those bugs uh during test specifically like uh we we we had some test that were checking against uh the pot name and the pot name had a forward slash at the end so yep happy that this has been fixed yes and some things to go over here uh there's some type fixes for goto and this is uh something uh that actually I think it's worth mentioning not the type fix but the fact that uh before zelt kit basically removed the state from G to so when you before uh when you were using go to you could include a state that was basically added to the window. location. state uh and now instead you can access this state inside the page store um but before it was completely removed from go to because there was the possibility to add state with the the new addition of shallow rooting uh but they realized that like sometimes you want to navigate and have a state associated with that navigation so they included it back I see yeah that's right in spelit to one of the breaking changes was removing state from goto so as you mentioned they brought it back due to the the need for it when navigating so that is noteworthy but very recently 206 yesterday was released on Friday today's Friday Thursday actually it's got to be Thursday somewhere allow Dynamic EnV access when building but not pre-rendering some folks who use Lucia or other authentication Services May utilize Dynamic variables and this patch will be less aggressive in preventing you from using those variables so during pre-rendering and during building uh before spela 2.0 would totally throw an error at saying you cannot use Dynamic environment variables when pre-rendering that is one of the breaking changes and spel good too but instead they patched it by saying okay maybe let be a little less aggressive instead when you're actually pre-rendering yes we'll prevent it but when you're server rendering a build that is using in in hooks. server.js we will allow Dynamic variables cool that was the bug yeah and this is the patch and moving on to spelt uh nothing in spelt 4 was patched recently but spelt 5 continues to be uh throwing in lots of rapid changes and Bug fixes spelt 5 is still an early Alpha so you can expect things to be changing so often that not even we can keep up with it yeah I mean actually I think obviously like uh it's it's Christmas time so uh I think uh allv five got a bit slower during those couple of weeks uh I think there were a couple of release about so five uh with some bug fix which is always nice yeah so keep uh keep staying tuned in the Discord spelt 5 Alpha Channel because that's where you can have the most bleeding edge information with regards to spel 5 even before it gets shipped to the preview documentation so as as new features and new behaviors come out uh they will be released here and that is it for the change log let's move on to quick facts and announcements I've got a couple of quick facts the first one is did you know the CSS has selector is now Evergreen but I should put a disclaimer with that so Colin has is a pseudo selector in CSS that allows you to do some call it the parent selector but it's also the family selector depending on who you ask and that means if something on the page uh if something further down your CSS selector tree has a class or has an attribute or whatever valid CSS selector then the parent or sibling or depending on how you arrange it can have CSS Styles applied to it and the announcement here is Firefox 121 has stable support but notice there the global usage is still z% so my advice is great you can start developing it but the but the global usage of Firefox has to catch up so people still need to upgrade their Firefox browsers to get this feature on their platform finally because this was like it was it was about time that we could actually use has and now obviously like it's the wait game until like we can really use ha in in production but finally at least we have all major browser shipping has I have been using has as a progressive enhancement for some use cases like if I want to highlight a table cell when the contents of a table cell has something then I can make the entire table cell yellow for example but the progressive enhancement I'm using is okay I'll just highlight the text in the cell but if the browser supports colon has then the entire cell will be highlighted so you can have some sort of fallback in the interim once and you know your audience better than we do if you're supporting Evergreen browser users and everyone's on the latest maybe you have company policies that force people to be on the latest browser then you can more assuredly use this otherwise give it three months yep and that is my quick fact number one quick fact number two which is also a segue is we're near the end of Advent of spelt and we have a special guest who will show us some of the latest Community showcases around Advent of spelt please welcome to the stage Willow ghost in parenthesis ghost I don't unfortunately have a Santa hat I did go I was running around the house for a few minutes trying to find one but you don't have any well well I mean ghost don't have to to wear a hat so don't worry so with that said welcome and show us around ADV felt what's new okay so for those of you who don't know um I'll really quickly uh cover this um for the past 22 days we've been releasing A new challenge every day um Bas round spel um on the lead up to Christmas as you can see we've got uh quite a few um these will be there forever so you know you don't have to rush or whatever and you can pick and choose which ones you want to do um a lot of the vast majority of them are like Standalone tasks um so yeah and you can find this by going to Advent society. deev um and yeah we have we can also join the Discord um and share your Solutions which is where all of the solutions I'm going to uh show you have come from um so uh we're going to start with um this one from day eight where the challenge was um to build like a card matching game so we can click through some of these um try and try and match them like that um and then uh so this was submitted by withered flowers and um then for day 11 we've got this submitted by Yogen so uh the premise was you put in your name and then it generates this elf name um and if we show you then we could fetch this data here and get a name from it and then for day 15 we have a submission from stalky one of our ambassadors um if I just rerun this where you the the previous day day 13 you made this snowfall component and then on the next day you can make this uh snow globe so we could change this text for example to this week felt and we can play around with some of these options and it generates this really cool like snow globe effect and then day 16 this is a submission by Jesus for a um hanger visualization so the premise of this was we need to visualize uh the present storage and so we could search for this and we can search for presence so we find this guys and you can see that it's stored here in the warehouse um and this is a this is a really cool submission using thrt thrt um to visualize it with 3GS and then day 17 we have this challenge submitted by um where you the premise was it in the leadup to Christmas um last minute gift shopping you want to put in your budget and so you can change your budget here say it was $200 and then as you buy presents we um say we bought a present for I know Steven again and we spent $80 go come up on here and you can see how much budget you've got left and then day 18 we have the quiz where again it was similar to one of some of these previous days where we had this data end point here and you can fetch it start this quiz and then okay the answer to that one is this and then so forth and go through the quiz and see how many you've got right at the end and this was submitted by uh Mr Clint and then day 19 uh similar we have this uh fun um Christmas lights submission um and you can change like some of these colors uh how they animate uh and they have this which I found really fun um the sort of remote for for the for the lights and this was submitted by Sash and I want to mention that there's quite quite a common thing people did is like see here where we have all these different days um you could go through and look at the other day so we could see this day 10 for example um which has been really cool to see all these other submissions come in um and then uh this is a submission by gly for day 20 where you you fetch this new endpoint and it tells you some funny Christmas cracker jokes um and this one has some cool confetti whenever you press this um I'm not don't think this has it but we also had the challenge where you could use the web audio API to make this speak and we shared a link to that and stuff and that was that was quite fun to see some people um submit some robotic voices speaking at your Christmas jokes and then finally for a day 21 we have this um submission by Jesus for a weather app um so I've just I've spoofed it to the North Pole um we can see it's very very cold um and it has like some other information about rain and and temperature and stuff so yeah um you can find all of these in the Discord uh either clicking this button here for example or S Dev chat um and yeah if share your Solutions there's a pin message in the Advent ofv chat um and we'd love to see them and maybe showcase some more on the on the site after the end of the challenge see you thank you so much for bringing those highlights to us and it looks like it's wrapping up in a few days is that right yeah but as I said everything will be here like forever so we are almost at at Christmas so it's it's time it's time it's time and ADV to spal is a great way if any of you would like to get get your hands into spelled five runes so it's a great way to learn the new methods and and give yourself a nice set of fun challenges to do so thank you again will for presenting thank you great stuff and that brings us to the next segment discussion and it's a discussion because I don't think I have all the answers we don't have all the answers but we're happy to discuss things and the thing we're going to discuss is I ideal theme toggles it was a last minute thread we had on Discord a couple days ago and theme toggles are interesting because toggles in themselves are some of a somewhat of a challenge because they're not always implemented correctly on the web and I just want to discuss my personal feelings on that and I'm sure Pao you have some too especially when it comes to enhancing the toggle experience yes take a look at this so before we get into theme toggles let's just talk about toggles themselves and a lot of you I'm sure everyone in tuning in today has some kind of mobile phone and toggles on Android and iOS have a very distinct design where it can only represent on or off state that is what a toggle is it's like it represents the on or off state of one thing it's not a this or that it's not red and blue it's not black and white it's one thing on or off and knowing the content of what a toggle represents it can help for the design needed so in this toggle example I'm dispensing french fries I showed this a few weeks ago and the dispenser is either on or off it is not salty or caramel or two flavors it's not two options it's it's binary it's on or off so when it comes to theme toggles most people think about light mode dark mode and that already breaks the convention of a toggle so what I'm trying to discuss here is should a theme Switcher be a toggle I don't think it should I think it should be a set of buttons what are your thoughts Paulo yeah I I mean it really depends because maybe have a set of button uh cannot help your design uh so maybe like I would not see uh as witch as a team Toggler uh so I will definitely use for example a a button toggle uh so like a a single button with different uh like design to Showcase one or the other so that I agree that like the toggle is not something that I would use to to to toggle between teams and also I mean obviously this poses the question like are you using just two teams because there are people that use multiple teams uh for example there is I think there is the our fellow Ambassador Spence Scott Spence website that use a bunch of themes it's very cool because you can really customize uh like his website to your needs so it's very cool yeah I'm bringing up an example to help illustrate the discussion a bit so on mdn they have a theme toggle here and it's not perfect obviously when I highlight it there goes the contrast I don't know but what's good about this theme toggle is when you click it you have three options um you have your system option you have your light mode and your dark mode and I think all websites showing at least two themes light and dark should always have the third option which is follow your system settings there is a CSS media query that can detect that and most people who have their system setting I think even some flavors of Linux also support this so if you have your system set the dark mode or your system set the light mode or if you're like me and when it's daytime and the sun's out you want light mode and when it's night time and the sun's down you want dark mode that's what I do it's great that the website follows your system theme because if all of your system is dark but you suddenly go to a website that's oh light mode and it blows up your living room but that website happens to have a dark mode then it would have been nice if that website followed your OS settings so this can't be a toggle switch because it's not on or off it's actually one of three options so what I like about this uh in addition to it providing the three options and defaulting to the OS settings which is important defaulting to the OS settings I like this because it's a button it's not a radio selection but it's a button and that's good because clicking on the button um if you're a cited user with a mouse it may not be a big deal but if you're using a screen reader the screen reader will say this is a button and when you click it you expect it to immediately invoke an action unlike form controls so checkboxes radio buttons those are form actions or form controls and all form inputs and form controls are meant for data entry not for submission so when you when a screen reader user is trying to manipulate form and do data entry they should not expect it to immediately submit but buttons can agree like and also we we go back to the progressive announcement story right because you cannot submit a form without JavaScript if you change uh a radio button but you can submit a form with a button so if JavaScript is disabled or not loaded yet you with a button will still have the the possibility to change your uh your team which is very cool while you cannot do it with uh radio button yeah so this one I'm hovering the light toggle and in HTML it is a button which is great so if I click on light that is a button it does immediately invoke and it does something to change your theme whether that's something is client side JavaScript or an enhanced form action which is really great I think Hite has a good video on that where it's possible to have a form submit your theme Choice have the server save your choice in a cookie have the page server render the dark mode or the light mode have no flash of style changes like no rapid switch from light to dark or dark to light because it's server rendered with your theme selection that is ideal but at the very least have your toggle be a set of buttons yep absolutely I was wondering if anyone in the chat has experiences with this or opinions on other approaches to this we'd like to hear too but I think the key takeaways are one default to the OS setting that your users have two save their settings whether it's in local storage or a cookie and three ideally if you can uh server render their option and also I think another important aspect of especially for the OS default is try to use CSS because you can access media query with JavaScript too uh but obviously like you have to be smart about it because you not only have to read the current default the Cent media query but you have to react to it so with CSS you get it for free uh so use CSS whenever possible oh when you say use CSS are you're not referring to the action are you or you referring to something else I'm referring to like like to if you are using the OS default try to style everything with CSS and the OS default like the media query inside CSS because some website for example use JavaScript to read the default and then apply that to to to the to the website but the problem with these is that like they will not follow your so if you change the the media query unless you like add an event listener to the media query you will not get a a new value back so I think it's something that like exactly you can use CSS and at media to actually style your website and I think this is also a common pattern right so you you can use CSS variable and use all of your CSS variable through throughout your application and with a simple media query in the root you can change your variables uh depending on what the user prefer color scheme is yeah if you have the bandwidth to make such a robust theme switcher that's right as I agree with Paulo using the media selector to change CSS variables is probably the most maintainable solution that way your colors are sourced from variables and then only the variables change when the user prefers a different color scheme and this also goes hand in hand with high contrast mode so a stretch goal is have your dark theme and your light theme support high contrast if possible because some users want a dark theme some people want a dark theme with high contrast some people want a light theme or a light theme with high contrast and if you happen to provide those things also provide a toggle to manually switch to them much like language selection because if the website detects my browser language but I want to switch to a language like Italian I have I should have the option like I do here to S to that what no Italian I feel threatened yeah retain the user selection so that when they come back to the website it remembers and I think that's good enough for now yes thank you for discussion and let's move on to questions and answers and I think both of us have something prepared for today yes I have one and and I'll get to it the first one is how do I resolve peer dependency issues and this was motivated by spel kit 2 so in spel kit 2 I'm going to demonstrate what happens when you run the upgrade script and what issues you may face because when you upgrade from spell kit one for an existing project to spell kit 2 what you'll face is peer dependency conflicts when you run npm install I'm going to use npm as my demonst ation package manager but I'm sure this problem May pervade in other package managers so the the demonstration I will use is one of my projects and I just got to check out a commit that doesn't upgrade to spell kit 2 get checkout head there we go so take a look at this I'm going to do this demonstration all within my terminal so this is my project and in my project I want to upgrade from spell kid one to spelit 2 and according to the documentation I need to run a script so kit. spelt dodev and then you got to go to the migrate to spelit to documentation here in the first paragraph it says npx spelt migrate latest space sp-2 this will C the spelt migrate package and run the spell to migration tool I will paste that in my terminal and see what happens so it's probably gonna it doesn't have yeah if it doesn't have it cached it'll pull the latest changes yes I want to proceed which folders I just want to do the source folder it's not a monor repo so I'm glad it's asking me which directories need upgrading I'm happy with the default and what it'll do is it'll refactor several pages that are not spell to compatible it'll install a few things and more specifically it will run get diff package.json it made these changes for me so in my package.json it changed adapter node one to adapter node 2 it changed spel kit one to spel kit 2 and it installed a new package V plugin spelt because V preprocess is now imported from a different package instead of spell kit so this all makes sense this is all correct and what the Migra script does not do is run npm install for me it does not make assumptions on which pack package manager I use maybe it could maybe this is a potential Improvement it can detect the lock file and decide okay you're using npm it could do those things but for now it's manual so now that I saw the GI diff I need to run npm install and I will and when that's done I will run into conflicts it says here conflicting peer dependency spel kit 206 and it has AER of adapter node 2 and the reason why this is a conflict is because I currently have installed adapter node 131 this is an adapter node project and this this may seem like um heart to recover from but it's not there is a solution and it's advised right here in the error called you can retry with the force flag which is not advisable to use on your day-to-day the force flag will ignore peer dependencies and just for the occasion I will run the force flag because I do want to install these new uh packages because I'm it's almost certain they will resolve themselves so that's the solution mpm install D- force and after doing so it'll say probably no vulnerabilities everything's fine and just to double check I it looks good all developers like green text right turning the red text into green that's that's basically our job I can also run npm install one more time and at this point if I don't see peer dependency errors it means they're resolved and that's your solution um typically you would not use the force flag typically when you upgrade packages the correct workflow is to run npm outdated or the outdated command in your respective package manager you see what's outdated here and then you would upgrade the breaking changes manually so for example my PayPal API is outdated and version 8 is a breaking change so the correct workflow could be npm install dasd if it's a Dev dependency and then I would do PayPal PayPal dods latest that's the correct workflow you want to manually install the latest version and usually the package manager will handle peer dependency conflicts I guess the uh Improvement the potential Improvement for spelt migrate could be um asking you which package manager you use and proceeding to install it this way on your behalf instead of manually changing packag on Json so at least you know how to recover from this error for now now and that's the end of the demo thank you Eno so next up is Paulo yes what do you got for us we have another question which would hopefully an answer so uh you may know if you know Bel that you cannot use actions on components uh this is that generally fine but sometimes you may need to use an action on a component and this is not a super easy task especially if you want to place typescript and the reason because is because like the the main thing would be to just like if you're using JavaScript you probably don't have much problems if you're using typescript however you may want to like have a set of things like you want to have this action prop that you can then apply but you may also want to uh like have um proper intelligence for the for the parameters because maybe you want to use the proper parameters um and also you may want to uh like like not having to specify the parameters if the action does not specify a parameter and uh I'm just realized ing now that this is the wrong the wrong Z club uh let me see if I have the other one uh ready otherwise I will I will like I I I can recover for this uh so basically like there is a bunch of uh stuff going on yes okay this is the correct one I'm I'm going to refresh just for good reasons uh so um two to actually have this uh you have to do some stuff so um in this case I have two simple actions right I have a test action which takes a string as a parameter and if you try to use these on a on a on an actual button for example I can do use test uh Z will hopefully yell at me yeah it expect two argument but got one and and one argument is always the button itself so you need to provide this kind of stuff to to please typescript basically um and I want kind of the same experience with my Buton component so I want to pass an action but I also want typescript to yell at me if I don't pass the action props by doing this uh this is telling me that you need to pass action props uh at the same time if I don't have this I don't want to pass an undefined so if I'm using this other action which is test two uh you can see that button use test two uh this it's fine and also if I try to pass something it will yell at me and I want the same experience uh for my component so if I try to pass test two it will actually hopefully yell at me no it will not yell at me uh that's one of the problem but um the fun part is that I don't have to pass action props uh and also like if I don't pass an action I don't want to be a I don't want typescript to yell at me because it want action props so all of those challenges were uh a typescript challenge uh but I think I have a pretty good solution here so uh what I did is is I used the action uh type that you can import from zelt action and then I use this generic syntax so this button component is actually a generic uh component uh and there is this T type which comes from this generic from the script tag and you can use this T type inside your component so what I did is I used export let action to tell the component that needs to accept an action props and this is typed as action HTML button element it can be HTML element generic but given that I know that I use these on a button I want it to be an HTML button element and also this is the second type parameter which represent the actual um value of the props that you need to pass uh and by default this is just an empty action so that like you don't have to pass an action now the problem was that if I had if I specified a uh an action props prop with export let action props um I would have no way to actually have death props not be specified if T was undefined and so what I did is I specified a type dollar sign dollar sign props which is another way to specify the type of your props and here I check if undefined extent T so that basically if undefined extends T we just want the action as action HTML button T otherwise we want the action and we want the the action prop te uh this means that these action props uh is actually to to access these action prop I actually need to do it with rest props and so here I can use action because I know that it will be defined if I want uh I can just simply use action and then I can pass the action props using the rest props and in this case I'm also like spreading all the rest of the rest props on the button so that this is technically just an HTML button which I styled in a nice way and uh to see to see it working like uh the test uh action is very simple I just store this test inside this log variable I can update the test every time and I can and on Destroy I can remove the event listener and I add an event listener with click that just console log and to see it we can actually use alert if we want and so this means that like whenever I'm writing here I'm passing these as a as an action prop and so if I write hello this W Bel and I click log we should be getting hello this wi Bel and so uh this is again useful for example if you are using Meli because Meli is all about actions so if you have a custom button component and you want to pass an action from Ali this is one way you can do it wow that's a lot of typescript turnery magic yeah I mean I love to type juggle but I mean I get why some people get upset with type script does that mean the generics attribute in script is stable now uh I mean I don't know if it's stable like I know it's implemented uh I don't think we have documentation yet on these uh so I think it can change uh but I think like if you see the RFC for the generics uh it should be like there is an official RFC as stalky is saying so it's still an RFC but it works for the moment interesting yeah mutually exclusive mutually exclusive props is um well not saying that this what this is but it's one of the challenges of making a component interface and this is an interesting solution doing like undefined extends generic type not I would not have thought of that I mean this was a bit of War like at least a couple of hour of Works to figure out and as you can as you have seen like I did other tests that did not work well so in the end I I I was kind of happy with my solution very cool thank you for sharing and in the coming days we will put all of these demonstrations in the YouTube description below absolutely and that is all enjoy your holidays if you have any and thank you for watching this weekend's felt bye-bye see you probably next year have h a good vacation have a good zelt vacation see [Music] [Music] you [Music] n

Channel: Svelte Society

Views: 1,681

Keywords:

Id: O5ElGJICg0s

Length: 39min 39sec (2379 seconds)

Published: Sat Dec 23 2023