Svelte 5's Secret Weapon: Classes + Context

Поділитися
Вставка
  • Опубліковано 21 лис 2024

КОМЕНТАРІ • 103

  • @Huntabyte
    @Huntabyte  4 місяці тому +15

    If you're wondering, why not just use a global store and import it into all of your components? Watch this video: ua-cam.com/video/EyDV5XLfagg/v-deo.html

    • @laztheripper
      @laztheripper 4 місяці тому +1

      export const state = writable([]);
      then you just set it client side by checking if (browser) beforehand.
      this replaces everything you said, and it's way simpler.

  • @roycrippen9617
    @roycrippen9617 4 місяці тому +38

    You've recently come onto my radar in a big way. I had been using shadcn-svelte and bits-ui for months at work and got recommended a video or two of yours and realized I recognized your online alias. Thanks for everything you do for the svelte community. The stuff that you make is great and makes developing svelte applications even more enjoyable.

    • @Huntabyte
      @Huntabyte  4 місяці тому +7

      Hey I appreciate the kind words! Awesome to hear you get to use shadcn-svelte and bits at work!

  • @StephenFosterUK
    @StephenFosterUK 2 місяці тому +6

    "Practical Svelte 5" is the series we all need.. keep it up. awesome

  • @j0hnc0nn0r-sec
    @j0hnc0nn0r-sec 15 годин тому

    Just came across your videos. I’ve been looking for something like this for a while. Please continue to make more.

  • @ofeenee
    @ofeenee 4 місяці тому +5

    The video’s pace is just perfect! 👌🏼
    Well put, well explained, and well done.
    Thank you so much for making it and sharing it with the community. 🙏

  • @adriansanchezr.8508
    @adriansanchezr.8508 4 місяці тому +7

    While the frontend community keeps moving towards functional components, there's still a bunch of use cases where classes are better suited for, and this is one of them! Great explanation, keep it up! 👏🏻

  • @kakaique2000
    @kakaique2000 4 місяці тому +1

    Impossible to not fall in love with svelte runes, feels like writing natural javascript but with reactivity and performance

  • @fakenews.
    @fakenews. Місяць тому

    Awesome video! I've been struggling moving away from stores in svelte 4 and this video unblocked me. Keep up the great work and more Svelte 5 & SvelteKit 2.0 videos please!

  • @edwardmanhattan6517
    @edwardmanhattan6517 4 місяці тому +3

    i know you frequently do live, but i was worried when you didnt drop any videos for months, now when you do it's bangers after bangers 🔥🔥

    • @Huntabyte
      @Huntabyte  4 місяці тому +11

      The Svelte 5 API being unstable was killing my motivation as I wasn't sure what stuff was gonna be relevant months from then. Now that it's stable I feel much more comfortable!

    • @MadeInJack
      @MadeInJack 4 місяці тому +4

      @@Huntabyte Great to hear, happy to watch your future content! Tips and tricks about Svelte 5 help me a lot!

    • @greendsnow
      @greendsnow 4 місяці тому +5

      He was busy with developing the best svelte UI library(s)

  • @GriizzDev
    @GriizzDev 4 місяці тому +5

    Any particular reason you don't just use a singleton pattern with the `getToastState` function?
    Inside the getter you could check if a ToastState class already exists in context and just return it. If non exists yet, this is the first call, and you create a new ToastState, set it to context, and return it.
    This way you would not have to consider when to use `set...` and when to use `get...`.

    • @Huntabyte
      @Huntabyte  2 місяці тому

      While in this specific case it may make sense, but I've found when using this not necessarily at a global level you can easily run into disconnected states

  • @d4yno
    @d4yno 4 місяці тому

    I'd love a video about the snippets you briefly mentioned. Whats the best practice?

  • @7heMech
    @7heMech 26 днів тому

    I love this, I'm at 3:04 and want to implement this, but it's getting very late and I have to wake up early, so I'm leaving this comment in hope that somebody will leave a comment and remind me about it. Thanks.

  • @BhideSvelte
    @BhideSvelte 4 місяці тому

    this type of content really keeps me attach...to svelte, really appreciate your work 😍😍

  • @cmdeckermusic
    @cmdeckermusic 4 місяці тому +4

    Wow, what a helpful tutorial! I learned so much about Svelte 5 contexts and why you might prefer to set them up with classes. Keep 'em coming!

    • @Huntabyte
      @Huntabyte  4 місяці тому

      Glad it was helpful!

  • @SuperQuwertz
    @SuperQuwertz Місяць тому +1

    And awesome tutorial, more Svelte 5 stuff please! :D

  • @giannivullo4391
    @giannivullo4391 4 місяці тому

    thank you for the great work you are doing here and on the UI libraries you're working on !

  • @fev4
    @fev4 4 місяці тому

    great tip on how to handle the global context

  • @cengytech497
    @cengytech497 4 місяці тому

    Svelte 5 is a beeeast 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥, thanks for informative tutorial

  • @couragic
    @couragic 4 місяці тому

    I can’t believe I’m still not subscribed to this channel 😮 FIXED

  • @yunmulu1659
    @yunmulu1659 4 місяці тому +1

    What I needed right now. Thanks!

  • @RyoukenDofus
    @RyoukenDofus 4 місяці тому

    Nice tutorials ! How about to make a toast showing a loading state when a form is posted and when the reponse is fullfileld show the result?
    I implemented it using svelte-sooner but 50% of the time it shows a wrong result :c

  • @jeffloucks4071
    @jeffloucks4071 4 місяці тому +1

    1. I like this approach 2. I like how many times you said toast

  • @markasena
    @markasena 4 місяці тому +4

    Loving these types of content man! more please!

  • @AlexvanderValk
    @AlexvanderValk 6 днів тому

    I'm implementing something like this, but the setContext method is still running on the server during SSR. So does that ToastState on the server just get ignored?

  • @imho7992
    @imho7992 4 місяці тому

    Welp new huntabyte vid, time to refactor! 😂

  • @omomer3506
    @omomer3506 4 місяці тому

    Hunter you have been missed

  • @user-lj4lo7cx7m
    @user-lj4lo7cx7m 4 місяці тому +3

    Lets go!!

  • @ratsock
    @ratsock 4 місяці тому +1

    Does this mean going forward in svelte5 we shouldn’t be using stores in general if runes can extend beyond direct svelte components?

    • @Hugos68
      @Hugos68 4 місяці тому +2

      Yes, you probably want to stay away from stores unless you have a specific reason to use them. Runes are more performant and more flexible

    • @kylerjohnson988
      @kylerjohnson988 4 місяці тому

      To add to Hugo’s already great answer, Runes also provide a consistent reactive model whether you’re in a component or outside of it.

  • @zeroows
    @zeroows 4 місяці тому

    Thank you, please keep them coming

  •  4 місяці тому +1

    amazing content like always Hunter

  • @karolus__
    @karolus__ 4 місяці тому +2

    Why not a toasts store? What is the main advantage using state + context instead of store?

    • @Huntabyte
      @Huntabyte  4 місяці тому +7

      See the video linked in the description. In a nutshell, if you're building an SPA it's fine. If you're doing any SSR, there is risk of leakage between different users since it is a single object on the server.

    • @karolus__
      @karolus__ 4 місяці тому

      @@Huntabyte interesting! so in context of SSR writable() is long-lived variable on the server even if it's not defined in *.server.ts file and you have to wrap it in context or use $state in svelte 5, I wonder how many people wrapped session in writable store in SvelteKit... 😵‍💫

  • @michaelpotter9006
    @michaelpotter9006 4 місяці тому

    Excellent video. Thanks!

    • @Huntabyte
      @Huntabyte  4 місяці тому

      You're welcome! Glad you enjoyed it!

  • @good-dev-student
    @good-dev-student 4 місяці тому

    ❤❤❤❤❤❤❤❤❤

  • @mikejohneviota9293
    @mikejohneviota9293 4 місяці тому

    I actually use that!! its OVAAAA POWAAAA

  • @johnwu8916
    @johnwu8916 4 місяці тому

    Thanks! This is super helpful.

  • @develophir
    @develophir 4 місяці тому +1

    immediately liked. love the consistency of high quality videos! 😊

  • @tririfandani1876
    @tririfandani1876 4 місяці тому

    Any specific reason why you use Symbol instead of just regular string in context?

    • @Huntabyte
      @Huntabyte  4 місяці тому

      It's guaranteed to not conflict with any other context in the tree (potentially set by a library that I don't own)

  • @sledgex9
    @sledgex9 4 місяці тому +2

    Why call onDestroy() and clear the Map? Won't the Map be cleared/garbage collected after the class instance gets garbage collected/destroyed?
    PS: I am mainly a C++ dev, so not too good with object lifetimes in the JS world.

    • @Huntabyte
      @Huntabyte  4 місяці тому +6

      You are probably right on that one. The GC should handle that. Sometimes I get too paranoid and end up taking the trash out myself 😂

    • @rhysbrennan90
      @rhysbrennan90 2 місяці тому

      That was where I was taken aback. I thought the idea of svelte and JS was that's more often than not overkill. But 100% learned a lot at a great pace. Thank you!

  • @good-dev-student
    @good-dev-student 4 місяці тому

    thank you

  • @afish5581
    @afish5581 4 місяці тому

    Helllo, just started with Svelte and worked through the tutorial. There is one chapter about props which does not recommend $props due to performance issues. Since you used them, how big of an issue is it really? Coming from React + TS I prefer the syntax used in this video but I am hesitant to use it.

    • @Huntabyte
      @Huntabyte  4 місяці тому +1

      The docs you're referring to are the Svelte 4 docs, which talks about `$$props`, not the single `$props` rune in Svelte 5

    • @afish5581
      @afish5581 4 місяці тому

      Oh 😮 I see. Thx for clarification ❤

  • @alexlatess
    @alexlatess 4 місяці тому

    I needed exactly this ! Thx !

  • @greggsworld4453
    @greggsworld4453 3 місяці тому +1

    This is how i used mobx in react

  • @SuperQuwertz
    @SuperQuwertz Місяць тому

    Can't it also simply be a module which has side-effects when loaded?

  • @davidwhitaker6489
    @davidwhitaker6489 3 місяці тому

    I just opt out of context for singletons just cleaner imo and one less mechanic to remember.

  • @lasal7820
    @lasal7820 4 місяці тому

    Awesome!

  • @Nukhtarov
    @Nukhtarov 4 місяці тому

    Awesome. Thanks!

  • @user-krnujdp
    @user-krnujdp 4 місяці тому

    Great video, wow!

  • @good-dev-student
    @good-dev-student 3 дні тому

    Where are you 4 months i miss your videos 😢

  • @denverjamesduran2750
    @denverjamesduran2750 4 місяці тому

    Hi may I know why not just create a store that multiple components can access? Like just importing the store and mutating it. Whats the difference?

    • @Huntabyte
      @Huntabyte  4 місяці тому +1

      See the video linked in the description about global stores. In a nutshell, if you're building an SPA it's fine. If you're doing any SSR, there is risk of leakage between different users since it is a single object on the server.

    • @denverjamesduran2750
      @denverjamesduran2750 4 місяці тому

      @@Huntabyte thanks a lot for answering. So that's why I get errors like sharing state in server etc even tho I dont have state in my server files Im gonna watch ur video thanks again youre the best!

  • @theether5993
    @theether5993 4 місяці тому

  • @Eelmascapito
    @Eelmascapito 4 місяці тому

    Awesome video!

  • @Loui3Hunna
    @Loui3Hunna 4 місяці тому

    Love it!

  • @seethruhead7119
    @seethruhead7119 3 місяці тому

    there doesn't seem to be any reason in your example to choose a class over a factory function

    • @Huntabyte
      @Huntabyte  3 місяці тому

      Why do classes exist in the language if factory functions exist? There are differences 😁

  • @MrBaster38
    @MrBaster38 4 місяці тому

    Very good video!

  • @devonlamond
    @devonlamond 2 місяці тому

    Ok what is the point of using context here ? If you instantiate and then export, you can then import wherever you want. As apposed to context, which can only be imported in Svelte components.

  • @BonBaisers
    @BonBaisers 4 місяці тому +18

    As a senior architect, I will be always amazed how javascript community will always try to avoid a pattern that is easy to learn, efficient and SOLID : dependency injection. We all figured it out long time ago, but still another framework trying to reinvent the weel.

    • @SlackoJacko
      @SlackoJacko 4 місяці тому +1

      DI and error handling leave me perplexed too, it’s not necessarily a resistance to OOP/SOLID related as functional solutions seem to be snubbed just the same.

    • @Venyl
      @Venyl 4 місяці тому +3

      I'm not as experienced as you, would you mind elaborating on this comment and explaining how dependency injection would work here?

    • @BonBaisers
      @BonBaisers 4 місяці тому

      @@Venyl Well the setContext and getContext are literally a service registration and a service getter. Doing that way, is a missed opportunity to me. Why not use interfaces or types in TS to decouple the service implementation and the pages ? Why not get for free lifecycle options ? Why not have a simple file where you can register implementations instead of having them anywhere in the code. Imagine ToastService needs another service, like a NotificationService that can route a notification to Email or SMS, based on another service UserPreferences... you get the point. the setContext getContext pattern can become a nightmare. Testability is another factor.

    • @rafaelrocha3991
      @rafaelrocha3991 4 місяці тому +4

      tbh these principles aren’t really opposed to the inversion of control. you can setup the context as a DI container and apply standard principles to it. It’s just an implementation of an IoC container, nothing inherently related to “JS developers”, example check NestJS or Angular if you think JS ecosystem doesn’t have more standard implementation of DI/IoC.

    • @hank9th
      @hank9th 3 місяці тому +6

      IMO these new features seem to take Svelte in a direction that is more DI friendly, not less.
      The ability to refactor state out of individual components into shared classes/contexts, should make it much easier to inject state management behavior into UI components.

  • @MennoB-sk8tv
    @MennoB-sk8tv 4 місяці тому

    Wouldn’t it be cleaner to only use gettoaststate and there check if there is one in the context and otherwise put one in and return it

    • @Huntabyte
      @Huntabyte  4 місяці тому

      This could certainly be done, it depends on if that behavior would be expected or not!
      In this case, the context needs to be initialized in the layout so that the `` has access to it. I'd rather it fail and throw then silently fail and not know why I have multiple separate toast states floating around!

  • @marcalanstreeter
    @marcalanstreeter 2 місяці тому

    I think the beginning of this video says to look at this video if you want more info on Svelte Layout basics ua-cam.com/video/jCzEJG2osNw/v-deo.htmlsi=lDXpWJAKlsEGs1G0

  • @ppcamps
    @ppcamps 4 місяці тому

    I'm with mixed feelings about this svelte 5. It's looking like a lot with React ( I hate react )
    But the content is great, btw

  • @gageracer
    @gageracer 4 місяці тому

    After learning Context for svelte another friend had an issue with sharing data on his react project so I was like "let's use react context!". Oh boy its not as straightforward as it is in svelte at all. We could not hook it up and gave up on it.

  • @piano42
    @piano42 4 місяці тому

    9:32 this is some very complicated kinda over engineered code...
    Why don't you store the toasts in a record where the key is the id? Not sure if it's a good idea to mutate the array of toasts. No need to handle a map of timeouts then either...

  • @Danielo515
    @Danielo515 4 місяці тому

    Having a folder for components, a folder for types, a folder for green things is not going to scale

    •  4 місяці тому +1

      remember this is just an example to showcase the power of svelte5 runes + context, is only to teach on that, not on project folder structure or scalability

    • @Huntabyte
      @Huntabyte  4 місяці тому

      ^

  • @genshian
    @genshian 4 місяці тому +1

    I dont get why you switched from Next.js to Svelte. You mentioned, to keep things more based in javascript to render out the charts, but I don't understand how Svelte really makes that much easier when you can do that in React. Mostly curious, because I like the separation of js vs. the jsx aspects and if the js is too large I'd just move it into a hook. I guess, I dont know enough about Svelte though.

  • @charlesokorobo508
    @charlesokorobo508 3 місяці тому

    Can you do a Tutorial where we will create a Facebook clone-- using Svelte, SvelteKit, Postgres Database, Drizzle ORM and Lucia Authentication.
    This tutorial is a big Application (I know), but then, it will be a series like this -- ua-cam.com/video/z1UMKqMN3VQ/v-deo.html
    And with such a tutorial, you would have taught us all the practical real life use case of all Svelte and SvelteKit features, and their usage in a real world situation.
    Regards.

  • @greggsworld4453
    @greggsworld4453 3 місяці тому

    They should have copied mobx more, this get and set context is silly especially if you dont have a singleton and you want to instantiate this class in many components.

  • @good-dev-student
    @good-dev-student 4 місяці тому

    4 days no new knowledge Master 😢?!

  • @gageracer
    @gageracer 4 місяці тому

    I love this method and been using it. But I have one issue that I cannot replicate with sveltelab cause it only gives that error on dev mode: When I get the toasts and then pass it as a prop in an each block as `bindable()` to the child, I get an error saying I should use binding lol. It works fine but the error makes me thing I did something wrong.
    [svelte] ownership_invalid_binding
    src/lib/components/ContainerSum.svelte passed a value to src/lib/components/Container.svelte with `bind:`, but the value is owned by src/routes/+layout.svelte. Consider creating a binding between src/routes/+layout.svelte and src/lib/components/ContainerSum.svelte

  • @edwardspresume
    @edwardspresume 4 місяці тому +1

    for the setTimeout cleanup, would something like this suffice
    constructor() {
    onDestroy(() => {
    this.toasts.forEach((toast) => {
    clearTimeout(toast.timeoutId);
    });
    });
    }
    addToast(title: string, message: string, durationMS = 5000) {
    const id = crypto.randomUUID();
    const timeoutId = setTimeout(() => {
    this.removeToast(id);
    }, durationMS);
    this.toasts.push({ id, title, message, timeoutId });
    }
    removeToast(id: string) {
    const toast = this.toasts.find((t) => t.id === id);
    if (toast) {
    clearTimeout(toast.timeoutId);
    }
    this.toasts = this.toasts.filter((toast) => toast.id !== id);
    }

  • @AB-gx5zj
    @AB-gx5zj 4 місяці тому

    Great video, thanks!