Svelte: Allow reactivity inside functions

[buhrmi]

When I use a function inside my template, eg <p>{getUserName()}</p>, and getUserName() is using a reactive variable, the template is not updated when the reactive variable changes. I guess this is due to the compiler not analyzing the function and looking which variables it depends on. But, if I use an inline function inside the template (as demonstrated in the below), it updates just fine.

https://svelte.dev/repl/df444c2dfa5240ae9c8c203aaabdcd61?version=3.9.1

How hard would it be to add this feature?

[nsivertsen]

In the meantime, you can work around this by extracting the reactive variables as function parameters (<p>{getUserName(my_param)}</p>) or using reactive statements.

[pngwn]

This has been asked quite a few times, the short version is it would be very difficult, or at least it would add a huge amount of complexity. Svelte would need to look inside every single function and analyse it to check for changing variables.

The biggest issue is that this function would rerun when any variables inside the function change, not just the one you want it to watch. This means you cannot 'hide' variables from the compiler, which is one of the benefits to the current approach.

Since a change like this would leave users with no way of hiding variables, doesn't unlock any new functionality that can't be solved by referencing the 'reactive' variable in the template, and would be a breaking change, it is unlikely that this will be implemented.

[Conduitry]

Something along these lines actually did exist in early alphas of Svelte 3. It was the initial replacement for v2's computed properties, but was eventually itself replaced with reactive declarations. The reactive declarations RFC says:

The 'do nothing' alternative is to rely on function calls — either making their dependencies explicit, or attempting to trace their dependencies. Absent a Sufficiently Smart Compiler, this risks creating significant computational overhead.

---

I'm not sure what I think about the inline IIFE example. I guess I'm a little surprised that that _is_ reactive. I don't know whether that's intended or whether that specific behavior was ever described anywhere.

[PaulMaly]

@buhrmi Please check workaround for this feature: https://svelte.dev/repl/39fcb67d8041423e84d7c08da75b05de?version=3.9.1

Basically, you can think about regular function call inside of your template as about pull reactivity and reactive declarations as push reactivity. Both methods we need in some cases.

[pngwn]

@Conduitry I have seen the IIFE example before, I guess it works because the value is referenced in the template. I do remember there being a bug where IIFEs sometimes wouldn't run, but I think that was fixed.

[buhrmi]

@PaulMaly wow, thanks for that. I guess that solves this issue in a "sufficiently elegant" way :)