Merge pull request #4 from nosnibor89/feat/svelte-sdk-client-improvements

refactor: update SvelteLDClient to use compat SDK and improve initial…

Author: nosnibor89

packages/sdk/svelte/__tests__/lib/client/SvelteLDClient.test.ts

@@ -2,14 +2,15 @@ import { EventEmitter } from 'node:events';
 import { get } from 'svelte/store';
 import { afterEach, beforeEach, describe, expect, it, Mock, vi } from 'vitest';
 
-import { initialize, LDClient } from '@launchdarkly/js-client-sdk';
+import { initialize, LDClient } from '@launchdarkly/js-client-sdk/compat';
 
 import { LD } from '../../../src/lib/client/SvelteLDClient';
 
-vi.mock('@launchdarkly/js-client-sdk', { spy: true });
+vi.mock('@launchdarkly/js-client-sdk/compat', { spy: true });
 
 const clientSideID = 'test-client-side-id';
 const rawFlags = { 'test-flag': true, 'another-test-flag': 'flag-value' };
+const mockContext = { key: 'user1' };
 
 // used to mock ready and change events on the LDClient
 const mockLDEventEmitter = new EventEmitter();
@@ -62,7 +63,7 @@ describe('launchDarkly', () => {
 
       it('should set the loading status to false when the client is ready', async () => {
         const { initializing } = ld;
-        ld.initialize(clientSideID);
+        ld.initialize(clientSideID, mockContext);
 
         expect(get(initializing)).toBe(true); // should be true before the ready event is emitted
         mockLDEventEmitter.emit('ready');
@@ -71,16 +72,16 @@ describe('launchDarkly', () => {
       });
 
       it('should initialize the LaunchDarkly SDK instance', () => {
-        ld.initialize(clientSideID);
+        ld.initialize(clientSideID, mockContext);
 
-        expect(initialize).toHaveBeenCalledWith('test-client-side-id');
+        expect(initialize).toHaveBeenCalledWith('test-client-side-id', mockContext);
       });
 
       it('should register function that gets flag values when client is ready', () => {
         const newFlags = { ...rawFlags, 'new-flag': true };
         const allFlagsSpy = vi.spyOn(mockLDClient, 'allFlags').mockReturnValue(newFlags);
 
-        ld.initialize(clientSideID);
+        ld.initialize(clientSideID, mockContext);
         mockLDEventEmitter.emit('ready');
 
         expect(allFlagsSpy).toHaveBeenCalledOnce();
@@ -91,7 +92,7 @@ describe('launchDarkly', () => {
         const changedFlags = { ...rawFlags, 'changed-flag': true };
         const allFlagsSpy = vi.spyOn(mockLDClient, 'allFlags').mockReturnValue(changedFlags);
 
-        ld.initialize(clientSideID);
+        ld.initialize(clientSideID, mockContext);
         mockLDEventEmitter.emit('change');
 
         expect(allFlagsSpy).toHaveBeenCalledOnce();
@@ -116,7 +117,7 @@ describe('launchDarkly', () => {
 
       it('should return a derived store that reflects the value of the specified flag', () => {
         const flagKey = 'test-flag';
-        ld.initialize(clientSideID);
+        ld.initialize(clientSideID, mockContext);
 
         const flagStore = ld.watch(flagKey);
 
@@ -126,7 +127,7 @@ describe('launchDarkly', () => {
       it('should update the flag store when the flag value changes', () => {
         const booleanFlagKey = 'test-flag';
         const stringFlagKey = 'another-test-flag';
-        ld.initialize(clientSideID);
+        ld.initialize(clientSideID, mockContext);
         const flagStore = ld.watch(booleanFlagKey);
         const flagStore2 = ld.watch(stringFlagKey);
 
@@ -153,7 +154,7 @@ describe('launchDarkly', () => {
 
       it('should return undefined if the flag is not found', () => {
         const flagKey = 'non-existent-flag';
-        ld.initialize(clientSideID);
+        ld.initialize(clientSideID, mockContext);
 
         const flagStore = ld.watch(flagKey);
 

packages/sdk/svelte/package.json

@@ -44,7 +44,6 @@
   },
   "peerDependencies": {
     "@launchdarkly/js-client-sdk": "workspace:^",
-    "@launchdarkly/node-server-sdk": "^9.4.6",
     "svelte": "^4.0.0"
   },
   "dependencies": {
@@ -56,12 +55,12 @@
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.1",
     "@testing-library/svelte": "^5.2.0",
     "@types/jest": "^29.5.11",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
-    "@vitest/ui": "^1.6.0",
+    "@vitest/ui": "^2.1.8",
     "eslint": "^8.45.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.1.0",
@@ -76,13 +75,13 @@
     "prettier-plugin-svelte": "^3.1.2",
     "publint": "^0.1.9",
     "rimraf": "^5.0.5",
-    "svelte": "^4.2.7",
+    "svelte": "^5.4.0",
     "svelte-check": "^3.6.0",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.2",
     "typedoc": "0.25.0",
     "typescript": "5.1.6",
-    "vite": "^5.2.6",
-    "vitest": "^2.1.4"
+    "vite": "^6.0.2",
+    "vitest": "^2.1.8"
   }
 }

packages/sdk/svelte/src/lib/client/SvelteLDClient.ts

@@ -1,21 +1,21 @@
 import { derived, get, type Readable, readonly, writable, type Writable } from 'svelte/store';
 
+import type { LDFlagSet } from '@launchdarkly/js-client-sdk';
 import {
   initialize,
   type LDClient,
   type LDContext,
-  type LDFlagSet,
-} from '@launchdarkly/js-client-sdk';
+  type LDFlagValue,
+} from '@launchdarkly/js-client-sdk/compat';
+
+export type { LDContext };
 
 /** Client ID for LaunchDarkly */
 export type LDClientID = string;
 
 /** Flags for LaunchDarkly */
 export type LDFlags = LDFlagSet;
 
-/** Value of LaunchDarkly flags */
-export type LDFlagsValue = LDFlagSet[string];
-
 /**
  * Checks if the LaunchDarkly client is initialized.
  * @param {LDClient | undefined} client - The LaunchDarkly client.
@@ -70,21 +70,21 @@ function createLD() {
   /**
    * Initializes the LaunchDarkly client.
    * @param {LDClientID} clientId - The client ID.
-   * @returns {Writable<boolean>} An object with the initialization status store.
+   * @param {LDContext} context - The user context.
+   * @returns {Object} An object with the initialization status store.
    */
-
-  function LDInitialize(clientId: LDClientID) {
-    coreLdClient = initialize(clientId);
+  function LDInitialize(clientId: LDClientID, context: LDContext) {
+    coreLdClient = initialize(clientId, context);
     coreLdClient!.on('ready', () => {
       loading.set(false);
       const rawFlags = coreLdClient!.allFlags();
-      const allFlags = toFlagsProxy(coreLdClient, rawFlags);
+      const allFlags = toFlagsProxy(coreLdClient!, rawFlags);
       flagsWritable.set(allFlags);
     });
 
     coreLdClient!.on('change', () => {
       const rawFlags = coreLdClient!.allFlags();
-      const allFlags = toFlagsProxy(coreLdClient, rawFlags);
+      const allFlags = toFlagsProxy(coreLdClient!, rawFlags);
       flagsWritable.set(allFlags);
     });
 
@@ -108,8 +108,8 @@ function createLD() {
    * @param {string} flagKey - The key of the flag to watch.
    * @returns {Readable<LDFlagsValue>} A readable store of the flag value.
    */
-  const watch = (flagKey: string): Readable<LDFlagsValue> =>
-    derived<Writable<LDFlags>, LDFlagsValue>(flagsWritable, ($flags) => $flags[flagKey]);
+  const watch = (flagKey: string): Readable<LDFlagValue> =>
+    derived<Writable<LDFlags>, LDFlagValue>(flagsWritable, ($flags) => $flags[flagKey]);
 
   /**
    * Checks if a flag is on.