@encorekit/web-sdk 0.1.1 → 0.1.7

package/examples/svelte/README.md

@@ -0,0 +1,233 @@
+# Encore SDK - Svelte Example
+
+This example demonstrates how to integrate the Encore Web SDK into a Svelte 4 application using Vite and TypeScript.
+
+## 🚀 Quick Start
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+```
+
+The app will be available at `http://localhost:5173`
+
+## 📁 Project Structure
+
+```
+svelte/
+├── src/
+│   ├── App.svelte       # Main application component
+│   ├── main.ts          # Application entry point
+│   ├── app.css          # Global styles
+│   └── vite-env.d.ts    # Vite type definitions
+├── index.html           # HTML template
+├── package.json         # Dependencies and scripts
+├── tsconfig.json        # TypeScript configuration
+├── svelte.config.js     # Svelte configuration
+└── vite.config.ts       # Vite configuration
+```
+
+## 🔑 Configuration
+
+Before running the example, replace `'YOUR_API_KEY_HERE'` in `src/App.svelte` with your actual Encore API key:
+
+```typescript
+Encore.configure({
+  apiKey: 'YOUR_API_KEY_HERE', // Get this from dashboard.encorekit.com
+  environment: 'production',
+  logLevel: 'debug',
+})
+```
+
+## 🎯 Features Demonstrated
+
+### 1. SDK Initialization
+The SDK is initialized when the component mounts using `onMount`:
+
+```typescript
+import { onMount } from 'svelte';
+import Encore from '@encorekit/web-sdk';
+
+onMount(() => {
+  Encore.configure({
+    apiKey: 'YOUR_API_KEY_HERE',
+    environment: 'production',
+    logLevel: 'debug',
+  });
+  
+  const currentUserId = Encore.getCurrentUserId();
+  userId = currentUserId || '';
+  isInitialized = true;
+});
+```
+
+### 2. Reactive Variables
+Svelte's reactive declarations automatically update the UI:
+
+```typescript
+let isInitialized = false;
+let userId = '';
+let customUserId = '';
+```
+
+### 3. Two-Way Data Binding
+Svelte's `bind:value` directive:
+
+```svelte
+<input bind:value={customUserId} />
+```
+
+### 4. User Identification
+Users can be identified with custom IDs and attributes:
+
+```typescript
+function handleIdentifyUser() {
+  Encore.identify(customUserId, {
+    email: 'user@example.com',
+  });
+  userId = customUserId;
+}
+```
+
+### 5. Presenting Offers
+Display targeted offers to users:
+
+```typescript
+async function handlePresentOffer() {
+  const result = await Encore.presentOffer();
+  
+  if (result.granted) {
+    console.log('Offer granted!');
+  }
+}
+```
+
+## 🏗️ Svelte Patterns
+
+This example uses Svelte best practices:
+
+- **Reactive Declarations** - Automatic UI updates when variables change
+- **Lifecycle Hooks** - `onMount()` for initialization
+- **Event Handlers** - `on:click` for user interactions
+- **Conditional Rendering** - `{#if}` blocks for conditional display
+- **Two-Way Binding** - `bind:value` for form inputs
+- **TypeScript** - Full type safety with TypeScript
+
+## 📦 Dependencies
+
+- `svelte` ^4.2.12 - Svelte framework
+- `@encorekit/web-sdk` ^0.2.0 - Encore Web SDK
+- `vite` ^5.4.1 - Build tool and dev server
+- `typescript` ^5.5.3 - TypeScript compiler
+- `@sveltejs/vite-plugin-svelte` ^3.0.2 - Svelte plugin for Vite
+
+## 🔧 Available Scripts
+
+- `npm run dev` - Start development server with hot reload
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build locally
+- `npm run check` - Run Svelte type checking
+
+## 💡 Best Practices
+
+1. **Initialize Once** - Initialize the SDK in `onMount` lifecycle hook
+2. **Error Handling** - Always wrap SDK calls in try-catch blocks
+3. **Reactive State** - Use Svelte's reactive declarations for state management
+4. **User Feedback** - Provide clear feedback for all SDK operations
+5. **Environment Variables** - In production, use environment variables for the API key
+6. **Type Safety** - Use TypeScript for better developer experience
+
+## 🎨 Customization
+
+### Using Environment Variables
+
+Create a `.env` file:
+
+```env
+VITE_ENCORE_API_KEY=your-api-key-here
+```
+
+Update `App.svelte`:
+
+```typescript
+Encore.configure({
+  apiKey: import.meta.env.VITE_ENCORE_API_KEY,
+  environment: 'production',
+})
+```
+
+### Creating a Store
+
+For better state management, create a Svelte store:
+
+```typescript
+// stores/encore.ts
+import { writable } from 'svelte/store';
+import Encore from '@encorekit/web-sdk';
+
+function createEncoreStore() {
+  const { subscribe, set, update } = writable({
+    isInitialized: false,
+    userId: '',
+  });
+
+  return {
+    subscribe,
+    initialize: (apiKey: string) => {
+      Encore.configure({ apiKey });
+      const userId = Encore.getCurrentUserId() || '';
+      set({ isInitialized: true, userId });
+    },
+    identify: (userId: string, attributes?: Record<string, any>) => {
+      Encore.identify(userId, attributes);
+      update(state => ({ ...state, userId }));
+    },
+    presentOffer: async () => {
+      return await Encore.presentOffer();
+    },
+  };
+}
+
+export const encoreStore = createEncoreStore();
+```
+
+Usage in component:
+
+```svelte
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { encoreStore } from './stores/encore';
+
+  onMount(() => {
+    encoreStore.initialize('YOUR_API_KEY');
+  });
+
+  async function handlePresentOffer() {
+    const result = await encoreStore.presentOffer();
+  }
+</script>
+
+<div>
+  User ID: {$encoreStore.userId}
+</div>
+```
+
+## 📚 Learn More
+
+- [Encore SDK Documentation](https://docs.encorekit.com)
+- [Svelte Documentation](https://svelte.dev)
+- [SvelteKit Documentation](https://kit.svelte.dev)
+- [Vite Documentation](https://vitejs.dev)
+
+## 🆘 Support
+
+- 📧 Email: admin@encorekit.com
+- 📖 Docs: https://docs.encorekit.com
+
+

package/examples/svelte/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Encore SDK - Svelte Example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+

package/examples/svelte/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "encore-sdk-svelte-example",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Svelte example for Encore Web SDK",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@tsconfig/svelte": "^5.0.2",
+    "svelte": "^4.2.12",
+    "svelte-check": "^3.6.7",
+    "tslib": "^2.6.2",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.1"
+  },
+  "dependencies": {
+    "@encorekit/web-sdk": "^0.1.1"
+  }
+}
+

package/examples/svelte/src/App.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import Encore from '@encorekit/web-sdk';
+
+  let isInitialized = false;
+  let userId = '';
+  let customUserId = '';
+  let status: { message: string; type: 'info' | 'success' | 'error' } | null = null;
+
+  const codeExample = `// Initialize SDK
+Encore.configure({
+  apiKey: 'your-api-key',
+  userId: 'user-123',
+  environment: 'production',
+})
+
+// Identify user
+Encore.identify('user-123', {
+  email: 'user@example.com'
+})
+
+// Present offer
+const result = await Encore.presentOffer()
+if (result.granted) {
+  console.log('Offer granted!')
+}`;
+
+  onMount(() => {
+    try {
+      Encore.configure({
+        apiKey: 'ENCORE_PUBLIC_API_KEY', // Replace with your actual API key
+        userId: 'test-svelte',
+        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() {
+    if (!customUserId.trim()) {
+      status = {
+        message: 'Please enter a user ID',
+        type: 'error',
+      };
+      return;
+    }
+
+    try {
+      Encore.identify(customUserId, {
+        email: 'user@example.com',
+      });
+      userId = customUserId;
+      status = {
+        message: `User identified as: ${customUserId}`,
+        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: ${JSON.stringify(result.reason)}`,
+          type: 'info',
+        };
+      }
+    } catch (error) {
+      status = {
+        message: `Failed to present offer: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        type: 'error',
+      };
+    }
+  }
+</script>
+
+<div class="app">
+  <h1>🎯 Encore SDK</h1>
+  <p>Svelte Example</p>
+
+  <div class="card">
+    <h2>SDK Status</h2>
+    <div class="user-info">
+      <strong>Status:</strong> {isInitialized ? '✓ Initialized' : '✗ Not Initialized'}
+      <br />
+      <strong>User ID:</strong> {userId || 'Not set'}
+    </div>
+
+    {#if status}
+      <div class="status {status.type}">
+        {status.message}
+      </div>
+    {/if}
+  </div>
+
+  <div class="card">
+    <h2>User Identification</h2>
+    <div class="input-group">
+      <label for="userId">Custom User ID:</label>
+      <input
+        id="userId"
+        type="text"
+        placeholder="Enter user ID (e.g., user-123)"
+        bind:value={customUserId}
+        disabled={!isInitialized}
+      />
+    </div>
+    <button
+      on:click={handleIdentifyUser}
+      disabled={!isInitialized}
+      class="primary"
+    >
+      Identify User
+    </button>
+  </div>
+
+  <div class="card">
+    <h2>Present Offer</h2>
+    <p>Click the button below to display an offer to the user.</p>
+    <button
+      on:click={handlePresentOffer}
+      disabled={!isInitialized}
+      class="success"
+    >
+      🎁 Present Offer
+    </button>
+  </div>
+
+  <div class="card">
+    <h2>Code Example</h2>
+    <pre>{codeExample}</pre>
+  </div>
+</div>
+

package/examples/svelte/src/app.css

@@ -0,0 +1,224 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#app {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+  margin-bottom: 1rem;
+}
+
+h2 {
+  font-size: 1.8em;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
+.card {
+  padding: 2em;
+  background-color: #1a1a1a;
+  border-radius: 8px;
+  margin-bottom: 2rem;
+}
+
+.user-info {
+  margin: 1.5rem 0;
+  padding: 1rem;
+  background-color: #2a2a2a;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+.user-info strong {
+  color: #ff3e00;
+}
+
+.button-group {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin: 1.5rem 0;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #ff3e00;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+button:disabled:hover {
+  border-color: transparent;
+}
+
+.primary {
+  background-color: #ff3e00;
+  color: white;
+}
+
+.primary:hover {
+  background-color: #e63900;
+  border-color: #e63900;
+}
+
+.success {
+  background-color: #059669;
+  color: white;
+}
+
+.success:hover {
+  background-color: #047857;
+  border-color: #047857;
+}
+
+.status {
+  margin: 1rem 0;
+  padding: 0.8rem;
+  border-radius: 4px;
+  font-size: 0.9em;
+}
+
+.status.info {
+  background-color: #1e40af;
+  color: white;
+}
+
+.status.success {
+  background-color: #059669;
+  color: white;
+}
+
+.status.error {
+  background-color: #dc2626;
+  color: white;
+}
+
+.input-group {
+  margin: 1rem 0;
+  text-align: left;
+}
+
+.input-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.input-group input {
+  width: 100%;
+  padding: 0.6em;
+  border-radius: 4px;
+  border: 1px solid #444;
+  background-color: #1a1a1a;
+  color: inherit;
+  font-size: 1em;
+  font-family: inherit;
+}
+
+.input-group input:focus {
+  outline: 2px solid #ff3e00;
+  border-color: #ff3e00;
+}
+
+code {
+  background-color: #2a2a2a;
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-family: monospace;
+  font-size: 0.9em;
+}
+
+pre {
+  text-align: left;
+  background-color: #1a1a1a;
+  padding: 1rem;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  
+  button {
+    background-color: #f9f9f9;
+  }
+  
+  .card {
+    background-color: #f9f9f9;
+  }
+  
+  .user-info {
+    background-color: #efefef;
+  }
+  
+  .input-group input {
+    background-color: #ffffff;
+    border-color: #ccc;
+  }
+  
+  code {
+    background-color: #efefef;
+  }
+  
+  pre {
+    background-color: #f5f5f5;
+  }
+}
+

package/examples/svelte/src/main.ts

@@ -0,0 +1,9 @@
+import './app.css'
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app')!,
+})
+
+export default app
+

package/examples/svelte/src/vite-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
+

package/examples/svelte/svelte.config.js

@@ -0,0 +1,8 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}
+

package/examples/svelte/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "moduleDetection": "force"
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+

package/examples/svelte/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
+