Using spread syntax '{...rest }' with props doesnt work correctly! #15237
Description
Describe the bug
There is a simple example:
<script lang="ts">
let value = $state();
</script>
<div>Value: {value}</div>
<div>Typeof value: {typeof value}</div>
<input {value} oninput={(e) => (value = e.target.value)} type="text" />
<input {value} oninput={(e) => (value = e.target.value)} type="text" {...{}} /> <!-- {...{}} diff -->
<button onclick={() => (value = '')}>empty string</button>
<button onclick={() => (value = undefined)}>undefined</button>
<button onclick={() => (value = null)}>null</button>
The 2 inputs differ only in the spread operator.
In theory, should both be the same? not?
However, there are a few interesting things when updating the value:
- set to empty string : both input updated correctly ✔
- set to undefined : 1. input get value as empty string ✔, 2. input value dont updated ❌
- set to null : same as undefined ❌
try it here:
https://svelte.dev/playground/7a327186482347e688080339ea4a23a9?version=5.19.9
Reproduction
https://svelte.dev/playground/7a327186482347e688080339ea4a23a9?version=5.19.9
Logs
System Info
System:
OS: Windows 10 10.0.19045
CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
Memory: 3.41 GB / 15.87 GB
Binaries:
Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (127.0.2651.74)
Internet Explorer: 11.0.19041.4355Severity
annoyance