Svelte

Install

The Svelte package is headless: it gives you native Svelte stores and you render your own markup. There is no stylesheet to import and no component to override.

npm install @elaanio/svelte

Create the client once

// elaan.js
import { createElaan } from "@elaanio/svelte";

export const elaan = createElaan({
  apiBase: "https://api.elaan.io/v1",
  tokenProvider,
});

Export it from a module and import it wherever you need it; every consumer shares the same stores and the same realtime connection.

Render the inbox

<script>
  import { elaan } from "./elaan.js";
  const { state, unreadCount, markRead } = elaan.inbox;
</script>

<span>{$unreadCount}</span>
{#each $state.notifications as n (n.id)}
  <button on:click={() => markRead(n.id)}>{n.title}</button>
{/each}

They are ordinary Svelte stores, so the $ prefix, derived, and get all work as usual, and unsubscription is handled by the compiler.

Preferences and push

const { state: prefs, setPreference, clearPreference } = elaan.preferences;
const { register, unregister } = elaan.push;

The same store shape as every other binding, because they all wrap @elaanio/core. If you would rather not use Svelte's store contract at all, drop to the core directly, described in Headless.