How to direclty set a state as a Context?

[CarsonGH]

Due to how proxies work I can only set a state as a context if it is an object.

I cannot properly set the state directly as a context object.

This seems very strange coming from react where you could just set a state as a context.

Am i supposed to set some sort of getter that I am not aware of or is this just how proxies and reactivity work in svelte?

for instance

myState = $state(null)
setContext("myState", myState)

I cannot use this is deeper components, doesnt update properly and the data is not usable when it is updated?
But if i do

myState =({data:null})
setContext("myState", myState)

deepState = getContext("myState")

Then it works fine if i access deepState.data

Any one know why you cannot directly set a state in a context or if there is another way to do this?

Here is a REPL which shows this issue: REPL LINK

[brunnerh]

This is how JS and Svelte contexts work, there is no way around this.
Contexts can only be set once, so you need an object with properties that then can be modified later.

(React executes the same component code over and over again when things change, this is not the case in Svelte.)

[CarsonGH]

I assumed a $state() makes something an object instead of just passing the value though?

I guess this assumption is wrong?

I don't see how we can use the state within the same component and it updates while the context does not update, i mean every where we reference the state within the component properly updates but the context does not update?

How is the context fundamentally different from referencing the state in the component that it is initialized in?

[brunnerh]

I assumed a $state() makes something an object instead of just passing the value though?
I guess this assumption is wrong?

Yes and no.

$state internally creates a signal object that wraps the value. However, at every access, this signal is unwrapped, so when you pass a $state to a context, only the $state value is passed along.

So for transporting reactivity you either have to reference it (e.g. via an arrow function) or you need an object, where the object is essentially referencing state via the properties.

You can treat setContext like any other function: If you pass in a variable, messing with that variable later can have no effect on anything happening in the function, unless the value of the variable is an object or you just reference the variable.

E.g.

let count = $state(0);

function logState(value) {
	$effect(() => {
		console.log(value);
	});
}

logState(count); // value is copied, $effect happens only once

vs.

let count = $state(0);

function logState(reference) {
	$effect(() => {
		console.log(reference());
	});
}

logState(() => count);

or

let count = $state({ current: 0 });

function logState(state) {
	$effect(() => {
		console.log(state.current);
	});
}

logState(count);

or even

let count = $state(0);

function logState(state) {
	$effect(() => {
		console.log(state.current);
	});
}

logState({ get current() { return count; } });

[CarsonGH]

If possible can you explain the difference between reassignment of svelte states within the original component versus global reassignment using context/imports and the difference of properties? Why does reassignment of a state value work fine within its originating component but not through the context/global imports.

Is this due to the compiler being able to "detect" and update the state (signal) through different means in the same component but not being able to detect this in the global context?

I have been playing with the repl and trying to understand how the javascript output change/differs but reading the output is still a bit obscure and I can't currently understand it.

So from my current understanding I believe that states are signals which are functions with getters and setters and the setter fires an event listener when triggered and the getter is a function which returns the value of a referenced variable.

But why is the svelte compiler not able to "update" the context/import based state so that its setter properly handles global reactivity, to me this seems like it should be no different than handling the updating of properties, but is there something I'm missing about how this works?

EDIT: I think I am understanding this more but i have to confirm if my hypothesized understanding is correct. The compiler does not make a top level object for each state but treats the state as an original object. This means that we cannot update it's value as top level object values cannot have function based getters. while property based getters can be functions.

[brunnerh]

It's just about references and values in JS.

A property is a reference, accessing it gets the current value the property points to¹.
If you have a variable that just contains a primitive like a number, passing that around does not transfer the variable, it transfers the value only.

So if you have...

let thing = $state(0);
setContext('thing', thing);

...you are only passing 0, the value of thing, not the variable/state itself. The signal is only triggered once when getting the value before setting the context.

If you do this instead...

let thing = $state(0);
setContext('thing', () => thing);

...you are passing a function that captures and references the state. Only calling the function then retrieves the value from the state (which triggers the signal and thus reactivity). The call will happen in another component at the usage site, thus transferring the reactivity there.

---

¹ There is one special thing here: $state when used with an object creates a state proxy, so even though $state({ current: 0 }) looks like the property just points to a fixed value, it actually behaves like a function that retrieves the value and triggers a signal.

[CarsonGH]

Ah but now when we access the state value through the context we have to access it by function invocation as the context object is now a function.

This is much better versus not being able to access the underlying object at all as before!

We also cannot reassign the top level value/object and it doesn't quite solve the direct usage as just a normal object, but I now understand that this is a limitation of how Svelte states work.

[brunnerh]

You can reassign the top level value if you provide an object with both getter and setter.

let thing = $state(0);
setContext('thing', {
  get value() { return thing; },
  set value(v) { thing = v; },
});

const thing = getContext('thing');
thing.value = 1;

[CarsonGH]

You are setting a property though you aren't directly updating the getter of thing. You are creating a property value which is a getter which happens to return thing. This is not the actual getter of thing though that is what is accessed when we do console.log(thing).

This wouldn't make sense as if we now had an object where it was object={value:"val1", othervalue:"val2"} then you would have conflicting naming as you have both a property of value and you have a getter set as value.

So you are not able to repeatedly get/print the value of the object using the same format.

And if we get back to the whole point of this question, There big issue is that the accessing format of a state should not change when it is passed through a context.

We shouldn't access the original state in the original component as console.log(state) but then once passed through a context have to completely change the format in which we access data and instead use console.log(state()) or console.log(state.value) .

This seems very strange and unnecessary for svelte which is built around consistency and ease of usage.

[brunnerh]

That's just how it is for now given how JS handles primitive values.
See also the discussion in this issue:

• Add $readable and $writable runes #9237