API reference › @evolu/svelte › storeState

function storeState<T>(store: ReadonlyStore<T>): {
  current: T;
};

Defined in: index.svelte.ts:552

Follows an Evolu ReadonlyStore, such as evoluError or syncState of evoluSvelteDeps, and returns an object whose current is the store's value and updates when it changes. It's what React's useSyncExternalStore does for a store, and current follows Svelte's fromStore. The first render and server rendering read the store once; the effect reads it again once subscribed, so a change since then shows. A store replaces its value rather than mutating it, so current changes only when the value does.

It creates an $effect, so call it where Svelte allows one, such as during component initialization or inside $effect.root. It stops following the store when that component or root is destroyed.

Example

Runes such as $state work only in Svelte components and .svelte.ts or .svelte.js modules. A component calls evoluErrorState during its initialization.

import { assertType, type EvoluError, type ReadonlyStore } from "@evolu/common";
import { storeState } from "@evolu/svelte";

const evoluErrorState = (evoluError: ReadonlyStore<EvoluError | null>) => {
  const error = storeState(evoluError);
  const message = $derived(error.current ? error.current.type : null);
  return { message: () => message };
};

assertType<
  ReturnType<ReturnType<typeof evoluErrorState>["message"]>,
  EvoluError["type"] | null
>();