how to derive a deeply reactive variable from another?

[aster-void]

let's say I have a list of items

const list = $state([{ val: 1 }, { val: 2 }, { val: 3}]);

and I want a deeply reactive variable that's derived from it. it must:

• cause an update when I mutate it.
• reset if the original variable changes.

the only way I currently know is using $effect.

function double(item) {
  return { val: item.val * 2 }
}
// works
let doubled = $state(list.map(double));
$effect(() => {
  doubled = list.map(double);
});

$derived doesn't make the variable deeply reactive, so it does not work:

https://svelte.dev/playground/5f8a2ab8ce1d4834a5ba16fce64fada6?version=latest

// not deeply reactive
const doubled = $derived(list.map(double));

[peterreeves]

As of Svelte 5.25.0, you can update deriveds and it just works:
https://svelte.dev/playground/94c9f7bf8eb14e328949dc055fb56795?version=5.34.3

[aster-void]

it's not deeply reactive though:
https://svelte.dev/docs/svelte/$derived#Deriveds-and-reactivity

edit: nevermind the playground seems to be reactive

[peterreeves]

Huh, this was not behaviour I was expecting though. Maybe you're right?
https://svelte.dev/playground/5f8a2ab8ce1d4834a5ba16fce64fada6?version=latest

[aster-void]

Thanks, that was my mis-conclusion. I updated the title to have the word "deeply".

[brunnerh]

As has been mentioned in #16189, one can wrap the value in a $state proxy to get deep reactivity in derived values.

$derived.by(() => {
    let val = $state(...);
    return val;
});

function proxify(value) {
    const proxified = $state(value);
    return proxified;
}

let foo = $derived(proxify(...));