Proxy inside $state gets ignored

[bskdany]

Describe the bug

Wrapping an existing Proxy with a $state and then modifying the new object doesn't trigger the inner Proxy.
I'm aware that under the hood $state is also a Proxy which might explain lots of things, but from what I've seen nested proxies are possible.

Reproduction

REPL

Code:

<svelte:options runes />

<script>
	const proxyHandler = {
		get(target, key) {
			return target[key];
		},
	
		set(target, key, value) {
			target[key] = "NOT_GETTING_SET";
			return true;
		}
	}

	const reactive = $state(new Proxy({1:"hello",2:"world"}, proxyHandler))		
	const nonReactive = new Proxy({1:"hello",2:"world"}, proxyHandler)

	reactive[1] = "a"
	console.log(reactive[1])

	nonReactive[1] = "a"
	console.log(nonReactive[1])

</script>

Logs

No response

System Info

Context same as repl

Severity

annoyance

[adiguba]

Hello,

That because $state() don't mutate the original object.

https://svelte.dev/docs/svelte/$state#Deep-state
When you update properties of proxies, the original object is not mutated.

What are you trying to do exactly ?

[7nik]

You should put $state inside the proxy.

const inner = $state({1:"hello",2:"world"});		
const reactive = new Proxy(inner, proxyHandler);

[bskdany]

Hello,

That because $state() don't mutate the original object.

https://svelte.dev/docs/svelte/$state#Deep-state
When you update properties of proxies, the original object is not mutated.

What are you trying to do exactly ?

I have a client side configuration heavy application in which I have a config object.
I want to make it both reactive and wrap it with a proxy so that whenever I write to it it's saved to the server and to local storage

[adiguba]

If you write all your config I think you can simply use an $effect() :

	$effect( () => {
		// Get a snapshot :
		const data = $state.snapshot(config);

		// Save data
		// ...
		console.log(data);
	});

Otherwise if you need to write the data field by field, perhaps using the state inside the proxy like @7nik suggested...