feat: make toolbar compatible with js client sdk v4 #459

joker23 · 2025-12-19T00:37:20Z

Description

This PR will allow the toolbar to be compatible with the new LD js client sdk.

What does this PR do?

Adds '@launchdarkly/js-client-sdk' package so we can reference new/changed types.
Adds compat typing so the toolbar plugins do not depend on a specific version of js client sdk
Ensured compatibility with existing code by handling type mismatches where necessary.

Type of Change

🐛 Bug fix (non-breaking change that fixes an issue)
✨ New feature (non-breaking change that adds functionality)
💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
📚 Documentation (changes to documentation only)
🔧 Refactor (code change that neither fixes a bug nor adds a feature)
🎨 Style (formatting, missing semicolons, etc; no production code change)
⚡ Performance (code change that improves performance)
✅ Test (adding missing tests, refactoring tests; no production code change)
🔨 Chore (updating grunt tasks, build process, etc; no production code change)

Screenshots/Videos

packages/demo/src/hooks/useLaunchDarklyProvider.ts

joker23 · 2025-12-22T17:08:49Z

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


    // Subscribe to changes with incremental updates
-    const handleChange = (changes: Record<string, { current: any }>) => {
+    // NOTE: we are overloading this function so that it can handle both the old and new browser SDKs


REVIEWER: we'll need to make sure we make super clear what is going on here. Am open to suggestions on what is more standard practice to support different event payloads.

This really would work better with an interface like inspectors, but it isn't convenient with the plugins.

So thinking about this more... This is probably the only place that needs to change to make the toolbar compatible with js client sdk v4 (as well as making sure we have a compatible type def)... So there are 2 options that I am thinking:

Make the current implementation a bit better by doing some kind of type checking (ultimately we would know that it is a v4 change payload if the second param is a string[]

We can also maybe leverage the client metadata (https://launchdarkly.github.io/js-core/packages/sdk/browser/docs/interfaces/LDPluginApplicationMetadata.html), but I guess that depends on whether it is guaranteed to exist in all versions?

joker23 · 2026-01-14T15:09:44Z

putting this back into draft mode until we either stabilize the js client sdk OR have a pre-release stream to merge to.

joker23 · 2026-01-21T22:45:59Z

@launchdarkly/team-fm-next this PR is ready for review... the approach here is to ensure that the toolbar is compatible with both the new and old js client sdks

pranjal-jately-ld · 2026-01-23T22:36:56Z

packages/toolbar/src/types/plugins/LDClient.ts

+ */
+export interface LDClient {
+  track(key: string, data?: any, metricValue?: number): void;
+  identify(ctx: any): Promise<LDIdentifyResult> | Promise<LDFlagSet> | Promise<void>;


We can use the LDContext type here.

Suggested change

identify(ctx: any): Promise<LDIdentifyResult> | Promise<LDFlagSet> | Promise<void>;

identify(ctx: LDContext): Promise<LDIdentifyResult> | Promise<LDFlagSet> | Promise<void>;

The problem with using LDContext directly here is that it conflicts with the type definition in launchdarkly-react-client-sdk which is very old at this point... structurally, it is hard to compat launchdarkly-react-client-sdk, launchdarkly-js-client-sdk and @launchdarkly/react-client-sdk which is why I put the compat client to accept any... we can probably still maintain type safety if we narrow the context when it is being used?

We are looking at updating the React SDK soon so it should be more compatible in the future.

I don't think this suggestion will build.

packages/toolbar/src/types/plugins/LDClient.ts

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

pranjal-jately-ld · 2026-01-23T22:46:56Z

Thanks for doing this @joker23 🙏 It's looking good and I've left a couple of minor suggestions. I do have a couple of questions:

Is launchdarkly-js-client-sdk (v3) still needed? Imports come from both packages - is this for users who haven't migrated, or transitional?
Version detection follow-up: A comment above mentions using LDPluginEnvironmentMetadata for cleaner version detection. The question is whether there's a ticket to implement that cleaner approach, or if the current runtime detection is the intended solution for the time being?

joker23 · 2026-01-24T00:26:00Z

Thanks @pranjal-jately-ld for the review! To answer the questions:

Is launchdarkly-js-client-sdk (v3) still needed? Imports come from both packages - is this for users who haven't migrated, or transitional?

I think so - I did not update the internal SDK usage as js-client-sdk v4 (at the moment) is still in prerelease. We only import type definitions from @launchdarkly/js-client-sdk here and ensure that when it does release that the toolbar will be compatible

Version detection follow-up: A comment above mentions using LDPluginEnvironmentMetadata for cleaner version detection. The question is whether there's a ticket to implement that cleaner approach, or if the current runtime detection is the intended solution for the time being?

I think the current runtime detection is fine for now as the flag change event payload is an official change between the major versions (it is effectively a slimmed down implementation of type overloading). The version check requires a few changes to the toolbar implementation as the LDPluginEnvironmentMetadata is only exposed to the toolbar on register and there is no mechanism at the moment that references that implementation.

….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.

- Changed import paths in test files to reflect the new SDK structure. - Updated mock implementations to align with the new SDK methods. - Ensured compatibility with existing tests by adjusting mock behavior.

- Added new compat interfaces so that toolbar could recognize browser v3 and v4 clients. - Changed import paths to use '@launchdarkly/toolbar' and updated related types. > Eventually we should probably provide this compat layer in the browser SDK code itself.

…ovider.tsx Co-authored-by: pranjal-jately-ld <pjately@launchdarkly.com>

joker23 force-pushed the skz/sdk-1565/update-browser-sdk branch from 433d561 to 5d0f08d Compare December 19, 2025 00:40

joker23 commented Dec 22, 2025

View reviewed changes

packages/demo/src/hooks/useLaunchDarklyProvider.ts Outdated Show resolved Hide resolved

joker23 force-pushed the skz/sdk-1565/update-browser-sdk branch from 5d0f08d to 8402b84 Compare December 22, 2025 16:51

joker23 commented Dec 22, 2025

View reviewed changes

joker23 force-pushed the skz/sdk-1565/update-browser-sdk branch 3 times, most recently from c9348ce to e6738af Compare December 24, 2025 15:49

joker23 force-pushed the skz/sdk-1565/update-browser-sdk branch 3 times, most recently from df4936a to 3d36bb0 Compare January 13, 2026 01:28

joker23 requested a review from cspath1 January 13, 2026 01:31

joker23 marked this pull request as ready for review January 13, 2026 01:38

joker23 requested review from a team and pranjal-jately-ld as code owners January 13, 2026 01:38

joker23 marked this pull request as draft January 14, 2026 15:08

joker23 mentioned this pull request Jan 14, 2026

fix: evaluation detail type should be optional launchdarkly/js-core#1061

Closed

joker23 force-pushed the skz/sdk-1565/update-browser-sdk branch 5 times, most recently from 9eef50a to 973abb4 Compare January 21, 2026 21:53

joker23 marked this pull request as ready for review January 21, 2026 22:41

joker23 changed the title ~~refactor!: updating browser sdk to 4.x~~ feat: make toolbar compatible with js client sdk v4 Jan 21, 2026

pranjal-jately-ld reviewed Jan 23, 2026

View reviewed changes

packages/toolbar/src/types/plugins/LDClient.ts Show resolved Hide resolved

pranjal-jately-ld reviewed Jan 23, 2026

View reviewed changes

packages/toolbar/src/core/ui/Toolbar/context/FlagSdkOverrideProvider.tsx Outdated Show resolved Hide resolved

joker23 requested a review from pranjal-jately-ld January 27, 2026 15:32

joker23 and others added 10 commits January 28, 2026 14:26

refactor(tests): update imports to use @launchdarkly/js-client-sdk

0d0a30d

- Changed import paths in test files to reflect the new SDK structure. - Updated mock implementations to align with the new SDK methods. - Ensured compatibility with existing tests by adjusting mock behavior.

chore: update test and script references

d0f5c72

styles: fix lint issues

b618443

fix: intellisense for plugin compat

24ff39d

test: adding tests for handling v4 change payload

0fe1656

chore: update browser sdk again

194dbeb

docs: adding comments on how the change handler is adapting the payload

d770c5b

Update packages/toolbar/src/core/ui/Toolbar/context/FlagSdkOverridePr…

001edbb

…ovider.tsx Co-authored-by: pranjal-jately-ld <pjately@launchdarkly.com>

joker23 force-pushed the skz/sdk-1565/update-browser-sdk branch from a083eb3 to 001edbb Compare January 28, 2026 20:35

fix: typing to align with browser sdk v4

e5c5389

joker23 force-pushed the skz/sdk-1565/update-browser-sdk branch from d387384 to e5c5389 Compare January 28, 2026 20:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: make toolbar compatible with js client sdk v4 #459

feat: make toolbar compatible with js client sdk v4 #459

Uh oh!

joker23 commented Dec 19, 2025 •

edited

Loading

Uh oh!

Uh oh!

joker23 Dec 22, 2025

Uh oh!

kinyoklion Jan 12, 2026

Uh oh!

joker23 Jan 16, 2026

Uh oh!

joker23 commented Jan 14, 2026

Uh oh!

joker23 commented Jan 21, 2026

Uh oh!

pranjal-jately-ld Jan 23, 2026

Uh oh!

joker23 Jan 24, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

pranjal-jately-ld commented Jan 23, 2026

Uh oh!

joker23 commented Jan 24, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	identify(ctx: any): Promise<LDIdentifyResult> \| Promise<LDFlagSet> \| Promise<void>;
	identify(ctx: LDContext): Promise<LDIdentifyResult> \| Promise<LDFlagSet> \| Promise<void>;

feat: make toolbar compatible with js client sdk v4 #459

Are you sure you want to change the base?

feat: make toolbar compatible with js client sdk v4 #459

Uh oh!

Conversation

joker23 commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Screenshots/Videos

Uh oh!

Uh oh!

joker23 Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

kinyoklion Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

joker23 Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

joker23 commented Jan 14, 2026

Uh oh!

joker23 commented Jan 21, 2026

Uh oh!

pranjal-jately-ld Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

joker23 Jan 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

pranjal-jately-ld commented Jan 23, 2026

Uh oh!

joker23 commented Jan 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

joker23 commented Dec 19, 2025 •

edited

Loading

joker23 Jan 24, 2026 •

edited

Loading

joker23 commented Jan 24, 2026 •

edited

Loading