Opinions on this Safe Stores implementation: preventing global shared state, mutations and data leaks. Share typesafe stores.

[gipo355]

Hello,

After spending quite some time documenting myself on the perks of stores in sveltekit, their risk when used with SSR, i think i understood that the only way to be 100% sure i don't fuck up is creating stores with a context in the layout.svelte.

So here i report the current implementation i put up, getting some inputs around, and ask for your opinions on it:

create scoped stores with typesafe typings

I first created an util file:

// lib/utils/context.ts
import { getContext, setContext } from 'svelte';

/**
 * The context object.
 */
interface Context<T> {
  get: () => T;
  set: (context: T) => T;
}

function randomContextName() {
  return `$$context_${crypto.randomUUID()}`;
}

/**
 * Creates a context.
 */
export function createContext<T>(
  key: symbol | string = randomContextName()
): Context<T> {
  return {
    get: () => getContext<T>(key),
    set: (context: T) => setContext(key, context),
  };
}

with this function, i can create a store under lib/stores/ContextStore.ts

import { type Static, Type } from '@sinclair/typebox';
import type { Writable } from 'svelte/store';

import { createContext } from '../utils/context';

export const ContextStoreSchema = Type.Object({
  name: Type.String(),
  age: Type.Number(),
});

export type TContextStore = Static<typeof ContextStoreSchema>;

// this doesn't set a context, it only prepares its types
export const ContextStore = createContext<Writable<TContextStore>>(Symbol('context'));

can now use this prepared set and get context functions to create the store in +layout.svelte and use the get wherever i need to access the store.
This way, it's like having a single exported store from the lib directory.

<script lang="ts">

  import {
    writable
  } from 'svelte/store';

  import { ContextStore } from '../../lib/stores/ContextStore';

  const user = writable({
    name: 'mark',
    age: 32,
  });

  ContextStore.set(user);

  // typesafe store
  const safeStore = ContextStore.get();

  console.log($safeStore.age); // ok
  console.log($safeStore.foo); // error: safeStore.foo doesn't exist
</script>

Is there a better way to to it?
Is this actually safe?