Svelte Integration

<script lang="ts">
  import { onMount } from 'svelte';
  import Encore from '@encorekit/web-sdk';

  let isInitialized = false;
  let userId = '';
  let status: { message: string; type: 'info' | 'success' | 'error' } | null = null;

  onMount(() => {
    try {
      // Generate or retrieve userId from localStorage
      const storageKey = 'encore_user_id';
      let storedUserId = localStorage.getItem(storageKey);
      
      if (!storedUserId) {
        storedUserId = 'user_' + Math.random().toString(36).substring(2, 15);
        localStorage.setItem(storageKey, storedUserId);
      }
      
      Encore.configure({
        apiKey: import.meta.env.VITE_ENCORE_API_KEY || 'YOUR_API_KEY',
        userId: storedUserId,
        environment: 'production',
        logLevel: 'debug',
      });
      
      const currentUserId = Encore.getCurrentUserId();
      userId = currentUserId || '';
      isInitialized = true;
      status = {
        message: 'Encore SDK initialized successfully!',
        type: 'success',
      };
    } catch (error) {
      status = {
        message: `Failed to initialize SDK: ${error instanceof Error ? error.message : 'Unknown error'}`,
        type: 'error',
      };
    }
  });

  function handleIdentifyUser(newUserId: string) {
    try {
      Encore.identify(newUserId, {
        email: 'user@example.com',
        subscriptionTier: 'free'
      });
      userId = newUserId;
      status = {
        message: `User identified as: ${newUserId}`,
        type: 'success',
      };
    } catch (error) {
      status = {
        message: `Failed to identify user: ${error instanceof Error ? error.message : 'Unknown error'}`,
        type: 'error',
      };
    }
  }

  async function handlePresentOffer() {
    status = {
      message: 'Presenting offer...',
      type: 'info',
    };

    try {
      const result = await Encore.presentOffer();
      
      if (result.granted) {
        status = {
          message: 'Offer granted successfully!',
          type: 'success',
        };
      } else {
        status = {
          message: 'Offer not granted',
          type: 'info',
        };
      }
    } catch (error) {
      status = {
        message: `Failed to present offer: ${error instanceof Error ? error.message : 'Unknown error'}`,
        type: 'error',
      };
    }
  }
</script>

<div>
  <h1>Encore SDK - Svelte</h1>
  <p>Status: {isInitialized ? '✓ Initialized' : '✗ Not Initialized'}</p>
  <p>User ID: {userId || 'Not set'}</p>
  
  {#if status}
    <div class="status-{status.type}">
      {status.message}
    </div>
  {/if}
  
  <button on:click={handlePresentOffer} disabled={!isInitialized}>
    🎁 Present Offer
  </button>
</div>

import { writable } from 'svelte/store';
import Encore from '@encorekit/web-sdk';

export const isInitialized = writable(false);
export const userId = writable('');

export function initializeEncore(apiKey: string) {
  const storageKey = 'encore_user_id';
  let storedUserId = localStorage.getItem(storageKey);
  
  if (!storedUserId) {
    storedUserId = 'user_' + Math.random().toString(36).substring(2, 15);
    localStorage.setItem(storageKey, storedUserId);
  }

  Encore.configure({
    apiKey,
    userId: storedUserId,
    environment: 'production',
  });

  userId.set(storedUserId);
  isInitialized.set(true);
}