API reference › @evolu/svelte › evoluAppState

function evoluAppState<
  S extends Readonly<
    Record<string, Readonly<Record<string, AnyStandardSchemaV1>>>
  >,
  D extends Readonly<
    Record<string, Readonly<Record<string, AnyStandardSchemaV1>>>
  > = EmptyEvoluSchema,
>(app: EvoluApp<S, D>): EvoluAppState<S>;

Defined in: index.svelte.ts:282

Follows an EvoluApp and returns an object whose properties update when it changes: state, the AppOwner this tab has open as an AppOwnerState, and appOwners, the AppOwners the app can open on this device. While state is Open, its evolu is the AppOwner's instance; it changes when the tab opens another AppOwner, or the AppOwner again after a removal and restore or its database's deletion, so key the children that use it with it, which remounts them, and pass it to queryState. While state is None, show a choice such as to open one of appOwners, create one, or restore one. The device database's instance is EvoluApp.device.

It creates an $effect, so call it where Svelte allows one, such as during component initialization or inside $effect.root. It stops following the app 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 evoluAppState during its initialization and renders {#if appState.state.type === "Open"}, the AppOwner's UI in {#key appState.state.evolu}, {:else if appState.state.type === "None"}, the choice, {:else}, what shows while the AppOwner's instance opens, {/if}.

import {
  assertType,
  type AppOwnerState,
  type EvoluApp,
  type Name,
  type TestEvoluSchema,
} from "@evolu/common";
import { evoluAppState } from "@evolu/svelte";

const todoAppState = (app: EvoluApp<TestEvoluSchema>) => {
  const appState = evoluAppState(app);
  // The open AppOwner's database, or null while none is open or it opens.
  const openName = $derived(
    appState.state.type === "Open" ? appState.state.evolu.name : null,
  );

  return {
    state: () => appState.state,
    openName: () => openName,
  };
};

assertType<
  ReturnType<ReturnType<typeof todoAppState>["state"]>,
  AppOwnerState<TestEvoluSchema>
>();
assertType<
  ReturnType<ReturnType<typeof todoAppState>["openName"]>,
  Name | null
>();