reactivity to external entity does not work

[mgholam]

Describe the bug

export class Item{
	Name = "";
	Age = 0;
}

	import {Item} from "./entity.js"
	
	let data = $state(new Item()); // does not work
	//let data = $state({Name:"",Age:0});  // works

Reproduction

https://svelte.dev/playground/dc3e221656764453a5b6d3c14a7a1542?version=5.38.7

Logs

System Info

all

Severity

blocking an upgrade

[sillvva]

Svelte state is only able to provide deeply reactive state for proxiable plain objects, not classes. To work with non-reactive third party classes, you need to re-assign to the state rather than assign to individual properties. To make this clearer in your code, I'd use $state.raw to indicate that this is by design and use function bindings to update the state this way:

https://svelte.dev/playground/9e40aeb2572240e18777ed05d0369d82?version=5.38.7

https://svelte.dev/docs/svelte/$state#$state.raw
https://svelte.dev/docs/svelte/bind#Function-bindings

[mgholam]

Thanks!

But why so convoluted?

svelte v4 was much easier to write.

This is a small example of the problems I have upgrading to v5.

[sillvva]

Svelte 3/4 used compiler magic to make state deceptively deeply reactive. I say deceptively, because it wasn't actually deeply reactive. Any assignment to a nested property triggered an update on the whole object/class. As such, it would not have been able to achieve fine-grained reactivity with this approach.

Svelte 5 achieves fine-grained reactivity by using proxies to make nested properties of plain objects/arrays independently reactive. You can create your own reactive classes by making the properties $state or $derived, but for non-reactive, third-party classes, reassignment is necessary.

[mgholam]

I understand the "marketing" reasons, but for real world applications this approach implies rewriting the application if it is even possible and not conflicting with the design and flow of data (which it does I have other examples).

Can we have the "compiler magic" back, I seriously can not recommend v5 to any one.

[sillvva]

Your other option is to use a store instead of state, which would work the old way.

https://svelte.dev/playground/e28980cc851f4b44add1283cac2c85ab?version=5.38.7