# @lia-labs/sdk-svelte

> Svelte stores for the Lia SDK, for Svelte 4 and 5. Lia's state as stores, and buttons for a component's life. From the Lia developer docs: https://docs.lialabs.org/packages/svelte

```sh
npm install @lia-labs/sdk @lia-labs/sdk-svelte
```

Svelte 4 or 5. Everything from [`@lia-labs/sdk`](/packages/sdk) is re-exported.

## An app

```svelte
<script lang="ts">
  import { initStore, isLia, mockLia, pay, ready, stores, useMainButton } from '@lia-labs/sdk-svelte';

  if (!isLia()) mockLia();

  const lia = initStore();
  const { language, colorScheme } = stores;
  $: if ($lia.status === 'ready') ready();

  useMainButton({ text: 'Buy extra lives', onClick: () => pay('extra-lives') });
</script>

{#if $lia.status === 'ready'}
  <h1>Hello, @{$lia.result.player.name} ({$language}, {$colorScheme})</h1>
{/if}
```

## Stores and helpers

| Export | Gives you |
| --- | --- |
| `initStore(options?)` | A store of `{ status, result, error }` that calls `init()`. |
| `stores` | Lia's state as stores: `player`, `mode`, `language`, `rtl`, `colorScheme`, `themeParams`, `viewport`, `safeArea`, `contentSafeArea`, `isFullscreen`, `startParam`, `soundOn`, `notificationsAllowed`, `initialized`. |
| `toStore(value)` | Any SDK value as a store. |
| `useLiaEvent(event, handler)` | Listens to one of Lia's events for the component's life; returns a stop function. |
| `useMainButton(options)`, `useSecondaryButton(options)` | Shows the button for the component's life. Returns `{ update(options), dispose() }`. |
| `useBackButton(onBack)`, `useSettingsButton(onOpen)` | Shows the header button for the component's life. Returns `{ update, dispose }`. |
| `useClosingConfirmation()`, `useVerticalSwipesDisabled()` | For the component's life; return a function that ends it early. |

Call the `use*` helpers while a component is being set up so they end with it. Called anywhere else (an event handler, a module), they work the same but you call `dispose()` yourself:

```ts
let back: { dispose(): void } | null = null;
function openDetail() {
  back = useBackButton(closeDetail);
}
function closeDetail() {
  back?.dispose();
}
```