Easily create derived state

[vjpr]

When using external stores, you can't just pass scalar state and use it reactively. But if its an object state then you can pass it and use $derived to read it.

If you want to pass scalar state you have to use a getter function...or you have to create a store.

It would be nice to have an easy way to create a store whose value is derived from some state in a component.

<script>

let value = $state()

// a. Won't be reactive when passed to component.
let item1 = $derived({value})

// b. Current approach
let item2 = $state({value: null})
$effect(() => item2.value = value)

// c. Proposal.
let item3 = $derivedState({value})

</script>

<input bind:value={value} />

<Component {item}/>

It's easy to mistake $derived({value}) thinking it creates reactive state but it does not.

This rune would make it easy to pass reactive scalar state to a store...making it easier to extract functionality.

[brunnerh]

See:

• feat: allow $derived($state()) for deep reactive deriveds #17308