diff --git a/sandbox/src/stories/Hoc.tsx b/sandbox/src/stories/Hoc.tsx index b466f73..0ae2f2f 100644 --- a/sandbox/src/stories/Hoc.tsx +++ b/sandbox/src/stories/Hoc.tsx @@ -4,7 +4,7 @@ import { User } from 'configcat-common'; export class HocComponent extends React.Component< - { featureFlagKey: string } & WithConfigCatClientProps, + { featureFlagKey: string, user?: User } & WithConfigCatClientProps, { isEnabled: boolean, loading: boolean } > { constructor(props: { featureFlagKey: string, user?: User } & WithConfigCatClientProps) { diff --git a/sandbox/src/stories/MultipleConfigCatConfigs.tsx b/sandbox/src/stories/MultipleConfigCatConfigs.tsx index 269c409..3ed4e09 100644 --- a/sandbox/src/stories/MultipleConfigCatConfigs.tsx +++ b/sandbox/src/stories/MultipleConfigCatConfigs.tsx @@ -1,19 +1,19 @@ import React from 'react'; -import { ConfigCatProvider, User, useFeatureFlagByConfigId, withConfigCatClient } from 'configcat-react'; +import { ConfigCatProvider, useFeatureFlag, User, withConfigCatClient } from 'configcat-react-local'; import { HocComponent} from './Hoc'; const CC_CONFIGID = { BACKEND: "BACKEND", SHARED: "SHARED"}; const CC_SDK = { - BACKEND: "TODO - INSERT BACKEND SDK KEY", - SHARED:"TODO - INSERT SHARED SDK KEY"} + BACKEND: "fnvWCKwpfPETf3O6BQgQAg/iMRmhH6DmECovlBvRtjpDw", + SHARED:"configcat-sdk-1/fnvWCKwpfPETf3O6BQgQAg/Idklvfo85EaPWoX9zOygNA"} const userObject = new User('microFrontendUser1'); -export const C1 = (args: { featureFlagKey: string, configId: string }) => { +export const C1 = (args: { featureFlagKey: string, providerId: string }) => { - const { value: isFeatureEnabled, loading } = useFeatureFlagByConfigId(args.configId, args.featureFlagKey, false, userObject); + const { value: isFeatureEnabled, loading } = useFeatureFlag(args.featureFlagKey, false, userObject, args.providerId); return (
@@ -35,19 +35,19 @@ export const MultipleConfigCatConfigs = () => {

Embeded provider test

- - - - - - - - - - {/* Higher-Order Components sample */} - - - + + <> + {/* */} + + + <> + + {/* */} + + {/* Higher-Order Components sample */} + + +
diff --git a/src/ConfigCatContext.tsx b/src/ConfigCatContext.tsx index 7765a72..6dccca9 100644 --- a/src/ConfigCatContext.tsx +++ b/src/ConfigCatContext.tsx @@ -16,18 +16,18 @@ ConfigCatContext.displayName = "ConfigCatContext"; const ConfigCatContextRegistry = new Map>(); -export function getOrCreateConfigCatContext(configId: string): React.Context { +export function getOrCreateConfigCatContext(providerId: string): React.Context { - let context: React.Context | undefined = ConfigCatContextRegistry.get(configId.toLowerCase()); + let context: React.Context | undefined = ConfigCatContextRegistry.get(providerId.toLowerCase()); if (!context) { context = React.createContext( void 0 ); - context.displayName = "ConfigCatContext_" + configId; + context.displayName = "ConfigCatContext_" + providerId; - ConfigCatContextRegistry.set(configId.toLowerCase(), context); + ConfigCatContextRegistry.set(providerId.toLowerCase(), context); } return context; diff --git a/src/ConfigCatHOC.tsx b/src/ConfigCatHOC.tsx index af28bd6..71eda8f 100644 --- a/src/ConfigCatHOC.tsx +++ b/src/ConfigCatHOC.tsx @@ -26,16 +26,16 @@ export interface WithConfigCatClientProps { function withConfigCatClient

( WrappedComponent: React.ComponentType

, - configId?: string + providerId?: string ): React.ComponentType> { - const configCatContext = configId ? getOrCreateConfigCatContext(configId) : ConfigCatContext; + const configCatContext = providerId ? getOrCreateConfigCatContext(providerId) : ConfigCatContext; return (props: P) => ( {(context: ConfigCatContextData | undefined) => { if (!context) { - throw createConfigCatProviderError("withConfigCatClient", configId); + throw createConfigCatProviderError("withConfigCatClient", providerId); } return ( (key: string, defaultValue: T, user?: User, configId?: string): { +function useFeatureFlag(key: string, defaultValue: T, user?: User, providerId?: string): { value: SettingTypeOf; loading: boolean; } { const configCatContext = useContext(ConfigCatContext); - if (!configCatContext) throw createConfigCatProviderError("useFeatureFlag", configId); + if (!configCatContext) throw createConfigCatProviderError("useFeatureFlag", providerId); const [featureFlagValue, setFeatureFlag] = useState(defaultValue as SettingTypeOf); const [loading, setLoading] = useState(true); @@ -24,11 +24,11 @@ function useFeatureFlag(key: string, defaultValue: T, us return { value: featureFlagValue, loading }; } -function useConfigCatClient(configId?: string): IConfigCatClient { +function useConfigCatClient(providerId?: string): IConfigCatClient { - const configCatContext = useContext(configId ? getOrCreateConfigCatContext(configId) : ConfigCatContext); + const configCatContext = useContext(providerId ? getOrCreateConfigCatContext(providerId) : ConfigCatContext); - if (!configCatContext) throw createConfigCatProviderError("useConfigCatClient", configId); + if (!configCatContext) throw createConfigCatProviderError("useConfigCatClient", providerId); return configCatContext.client; } diff --git a/src/ConfigCatProvider.tsx b/src/ConfigCatProvider.tsx index a01ac77..102df3c 100644 --- a/src/ConfigCatProvider.tsx +++ b/src/ConfigCatProvider.tsx @@ -3,7 +3,8 @@ import type { ClientCacheState, HookEvents, IConfig, IConfigCatClient, IConfigCatClientSnapshot, IConfigCatKernel, IEvaluationDetails, RefreshResult, SettingKeyValue, SettingTypeOf, SettingValue, User } from "configcat-common"; import { PollingMode, getClient } from "configcat-common"; import type { PropsWithChildren } from "react"; -import React, { Component } from "react"; +import { Component} from "react"; +import React from "react"; import { LocalStorageCache } from "./Cache"; import ConfigCatContext, { type ConfigCatContextData, getOrCreateConfigCatContext } from "./ConfigCatContext"; import { HttpConfigFetcher } from "./ConfigFetcher"; @@ -14,7 +15,7 @@ type ConfigCatProviderProps = { sdkKey: string; pollingMode?: PollingMode; options?: IReactAutoPollOptions | IReactLazyLoadingOptions | IReactManualPollOptions; - configId?: string; + id?: string; }; type ConfigCatProviderState = { @@ -86,7 +87,7 @@ class ConfigCatProvider extends Component = this.props.configId ? getOrCreateConfigCatContext(this.props.configId) : ConfigCatContext; + const context: React.Context = this.props.id ? getOrCreateConfigCatContext(this.props.id) : ConfigCatContext; return ( diff --git a/src/index.ts b/src/index.ts index efb74ec..cbf3414 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,7 +3,7 @@ import type { IAutoPollOptions, IConfigCatLogger, ILazyLoadingOptions, IManualPollOptions } from "configcat-common"; import type { GetValueType, WithConfigCatClientProps } from "./ConfigCatHOC"; import withConfigCatClient from "./ConfigCatHOC"; -import { useConfigCatClient, useConfigCatClientByConfigId, useFeatureFlag, useFeatureFlagByConfigId } from "./ConfigCatHooks"; +import { useConfigCatClient, useFeatureFlag } from "./ConfigCatHooks"; import ConfigCatProvider from "./ConfigCatProvider"; export { createConsoleLogger, createFlagOverridesFromMap } from "configcat-common"; @@ -20,7 +20,7 @@ export type IReactManualPollOptions = IManualPollOptions; export type IReactConfigCatLogger = IConfigCatLogger; export type { WithConfigCatClientProps, GetValueType }; -export { ConfigCatProvider, useFeatureFlag, useConfigCatClient, withConfigCatClient, useFeatureFlagByConfigId, useConfigCatClientByConfigId }; +export { ConfigCatProvider, useFeatureFlag, useConfigCatClient, withConfigCatClient }; /* Public types re-export from common-js */