Allow subscribing to stores declared in a local scope

[Caleb-T-Owens]

Describe the problem

At GitButler, we’re looking to reduce our reliance on Svelte’s reactivity system. While powerful, it often exhibits subtle and hard-to-describe (and not-type-safe) behaviours that have been the source of several bugs.

I have been starting to spike this problem, and looking into switching back to either Rx.JS or svelte stores. As I started to look into converting our UiState system to stores, but there have been a couple ergonomic issues that I hope can be figured out.

Something we've ended up doing, is using @const declarations to access sub-portions of state inside loops IE:

{@const stackState = uiState.stack(stack.id)}
<p>Example: {stackState.foobar.current}</p>

With stores however, it's not possible to subscribe to a store that was declared locally. For example, we would like to do the following:

{@const stackState = uiState.stack(stack.id)}
{@const foobar = stackState.foobar}
<p>Example: {$foobar}</p>

Unfortunately this is not currently possible: https://svelte.dev/playground/0802979ba7f346fcaf846ada1471a944?version=5.34.9

Perhaps there was some historical significance for this, but with the reactivity system you can now:

• Subscribe to locally declared $state: https://svelte.dev/playground/8f02b54d155b41cc90648c0a67b7256e?version=5.34.9
• Proxy a store with $state to subscribe to a locally declared store: https://svelte.dev/playground/2bbc19f505fd43b0bd8cc7c51c00bc1c?version=5.34.9

Given this capability, it seems only natural to update the capabilities of the $ syntax.

Describe the proposed solution

Something that would be great to see in the near future would be to allow subscribing to arbitrary stores, IE:

{@const stackState = uiState.stack(stack.id)}
{@const foobar = stackState.foobar}
<p>Example: {$foobar}</p>

If it's possible to subscribe to arbitrary stores, then I would then be interested in exploring whether it would be possible to use $ syntax on properties as well, IE:

{@const stackState = uiState.stack(stack.id)}
<p>Example: {stackState.$foobar}</p>

However, that feels like a stretch goal to me, and the first step of simply making subscribing to arbitrary stores would be a great improvement.

Importance

would make my life easier

[7nik]

it often exhibits subtle and hard-to-describe (and not-type-safe) behaviours that have been the source of several bugs.

Please report such cases.

There is fromStore, example. Not so elegant, but already available workaround.

[Caleb-T-Owens]

@7nik

Please report such cases.

In I think all but one case svelte has been behaving correctly, and our code had some subtle logical error, so we've not considered useful to share upstream.

There is fromStore, example. Not so elegant, but already available workaround.

Oh neat! I'm supprised that I missed that util but perhaps it wasn't in the documentation for the svelte 5 previews. We've got our own implementation of exactly that which I've been using as the work around exactly as you describe.

Even though there is a workaround, it does feel in line with the svelte ethos to strive for the more concise syntax.