Expose a $state contract for use outside of .svelte.js and .svelte files

[SystemParadox]

Describe the problem

We have a fairly substantial application framework that heavily uses observables (as-in knockout style). Svelte's stores are an amazing fit - we made our observables implement the store contract and mostly this works great - with one exception: the fact that the syntax doesn't allow for nested stores, e.g. you can't do foo.$bar.

When svelte 5 was announced with $state and using proxies/getters I was sure this would allow us to fix this problem and everything would be perfect. Obviously $state itself is a compile-time transform, but I'm really surprised to find that there doesn't seem to be any kind of "contract" I can implement in a non-svelte object to make it observable to svelte as if I had used $state.

Describe the proposed solution

A documented "contract" (similar to the store contract) for making arbitrary objects reactive to svelte, without having to use $state and .svelte.js files, or import svelte internals.

Importance

would make my life easier

[Ocean-OS]

One thing you could do is have an inner $state that you access on any get or set action. For example:

class BasicReactiveMap {
    #hook = $state(0);
    #internal = new Map;
    get(key) {
        this.#hook; //access to "hook into"  Svelte's reactivity
        return this.#internal.get(key); 
    } 
    set(key, value) {
        if(this.#internal.get(key) !== value) {
            this.#internal.set(key, value);
            this.#hook++; //mutate to trigger any effects or deriveds
        } 
    } 
} 

I do understand that that isn't exactly what you asked for, but it could help, for example, if you were to export a similar hook function like this from a svelte.js file to a regular file:

function hook() {
    let x = $state(0);
    return [()=>x, ()=>++x]; //returns tuple with `get` and `set` hooks
} 

[7nik]

See #12956. But, I don't really see how that or the contract will fix the nested reactivity problem without using runes and .svelte.js - too specific case.

[Thiagolino8]

I don't quite understand what you're asking, do you want states declared and modified outside of svelte (.svelte and .svelte.js files) to have fine-grained reactivity when read inside svelte?

I don't think this is possible, the best option I can think of is to add a method or getter to your observables that uses createSubscriber, but these methods won't be able to be abstracted away.

<p>{foo.$.bar.$.baz.$}</p> // .$ is a getter that uses the subscriber returned by createSubscriber

[SystemParadox]

I'm not looking for fine-grained reactivity inside my observables - if a svelte component uses obs.foo then reactivity is just for the whole of obs, I don't care about making it fine grained so it knows the difference between obs.foo and obs.bar.

But I am looking for a way to do something like this:

// mylib (a normal js file)
export function getState(key) {
    // reads one of my observables from somewhere, depending on what key is
};

// In a svelte component
<script>
import { getState } from 'mylib';
</script>
<p>{ getState('foo') }</p>
<p>{ getState('bar') }</p>

Such that if the value of the foo observable changes then svelte will react to it.

I think createSubscriber is probably what I'm looking for - I haven't seen this before so thanks.

However, this does imply that mylib has an explicit svelte dependency. I liked that with the store contract you didn't actually have to depend on svelte as long as you implemented the contract.

On reflection this may not be possible to do without a svelte dependency because you essentially need to register the dependency as a side-effect of reading it (which is how observables work already).