Store associated SDK in client metadata for use in React hooks

Signed-off-by: MattIPv4 <me@mattcowley.co.uk>

Author: MattIPv4

packages/react/src/context/use-context-mutator.ts

@@ -35,6 +35,7 @@ export type ContextMutation = {
 export function useContextMutator(options: ContextMutationOptions = { defaultContext: false }): ContextMutation {
   const { client } = useContext(Context) || {};
   const domain = client?.metadata.domain;
+  const sdk = client?.metadata.sdk || OpenFeature;
 
   // TODO: Replace this warning with a thrown error in a future major release,
   //       to match the behavior of `useOpenFeatureProvider` + `useOpenFeatureClient`,
@@ -60,15 +61,14 @@ export function useContextMutator(options: ContextMutationOptions = { defaultCon
     async (
       updatedContext: EvaluationContext | ((currentContext: EvaluationContext) => EvaluationContext),
     ): Promise<void> => {
-      // TODO: Needs to handle `openfeature` option like OpenFeatureProvider
-      const previousContext = OpenFeature.getContext(options?.defaultContext ? undefined : domain);
+      const previousContext = sdk.getContext(options?.defaultContext ? undefined : domain);
       const resolvedContext = typeof updatedContext === 'function' ? updatedContext(previousContext) : updatedContext;
 
       if (previousContext !== resolvedContext) {
         if (!domain || options?.defaultContext) {
-          await OpenFeature.setContext(resolvedContext);
+          await sdk.setContext(resolvedContext);
         } else {
-          await OpenFeature.setContext(domain, resolvedContext);
+          await sdk.setContext(domain, resolvedContext);
         }
       }
     },

packages/react/src/provider/provider.tsx

@@ -15,7 +15,7 @@ type ClientOrDomain =
        * An instance of the OpenFeature API to use.
        * @see OpenFeature.getIsolated for more details.
        */
-      openfeature?: OpenFeatureAPI;
+      sdk?: OpenFeatureAPI;
       client?: never;
     }
   | {
@@ -24,7 +24,7 @@ type ClientOrDomain =
        */
       client?: Client;
       domain?: never;
-      openfeature?: never;
+      sdk?: never;
     };
 
 type ProviderProps = {
@@ -37,8 +37,8 @@ type ProviderProps = {
  * @param {ProviderProps} properties props for the context provider
  * @returns {OpenFeatureProvider} context provider
  */
-export function OpenFeatureProvider({ client, domain, openfeature, children, ...options }: ProviderProps) {
-  const stableClient = React.useMemo(() => client || (openfeature ?? OpenFeature).getClient(domain), [client, domain]);
+export function OpenFeatureProvider({ client, domain, sdk, children, ...options }: ProviderProps) {
+  const stableClient = React.useMemo(() => client || (sdk ?? OpenFeature).getClient(domain), [client, domain]);
 
   return <Context.Provider value={{ client: stableClient, options }}>{children}</Context.Provider>;
 }

packages/react/src/provider/test-provider.tsx

@@ -87,7 +87,7 @@ export function OpenFeatureTestProvider(testProviderOptions: TestProviderProps)
   const effectiveProvider = (
     flagValueMap ? new TestProvider(flagValueMap, testProviderOptions.delayMs) : mixInNoop(provider) || NOOP_PROVIDER
   ) as Provider;
-  // TODO: Needs to handle `openfeature` option like OpenFeatureProvider
+  // TODO: Should this handle the `sdk` option like OpenFeatureProvider
   testProviderOptions.domain
     ? OpenFeature.setProvider(testProviderOptions.domain, effectiveProvider)
     : OpenFeature.setProvider(effectiveProvider);

packages/react/src/provider/use-open-feature-provider.ts

@@ -17,6 +17,5 @@ export function useOpenFeatureProvider(): Provider {
     throw new MissingContextError('No OpenFeature context available');
   }
 
-  // TODO: Needs to handle `openfeature` option like OpenFeatureProvider
-  return OpenFeature.getProvider(openFeatureContext.client.metadata.domain);
+  return (openFeatureContext.client.metadata.sdk ?? OpenFeature).getProvider(openFeatureContext.client.metadata.domain);
 }

packages/react/test/provider.spec.tsx

@@ -11,6 +11,7 @@ import {
   useStringFlagValue,
 } from '../src';
 import { TestingProvider } from './test.utils';
+import { useOpenFeatureProvider } from '../src/provider/use-open-feature-provider';
 
 describe('OpenFeatureProvider', () => {
   /**
@@ -99,6 +100,43 @@ describe('OpenFeatureProvider', () => {
     });
   });
 
+  describe('useOpenFeatureProvider', () => {
+    const DOMAIN = 'useOpenFeatureProvider';
+
+    it('should return provider from the global singleton when no SDK is specified', () => {
+      const provider = new InMemoryProvider();
+      OpenFeature.setProvider(DOMAIN, provider);
+
+      const wrapper = ({ children }: Parameters<typeof OpenFeatureProvider>[0]) => (
+        <OpenFeatureProvider domain={DOMAIN}>{children}</OpenFeatureProvider>
+      );
+
+      const { result } = renderHook(() => useOpenFeatureProvider(), { wrapper });
+
+      expect(result.current).toEqual(provider);
+    });
+
+    it('should return provider from the specified SDK when one is provided', () => {
+      const provider = new InMemoryProvider();
+      OpenFeature.setProvider(DOMAIN, provider);
+
+      const isolatedInstance = OpenFeature.getIsolated();
+      const isolatedProvider = new InMemoryProvider();
+      isolatedInstance.setProvider(DOMAIN, isolatedProvider);
+
+      const wrapper = ({ children }: Parameters<typeof OpenFeatureProvider>[0]) => (
+        <OpenFeatureProvider sdk={isolatedInstance} domain={DOMAIN}>
+          {children}
+        </OpenFeatureProvider>
+      );
+
+      const { result } = renderHook(() => useOpenFeatureProvider(), { wrapper });
+
+      expect(result.current).toEqual(isolatedProvider);
+      expect(result.current).not.toEqual(provider);
+    });
+  });
+
   describe('useWhenProviderReady', () => {
     describe('suspendUntilReady=true (default)', () => {
       it('should suspend until ready and then return provider status', async () => {
@@ -165,6 +203,7 @@ describe('OpenFeatureProvider', () => {
       });
     });
   });
+
   describe('useMutateContext', () => {
     const MutateButton = ({ setter }: { setter?: (prevContext: EvaluationContext) => EvaluationContext }) => {
       const { setContext } = useContextMutator();

packages/web/src/client/client.ts

@@ -3,10 +3,15 @@ import type { Features } from '../evaluation';
 import type { ProviderStatus } from '../provider';
 import type { ProviderEvents } from '../events';
 import type { Tracking } from '../tracking';
+import type { OpenFeatureAPI } from '../open-feature';
+
+export interface ClientMetadataWithSDK extends ClientMetadata {
+  readonly sdk?: OpenFeatureAPI;
+}
 
 export interface Client
   extends EvaluationLifeCycle<Client>, Features, ManageLogger<Client>, Eventing<ProviderEvents>, Tracking {
-  readonly metadata: ClientMetadata;
+  readonly metadata: ClientMetadataWithSDK;
   /**
    * Returns the status of the associated provider.
    */

packages/web/src/client/internal/open-feature-client.ts

@@ -1,5 +1,4 @@
 import type {
-  ClientMetadata,
   EvaluationContext,
   EvaluationDetails,
   EventHandler,
@@ -30,7 +29,8 @@ import type { InternalEventEmitter } from '../../events/internal/internal-event-
 import type { Hook } from '../../hooks';
 import type { Provider } from '../../provider';
 import { ProviderStatus } from '../../provider';
-import type { Client } from './../client';
+import type { Client, ClientMetadataWithSDK } from './../client';
+import type { OpenFeatureAPI } from '../../open-feature';
 
 type OpenFeatureClientOptions = {
   /**
@@ -39,6 +39,7 @@ type OpenFeatureClientOptions = {
   name?: string;
   domain?: string;
   version?: string;
+  sdk?: OpenFeatureAPI;
 };
 
 /**
@@ -62,12 +63,13 @@ export class OpenFeatureClient implements Client {
     private readonly options: OpenFeatureClientOptions,
   ) {}
 
-  get metadata(): ClientMetadata {
+  get metadata(): ClientMetadataWithSDK {
     return {
       // Use domain if name is not provided
       name: this.options.domain ?? this.options.name,
       domain: this.options.domain ?? this.options.name,
       version: this.options.version,
+      sdk: this.options.sdk,
       providerMetadata: this.providerAccessor().metadata,
     };
   }

packages/web/src/open-feature.ts

@@ -362,7 +362,7 @@ export class OpenFeatureAPI
       (domain?: string) => this.getContext(domain),
       () => this.getHooks(),
       () => this._logger,
-      { domain, version },
+      { domain, version, sdk: this },
     );
   }