feat: add initial SDK library boilerplate and basic svelte LD SDK

package.json

@@ -14,6 +14,7 @@
     "packages/sdk/react-universal",
     "packages/sdk/react-universal/example",
     "packages/sdk/vercel",
+    "packages/sdk/svelte",
     "packages/sdk/akamai-base",
     "packages/sdk/akamai-base/example",
     "packages/sdk/akamai-edgekv",

packages/sdk/svelte/.gitignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/dist
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+
+# Playwright
+/test-results

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

@@ -0,0 +1,244 @@
+import * as LDClient from 'launchdarkly-js-client-sdk';
+import { get } from 'svelte/store';
+import { afterAll, afterEach, beforeEach, describe, expect, it, type Mock, vi } from 'vitest';
+
+import { LD } from '../../../src/lib/client/SvelteLDClient';
+
+vi.mock('launchdarkly-js-client-sdk', async (importActual) => {
+  const actual = (await importActual()) as typeof LDClient;
+  return {
+    ...actual,
+    initialize: vi.fn(),
+  };
+});
+
+const clientSideID = 'test-client-side-id';
+const rawFlags = { 'test-flag': true, 'another-test-flag': true };
+const mockLDClient = {
+  on: vi.fn((e: string, cb: () => void) => {
+    cb();
+  }),
+  off: vi.fn(),
+  allFlags: vi.fn().mockReturnValue({}),
+  variation: vi.fn(),
+  waitForInitialization: vi.fn(),
+  waitUntilReady: vi.fn().mockResolvedValue(undefined),
+  identify: vi.fn(),
+};
+const mockInitialize = LDClient.initialize as Mock;
+const mockAllFlags = mockLDClient.allFlags as Mock;
+
+describe('launchDarkly', () => {
+  describe('createLD', () => {
+    it('should create a LaunchDarkly instance with correct properties', () => {
+      const ld = LD;
+      expect(typeof ld).toBe('object');
+      expect(ld).toHaveProperty('identify');
+      expect(ld).toHaveProperty('flags');
+      expect(ld).toHaveProperty('initialize');
+      expect(ld).toHaveProperty('initializing');
+      expect(ld).toHaveProperty('watch');
+      expect(ld).toHaveProperty('isOn');
+    });
+
+    describe('initialize', async () => {
+      let ld = LD;
+      beforeEach(() => {
+        mockInitialize.mockImplementation(() => mockLDClient);
+        mockAllFlags.mockImplementation(() => rawFlags);
+      });
+
+      afterEach(() => {
+        mockInitialize.mockClear();
+        mockAllFlags.mockClear();
+      });
+
+      afterAll(() => {
+        vi.clearAllMocks();
+      });
+
+      it('should throw an error if the client is not initialized', async () => {
+        ld = LD;
+        expect(() => ld.isOn('test-flag')).toThrow('LaunchDarkly client not initialized');
+        await expect(() => ld.identify({ key: 'user1' })).rejects.toThrow(
+          'LaunchDarkly client not initialized',
+        );
+      });
+
+      it('should set the loading status to false when the client is ready', async () => {
+        const { initializing } = ld;
+        ld.initialize('clientId', { key: 'user1' });
+
+        // wait for next tick
+        await new Promise((r) => {
+          setTimeout(r);
+        });
+
+        const initializingValue = get(initializing);
+        expect(initializingValue).toBe(false);
+      });
+      it('should initialize the LaunchDarkly SDK instance', () => {
+        const initializeSpy = vi.spyOn(LDClient, 'initialize');
+
+        ld.initialize('clientId', { key: 'user1' });
+        expect(initializeSpy).toHaveBeenCalledWith('clientId', { key: 'user1' });
+      });
+
+      it('should call waitUntilReady when initializing', () => {
+        const waitUntilReadySpy = vi.spyOn(mockLDClient, 'waitUntilReady');
+
+        ld.initialize('clientId', { key: 'user1' });
+
+        expect(waitUntilReadySpy).toHaveBeenCalled();
+      });
+
+      it('should register an event listener for the "change" event', () => {
+        const onSpy = vi.spyOn(mockLDClient, 'on');
+
+        ld.initialize('clientId ', { key: 'user1' });
+
+        expect(onSpy).toHaveBeenCalled();
+        expect(onSpy).toHaveBeenCalledWith('change', expect.any(Function));
+      });
+
+      it('should set flags when the client is ready', () => {
+        const flagSubscriber = vi.fn();
+        ld.initialize('clientId', { key: 'user1' });
+
+        const subscribeSpy = vi.spyOn(ld.flags, 'subscribe');
+        ld.flags.subscribe(flagSubscriber);
+
+        expect(subscribeSpy).toBeDefined();
+        expect(flagSubscriber).toHaveBeenCalledTimes(1);
+        expect(flagSubscriber).toHaveBeenCalledWith(rawFlags);
+      });
+    });
+    describe('watch function', () => {
+      const ld = LD;
+      beforeEach(() => {
+        mockInitialize.mockImplementation(() => mockLDClient);
+        mockAllFlags.mockImplementation(() => rawFlags);
+      });
+
+      it('should return a derived store that reflects the value of the specified flag', () => {
+        const flagKey = 'test-flag';
+        ld.initialize(clientSideID, { key: 'user1' });
+
+        const flagStore = ld.watch(flagKey);
+
+        expect(get(flagStore)).toBe(true);
+      });
+
+      it('should update the flag store when the flag value changes', () => {
+        const flagKey = 'test-flag';
+        ld.initialize(clientSideID, { key: 'user1' });
+
+        const flagStore = ld.watch(flagKey);
+
+        expect(get(flagStore)).toBe(true);
+
+        mockAllFlags.mockReturnValue({ ...rawFlags, 'test-flag': false });
+
+        // dispatch a change event on ldClient
+        const changeCallback = mockLDClient.on.mock.calls[0][1];
+        changeCallback();
+
+        expect(get(flagStore)).toBe(false);
+      });
+
+      it('should return undefined if the flag is not found', () => {
+        const flagKey = 'non-existent-flag';
+        ld.initialize(clientSideID, { key: 'user1' });
+
+        const flagStore = ld.watch(flagKey);
+
+        expect(get(flagStore)).toBeUndefined();
+      });
+    });
+
+    describe('isOn function', () => {
+      const ld = LD;
+      beforeEach(() => {
+        mockInitialize.mockImplementation(() => mockLDClient);
+        mockAllFlags.mockImplementation(() => rawFlags);
+      });
+
+      it('should return true if the flag is on', () => {
+        const flagKey = 'test-flag';
+        ld.initialize(clientSideID, { key: 'user1' });
+
+        expect(ld.isOn(flagKey)).toBe(true);
+      });
+
+      it('should return false if the flag is off', () => {
+        const flagKey = 'test-flag';
+        ld.initialize(clientSideID, { key: 'user1' });
+
+        mockAllFlags.mockReturnValue({ ...rawFlags, 'test-flag': false });
+
+        // dispatch a change event on ldClient
+        const changeCallback = mockLDClient.on.mock.calls[0][1];
+        changeCallback();
+
+        expect(ld.isOn(flagKey)).toBe(false);
+      });
+
+      it('should return false if the flag is not found', () => {
+        const flagKey = 'non-existent-flag';
+        ld.initialize(clientSideID, { key: 'user1' });
+
+        expect(ld.isOn(flagKey)).toBe(false);
+      });
+    });
+
+    describe('identify function', () => {
+      const ld = LD;
+      beforeEach(() => {
+        mockInitialize.mockImplementation(() => mockLDClient);
+        mockAllFlags.mockImplementation(() => rawFlags);
+      });
+
+      it('should call the identify method on the LaunchDarkly client', () => {
+        const user = { key: 'user1' };
+        ld.initialize(clientSideID, user);
+
+        ld.identify(user);
+
+        expect(mockLDClient.identify).toHaveBeenCalledWith(user);
+      });
+    });
+
+    describe('flags store', () => {
+      const ld = LD;
+      beforeEach(() => {
+        mockInitialize.mockImplementation(() => mockLDClient);
+        mockAllFlags.mockImplementation(() => rawFlags);
+      });
+
+      it('should return a readonly store of the flags', () => {
+        ld.initialize(clientSideID, { key: 'user1' });
+
+        const { flags } = ld;
+
+        expect(get(flags)).toEqual(rawFlags);
+      });
+
+      it('should update the flags store when the flags change', () => {
+        ld.initialize(clientSideID, { key: 'user1' });
+
+        const { flags } = ld;
+
+        expect(get(flags)).toEqual(rawFlags);
+
+        const newFlags = { 'test-flag': false, 'another-test-flag': true };
+        mockAllFlags.mockReturnValue(newFlags);
+
+        // dispatch a change event on ldClient
+        const changeCallback = mockLDClient.on.mock.calls[0][1];
+        changeCallback();
+
+        expect(get(flags)).toEqual(newFlags);
+      });
+    });
+  });
+});

packages/sdk/svelte/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@launchdarkly/svelte-client-sdk",
+  "version": "1.0.0",
+  "description": "Svelte LaunchDarkly SDK",
+  "homepage": "https://github.com/launchdarkly/js-core/tree/main/packages/sdk/svelte",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/launchdarkly/js-core.git"
+  },
+  "license": "Apache-2.0",
+  "packageManager": "[email protected]",
+  "keywords": [
+    "launchdarkly",
+    "svelte"
+  ],
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "npm run package",
+    "lint": "eslint . --ext .ts,.tsx",
+    "prettier": "prettier --write '**/*.@(js|ts|tsx|json|css)' --ignore-path ../../../.prettierignore",
+    "check": "yarn prettier && yarn lint && yarn build && yarn test",
+    "test": "playwright test",
+    "test:unit": "vitest",
+    "test:unit-ui": "vitest --ui"
+  },
+  "peerDependencies": {
+    "@launchdarkly/js-client-sdk-common": "^1.1.4",
+    "@launchdarkly/node-server-sdk": "^9.4.6",
+    "launchdarkly-js-client-sdk": "^3.4.0",
+    "svelte": "^4.0.0"
+  },
+  "dependencies": {
+    "@launchdarkly/js-client-sdk-common": "1.1.4",
+    "esm-env": "^1.0.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.28.1",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@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",
+    "eslint": "^8.45.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "^27.6.3",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-svelte": "^2.35.1",
+    "jsdom": "^24.0.0",
+    "launchdarkly-js-test-helpers": "^2.2.0",
+    "prettier": "^3.0.0",
+    "prettier-plugin-svelte": "^3.1.2",
+    "publint": "^0.1.9",
+    "rimraf": "^5.0.5",
+    "svelte": "^4.2.7",
+    "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": "^1.6.0"
+  }
+}

packages/sdk/svelte/playwright.config.ts

@@ -0,0 +1,12 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'tests',
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/
+};
+
+export default config;

packages/sdk/svelte/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {};

packages/sdk/svelte/src/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  %sveltekit.head%
+</head>
+<body data-sveltekit-preload-data="hover">
+<div>%sveltekit.body%</div>
+</body>
+</html>