Skip to content

Commit 7e8f370

Browse files
joker23joker23
committed
chore(deps): update LaunchDarkly SDK to @launchdarkly/js-client-sdk@0.11.0
- Replaced instances of 'launchdarkly-js-client-sdk' with '@launchdarkly/js-client-sdk' across various files. - Updated package.json files in demo and toolbar to include the new SDK version. - Adjusted imports in several components to align with the new SDK structure. - Ensured compatibility with existing code by handling type mismatches where necessary.
1 parent 3059ffb commit 7e8f370

22 files changed

Lines changed: 98 additions & 76 deletions

‎packages/demo/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"preview": "vite preview"
1515
},
1616
"dependencies": {
17+
"@launchdarkly/js-client-sdk": "^0.11.0",
1718
"@launchdarkly/toolbar": "workspace:*",
1819
"launchdarkly-js-client-sdk": "^3.9.0",
1920
"launchdarkly-react-client-sdk": "^3.9.0",
@@ -23,7 +24,6 @@
2324
"react-router-dom": "^7.10.1"
2425
},
2526
"devDependencies": {
26-
"js-yaml": "^4.1.1",
2727
"@eslint/js": "^9.39.1",
2828
"@types/react": "^19.2.7",
2929
"@types/react-dom": "^19.2.3",
@@ -33,6 +33,7 @@
3333
"eslint-plugin-react-hooks": "^7.0.1",
3434
"eslint-plugin-react-refresh": "^0.4.24",
3535
"globals": "^16.5.0",
36+
"js-yaml": "^4.1.1",
3637
"typescript": "~5.9.3",
3738
"typescript-eslint": "^8.49.0",
3839
"vite": "^7.3.0"

‎packages/demo/src/hooks/useLaunchDarklyProvider.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useState, useEffect, useRef } from 'react';
2-
import { asyncWithLDProvider, type LDPlugin } from 'launchdarkly-react-client-sdk';
2+
import { asyncWithLDProvider} from 'launchdarkly-react-client-sdk';
3+
import type { LDPlugin } from '@launchdarkly/js-client-sdk';
34
import { DEMO_CONFIG, demoLog } from '../config/demo';
45
import { startMockWorker, stopMockWorker } from '../mocks';
56

@@ -37,12 +38,16 @@ export function useLaunchDarklyProvider(props: UseLaunchDarklyProviderProps): Us
3738
}
3839

3940
// Initialize LaunchDarkly provider
41+
// launchdarkly-react-client-sdk@3.9.0 still uses old types from launchdarkly-js-sdk-common,
42+
// but our plugins implement the new @launchdarkly/js-client-sdk types
4043
const Provider = await asyncWithLDProvider({
4144
clientSideID,
4245
options: {
4346
baseUrl,
4447
streamUrl,
4548
eventsUrl,
49+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
50+
// @ts-ignore - Type mismatch: launchdarkly-react-client-sdk@3.9.0 uses old types from launchdarkly-js-sdk-common
4651
plugins,
4752
},
4853
});

‎packages/toolbar/README.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ Works with any JavaScript framework (Vue, Angular, Svelte, vanilla JS, etc.). Ad
101101
In your corresponding code, wherever you instantiate your LaunchDarkly JS client, be sure to pass in the following plugins:
102102

103103
```typescript
104-
import * as LDClient from 'launchdarkly-js-client-sdk';
104+
import * as LDClient from '@launchdarkly/js-client-sdk';
105105
import { FlagOverridePlugin, EventInterceptionPlugin } from '@launchdarkly/toolbar';
106106

107107
const flagOverridePlugin = new FlagOverridePlugin();
@@ -112,14 +112,16 @@ const context: LDClient.LDContext = {
112112
key: 'context-key-123abc',
113113
};
114114

115-
const client = LDClient.initialize('client-side-id-123abc', context, {
115+
const client = LDClient.createClient('client-side-id-123abc', context, {
116116
plugins: [
117117
// any other plugins you might want
118118
flagOverridePlugin,
119119
eventInterceptionPlugin,
120120
],
121121
});
122122

123+
client.start();
124+
123125
try {
124126
await client.waitForInitialization(5);
125127
// initialization succeeded, flag values are now available

‎packages/toolbar/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@
110110
"@codemirror/view": "^6.38.8",
111111
"@launchdarkly/observability": "^0.4.9",
112112
"@launchdarkly/session-replay": "^0.4.9",
113+
"@launchdarkly/js-client-sdk": "^0.11.0",
113114
"@launchpad-ui/components": "^0.17.7",
114115
"@launchpad-ui/tokens": "^0.15.1",
115116
"@lezer/highlight": "^1.2.3",
@@ -139,7 +140,6 @@
139140
"@vitest/coverage-v8": "4.0.15",
140141
"css-loader": "^7.1.2",
141142
"jsdom": "^27.3.0",
142-
"launchdarkly-js-client-sdk": "^3.9.0",
143143
"motion": "^12.23.26",
144144
"oxlint": "^1.32.0",
145145
"react": "^19.2.3",
@@ -151,7 +151,7 @@
151151
"vitest": "^4.0.15"
152152
},
153153
"peerDependencies": {
154-
"launchdarkly-js-client-sdk": ">=3.9.0 <4.0.0",
154+
"@launchdarkly/js-client-sdk": "^0.11.0",
155155
"react": "^18.0.0 || ^19.0.0",
156156
"react-dom": "^18.0.0 || ^19.0.0"
157157
},

‎packages/toolbar/rslib.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export default defineConfig({
5858
react: 'react',
5959
'react-dom': 'react-dom',
6060
'react/jsx-runtime': 'react/jsx-runtime',
61-
'launchdarkly-js-client-sdk': 'launchdarkly-js-client-sdk',
61+
'@launchdarkly/js-client-sdk': '@launchdarkly/js-client-sdk',
6262
},
6363
},
6464
plugins: [pluginReact()],

‎packages/toolbar/src/core/tests/InternalClientProvider.test.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { expect, test, describe, vi, beforeEach, afterEach } from 'vitest';
33

44
// Create mocks in hoisted scope
55
const mockLDClient = {
6+
start: vi.fn(),
67
waitForInitialization: vi.fn(),
78
variation: vi.fn(),
89
identify: vi.fn(),
@@ -12,9 +13,9 @@ const mockLDClient = {
1213
track: vi.fn(),
1314
};
1415

15-
vi.mock('launchdarkly-js-client-sdk', () => {
16+
vi.mock('@launchdarkly/js-client-sdk', () => {
1617
return {
17-
initialize: vi.fn(),
18+
createClient: vi.fn(),
1819
};
1920
});
2021

@@ -65,18 +66,19 @@ vi.mock('@launchdarkly/session-replay', () => {
6566
};
6667
});
6768

69+
import React from 'react';
6870
import {
6971
InternalClientProvider,
7072
useInternalClient,
7173
useInternalClientInstance,
7274
} from '../ui/Toolbar/context/telemetry/InternalClientProvider';
7375
import { setToolbarFlagClient } from '../../flags/createToolbarFlagFunction';
7476
import * as toolbarFlagClient from '../../flags/createToolbarFlagFunction';
75-
import { initialize } from 'launchdarkly-js-client-sdk';
77+
import { createClient } from '@launchdarkly/js-client-sdk';
7678
import { LDObserve } from '@launchdarkly/observability';
7779
import { LDRecord } from '@launchdarkly/session-replay';
7880

79-
const mockInitialize = vi.mocked(initialize);
81+
const mockCreateClient = vi.mocked(createClient);
8082
const mockLDObserveMethods = vi.mocked(LDObserve);
8183
const mockLDRecordMethods = vi.mocked(LDRecord);
8284

@@ -108,6 +110,7 @@ describe('InternalClientProvider', () => {
108110
beforeEach(() => {
109111
vi.clearAllMocks();
110112

113+
mockLDClient.start.mockResolvedValue(undefined);
111114
mockLDClient.waitForInitialization.mockResolvedValue(undefined);
112115
mockLDClient.identify.mockResolvedValue(undefined);
113116
// Return false for session replay flag by default to prevent it from starting
@@ -117,7 +120,7 @@ describe('InternalClientProvider', () => {
117120
mockLDClient.off.mockImplementation(() => {});
118121
mockLDClient.track.mockImplementation(() => {});
119122

120-
mockInitialize.mockReturnValue(mockLDClient);
123+
mockCreateClient.mockReturnValue(mockLDClient as any);
121124

122125
mockLDObserveMethods.start.mockClear();
123126
mockLDObserveMethods.stop.mockClear();
@@ -173,7 +176,7 @@ describe('InternalClientProvider', () => {
173176
);
174177

175178
await waitFor(() => {
176-
expect(mockInitialize).toHaveBeenCalledWith(
179+
expect(mockCreateClient).toHaveBeenCalledWith(
177180
'test-client-id-123',
178181
{
179182
kind: 'user',
@@ -201,7 +204,7 @@ describe('InternalClientProvider', () => {
201204
);
202205

203206
await waitFor(() => {
204-
expect(mockInitialize).toHaveBeenCalledWith(
207+
expect(mockCreateClient).toHaveBeenCalledWith(
205208
'test-client-id-123',
206209
customContext,
207210
expect.objectContaining({
@@ -261,15 +264,15 @@ describe('InternalClientProvider', () => {
261264
);
262265

263266
await waitFor(() => {
264-
expect(mockInitialize).toHaveBeenCalledWith(
267+
expect(mockCreateClient).toHaveBeenCalledWith(
265268
'test-client-id-123',
266269
expect.objectContaining({
267270
kind: 'user',
268271
key: 'toolbar-anonymous',
269272
anonymous: true,
270273
}),
271274
expect.objectContaining({
272-
baseUrl: 'https://app.ld.catamorphic.com',
275+
baseUri: 'https://app.ld.catamorphic.com',
273276
plugins: expect.any(Array),
274277
}),
275278
);
@@ -284,7 +287,7 @@ describe('InternalClientProvider', () => {
284287
);
285288

286289
await waitFor(() => {
287-
expect(mockInitialize).toHaveBeenCalledWith(
290+
expect(mockCreateClient).toHaveBeenCalledWith(
288291
'test-client-id-123',
289292
expect.any(Object),
290293
expect.objectContaining({

‎packages/toolbar/src/core/ui/Toolbar/components/new/Contexts/AddContextForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState, useCallback, useMemo } from 'react';
22
import { motion, AnimatePresence } from 'motion/react';
3-
import type { LDContext } from 'launchdarkly-js-client-sdk';
3+
import type { LDContext } from '@launchdarkly/js-client-sdk';
44
import { useContextsContext } from '../../../context/api/ContextsProvider';
55
import { CancelIcon } from '../../icons';
66
import { EASING } from '../../../constants';

‎packages/toolbar/src/core/ui/Toolbar/components/new/Contexts/ContextItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
22
import { motion, AnimatePresence } from 'motion/react';
3-
import type { LDContext } from 'launchdarkly-js-client-sdk';
3+
import type { LDContext } from '@launchdarkly/js-client-sdk';
44
import * as styles from './ContextItem.module.css';
55
import { CopyableText } from '../../CopyableText';
66
import { EditIcon, DeleteIcon, CheckIcon, CancelIcon } from '../../icons';

‎packages/toolbar/src/core/ui/Toolbar/context/FlagSdkOverrideProvider.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,16 +107,22 @@ export function FlagSdkOverrideProvider({ children, flagOverridePlugin }: FlagSd
107107
setIsLoading(false);
108108

109109
// Subscribe to changes with incremental updates
110-
const handleChange = (changes: Record<string, { current: any }>) => {
110+
// NOTE: we are overloading this function so that it can handle both the old and new browser SDKs
111+
const handleChange = (changes: Record<string, { current: any }>, keys: string[]) => {
111112
setFlags((prevFlags) => {
112113
const updatedRawFlags = ldClient.allFlags();
113114
const newFlags = buildFlags(updatedRawFlags, apiFlags);
114115

116+
let changedKeys = keys;
117+
if (changedKeys === undefined) {
118+
changedKeys = Object.keys(changes);
119+
}
120+
115121
// Only update the flags that actually changed for better performance
116122
const updatedFlags = { ...prevFlags };
117123
let hasChanges = false;
118124

119-
Object.keys(changes).forEach((flagKey) => {
125+
changedKeys.forEach((flagKey) => {
120126
if (newFlags[flagKey]) {
121127
updatedFlags[flagKey] = newFlags[flagKey];
122128
hasChanges = true;

‎packages/toolbar/src/core/ui/Toolbar/context/api/ContextsProvider.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
2-
import type { LDContext } from 'launchdarkly-js-client-sdk';
2+
import type { LDContext } from '@launchdarkly/js-client-sdk';
33
import { loadContexts, saveContexts, loadActiveContext, saveActiveContext } from '../../utils/localStorage';
44
import { usePlugins } from '../state/PluginsProvider';
55
import {

0 commit comments

Comments
 (0)