svelte 5: unnecessary code generated for updates

[Rich-Harris]

Describe the bug

Given code like this...

<script>
  let object = $state({ count: 0 });

  function increment() {
    object.count++;
  }
</script>

<button onclick={increment}>
  clicks: {object.count}
</button>

...we generate this output:

function increment(_, object) {
  (() => {
    const $$value = object.count;

    object.count += 1;
    return $$value;
  })();
}

This seems... odd

Reproduction

link

Logs

No response

System Info

next

Severity

annoyance

[caiquetorres]

I  found the code that generates that output and it seems that it was created to deal with the old way of handling variables.
The output we get is without using $state is:

let object = $.mutable_source({ count: 0 });
function increment() {
 (() => {
   const $$value = $.get(object).count;
   
   $.mutate(object, $.get(object).count += 1);
   return $$value;
 })();
}

This makes sense since the mutate method returns the value updated and what we're trying to achieve is to simulate the ++ operation in javascript, which initially returns the value and after that updates it, it's necessary to previously store the value into $$value to return it after.

On the new Svelte, this kind of output seems unnecessary since we're dealing with raw javascript.

function increment(_, object) {
  (() => {
    const $$value = object.count;
    
    object.count += 1;
    return $$value;
  })();
}

Maybe a solution would be adding validation to check the Svelte version or something like that and compiling the code differently in the newer version.