State does not work across context?

[0x1618]

Changing context.currentValue in the child component doesn't update the parent context.

Simple repl:

https://svelte.dev/playground/6d90fb3ac80b4c3fa37d8445402e1980?version=5.25.3

[webJose]

<script>
	import {setContext} from "svelte";

	const {children} = $props();
	
	let currentValue = $state();
	let setOfValues = $state([]);
	
	const context = setContext("ctx", {
		get setOfValues() { return setOfValues; },
		get currentValue() { return currentValue; },
		set currentValue(newVal) { currentValue = newVal; }
	});

	$effect(() => {
		console.log(context.setOfValues)
	}) 
</script>

{context.currentValue}

{@render children()}

The above works. The problem: You're simply returning a copy of the value. Why? Because { setOfValues, currentValue } is mere shorthand for { setOfValues: setOfValues, currentValue: currentValue }, which is allocating new RAM for a copy of the values.

Still, I'd recommend not doing this, and instead creating a class that encapsulates the whole thing. The compiler will then create your get and set accessors for you.

[brunnerh]

Would only use classes if there is a really good reason to; plain objects work as well.

const data = $state({ current: undefined, values: [] });
setContext('key', data);

Playground

(This will create a Proxy, which is something to keep in mind. The same is true for arrays.)