Svelte 5 watch derived change and run view-transition

[bayaderpack]

Describe the bug

I make this simple product filter on top there is slider to filter products by price. I want to run view-transition when derived is changed. I dont know how to do it or how to even watch for derived change.

Reproduction

Code example

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz
    Memory: 2.29 GB / 15.94 GB
  Binaries:
    Node: 21.5.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.4 - C:\Program Files\nodejs\pnpm.CMD
    bun: 1.1.10 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.19041.4355

Severity

annoyance

[paoloricciuti]

First thing: please edit the reproduction to remove the code block and use a markdown link instead

[Link name](https://.....)

Second the question is not clear: do you want to use native view transition when the price change?

[bayaderpack]

First thing: please edit the reproduction to remove the code block and use a markdown link instead

[Link name](https://.....)

Second the question is not clear: do you want to use native view transition when the price change?

Sorry my English is bad. I'm currently using the transition but transition doesn't work nicely with svelte 5. like you can see there is a lot of issues with animation/transition etc Svelte 5 animation/transition issues. I want when I filter the products to get animation with view transition api instead depending on svelte/animation svelte/transition

[paoloricciuti]

Ok I'll make an example for you later

[bayaderpack]

Ok I'll make an example for you later

Amazing, thank you so much I really appreciate it

[ken-zlai]

Is there an accepted way to accomplish this in Svelte 5? effect seems like a poor solution, as it does not explicitly watch on changes for a specific variable. I haven't found any accepted way in Svelte 5 to watch for changes to a specific variable,

[paoloricciuti]

Is there an accepted way to accomplish this in Svelte 5? effect seems like a poor solution, as it does not explicitly watch on changes for a specific variable. I haven't found any accepted way in Svelte 5 to watch for changes to a specific variable,

What do you mean by this? $effect it's literally to watch for changes on a specific variable. Also i forgot to create the example sorry.

[ken-zlai]

Say I wanted to watch for changes on variable foo and call function bar when it changes. From the way I see it, you would need to do something like this:

$effect(() => {
    console.log(foo); // trigger changes here
    bar();
});

This code does a lot of magic, and without console.logging foo, it would never run. Vue, for example, gives a very explicit way to watch a variable and run code when it changes. Svelte does not.
https://vuejs.org/guide/essentials/watchers.html

Maybe I'm missing something here.

[Conduitry]

You can also do:

$effect(() => {
    foo;
    bar();
});

[paoloricciuti]

You can also do:

$effect(() => {
    foo;
    bar();
});

This...but also...whats the use case specifically? Why you need to rerun a function when an unrelated variable changes?

[harrisi]

Or (repl):

<script>
  let count = $state(0)

  function increment() {
    count += 1
  }

  const bar = () => {
    count
    console.log("do something")
  }
	
  $effect(() => {
    bar()
  })
</script>

<button onclick={increment}>
  clicks: {count}
</button>

[ken-zlai]

Fair enough. I think these are reasonable solutions, but by definition, not watchers. Now all of a sudden we have to be thinking about what code might trigger the $effect to run and putting in untrack's everywhere you don't want reactivity to be triggered.

A decent workaround, but by no means in my opinion a "watcher".