Creating Reactive Browser APIs In Svelte

แชร์
ฝัง
  • เผยแพร่เมื่อ 11 ม.ค. 2025

ความคิดเห็น • 26

  • @_heyMP
    @_heyMP 21 วันที่ผ่านมา +1

    Another awesome video 👍

  • @abtix
    @abtix 22 วันที่ผ่านมา +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  21 วันที่ผ่านมา +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: th-cam.com/video/1TSLEzNzGQM/w-d-xo.html

    • @abtix
      @abtix 21 วันที่ผ่านมา +1

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

  • @camoman1000
    @camoman1000 22 วันที่ผ่านมา +1

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

  • @jazza231
    @jazza231 22 วันที่ผ่านมา +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 22 วันที่ผ่านมา +1

    11 seconds ago is wild

  • @Antonio-fo4fl
    @Antonio-fo4fl 22 วันที่ผ่านมา

    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  21 วันที่ผ่านมา

      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 22 วันที่ผ่านมา +1

    This is game changing!!!

  • @SRG-Learn-Code
    @SRG-Learn-Code 21 วันที่ผ่านมา

    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 21 วันที่ผ่านมา +1

    why do use #

    • @JoyofCodeDev
      @JoyofCodeDev  21 วันที่ผ่านมา +1

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

    • @_heyMP
      @_heyMP 21 วันที่ผ่านมา

      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 20 วันที่ผ่านมา

      my brain is not braining 🧠

  • @pixel7038
    @pixel7038 16 วันที่ผ่านมา

    Do you plan on attending Svelte summit 2025?

  • @alight4045
    @alight4045 22 วันที่ผ่านมา +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  22 วันที่ผ่านมา +6

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

    • @alight4045
      @alight4045 22 วันที่ผ่านมา +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 21 วันที่ผ่านมา +1

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

    • @roiborromeo7921
      @roiborromeo7921 21 วันที่ผ่านมา +1

      runes are the replacement of writables

    • @a7mdbest15
      @a7mdbest15 17 วันที่ผ่านมา

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

  • @PhilSherry
    @PhilSherry 22 วันที่ผ่านมา +2

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

    • @JoyofCodeDev
      @JoyofCodeDev  22 วันที่ผ่านมา +3

      the docs need some love