Creating Reactive Browser APIs In Svelte

Поділитися
Вставка
  • Опубліковано 12 січ 2025

КОМЕНТАРІ • 26

  • @_heyMP
    @_heyMP 22 дні тому +1

    Another awesome video 👍

  • @abtix
    @abtix 23 дні тому +4

    10:45 wait I'm a little confused. What makes the $effect or "get current()" rerun when this.#version changes? I thought it had to be inside the effect for it to trigger.

    • @abtix
      @abtix 22 дні тому +2

      I sort of understand it now. Every time this.#version or anything reactive inside a "get ...()" changes, the get will rerun. I just don't understand why. Maybe it's a Svelte thing, maybe not.

    • @JoyofCodeDev
      @JoyofCodeDev  22 дні тому +3

      A signal tracks who read it and reruns the code when it updates:
      ```
      let a = $state(0)
      let b = $state(0)
      function sum() {
      return a + b
      }
      setInterval(() => {
      a += 1
      b += 1
      }, 1000)
      {sum()}
      ```
      When you read the value inside a tracking context, it creates an effect in the compiled output and reruns when you update the value:
      ```
      let a = state(0)
      let b = state(0)
      function sum() {
      return get(a) + get(b)
      }
      setInterval(() => {
      set(a, get(a) + 1)
      set(b, get(b) + 1)
      }, 1000)
      template_effect(() => set_text(text(), sum()))
      ```
      I have a video on signals if you want to understand how they work: ua-cam.com/video/1TSLEzNzGQM/v-deo.html

    • @abtix
      @abtix 22 дні тому +1

      @@JoyofCodeDev Ahhh I see, that makes more sense. Will definitely check out the video right now. Thank you!

  • @camoman1000
    @camoman1000 23 дні тому +1

    A great video would be to combine the context api and createSubscriber

  • @jazza231
    @jazza231 23 дні тому +2

    1:35 The Svelte

  • @dei8bit
    @dei8bit 22 дні тому +1

    your intro sound is like when you connect an USB like i feel that i connect with the video ready to receive your sacred bits of information :$

  • @hyperadapted
    @hyperadapted 23 дні тому +1

    11 seconds ago is wild

  • @Antonio-fo4fl
    @Antonio-fo4fl 23 дні тому

    I think what's confusing for me is why does something like subscribers or even position at the end in the mouse subscriber does not need to be state sometimes. I guess at that point svelte would track it so you would need to wrap it in untrack likely so we don't run the effect when it changes but for some reason my brain is struggling with it lol. Need to remember state is only for stuff you want svelte and it's api's specifically to react to, but I don't know why I struggle with the fact that subscribers value is being changed behind the scenes

    • @JoyofCodeDev
      @JoyofCodeDev  22 дні тому

      It doesn't need to use `$state` because you're just updating a regular value, and then you rerun `this.current` on change using `update`.
      The `MediaQuery` example makes more sense because `this.#query` is already a `MediaQueryList` that is updated, so you only have to rerun `this.current` to get the latest value from `this.#query.matches`.

  • @tithos
    @tithos 23 дні тому +1

    This is game changing!!!

  • @SRG-Learn-Code
    @SRG-Learn-Code 22 дні тому

    Oh boy, I've been away from svelte and this channel for a while and now everything are classes. I guess is time to rollback a dozen videos.

  • @yash7630
    @yash7630 22 дні тому +1

    why do use #

    • @JoyofCodeDev
      @JoyofCodeDev  22 дні тому +1

      it makes it private so it can't be referenced outside the class

    • @_heyMP
      @_heyMP 22 дні тому

      They can't be referenced inside of Proxies either, which is a problem. If there is a possibility of someone needing to wrap your class instances in a Proxy I would recommend sticking with underscores.

    • @mikejohneviota9293
      @mikejohneviota9293 21 день тому

      my brain is not braining 🧠

  • @pixel7038
    @pixel7038 17 днів тому

    Do you plan on attending Svelte summit 2025?

  • @alight4045
    @alight4045 23 дні тому +8

    I think now svelte have more chaos just bcs of runes plus writable,set and $ much more reactivity in chaos manner, i think its better to have clear method of getting things done in different ways

    • @JoyofCodeDev
      @JoyofCodeDev  23 дні тому +6

      you don't use them both unless you have older code that needs to be updated

    • @alight4045
      @alight4045 23 дні тому +1

      @@JoyofCodeDev I think there is a lot to improve in runes and a lot to do with it, I am big fan of svelte and thank u for ur support

    • @johannsix2161
      @johannsix2161 22 дні тому +1

      Actually, there is FromStore and ToStore function. To handle multiple version of svelte.

    • @roiborromeo7921
      @roiborromeo7921 22 дні тому +1

      runes are the replacement of writables

    • @a7mdbest15
      @a7mdbest15 18 днів тому

      This is just for backward compatibility, rich harris have said before this will be changed gradually so users have time migrate

  • @PhilSherry
    @PhilSherry 23 дні тому +2

    $effect.tracking example, especially for Scott Tolinski. 😅