Why does Svelte5 compile code like this？

[vius]

in this case， There are two variables here that are not responsive。the one is “name”， the other is “data = { name: '***'}”，The code is as follows：

The compiled code is as follows，Notice what's in the red box：

here is the link： https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAEz2MwQrDIBBEf0X24kWau5hAv6P2kJpNsSSr6KZQxH8vS0suA_NmeA3WuGEFe2tA845g4ZozGOBPllLfuDGCgZqOEoS4H7Ipc0xUVTkIqxomT66GEjNPnjyHRJXVMvOsRtWEeBa_1enxwsDaCOsSG7KSSY1KVy6RntqTG06Zy1MT0UVO3Q35z84KBva0xDXiApbLgf3ev4f96pbYAAAA

I want to know that neither variable is responsive, why is one wrapped in effect and the other outside effect？

[brunnerh]

name, being a single value, can never be reactive if not declared with $state.

data.name is a property access which makes this a bit more complicated. Svelte could potentially analyze that this particular object is not stateful, but if data were to e.g. be imported from another module, it might be stateful.

Even with analysis, it is virtually impossible to capture all cases, e.g. someone could make the object stateful later by using Object.defineProperty and making a property reference live state via a get function.

<script>
	let name = $state('tama');
	const data = { name: '...' };

	Object.defineProperty(data, 'name', {
		get() { return name; }
	});
</script>

<input bind:value={name} />
<p>{data.name}</p>

[vius]

Thank you for your answer！