Paquets

@lia-labs/sdk-svelte

Copier la page

Svelte stores pour le Lia SDK, pour Svelte 4 et 5. Lia d'état comme des stores, et des boutons pour la vie d'un composant.

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

Svelte 4 ou 5. Tout depuis @lia-labs/sdk est réexporté.

#Une application

<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}

#Stockages et helpers

Exporter	Vous donne
`initStore(options?)`	Un stock de `{ status, result, error }` qui appelle `init()`.
`stores`	Lia'son état en magasins : `player`, `mode`, `language`, `rtl`, `colorScheme`, `themeParams`, `viewport`, `safeArea`, `contentSafeArea`, `isFullscreen`, `startParam`, `soundOn`, `notificationsAllowed`, `initialized`, `banner`, `nativeAd`.
`toStore(value)`	N'importe quelle valeur SDK en tant que magasin.
`useLiaEvent(event, handler)`	Écoute l'une des Lia'les événements pour le composant's limites, et la personne
`useBannerAd(position?)`	Ancre un bandeau Lia à côté de votre page (qui devient plus court pour s'y adapter) : `"bottom"`, `"top"`, pour le composant's durée de vie ; retourne une fonction d'arrêt. `stores.banner` et `stores.nativeAd` suivez-les.
`useMainButton(options)`, `useSecondaryButton(options)`	Affiche le bouton pour le composant's durée de vie ; et le bannière et l'annonce native maintenant. `{ update(options), dispose() }`.
`useBackButton(onBack)`, `useSettingsButton(onOpen)`	Affiche le bouton de l'en-tête pour le composant's durée de vie ; et le bannière et l'annonce native maintenant. `{ update, dispose }`.
`useClosingConfirmation()`, `useVerticalSwipesDisabled()`	Pour le composant's durée de vie ; retourne une fonction qui la masque prématurément.

Appelez le use* les helpers pendant qu'un composant est en cours de configuration, donc ils se terminent avec lui. Appelés ailleurs (un gestionnaire d'événements, un module), ils fonctionnent de la même manière mais vous les appelez dispose() vous-même :

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

Traduit automatiquement. L'anglais est la source de vérité. Lire en anglais