Ability to pass primitive reactive entity by reference from the template

[webbby]

Describe the problem

Currently code like this

<script>
  let counter = $state(0);

  function increment(e,entity) {
    entity++;
  }
</script>

<div>{counter}</div>
<button onclick={() => { increment(event,counter) } }>Increment</button>

passes just the value without the reactivity.

Describe the proposed solution

I believe the ability to pass the reactivity reference enables a good practice to be able to decouple methods and state which improves re-usability and dependency and gives more freedom.

Probably something like

<script>
  import { ref } from 'svelte/reactive';

  let counter = $state(0);

  function increment(e,entity) {
    // here entity should be the  " let counter " reactive state and it should increment the state value
    entity++;
  }
</script>

<div>{counter}</div>
<button onclick={ () => { increment(event, ref(counter)) } }>Increment</button>

or whatever solution is suitable that may bring the feature available and keep default behavior unaffected

Importance

i cannot use svelte without it

[Conduitry]

This isn't a good idea, because this isn't how javascript works. If you reassign (not mutate) the parameter of a function, it becomes detached from its original argument, and the original argument is unchanged. We don't want reactive values to behave entirely differently from normal javascript behavior. The fact that, internally, counter isn't a regular variable with the value 0 is an implementation detail, and just because we could have it change the value of the argument doesn't mean we should.