Svelte (store)

Svelte store adapter — Readable stacks, $stack, standalone callFor.

@stainless-code/svelte-layers/store binds stacks to Svelte readable stores. Most core symbols are re-exported. Core’s headless createLayer is createLayerHandle; the wired handle is createLayer. Use this entry for Svelte 3+ projects that prefer the store contract over runes.

Install

npm install @stainless-code/svelte-layers

pnpm add @stainless-code/svelte-layers

yarn add @stainless-code/svelte-layers

bun add @stainless-code/svelte-layers

nub add @stainless-code/svelte-layers

aube add @stainless-code/svelte-layers

Import from the /store subpath:

import { useStack, callFor } from "@stainless-code/svelte-layers/store";

Peer: svelte >=3.0.0

For Svelte 5.7+ runes, see Svelte (runes).

Client

setLayerClient() in a parent; useLayerClient() in descendants — same as the runes entry.

Render a stack

useStack({ stack }) returns a Readable<T>. Subscribe with $stack in components. Pair each state with the standalone callFor(client, stackId, state):

<script>
  import {
    callFor,
    setLayerClient,
    useLayerClient,
    useStack,
  } from "@stainless-code/svelte-layers/store";

  setLayerClient();
  const client = useLayerClient();
  const stack = useStack({ stack: "confirm" });
</script>

{#each $stack as state (state.id)}
  {@const call = callFor(client, "confirm", state)}
  {#if call}
    <Confirm {call} payload={state.payload} />
  {/if}
{/each}

Confirm dialog

<script lang="ts">
  import {
    callFor,
    createLayer,
    layerOptions,
    setLayerClient,
    useLayerClient,
    useStack,
  } from "@stainless-code/svelte-layers/store";

  type ConfirmPayload = { title: string };
  type ConfirmResponse = boolean;

  setLayerClient();
  const client = useLayerClient();
  const confirmStack = useStack({ stack: "confirm" });

  const confirm = layerOptions<ConfirmPayload, ConfirmResponse>({
    stack: "confirm",
    key: ["confirm", "remove"],
  });
  const c = createLayer(confirm);

  async function remove() {
    await c.open({ title: "Remove item?" });
  }
</script>

{#each $confirmStack as state (state.id)}
  {@const call = callFor(client, "confirm", state)}
  {#if call}
    <div role="dialog">
      <h2>{state.payload.title}</h2>
      <button onclick={() => void call.end(true)}>Yes</button>
      <button onclick={() => void call.end(false)}>No</button>
    </div>
  {/if}
{/each}

<button onclick={remove}>Remove</button>

Primitives

Options bag plus optional trailing LayerClient. Drive with createLayer(options); observe with createLayerState({ key, … }). Queued counterparts: createQueuedStack, createLayerQueuedState.

Ergonomic APIs

No shipped outlet or subscribe components — render with $stack + callFor in your markup.

Learn more

• Svelte (runes) — Svelte 5.7+ with .current
• Lifecycle · Adapter parity