refactor: adding new compat interfaces

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

Author: joker23

packages/demo/src/hooks/useLaunchDarklyProvider.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
 import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';
-import type { LDPlugin } from '@launchdarkly/js-client-sdk';
+import type { LDPlugin } from '@launchdarkly/toolbar';
 import { DEMO_CONFIG, demoLog } from '../config/demo';
 import { startMockWorker, stopMockWorker } from '../mocks';
 
@@ -38,16 +38,12 @@ export function useLaunchDarklyProvider(props: UseLaunchDarklyProviderProps): Us
         }
 
         // Initialize LaunchDarkly provider
-        // launchdarkly-react-client-sdk@3.9.0 still uses old types from launchdarkly-js-sdk-common,
-        // but our plugins implement the new @launchdarkly/js-client-sdk types
         const Provider = await asyncWithLDProvider({
           clientSideID,
           options: {
             baseUrl,
             streamUrl,
             eventsUrl,
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore - Type mismatch: launchdarkly-react-client-sdk@3.9.0 uses old types from launchdarkly-js-sdk-common
             plugins,
           },
         });

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

@@ -238,7 +238,7 @@ export const ContextsProvider = ({ children }: { children: React.ReactNode }) =>
         // and setContext would skip the identify call due to equality check
         isSettingContextRef.current = true;
         ldClient
-          .identify(savedActiveContext)
+          .identify(savedActiveContext)!
           .then(() => {
             // Ensure state is in sync (it should already be from useState initialization)
             setActiveContextId(savedStableId);

packages/toolbar/src/core/utils/urlOverrides.ts

@@ -5,7 +5,7 @@
  * The state includes: flag overrides, contexts, settings, starred flags, etc.
  */
 
-import { LDContext } from 'launchdarkly-js-client-sdk';
+import { LDContext } from '@launchdarkly/js-client-sdk';
 import { ToolbarSettings } from '../ui/Toolbar/utils/localStorage';
 
 /** Current version of the shared state format */

packages/toolbar/src/types/compat/Hook.ts

@@ -0,0 +1,50 @@
+import type {
+	EvaluationSeriesContext,
+	EvaluationSeriesData,
+	LDEvaluationReason,
+	LDFlagValue,
+	Hook as LDHook,
+} from '@launchdarkly/js-client-sdk'
+
+/**
+ * Interface for extending SDK functionality via hooks that is compatible with both javascript client versions (<=3.x and >=4.x).
+ */
+export type Hook = Omit<LDHook, 'afterEvaluation'> & {
+	/**
+	 * This method is called during the execution of the variation method
+	 * after the flag value has been determined. The method is executed synchronously.
+	 *
+	 * @param hookContext Contains read-only information about the evaluation
+	 * being performed.
+	 * @param data A record associated with each stage of hook invocations. Each
+	 *  stage is called with the data of the previous stage for a series.
+	 * @param detail The result of the evaluation. This value should not be
+	 * modified.
+	 * @returns Data to use when executing the next state of the hook in the evaluation series. It is
+	 * recommended to expand the previous input into the return. This helps ensure your stage remains
+	 * compatible moving forward as more stages are added.
+	 * ```js
+	 * return {...data, "my-new-field": /*my data/*}
+	 * ```
+	 */
+	afterEvaluation?(
+		hookContext: EvaluationSeriesContext,
+		data: EvaluationSeriesData,
+		detail: {
+			/**
+			 * The result of the flag evaluation. This will be either one of the flag's variations or
+			 * the default value that was passed to `LDClient.variationDetail`.
+			 */
+			value: LDFlagValue
+			/**
+			 * The index of the returned value within the flag's list of variations, e.g. 0 for the
+			 * first variation-- or `null` if the default value was returned.
+			 */
+			variationIndex?: number | null
+			/**
+			 * An object describing the main factor that influenced the flag evaluation value.
+			 */
+			reason?: LDEvaluationReason | null
+		},
+	): EvaluationSeriesData
+}

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

@@ -0,0 +1,15 @@
+import { LDFlagSet, LDIdentifyResult } from "@launchdarkly/js-client-sdk";
+import type { Hook } from "./Hook"
+
+/**
+ * Interface for the LaunchDarkly client that is compatible with both javascript client versions (<=3.x and >=4.x).
+ */
+export interface LDClient {
+	track(key: string, data?: any, metricValue?: number): void
+	identify(ctx: any): Promise<LDIdentifyResult> | Promise<LDFlagSet> | Promise<void>
+	addHook(hook: Hook): void
+  allFlags(): LDFlagSet;
+  getContext(): any;
+  on(key: string, callback: (...args: any[]) => void): void;
+  off(key: string, callback: (...args: any[]) => void): void;
+}

packages/toolbar/src/types/compat/LDPlugin.ts

@@ -0,0 +1,30 @@
+import { LDPluginEnvironmentMetadata, LDPluginMetadata } from "@launchdarkly/js-client-sdk"
+import { LDClient} from "./LDClient"
+import type { Hook } from "./Hook"
+
+/**
+ * Interface for LaunchDarkly plugins that are compatible with both javascript client versions (<=3.x and >=4.x).
+ */
+export interface LDPlugin {
+	/**
+	 * Returns the metadata for the plugin.
+	 */
+  getMetadata(): LDPluginMetadata
+
+	/**
+	 * Registers the plugin with the LaunchDarkly client.
+	 * @param client - The LaunchDarkly client.
+	 * @param environmentMetadata - The environment metadata.
+	 */
+	register(
+		client: LDClient,
+		environmentMetadata?: LDPluginEnvironmentMetadata,
+	): void
+
+	/**
+	 * Returns the hooks for the plugin.
+	 * @param metadata - The environment metadata.
+	 * @returns The hooks for the plugin.
+	 */
+	getHooks?(metadata: LDPluginEnvironmentMetadata): Hook[]
+}

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

@@ -1,5 +1,7 @@
-import type { Hook, LDClient, LDPluginEnvironmentMetadata, LDPluginMetadata } from '@launchdarkly/js-client-sdk';
+import type { LDPluginEnvironmentMetadata, LDPluginMetadata } from '@launchdarkly/js-client-sdk';
 import { AfterTrackHook, AfterIdentifyHook, AfterEvaluationHook, EventStore } from '../hooks';
+import type { LDClient } from '../compat/LDClient';
+import type { Hook } from '../compat/Hook';
 import type { EventFilter, ProcessedEvent } from '../events';
 import type { IEventInterceptionPlugin } from './plugins';
 import { ANALYTICS_EVENT_PREFIX } from '../analytics';

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

@@ -4,9 +4,9 @@ import type {
   LDFlagSet,
   Hook,
   LDPluginEnvironmentMetadata,
-  LDClient,
 } from '@launchdarkly/js-client-sdk';
 import type { IFlagOverridePlugin } from './plugins';
+import { LDClient } from '../compat/LDClient';
 
 /**
  * Configuration options for the FlagOverridePlugin

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

@@ -1,3 +1,5 @@
 export * from './eventInterceptionPlugin';
 export * from './flagOverridePlugin';
 export * from './plugins';
+export * from '../compat/LDPlugin';
+export * from '../compat/LDClient';

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

@@ -1,4 +1,6 @@
-import type { LDClient, LDFlagSet, LDFlagValue, LDPlugin, LDDebugOverride } from '@launchdarkly/js-client-sdk';
+import type { LDFlagSet, LDFlagValue, LDDebugOverride } from '@launchdarkly/js-client-sdk';
+import type { LDPlugin } from '../compat/LDPlugin';
+import type { LDClient } from '../compat/LDClient';
 import type { ProcessedEvent } from '../events';
 
 export interface IFlagOverridePlugin extends LDPlugin, LDDebugOverride {