Make an assignment reactive without $: if it has reactive dependencies

[bomzj]

• Start Date: 2023-01-01
• RFC PR: (leave this empty)
• Svelte Issue: (leave this empty)

Make an assignment reactive without $: if it has reactive dependencies

Summary

It would be nice to have plain/concise assignment without redundant $: for variables that have reactive dependencies.

Motivation

This is how we do now

let count = 1
$: doubled = count * 2

And this is how it can be

let count = 1
let doubled = count * 2

In case if we need one time doubled to be non reactive we could define it like

const doubled = count * 2

[brunnerh]

• This hides the fact that the variable will change automatically, potentially causing confusion
• It may not always be intended that a (mutable) variable updates automatically, so this would make that case impossible

[leandrohsilveira]

By doing this, Svelte will be changing a standard javascript behavior.

The migration from v3 may be kinda painful because devs will need to review all existing components to see if the reactive approach is intended, and if not, he won't be able to have a mutable non-reactive variable.

I think this change has little to add to compensate the tradeoff mentioned above.

[longnguyen2004]

No, it'll break a code pattern I've seen used in several different libraries.

<script>
    let value = ...;
    let oldValue = value;

    $: {
        // do something with value and oldValue
        oldValue = value;
    }
</script>

Your proposal breaks the assumption that oldValue won't suddenly change, which breaks any code that uses this pattern. Now, I'd love for Svelte to have an API to tap into the update and do stuff before the variable changes. However, when the API for that doesn't exist (which is now), that pattern works well enough, and your proposal will break it.