Ability to access `$app/stores` at any time in the browser

[Conduitry]

Describe the problem

There is sometimes code that I know will only ever be run on the browser (for example, if it's only called from an event handler), and having to jump through the same hoops as I do on the server in order to associate that with the appropriate (and only) instances of the stores is annoying.

Describe the proposed solution

Store values on the browser should live in a singleton module (or something similar) rather than in the Svelte context for the root component. getStores() should be able to be called at any time, not just during component initialization. If it wouldn't cause too much of a divergence between browser and server code, we could also remove the transparent calling of getStores() during the autosubscription to any of the individual stores.

Alternatives considered

Right now, I'm using a fairly ugly workaround where I serialize the values I need to a data-foo attribute in my root layout, which I then read and deserialize elsewhere.

Another option presumably would be to have an onMount call in my root layout that sets the store(s) as a global on window.

Importance

would make my life easier

Additional Information

No response

[dummdidumm]

Oh that's a nice idea. It could also help with #4339 - provide initial values on the server, and have the ability to use them on the client freely.

[Conduitry]

What I have right now is extremely hacky but it seems to work:

diff --git a/packages/kit/src/core/sync/write_root.js b/packages/kit/src/core/sync/write_root.js
index c71e30f5..d64829b5 100644
--- a/packages/kit/src/core/sync/write_root.js
+++ b/packages/kit/src/core/sync/write_root.js
@@ -43,6 +43,7 @@ export function write_root(manifest_data, output) {
 			<!-- This file is generated by @sveltejs/kit — do not edit it! -->
 			<script>
 				import { setContext, afterUpdate, onMount } from 'svelte';
+				import { browser } from '$app/env';
 
 				// stores
 				export let stores;
@@ -52,7 +53,11 @@ export function write_root(manifest_data, output) {
 				${levels.map((l) => `export let data_${l} = null;`).join('\n\t\t\t\t')}
 				export let errors;
 
-				setContext('__svelte__', stores);
+				if (browser) {
+					window._sk_stores = stores;
+				} else {
+					setContext('__svelte__', stores);
+				}
 
 				$: stores.page.set(page);
 				afterUpdate(stores.page.notify);
diff --git a/packages/kit/src/runtime/app/stores.js b/packages/kit/src/runtime/app/stores.js
index d98e7171..fb046e61 100644
--- a/packages/kit/src/runtime/app/stores.js
+++ b/packages/kit/src/runtime/app/stores.js
@@ -15,7 +15,7 @@ export function stores() {
  * @type {import('$app/stores').getStores}
  */
 export const getStores = () => {
-	const stores = getContext('__svelte__');
+	const stores = browser ? window._sk_stores : getContext('__svelte__');
 
 	return {
 		page: {

Presumably I should be sticking the stores in a module somewhere when in the browser rather than onto window. Is there any precedent for where this sort of thing should live? Because it needs to be accessible from the generated root component, it might not be possible for it to live somewhere that it is impossible for users to access, but it should at least live somewhere they are discouraged from accessing. Do we want to introduce (undocumented) something like $app/internal?

[Conduitry]

Oh, I was just circling back to this, and presumably I can set the stores in packages/kit/src/runtime/client/client.js instead of in the Root.svelte component definition - and here I will have access to internal things like singletons.js. I'm going to give that a try.