Why is a function with $page store reactive?

[hyunbinseo]

Did not expect this to work:

<!-- src/routes/+layout.svelte -->

<script lang="ts">
  import { page } from '$app/stores';

  const navItems = new Map([
    ['/a', 'A'],
    ['/b', 'B']
  ]);

  const isCurrent = (href: string) => $page.url.pathname === href;
</script>

{#each navItems as [href, text]}
  <a {href} style:font-weight={isCurrent(href) ? 'bold' : null}>{text}</a>
{/each}

[brunnerh]

This does in fact not work with Svelte < v5.

It works there because reactivity is signal-based, so it can pass function and module boundaries.
The page store emits a signal and whatever calls the function can track that.

[brunnerh]

The legacy mode implementation also uses signals under the hood and the increased reactivity has not been limited artificially.

Functions and getters are reactive by default in Svelte 5, most of the time the only reason to add $derived is for caching the result, i.e. save on work in case the value is used e.g. in many places.

[hyunbinseo]

Thanks for the reply. Is this documented in the Svelte 5 preview documentation?

As a longtime Svelte v3, v4 user, this seems very odd since it probably required $: back then.

[brunnerh]

I don't think this is explicitly documented. This is a side-effect of runtime reactivity which is noted in the docs as being used.

[hyunbinseo]

It is still hard for me to grasp.

The reality is that as applications grow in complexity, figuring out which values are reactive and which aren't can get tricky. And the heuristic only works for let declarations at the top level of a component, which can cause confusion. Having code behave one way inside .svelte files and another inside .js can make it hard to refactor code

Since the whole point of runes was to explicitly state what values were reactive, I thought the same was applied to functions. (which there is no runes API for)

Feels like the top-level let variable in a Svelte v4 component.

I truly hope this side effect is explicitly documented.

[brunnerh]

Since the whole point of runes was to explicitly state what values were reactive

It wasn't. The main point is to allow reactivity at any level, not just the top, and also in regular JS files without having to resort to a completely different API (stores).

I truly hope this side effect is explicitly documented.

You don't have to hope, you could open a documentation issue pointing it out if you think it's important.