From 509ba9a8c619dc02debe09132a9d9d68131d6d69 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Mon, 17 Jul 2023 17:07:51 -0300 Subject: [PATCH 01/15] export new hooks. add 'options' param to useClient and useTreatments hooks --- src/__tests__/index.test.ts | 6 ++++++ src/index.ts | 2 ++ src/useClient.ts | 5 +++-- src/useTreatments.ts | 5 +++-- 4 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/__tests__/index.test.ts b/src/__tests__/index.test.ts index 647dbd8..44e98eb 100644 --- a/src/__tests__/index.test.ts +++ b/src/__tests__/index.test.ts @@ -11,6 +11,8 @@ import { useManager as exportedUseManager, useTrack as exportedUseTrack, useTreatments as exportedUseTreatments, + useSplitClient as exportedUseSplitClient, + useSplitTreatments as exportedUseSplitTreatments, } from '../index'; import { SplitContext } from '../SplitContext'; import { SplitFactory as SplitioEntrypoint } from '@splitsoftware/splitio/client'; @@ -24,6 +26,8 @@ import { useClient } from '../useClient'; import { useManager } from '../useManager'; import { useTrack } from '../useTrack'; import { useTreatments } from '../useTreatments'; +import { useSplitClient } from '../useSplitClient'; +import { useSplitTreatments } from '../useSplitTreatments'; describe('index', () => { @@ -44,6 +48,8 @@ describe('index', () => { expect(exportedUseManager).toBe(useManager); expect(exportedUseTrack).toBe(useTrack); expect(exportedUseTreatments).toBe(useTreatments); + expect(exportedUseSplitClient).toBe(useSplitClient); + expect(exportedUseSplitTreatments).toBe(useSplitTreatments); }); it('should export SplitContext', () => { diff --git a/src/index.ts b/src/index.ts index 52a0de8..f6c10a6 100644 --- a/src/index.ts +++ b/src/index.ts @@ -16,6 +16,8 @@ export { useClient } from './useClient'; export { useTreatments } from './useTreatments'; export { useTrack } from './useTrack'; export { useManager } from './useManager'; +export { useSplitClient } from './useSplitClient'; +export { useSplitTreatments } from './useSplitTreatments'; // SplitContext export { SplitContext } from './SplitContext'; diff --git a/src/useClient.ts b/src/useClient.ts index ddafee0..b9839c9 100644 --- a/src/useClient.ts +++ b/src/useClient.ts @@ -1,3 +1,4 @@ +import { IUpdateProps } from './types'; import { useSplitClient } from './useSplitClient'; /** @@ -8,6 +9,6 @@ import { useSplitClient } from './useSplitClient'; * @return A Split Client instance, or null if used outside the scope of SplitFactory * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#advanced-instantiate-multiple-sdk-clients} */ -export function useClient(key?: SplitIO.SplitKey, trafficType?: string, attributes?: SplitIO.Attributes): SplitIO.IBrowserClient | null { - return useSplitClient(key, trafficType, attributes).client; +export function useClient(key?: SplitIO.SplitKey, trafficType?: string, attributes?: SplitIO.Attributes, options?: IUpdateProps): SplitIO.IBrowserClient | null { + return useSplitClient(key, trafficType, attributes, options).client; } diff --git a/src/useTreatments.ts b/src/useTreatments.ts index 4aed7d8..4b90356 100644 --- a/src/useTreatments.ts +++ b/src/useTreatments.ts @@ -1,3 +1,4 @@ +import { IUpdateProps } from './types'; import { useSplitTreatments } from './useSplitTreatments'; /** @@ -8,6 +9,6 @@ import { useSplitTreatments } from './useSplitTreatments'; * @return A TreatmentsWithConfig instance, that might contain control treatments if the client is not available or ready, or if feature flag names do not exist. * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#get-treatments-with-configurations} */ -export function useTreatments(featureFlagNames: string[], attributes?: SplitIO.Attributes, key?: SplitIO.SplitKey): SplitIO.TreatmentsWithConfig { - return useSplitTreatments(featureFlagNames, attributes, key).treatments; +export function useTreatments(featureFlagNames: string[], attributes?: SplitIO.Attributes, key?: SplitIO.SplitKey, options?: IUpdateProps): SplitIO.TreatmentsWithConfig { + return useSplitTreatments(featureFlagNames, attributes, key, options).treatments; } From 9cb112daf587d8a1736205c53d2f70299a4877b9 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Mon, 17 Jul 2023 17:15:30 -0300 Subject: [PATCH 02/15] update type definitions --- types/index.d.ts | 2 ++ types/useClient.d.ts | 3 ++- types/useTreatments.d.ts | 3 ++- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/types/index.d.ts b/types/index.d.ts index 91b8d2a..eaa5093 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -9,4 +9,6 @@ export { useClient } from './useClient'; export { useTreatments } from './useTreatments'; export { useTrack } from './useTrack'; export { useManager } from './useManager'; +export { useSplitClient } from './useSplitClient'; +export { useSplitTreatments } from './useSplitTreatments'; export { SplitContext } from './SplitContext'; diff --git a/types/useClient.d.ts b/types/useClient.d.ts index 75284f7..64517b5 100644 --- a/types/useClient.d.ts +++ b/types/useClient.d.ts @@ -1,3 +1,4 @@ +import { IUpdateProps } from './types'; /** * 'useClient' is a hook that returns a client from the Split context. * It uses the 'useContext' hook to access the context, which is updated by @@ -6,4 +7,4 @@ * @return A Split Client instance, or null if used outside the scope of SplitFactory * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#advanced-instantiate-multiple-sdk-clients} */ -export declare function useClient(key?: SplitIO.SplitKey, trafficType?: string, attributes?: SplitIO.Attributes): SplitIO.IBrowserClient | null; +export declare function useClient(key?: SplitIO.SplitKey, trafficType?: string, attributes?: SplitIO.Attributes, options?: IUpdateProps): SplitIO.IBrowserClient | null; diff --git a/types/useTreatments.d.ts b/types/useTreatments.d.ts index 6b688e7..7d44ed7 100644 --- a/types/useTreatments.d.ts +++ b/types/useTreatments.d.ts @@ -1,3 +1,4 @@ +import { IUpdateProps } from './types'; /** * 'useTreatments' is a hook that returns an object of feature flag evaluations (i.e., treatments). * It uses the 'useContext' hook to access the client from the Split context, @@ -6,4 +7,4 @@ * @return A TreatmentsWithConfig instance, that might contain control treatments if the client is not available or ready, or if feature flag names do not exist. * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#get-treatments-with-configurations} */ -export declare function useTreatments(featureFlagNames: string[], attributes?: SplitIO.Attributes, key?: SplitIO.SplitKey): SplitIO.TreatmentsWithConfig; +export declare function useTreatments(featureFlagNames: string[], attributes?: SplitIO.Attributes, key?: SplitIO.SplitKey, options?: IUpdateProps): SplitIO.TreatmentsWithConfig; From 38d511984ba902a78811b57b0c91c2f9577ed3c9 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Sun, 23 Jul 2023 01:47:15 -0300 Subject: [PATCH 03/15] changelog --- CHANGES.txt | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGES.txt b/CHANGES.txt index 60848d1..141dbcf 100644 --- a/CHANGES.txt +++ b/CHANGES.txt @@ -1,4 +1,6 @@ 1.10.0 (XXX XX, 2023) + - Added a new parameter `options` to `useClient` and `useTreatments` hooks, to allow controlling on what SDK events the hook should update the component. Read more in our docs. + - Added new `useSplitClient` and `useSplitTreatments` hooks. Their input parameters and logic are equivalent to `useClient` and `useTreatments` hooks, but rather than returning only the SDK client and treatments respectively, they return the Split context object together with the SDK client and treatments. Read more in our docs. - Bugfixing - Removed check of hooks availability to follow rules of hooks. If attempting to use hooks with React below version 16.8.0, an error will be thrown rather than logging an error message. 1.9.0 (July 18, 2023) From 6b37b376190c24ffd5bceb5f11e62e37b43120e4 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Tue, 15 Aug 2023 16:12:06 -0300 Subject: [PATCH 04/15] useTrack update --- src/useTrack.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/useTrack.ts b/src/useTrack.ts index 01fe8a0..9808375 100644 --- a/src/useTrack.ts +++ b/src/useTrack.ts @@ -11,6 +11,6 @@ const noOpFalse = () => false; * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#track} */ export function useTrack(key?: SplitIO.SplitKey, trafficType?: string): SplitIO.IBrowserClient['track'] { - const client = useClient(key, trafficType); + const client = useClient(key, trafficType, undefined, { updateOnSdkReady: false, updateOnSdkReadyFromCache: false }); return client ? client.track.bind(client) : noOpFalse; } From 7828904500153822a0201e78d26ae1c36e28792e Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Thu, 14 Sep 2023 11:37:41 -0300 Subject: [PATCH 05/15] prepare rc --- .github/workflows/ci.yml | 4 ++-- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index bc3a8b1..5e82593 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -77,7 +77,7 @@ jobs: -Dsonar.pullrequest.base=${{ github.event.pull_request.base.ref }} - name: Store assets - if: github.event_name == 'push' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/development') + if: github.event_name == 'push' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/hooks_export') uses: actions/upload-artifact@v3 with: name: assets @@ -88,7 +88,7 @@ jobs: name: Upload assets runs-on: ubuntu-latest needs: build - if: github.event_name == 'push' && github.ref == 'refs/heads/development' + if: github.event_name == 'push' && github.ref == 'refs/heads/hooks_export' strategy: matrix: environment: diff --git a/package-lock.json b/package-lock.json index 9f38433..d1ef920 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@splitsoftware/splitio-react", - "version": "1.9.0", + "version": "1.9.1-rc.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@splitsoftware/splitio-react", - "version": "1.9.0", + "version": "1.9.1-rc.0", "license": "Apache-2.0", "dependencies": { "@splitsoftware/splitio": "10.23.0", diff --git a/package.json b/package.json index 206ca9b..64d5d20 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@splitsoftware/splitio-react", - "version": "1.9.0", + "version": "1.9.1-rc.0", "description": "A React library to easily integrate and use Split JS SDK", "main": "lib/index.js", "module": "es/index.js", From a85623b06d02f803e002877e980d6c89680ea2c4 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Thu, 14 Sep 2023 12:59:42 -0300 Subject: [PATCH 06/15] Fix typo --- .github/workflows/ci.yml | 4 ++-- src/types.ts | 4 ++-- types/types.d.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 5e82593..bc3a8b1 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -77,7 +77,7 @@ jobs: -Dsonar.pullrequest.base=${{ github.event.pull_request.base.ref }} - name: Store assets - if: github.event_name == 'push' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/hooks_export') + if: github.event_name == 'push' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/development') uses: actions/upload-artifact@v3 with: name: assets @@ -88,7 +88,7 @@ jobs: name: Upload assets runs-on: ubuntu-latest needs: build - if: github.event_name == 'push' && github.ref == 'refs/heads/hooks_export' + if: github.event_name == 'push' && github.ref == 'refs/heads/development' strategy: matrix: environment: diff --git a/src/types.ts b/src/types.ts index 5606976..da8f376 100644 --- a/src/types.ts +++ b/src/types.ts @@ -101,7 +101,7 @@ export interface ISplitFactoryChildProps extends ISplitContextValues { } /** * SplitFactory Props interface. These are the props accepted by SplitFactory component, - * used to instantiate a factory and client instances, update the Split context, and listen for SDK events. + * used to instantiate a factory and client instance, update the Split context, and listen for SDK events. */ export interface ISplitFactoryProps extends IUpdateProps { @@ -136,7 +136,7 @@ export interface ISplitClientChildProps extends ISplitContextValues { } /** * SplitClient Props interface. These are the props accepted by SplitClient component, - * used to instantiate a new client instances, update the Split context, and listen for SDK events. + * used to instantiate a new client instance, update the Split context, and listen for SDK events. */ export interface ISplitClientProps extends IUpdateProps { diff --git a/types/types.d.ts b/types/types.d.ts index 82ffa01..6734c0e 100644 --- a/types/types.d.ts +++ b/types/types.d.ts @@ -84,7 +84,7 @@ export interface ISplitFactoryChildProps extends ISplitContextValues { } /** * SplitFactory Props interface. These are the props accepted by SplitFactory component, - * used to instantiate a factory and client instances, update the Split context, and listen for SDK events. + * used to instantiate a factory and client instance, update the Split context, and listen for SDK events. */ export interface ISplitFactoryProps extends IUpdateProps { /** @@ -112,7 +112,7 @@ export interface ISplitClientChildProps extends ISplitContextValues { } /** * SplitClient Props interface. These are the props accepted by SplitClient component, - * used to instantiate a new client instances, update the Split context, and listen for SDK events. + * used to instantiate a new client instance, update the Split context, and listen for SDK events. */ export interface ISplitClientProps extends IUpdateProps { /** From 5c5274b240983de0363080370f86765906cd6a30 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Thu, 5 Oct 2023 16:43:08 -0300 Subject: [PATCH 07/15] add comment about useTrack implementation --- src/useTrack.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/useTrack.ts b/src/useTrack.ts index 9808375..103071f 100644 --- a/src/useTrack.ts +++ b/src/useTrack.ts @@ -11,6 +11,7 @@ const noOpFalse = () => false; * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#track} */ export function useTrack(key?: SplitIO.SplitKey, trafficType?: string): SplitIO.IBrowserClient['track'] { + // All update options are false to avoid re-renders. The track method doesn't need the client to be operational. const client = useClient(key, trafficType, undefined, { updateOnSdkReady: false, updateOnSdkReadyFromCache: false }); return client ? client.track.bind(client) : noOpFalse; } From 064a8729f354d57287ee7eac03fdc97504e62b7a Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Thu, 2 Nov 2023 14:39:28 -0300 Subject: [PATCH 08/15] update CHANGES log entry --- CHANGES.txt | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/CHANGES.txt b/CHANGES.txt index 5f93890..6236b6a 100644 --- a/CHANGES.txt +++ b/CHANGES.txt @@ -1,9 +1,12 @@ -1.10.0 (September XX, 2023) - - Added a new parameter `options` to `useClient` and `useTreatments` hooks, to allow controlling on what SDK events the hook should update the component. Read more in our docs. - - Added new `useSplitClient` and `useSplitTreatments` hooks. Their input parameters and logic are equivalent to `useClient` and `useTreatments` hooks, but rather than returning only the SDK client and treatments respectively, they return the Split context object together with the SDK client and treatments. Read more in our docs. +1.10.0 (November XX, 2023) + - Added new `useSplitClient` and `useSplitTreatments` hooks to use instead of `useClient` and `useTreatments` respectively, which are deprecated now. + - The new hooks return the Split context object together with the SDK client and treatments respectively, rather than returning only the client and treatments as the deprecated hooks do. This way it is possible to access status properties, like `isReady`, from the hook's results, without having to use the `useContext` hook or the client `ready` promise. + - They accept an options object as parameter, which support the same arguments than the deprecated hooks, plus new boolean options to control when the hook should re-render: `updateOnSdkReady`, `updateOnSdkReadyFromCache`, `updateOnSdkTimedout`, and `updateOnSdkUpdate`. + - `useSplitTreatments` optimizes feature flag evaluations by using the `useMemo` hook to memoize calls to the SDK's `getTreatmentsWithConfig` method. This avoids re-evaluating feature flags when the hook is called with the same options and the feature flag definitions have not changed. + - They fixed a bug in the deprecated hooks, which caused them to not re-render and re-evaluate feature flags when they consume a different SDK client than the context and its status updates (i.e., when it emits SDK_READY or other event). - Added TypeScript types and interfaces to the library index exports, allowing them to be imported from the library index. For example, `import type { ISplitFactoryProps } from '@splitsoftware/splitio-react';` (Related to issue https://github.com/splitio/react-client/issues/162). - Updated type declarations of the library components to not restrict the type of the `children` prop to ReactElement, allowing to pass any valid ReactNode value (Related to issue https://github.com/splitio/react-client/issues/164). - - Updated the `useTreatments` hook to optimize feature flag evaluation. It now uses the `useMemo` hook to memoize calls to the SDK's `getTreatmentsWithConfig` function. This avoids re-evaluating feature flags when the hook is called with the same parameters and the feature flag definitions have not changed. + - Updated the `useTreatments` hook to optimize feature flag evaluations. - Updated linter and other dependencies for vulnerability fixes. - Bugfixing - To adhere to the rules of hooks and prevent React warnings, conditional code within hooks was removed. Previously, this code checked for the availability of the hooks API (available in React version 16.8.0 or above) and logged an error message. Now, using hooks with React versions below 16.8.0 will throw an error. - Bugfixing - Updated `useClient` and `useTreatments` hooks to re-render and re-evaluate feature flags when they consume a different SDK client than the context and its status updates (i.e., when it emits SDK_READY or other event). From 3af2878db50eacc448f3ac359442c9d101bcc9c4 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Thu, 2 Nov 2023 14:47:42 -0300 Subject: [PATCH 09/15] update README and do some polishing --- README.md | 38 ++++++++++++++++++++------------------ src/useClient.ts | 2 ++ src/useTreatments.ts | 2 ++ src/utils.ts | 2 +- types/useClient.d.ts | 2 ++ types/useTreatments.d.ts | 2 ++ 6 files changed, 29 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 18ce0c7..f936823 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ Below is a simple example that describes the instantiation and most basic usage import React from 'react'; // Import SDK functions -import { SplitFactory, SplitTreatments } from '@splitsoftware/splitio-react'; +import { SplitFactory, useSplitTreatments } from '@splitsoftware/splitio-react'; // Define your config object const CONFIG = { @@ -30,25 +30,27 @@ const CONFIG = { } }; -function MyReactComponent() { +function MyComponent() { + // Evaluate feature flags with useSplitTreatments hook + const { treatments: { FEATURE_FLAG_NAME }, isReady } = useSplitTreatments({ names: ['FEATURE_FLAG_NAME'] }); + + // Check SDK readiness using isReady prop + if (!isReady) return
Loading SDK ...
; + + if (FEATURE_FLAG_NAME.treatment === 'on') { + // return JSX for on treatment + } else if (FEATURE_FLAG_NAME.treatment === 'off') { + // return JSX for off treatment + } else { + // return JSX for control treatment + }; +} + +function MyApp() { return ( - /* Use SplitFactory to instantiate the SDK and makes it available to nested components */ + // Use SplitFactory to instantiate the SDK and makes it available to nested components - {/* Evaluate feature flags with SplitTreatments component */} - - {({ treatments: { FEATURE_FLAG_NAME }, isReady }) => { - // Check SDK readiness using isReady prop - if (!isReady) - return
Loading SDK ...
; - if (FEATURE_FLAG_NAME.treatment === 'on') { - // return JSX for on treatment - } else if (FEATURE_FLAG_NAME.treatment === 'off') { - // return JSX for off treatment - } else { - // return JSX for control treatment - } - }} - + ); } diff --git a/src/useClient.ts b/src/useClient.ts index 437fc8a..517dc81 100644 --- a/src/useClient.ts +++ b/src/useClient.ts @@ -7,6 +7,8 @@ import { useSplitClient } from './useSplitClient'; * * @return A Split Client instance, or null if used outside the scope of SplitFactory * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#advanced-instantiate-multiple-sdk-clients} + * + * @deprecated useSplitClient is the new hook to use. */ export function useClient(splitKey?: SplitIO.SplitKey, trafficType?: string, attributes?: SplitIO.Attributes): SplitIO.IBrowserClient | null { return useSplitClient({ splitKey, trafficType, attributes }).client; diff --git a/src/useTreatments.ts b/src/useTreatments.ts index 3a152a5..e6ba0e3 100644 --- a/src/useTreatments.ts +++ b/src/useTreatments.ts @@ -7,6 +7,8 @@ import { useSplitTreatments } from './useSplitTreatments'; * * @return A TreatmentsWithConfig instance, that might contain control treatments if the client is not available or ready, or if feature flag names do not exist. * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#get-treatments-with-configurations} + * + * @deprecated useSplitTreatments is the new hook to use. */ export function useTreatments(featureFlagNames: string[], attributes?: SplitIO.Attributes, splitKey?: SplitIO.SplitKey): SplitIO.TreatmentsWithConfig { return useSplitTreatments({ names: featureFlagNames, attributes, splitKey }).treatments; diff --git a/src/utils.ts b/src/utils.ts index d3ca36a..5d48611 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -49,7 +49,7 @@ export function getSplitFactory(config: SplitIO.IBrowserSettings): IFactoryWithC // idempotent operation export function getSplitClient(factory: SplitIO.IBrowserSDK, key?: SplitIO.SplitKey, trafficType?: string): IClientWithContext { // factory.client is an idempotent operation - const client = (key ? factory.client(key, trafficType) : factory.client()) as IClientWithContext; + const client = (key !== undefined ? factory.client(key, trafficType) : factory.client()) as IClientWithContext; // Handle client lastUpdate if (client.lastUpdate === undefined) { diff --git a/types/useClient.d.ts b/types/useClient.d.ts index d08dbf4..85f91c9 100644 --- a/types/useClient.d.ts +++ b/types/useClient.d.ts @@ -5,5 +5,7 @@ * * @return A Split Client instance, or null if used outside the scope of SplitFactory * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#advanced-instantiate-multiple-sdk-clients} + * + * @deprecated useSplitClient is the new hook to use. */ export declare function useClient(splitKey?: SplitIO.SplitKey, trafficType?: string, attributes?: SplitIO.Attributes): SplitIO.IBrowserClient | null; diff --git a/types/useTreatments.d.ts b/types/useTreatments.d.ts index fd8170e..d48695b 100644 --- a/types/useTreatments.d.ts +++ b/types/useTreatments.d.ts @@ -5,5 +5,7 @@ * * @return A TreatmentsWithConfig instance, that might contain control treatments if the client is not available or ready, or if feature flag names do not exist. * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#get-treatments-with-configurations} + * + * @deprecated useSplitTreatments is the new hook to use. */ export declare function useTreatments(featureFlagNames: string[], attributes?: SplitIO.Attributes, splitKey?: SplitIO.SplitKey): SplitIO.TreatmentsWithConfig; From 75bddecc5f2b83990a90d41c31bc521f4ee99be8 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Mon, 13 Nov 2023 15:27:42 -0300 Subject: [PATCH 10/15] Update test --- src/__tests__/withSplitTreatments.test.tsx | 32 ++++++++++++---------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/src/__tests__/withSplitTreatments.test.tsx b/src/__tests__/withSplitTreatments.test.tsx index b7210c9..d1e665f 100644 --- a/src/__tests__/withSplitTreatments.test.tsx +++ b/src/__tests__/withSplitTreatments.test.tsx @@ -12,38 +12,42 @@ import { sdkBrowser } from './testUtils/sdkConfigs'; import { withSplitFactory } from '../withSplitFactory'; import { withSplitClient } from '../withSplitClient'; import { withSplitTreatments } from '../withSplitTreatments'; -import { ISplitTreatmentsChildProps } from '../types'; import { getControlTreatmentsWithConfig } from '../constants'; describe('withSplitTreatments', () => { it(`passes Split props and outer props to the child. - In this test, the value of "props.treatments" is obteined by the function "getControlTreatmentsWithConfig", - and not "client.getTreatmentsWithConfig" since the client is not ready.`, (done) => { + In this test, the value of "props.treatments" is obtained by the function "getControlTreatmentsWithConfig", + and not "client.getTreatmentsWithConfig" since the client is not ready.`, () => { const featureFlagNames = ['split1', 'split2']; + const Component = withSplitFactory(sdkBrowser)<{ outerProp1: string, outerProp2: number }>( ({ outerProp1, outerProp2, factory }) => { const SubComponent = withSplitClient('user1')<{ outerProp1: string, outerProp2: number }>( withSplitTreatments(featureFlagNames)( - (props: ISplitTreatmentsChildProps & { outerProp1: string, outerProp2: number }) => { + (props) => { const clientMock = factory!.client('user1'); - expect(props.outerProp1).toBe('outerProp1'); - expect(props.outerProp2).toBe(2); expect((clientMock.getTreatmentsWithConfig as jest.Mock).mock.calls.length).toBe(0); - expect(props.treatments).toEqual(getControlTreatmentsWithConfig(featureFlagNames)); - expect(props.isReady).toBe(false); - expect(props.isReadyFromCache).toBe(false); - expect(props.hasTimedout).toBe(false); - expect(props.isTimedout).toBe(false); - expect(props.isDestroyed).toBe(false); - expect(props.lastUpdate).toBe(0); - done(); + + expect(props).toStrictEqual({ + factory: factory, client: clientMock, + outerProp1: 'outerProp1', outerProp2: 2, + treatments: getControlTreatmentsWithConfig(featureFlagNames), + isReady: false, + isReadyFromCache: false, + hasTimedout: false, + isTimedout: false, + isDestroyed: false, + lastUpdate: 0 + }); + return null; } ) ); return ; }); + render(); }); From af209f88448205c65bd8bf9e06cbab53fc691007 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Mon, 13 Nov 2023 15:42:50 -0300 Subject: [PATCH 11/15] Update deprecation comment --- src/useClient.ts | 2 +- src/useTreatments.ts | 2 +- types/useClient.d.ts | 2 +- types/useTreatments.d.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/useClient.ts b/src/useClient.ts index 517dc81..7f41c58 100644 --- a/src/useClient.ts +++ b/src/useClient.ts @@ -8,7 +8,7 @@ import { useSplitClient } from './useSplitClient'; * @return A Split Client instance, or null if used outside the scope of SplitFactory * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#advanced-instantiate-multiple-sdk-clients} * - * @deprecated useSplitClient is the new hook to use. + * @deprecated Replace with the new `useSplitClient` hook. */ export function useClient(splitKey?: SplitIO.SplitKey, trafficType?: string, attributes?: SplitIO.Attributes): SplitIO.IBrowserClient | null { return useSplitClient({ splitKey, trafficType, attributes }).client; diff --git a/src/useTreatments.ts b/src/useTreatments.ts index e6ba0e3..a794eb6 100644 --- a/src/useTreatments.ts +++ b/src/useTreatments.ts @@ -8,7 +8,7 @@ import { useSplitTreatments } from './useSplitTreatments'; * @return A TreatmentsWithConfig instance, that might contain control treatments if the client is not available or ready, or if feature flag names do not exist. * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#get-treatments-with-configurations} * - * @deprecated useSplitTreatments is the new hook to use. + * @deprecated Replace with the new `useSplitTreatments` hook. */ export function useTreatments(featureFlagNames: string[], attributes?: SplitIO.Attributes, splitKey?: SplitIO.SplitKey): SplitIO.TreatmentsWithConfig { return useSplitTreatments({ names: featureFlagNames, attributes, splitKey }).treatments; diff --git a/types/useClient.d.ts b/types/useClient.d.ts index 85f91c9..3369a1a 100644 --- a/types/useClient.d.ts +++ b/types/useClient.d.ts @@ -6,6 +6,6 @@ * @return A Split Client instance, or null if used outside the scope of SplitFactory * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#advanced-instantiate-multiple-sdk-clients} * - * @deprecated useSplitClient is the new hook to use. + * @deprecated Replace with the new `useSplitClient` hook. */ export declare function useClient(splitKey?: SplitIO.SplitKey, trafficType?: string, attributes?: SplitIO.Attributes): SplitIO.IBrowserClient | null; diff --git a/types/useTreatments.d.ts b/types/useTreatments.d.ts index d48695b..a5d25e1 100644 --- a/types/useTreatments.d.ts +++ b/types/useTreatments.d.ts @@ -6,6 +6,6 @@ * @return A TreatmentsWithConfig instance, that might contain control treatments if the client is not available or ready, or if feature flag names do not exist. * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#get-treatments-with-configurations} * - * @deprecated useSplitTreatments is the new hook to use. + * @deprecated Replace with the new `useSplitTreatments` hook. */ export declare function useTreatments(featureFlagNames: string[], attributes?: SplitIO.Attributes, splitKey?: SplitIO.SplitKey): SplitIO.TreatmentsWithConfig; From 209a4125f6a8ccffbb1fa92cab2d16bd03f5f1c6 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Mon, 13 Nov 2023 16:00:18 -0300 Subject: [PATCH 12/15] Update doc comments --- src/useSplitClient.ts | 6 ++++++ src/useSplitTreatments.ts | 10 ++++++++-- types/useSplitClient.d.ts | 6 ++++++ types/useSplitTreatments.d.ts | 10 ++++++++-- 4 files changed, 28 insertions(+), 4 deletions(-) diff --git a/src/useSplitClient.ts b/src/useSplitClient.ts index cd3a11c..5e2e6a6 100644 --- a/src/useSplitClient.ts +++ b/src/useSplitClient.ts @@ -15,6 +15,12 @@ export const DEFAULT_UPDATE_OPTIONS = { * It uses the 'useContext' hook to access the context, which is updated by SplitFactory and SplitClient components in the hierarchy of components. * * @return A Split Context object + * + * @example + * ```js + * const { factory, client, isReady, isReadyFromCache, hasTimedout, lastUpdate } = useSplitClient({ splitKey: 'user_id' }); + * ``` + * * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#advanced-instantiate-multiple-sdk-clients} */ export function useSplitClient(options?: IUseSplitClientOptions): ISplitContextValues { diff --git a/src/useSplitTreatments.ts b/src/useSplitTreatments.ts index ddc0590..56fb0db 100644 --- a/src/useSplitTreatments.ts +++ b/src/useSplitTreatments.ts @@ -5,10 +5,16 @@ import { ISplitTreatmentsChildProps, IUseSplitTreatmentsOptions } from './types' import { useSplitClient } from './useSplitClient'; /** - * 'useSplitTreatments' is a hook that returns an SplitContext object extended with a `treatments` property containing an object of feature flag evaluations (i.e., treatments). + * 'useSplitTreatments' is a hook that returns an SplitContext object extended with a `treatments` property object that contains feature flag evaluations. * It uses the 'useSplitClient' hook to access the client from the Split context, and invokes the 'getTreatmentsWithConfig' method. * - * @return A Split Context object extended with a TreatmentsWithConfig instance, that might contain control treatments if the client is not available or ready, or if split names do not exist. + * @return A Split Context object extended with a TreatmentsWithConfig instance, that might contain control treatments if the client is not available or ready, or if feature flag names do not exist. + * + * @example + * ```js + * const { treatments: { feature_1, feature_2 }, isReady, isReadyFromCache, hasTimedout, lastUpdate, ... } = useSplitTreatments({ names: ['feature_1', 'feature_2']}); + * ``` + * * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#get-treatments-with-configurations} */ export function useSplitTreatments(options: IUseSplitTreatmentsOptions): ISplitTreatmentsChildProps { diff --git a/types/useSplitClient.d.ts b/types/useSplitClient.d.ts index 90868e4..b4dc1ea 100644 --- a/types/useSplitClient.d.ts +++ b/types/useSplitClient.d.ts @@ -10,6 +10,12 @@ export declare const DEFAULT_UPDATE_OPTIONS: { * It uses the 'useContext' hook to access the context, which is updated by SplitFactory and SplitClient components in the hierarchy of components. * * @return A Split Context object + * + * @example + * ```js + * const { factory, client, isReady, isReadyFromCache, hasTimedout, lastUpdate } = useSplitClient({ splitKey: 'user_id' }); + * ``` + * * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#advanced-instantiate-multiple-sdk-clients} */ export declare function useSplitClient(options?: IUseSplitClientOptions): ISplitContextValues; diff --git a/types/useSplitTreatments.d.ts b/types/useSplitTreatments.d.ts index b636632..1f19619 100644 --- a/types/useSplitTreatments.d.ts +++ b/types/useSplitTreatments.d.ts @@ -1,9 +1,15 @@ import { ISplitTreatmentsChildProps, IUseSplitTreatmentsOptions } from './types'; /** - * 'useSplitTreatments' is a hook that returns an SplitContext object extended with a `treatments` property containing an object of feature flag evaluations (i.e., treatments). + * 'useSplitTreatments' is a hook that returns an SplitContext object extended with a `treatments` property object that contains feature flag evaluations. * It uses the 'useSplitClient' hook to access the client from the Split context, and invokes the 'getTreatmentsWithConfig' method. * - * @return A Split Context object extended with a TreatmentsWithConfig instance, that might contain control treatments if the client is not available or ready, or if split names do not exist. + * @return A Split Context object extended with a TreatmentsWithConfig instance, that might contain control treatments if the client is not available or ready, or if feature flag names do not exist. + * + * @example + * ```js + * const { treatments: { feature_1, feature_2 }, isReady, isReadyFromCache, hasTimedout, lastUpdate, ... } = useSplitTreatments({ names: ['feature_1', 'feature_2']}); + * ``` + * * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#get-treatments-with-configurations} */ export declare function useSplitTreatments(options: IUseSplitTreatmentsOptions): ISplitTreatmentsChildProps; From 815b49b713ac222346cebf60f2247a05b5659a36 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Mon, 13 Nov 2023 16:32:34 -0300 Subject: [PATCH 13/15] replace the 'split' term with 'feature flag' --- src/__tests__/SplitTreatments.test.tsx | 4 ++-- src/__tests__/useSplitTreatments.test.tsx | 4 ++-- src/types.ts | 4 ++-- src/utils.ts | 4 ++-- types/types.d.ts | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/__tests__/SplitTreatments.test.tsx b/src/__tests__/SplitTreatments.test.tsx index f3c2f56..29e641c 100644 --- a/src/__tests__/SplitTreatments.test.tsx +++ b/src/__tests__/SplitTreatments.test.tsx @@ -136,8 +136,8 @@ describe('SplitTreatments', () => { }} ); - expect(logSpy).toBeCalledWith('[ERROR] split names must be a non-empty array.'); - expect(logSpy).toBeCalledWith('[ERROR] you passed an invalid split name, split name must be a non-empty string.'); + expect(logSpy).toBeCalledWith('[ERROR] feature flag names must be a non-empty array.'); + expect(logSpy).toBeCalledWith('[ERROR] you passed an invalid feature flag name, feature flag name must be a non-empty string.'); done(); }); diff --git a/src/__tests__/useSplitTreatments.test.tsx b/src/__tests__/useSplitTreatments.test.tsx index f5000d6..168bf0e 100644 --- a/src/__tests__/useSplitTreatments.test.tsx +++ b/src/__tests__/useSplitTreatments.test.tsx @@ -152,8 +152,8 @@ describe('useSplitTreatments', () => { return null; }) ); - expect(logSpy).toBeCalledWith('[ERROR] split names must be a non-empty array.'); - expect(logSpy).toBeCalledWith('[ERROR] you passed an invalid split name, split name must be a non-empty string.'); + expect(logSpy).toBeCalledWith('[ERROR] feature flag names must be a non-empty array.'); + expect(logSpy).toBeCalledWith('[ERROR] you passed an invalid feature flag name, feature flag name must be a non-empty string.'); }); test('useSplitTreatments must update on SDK events', async () => { diff --git a/src/types.ts b/src/types.ts index 42d2a85..0a9ecdd 100644 --- a/src/types.ts +++ b/src/types.ts @@ -191,8 +191,8 @@ export interface ISplitTreatmentsChildProps extends ISplitContextValues { * An object with the treatments with configs for a bulk of feature flags, returned by client.getTreatmentsWithConfig(). * Each existing configuration is a stringified version of the JSON you defined on the Split user interface. For example: * { - * split1: { treatment: 'on', config: null } - * split2: { treatment: 'off', config: '{"bannerText":"Click here."}' } + * feature1: { treatment: 'on', config: null } + * feature2: { treatment: 'off', config: '{"bannerText":"Click here."}' } * } */ treatments: SplitIO.TreatmentsWithConfig; diff --git a/src/utils.ts b/src/utils.ts index 5d48611..451582c 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -99,7 +99,7 @@ export function getStatus(client: SplitIO.IBrowserClient | null): ISplitStatus { // Input validation utils that will be replaced eventually -export function validateFeatureFlags(maybeFeatureFlags: unknown, listName = 'split names'): false | string[] { +export function validateFeatureFlags(maybeFeatureFlags: unknown, listName = 'feature flag names'): false | string[] { if (Array.isArray(maybeFeatureFlags) && maybeFeatureFlags.length > 0) { const validatedArray: string[] = []; // Remove invalid values @@ -125,7 +125,7 @@ export function initAttributes(client: SplitIO.IBrowserClient | null, attributes const TRIMMABLE_SPACES_REGEX = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/; -function validateFeatureFlag(maybeFeatureFlag: unknown, item = 'split name'): false | string { +function validateFeatureFlag(maybeFeatureFlag: unknown, item = 'feature flag name'): false | string { if (maybeFeatureFlag == undefined) { console.log(`[ERROR] you passed a null or undefined ${item}, ${item} must be a non-empty string.`); } else if (!isString(maybeFeatureFlag)) { diff --git a/types/types.d.ts b/types/types.d.ts index 0e4c275..d2913bc 100644 --- a/types/types.d.ts +++ b/types/types.d.ts @@ -157,8 +157,8 @@ export interface ISplitTreatmentsChildProps extends ISplitContextValues { * An object with the treatments with configs for a bulk of feature flags, returned by client.getTreatmentsWithConfig(). * Each existing configuration is a stringified version of the JSON you defined on the Split user interface. For example: * { - * split1: { treatment: 'on', config: null } - * split2: { treatment: 'off', config: '{"bannerText":"Click here."}' } + * feature1: { treatment: 'on', config: null } + * feature2: { treatment: 'off', config: '{"bannerText":"Click here."}' } * } */ treatments: SplitIO.TreatmentsWithConfig; From dadcdc68574d14d4371fd56bcdd0642ea340a093 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Tue, 14 Nov 2023 11:11:11 -0300 Subject: [PATCH 14/15] Add 'types' folder to .gitignore, because it's generated by the build script --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 568cd2b..204ddd1 100644 --- a/.gitignore +++ b/.gitignore @@ -4,5 +4,6 @@ /lib /es /umd +/types /coverage .scannerwork From ecd1b0c824efd154c90923917da48a27724868d6 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Tue, 14 Nov 2023 11:19:44 -0300 Subject: [PATCH 15/15] Stop versioning 'types' folder. No need to track since it's auto-generated code --- types/SplitClient.d.ts | 64 ------------ types/SplitContext.d.ts | 9 -- types/SplitFactory.d.ts | 26 ----- types/SplitTreatments.d.ts | 14 --- types/constants.d.ts | 11 -- types/index.d.ts | 15 --- types/types.d.ts | 183 --------------------------------- types/useClient.d.ts | 11 -- types/useManager.d.ts | 9 -- types/useSplitClient.d.ts | 21 ---- types/useSplitTreatments.d.ts | 15 --- types/useTrack.d.ts | 8 -- types/useTreatments.d.ts | 11 -- types/utils.d.ts | 38 ------- types/withSplitClient.d.ts | 11 -- types/withSplitFactory.d.ts | 11 -- types/withSplitTreatments.d.ts | 11 -- 17 files changed, 468 deletions(-) delete mode 100644 types/SplitClient.d.ts delete mode 100644 types/SplitContext.d.ts delete mode 100644 types/SplitFactory.d.ts delete mode 100644 types/SplitTreatments.d.ts delete mode 100644 types/constants.d.ts delete mode 100644 types/index.d.ts delete mode 100644 types/types.d.ts delete mode 100644 types/useClient.d.ts delete mode 100644 types/useManager.d.ts delete mode 100644 types/useSplitClient.d.ts delete mode 100644 types/useSplitTreatments.d.ts delete mode 100644 types/useTrack.d.ts delete mode 100644 types/useTreatments.d.ts delete mode 100644 types/utils.d.ts delete mode 100644 types/withSplitClient.d.ts delete mode 100644 types/withSplitFactory.d.ts delete mode 100644 types/withSplitTreatments.d.ts diff --git a/types/SplitClient.d.ts b/types/SplitClient.d.ts deleted file mode 100644 index eb11670..0000000 --- a/types/SplitClient.d.ts +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; -import { ISplitClientProps, ISplitContextValues, IUpdateProps } from './types'; -/** - * Common component used to handle the status and events of a Split client passed as prop. - * Reused by both SplitFactory (main client) and SplitClient (shared client) components. - */ -export declare class SplitComponent extends React.Component { - static defaultProps: { - updateOnSdkUpdate: boolean; - updateOnSdkTimedout: boolean; - updateOnSdkReady: boolean; - updateOnSdkReadyFromCache: boolean; - children: null; - factory: null; - client: null; - }; - static getDerivedStateFromProps(props: ISplitClientProps & { - factory: SplitIO.IBrowserSDK | null; - client: SplitIO.IBrowserClient | null; - }, state: ISplitContextValues): { - isReady: boolean; - isReadyFromCache: boolean; - isTimedout: boolean; - hasTimedout: boolean; - isDestroyed: boolean; - lastUpdate: number; - client: import("@splitsoftware/splitio/types/splitio").IBrowserClient | null; - factory: import("@splitsoftware/splitio/types/splitio").IBrowserSDK | null; - } | null; - readonly state: Readonly; - constructor(props: ISplitClientProps & { - factory: SplitIO.IBrowserSDK | null; - client: SplitIO.IBrowserClient | null; - }); - subscribeToEvents(client: SplitIO.IBrowserClient | null): void; - unsubscribeFromEvents(client: SplitIO.IBrowserClient | null): void; - setReady: () => void; - setReadyFromCache: () => void; - setTimedout: () => void; - setUpdate: () => void; - componentDidMount(): void; - componentDidUpdate(prevProps: ISplitClientProps & { - factory: SplitIO.IBrowserSDK | null; - client: SplitIO.IBrowserClient | null; - }): void; - componentWillUnmount(): void; - render(): JSX.Element; -} -/** - * SplitClient will initialize a new SDK client and listen for its events in order to update the Split Context. - * Children components will have access to the new client when accessing Split Context. - * - * Unlike SplitFactory, the underlying SDK client can be changed during the component lifecycle - * if the component is updated with a different splitKey or trafficType prop. Since the client can change, - * its release is not handled by SplitClient but by its container SplitFactory component. - * - * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#advanced-instantiate-multiple-sdk-clients} - */ -export declare function SplitClient(props: ISplitClientProps): JSX.Element; diff --git a/types/SplitContext.d.ts b/types/SplitContext.d.ts deleted file mode 100644 index def9f03..0000000 --- a/types/SplitContext.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { ISplitContextValues } from './types'; -export declare const INITIAL_CONTEXT: ISplitContextValues; -/** - * Split Context is the React Context instance that represents our SplitIO global state. - * It contains Split SDK objects, such as a factory instance, a client and its status (isReady, isTimedout, lastUpdate) - * The context is created with default empty values, that eventually SplitFactory and SplitClient access and update. - */ -export declare const SplitContext: React.Context; diff --git a/types/SplitFactory.d.ts b/types/SplitFactory.d.ts deleted file mode 100644 index 34f8d5a..0000000 --- a/types/SplitFactory.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { ISplitFactoryProps } from './types'; -/** - * SplitFactory will initialize the Split SDK and its main client, listen for its events in order to update the Split Context, - * and automatically shutdown and release resources when it is unmounted. SplitFactory must wrap other components and functions - * from this library, since they access the Split Context and its elements (factory, clients, etc). - * - * The underlying SDK factory and client is set on the constructor, and cannot be changed during the component lifecycle, - * even if the component is updated with a different config or factory prop. - * - * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK} - */ -export declare class SplitFactory extends React.Component { - static defaultProps: ISplitFactoryProps; - readonly state: Readonly<{ - factory: SplitIO.IBrowserSDK | null; - client: SplitIO.IBrowserClient | null; - }>; - readonly isFactoryExternal: boolean; - constructor(props: ISplitFactoryProps); - componentWillUnmount(): void; - render(): JSX.Element; -} diff --git a/types/SplitTreatments.d.ts b/types/SplitTreatments.d.ts deleted file mode 100644 index 70e213a..0000000 --- a/types/SplitTreatments.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { ISplitTreatmentsProps } from './types'; -/** - * SplitTreatments accepts a list of feature flag names and optional attributes. It access the client at SplitContext to - * call 'client.getTreatmentsWithConfig()' method, and passes the returned treatments to a child as a function. - * - * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#get-treatments-with-configurations} - */ -export declare class SplitTreatments extends React.Component { - private logWarning?; - private evaluateFeatureFlags; - render(): JSX.Element; - componentDidMount(): void; -} diff --git a/types/constants.d.ts b/types/constants.d.ts deleted file mode 100644 index e382449..0000000 --- a/types/constants.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -export declare const VERSION: string; -export declare const ON: SplitIO.Treatment; -export declare const OFF: SplitIO.Treatment; -export declare const CONTROL: SplitIO.Treatment; -export declare const CONTROL_WITH_CONFIG: SplitIO.TreatmentWithConfig; -export declare const getControlTreatmentsWithConfig: (featureFlagNames: unknown) => SplitIO.TreatmentsWithConfig; -export declare const WARN_SF_CONFIG_AND_FACTORY: string; -export declare const ERROR_SF_NO_CONFIG_AND_FACTORY: string; -export declare const ERROR_SC_NO_FACTORY: string; -export declare const WARN_ST_NO_CLIENT: string; -export declare const EXCEPTION_NO_REACT_OR_CREATECONTEXT: string; diff --git a/types/index.d.ts b/types/index.d.ts deleted file mode 100644 index 76e03f3..0000000 --- a/types/index.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -export { SplitFactory as SplitSdk } from '@splitsoftware/splitio/client'; -export { withSplitFactory } from './withSplitFactory'; -export { withSplitClient } from './withSplitClient'; -export { withSplitTreatments } from './withSplitTreatments'; -export { SplitTreatments } from './SplitTreatments'; -export { SplitClient } from './SplitClient'; -export { SplitFactory } from './SplitFactory'; -export { useClient } from './useClient'; -export { useTreatments } from './useTreatments'; -export { useTrack } from './useTrack'; -export { useManager } from './useManager'; -export { useSplitClient } from './useSplitClient'; -export { useSplitTreatments } from './useSplitTreatments'; -export { SplitContext } from './SplitContext'; -export type { ISplitClientChildProps, ISplitClientProps, ISplitContextValues, ISplitFactoryChildProps, ISplitFactoryProps, ISplitStatus, ISplitTreatmentsChildProps, ISplitTreatmentsProps, IUpdateProps } from './types'; diff --git a/types/types.d.ts b/types/types.d.ts deleted file mode 100644 index d2913bc..0000000 --- a/types/types.d.ts +++ /dev/null @@ -1,183 +0,0 @@ -import SplitIO from '@splitsoftware/splitio/types/splitio'; -import type { ReactNode } from 'react'; -/** - * Split Status interface. It represents the current readiness state of the SDK. - */ -export interface ISplitStatus { - /** - * isReady indicates if the Split SDK client has triggered an SDK_READY event and thus is ready to be consumed. - */ - isReady: boolean; - /** - * isReadyFromCache indicates if the Split SDK client has triggered an SDK_READY_FROM_CACHE event and thus is ready to be consumed, - * although the data in cache might be stale. - */ - isReadyFromCache: boolean; - /** - * isTimedout indicates if the Split SDK client has triggered an SDK_READY_TIMED_OUT event and is not ready to be consumed. - */ - isTimedout: boolean; - /** - * hasTimedout indicates if the Split SDK client has ever triggered an SDK_READY_TIMED_OUT event. - * It's meant to keep a reference that the SDK emitted a timeout at some point, not the current state. - */ - hasTimedout: boolean; - /** - * isDestroyed indicates if the Split SDK client has been destroyed. - */ - isDestroyed: boolean; - /** - * Indicates when was the last status event, either SDK_READY, SDK_READY_FROM_CACHE, SDK_READY_TIMED_OUT or SDK_UPDATE. - */ - lastUpdate: number; -} -/** - * Split Context Value interface. It is used to define the value types of Split Context - */ -export interface ISplitContextValues extends ISplitStatus { - /** - * Split factory instance - */ - factory: SplitIO.IBrowserSDK | null; - /** - * Split client instance - * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#2-instantiate-the-sdk-and-create-a-new-split-client} - */ - client: SplitIO.IBrowserClient | null; -} -/** - * Update Props interface. It defines the props used to configure what SDK events are listened to update the Split context. - * Only `SDK_UPDATE` and `SDK_READY_TIMED_OUT` are configurable. - * The `SDK_READY` event is always listened to update the Split context value 'isReady'. - */ -export interface IUpdateProps { - /** - * updateOnSdkUpdate indicates if the component will update the `SplitContext` in case of a `SDK_UPDATE` event. - * If true, components consuming the context (such as `SplitClient` and `SplitTreatments`) will re-render on SDK_UPDATE. - * It's value is false by default. - */ - updateOnSdkUpdate?: boolean; - /** - * updateOnSdkTimedout indicates if the component will update the `SplitContext` in case of a `SDK_READY_TIMED_OUT` event. - * If true, components consuming the context (such as `SplitClient` and `SplitTreatments`) will re-render on SDK_READY_TIMED_OUT. - * It's value is false by default. - */ - updateOnSdkTimedout?: boolean; - /** - * updateOnSdkReady indicates if the component will update the `SplitContext` in case of a `SDK_READY` event. - * If true, components consuming the context (such as `SplitClient` and `SplitTreatments`) will re-render on SDK_READY. - * It's value is true by default. - */ - updateOnSdkReady?: boolean; - /** - * updateOnSdkReadyFromCache indicates if the component will update the `SplitContext` in case of a `SDK_READY_FROM_CACHE` event. - * If true, components consuming the context (such as `SplitClient` and `SplitTreatments`) will re-render on SDK_READY_FROM_CACHE. - * This params is only relevant when using 'LOCALSTORAGE' as storage type, since otherwise the event is never emitted. - * It's value is true by default. - */ - updateOnSdkReadyFromCache?: boolean; -} -/** - * SplitFactory Child Props interface. These are the props that the child component receives from the 'SplitFactory' component. - */ -export interface ISplitFactoryChildProps extends ISplitContextValues { -} -/** - * SplitFactory Props interface. These are the props accepted by SplitFactory component, - * used to instantiate a factory and client instance, update the Split context, and listen for SDK events. - */ -export interface ISplitFactoryProps extends IUpdateProps { - /** - * Config object used to instantiate a Split factory - * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#configuration} - */ - config?: SplitIO.IBrowserSettings; - /** - * Split factory instance to use instead of creating a new one with the config object. - */ - factory?: SplitIO.IBrowserSDK; - /** - * An object of type Attributes used to evaluate the feature flags. - */ - attributes?: SplitIO.Attributes; - /** - * Children of the SplitFactory component. It can be a functional component (child as a function) or a React element. - */ - children: ((props: ISplitFactoryChildProps) => ReactNode) | ReactNode; -} -/** - * useSplitClient options interface. This is the options object accepted by useSplitClient hook, - * used to retrieve a client instance with the Split context, and listen for SDK events. - */ -export interface IUseSplitClientOptions extends IUpdateProps { - /** - * The customer identifier. - */ - splitKey?: SplitIO.SplitKey; - /** - * Traffic type associated with the customer identifier. - * If no provided here or at the config object, it will be required on the client.track() calls. - */ - trafficType?: string; - /** - * An object of type Attributes used to evaluate the feature flags. - */ - attributes?: SplitIO.Attributes; -} -/** - * SplitClient Child Props interface. These are the props that the child component receives from the 'SplitClient' component. - */ -export interface ISplitClientChildProps extends ISplitContextValues { -} -/** - * SplitClient Props interface. These are the props accepted by SplitClient component, - * used to instantiate a new client instance, update the Split context, and listen for SDK events. - */ -export interface ISplitClientProps extends IUseSplitClientOptions { - /** - * Children of the SplitFactory component. It can be a functional component (child as a function) or a React element. - */ - children: ((props: ISplitClientChildProps) => ReactNode) | ReactNode; -} -/** - * useSplitTreatments options interface. This is the options object accepted by useSplitTreatments hook, - * used to call 'client.getTreatmentsWithConfig()' and retrieve the result together with the Split context. - */ -export interface IUseSplitTreatmentsOptions extends IUseSplitClientOptions { - /** - * list of feature flag names - */ - names: string[]; -} -/** - * SplitTreatments Child Props interface. These are the props that the child component receives from the 'SplitTreatments' component. - */ -export interface ISplitTreatmentsChildProps extends ISplitContextValues { - /** - * An object with the treatments with configs for a bulk of feature flags, returned by client.getTreatmentsWithConfig(). - * Each existing configuration is a stringified version of the JSON you defined on the Split user interface. For example: - * { - * feature1: { treatment: 'on', config: null } - * feature2: { treatment: 'off', config: '{"bannerText":"Click here."}' } - * } - */ - treatments: SplitIO.TreatmentsWithConfig; -} -/** - * SplitTreatments Props interface. These are the props accepted by SplitTreatments component, - * used to call 'client.getTreatmentsWithConfig()' and pass the result to the child component. - */ -export interface ISplitTreatmentsProps { - /** - * list of feature flag names - */ - names: string[]; - /** - * An object of type Attributes used to evaluate the feature flags. - */ - attributes?: SplitIO.Attributes; - /** - * Children of the SplitTreatments component. It must be a functional component (child as a function) you want to show. - */ - children: ((props: ISplitTreatmentsChildProps) => ReactNode); -} diff --git a/types/useClient.d.ts b/types/useClient.d.ts deleted file mode 100644 index 3369a1a..0000000 --- a/types/useClient.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * 'useClient' is a hook that returns a client from the Split context. - * It uses the 'useContext' hook to access the context, which is updated by - * SplitFactory and SplitClient components in the hierarchy of components. - * - * @return A Split Client instance, or null if used outside the scope of SplitFactory - * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#advanced-instantiate-multiple-sdk-clients} - * - * @deprecated Replace with the new `useSplitClient` hook. - */ -export declare function useClient(splitKey?: SplitIO.SplitKey, trafficType?: string, attributes?: SplitIO.Attributes): SplitIO.IBrowserClient | null; diff --git a/types/useManager.d.ts b/types/useManager.d.ts deleted file mode 100644 index 68257aa..0000000 --- a/types/useManager.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * 'useManager' is a hook that returns the Manager instance from the Split factory. - * It uses the 'useContext' hook to access the factory at Split context, which is updated by - * the SplitFactory component. - * - * @return A Split Manager instance, or null if used outside the scope of SplitFactory - * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#manager} - */ -export declare function useManager(): SplitIO.IManager | null; diff --git a/types/useSplitClient.d.ts b/types/useSplitClient.d.ts deleted file mode 100644 index b4dc1ea..0000000 --- a/types/useSplitClient.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ISplitContextValues, IUseSplitClientOptions } from './types'; -export declare const DEFAULT_UPDATE_OPTIONS: { - updateOnSdkUpdate: boolean; - updateOnSdkTimedout: boolean; - updateOnSdkReady: boolean; - updateOnSdkReadyFromCache: boolean; -}; -/** - * 'useSplitClient' is a hook that returns an Split Context object with the client and its status corresponding to the provided key and trafficType. - * It uses the 'useContext' hook to access the context, which is updated by SplitFactory and SplitClient components in the hierarchy of components. - * - * @return A Split Context object - * - * @example - * ```js - * const { factory, client, isReady, isReadyFromCache, hasTimedout, lastUpdate } = useSplitClient({ splitKey: 'user_id' }); - * ``` - * - * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#advanced-instantiate-multiple-sdk-clients} - */ -export declare function useSplitClient(options?: IUseSplitClientOptions): ISplitContextValues; diff --git a/types/useSplitTreatments.d.ts b/types/useSplitTreatments.d.ts deleted file mode 100644 index 1f19619..0000000 --- a/types/useSplitTreatments.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { ISplitTreatmentsChildProps, IUseSplitTreatmentsOptions } from './types'; -/** - * 'useSplitTreatments' is a hook that returns an SplitContext object extended with a `treatments` property object that contains feature flag evaluations. - * It uses the 'useSplitClient' hook to access the client from the Split context, and invokes the 'getTreatmentsWithConfig' method. - * - * @return A Split Context object extended with a TreatmentsWithConfig instance, that might contain control treatments if the client is not available or ready, or if feature flag names do not exist. - * - * @example - * ```js - * const { treatments: { feature_1, feature_2 }, isReady, isReadyFromCache, hasTimedout, lastUpdate, ... } = useSplitTreatments({ names: ['feature_1', 'feature_2']}); - * ``` - * - * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#get-treatments-with-configurations} - */ -export declare function useSplitTreatments(options: IUseSplitTreatmentsOptions): ISplitTreatmentsChildProps; diff --git a/types/useTrack.d.ts b/types/useTrack.d.ts deleted file mode 100644 index ff25094..0000000 --- a/types/useTrack.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * 'useTrack' is a hook that returns the track method from a Split client. - * It uses the 'useContext' hook to access the client from the Split context. - * - * @return A track function bound to a Split client. If the client is not available, the result is a no-op function that returns false. - * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#track} - */ -export declare function useTrack(splitKey?: SplitIO.SplitKey, trafficType?: string): SplitIO.IBrowserClient['track']; diff --git a/types/useTreatments.d.ts b/types/useTreatments.d.ts deleted file mode 100644 index a5d25e1..0000000 --- a/types/useTreatments.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * 'useTreatments' is a hook that returns an object of feature flag evaluations (i.e., treatments). - * It uses the 'useContext' hook to access the client from the Split context, - * and invokes the 'getTreatmentsWithConfig' method. - * - * @return A TreatmentsWithConfig instance, that might contain control treatments if the client is not available or ready, or if feature flag names do not exist. - * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#get-treatments-with-configurations} - * - * @deprecated Replace with the new `useSplitTreatments` hook. - */ -export declare function useTreatments(featureFlagNames: string[], attributes?: SplitIO.Attributes, splitKey?: SplitIO.SplitKey): SplitIO.TreatmentsWithConfig; diff --git a/types/utils.d.ts b/types/utils.d.ts deleted file mode 100644 index 942eb0d..0000000 --- a/types/utils.d.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { ISplitStatus } from './types'; -/** - * ClientWithContext interface. - */ -export interface IClientWithContext extends SplitIO.IBrowserClient { - __getStatus(): { - isReady: boolean; - isReadyFromCache: boolean; - isOperational: boolean; - hasTimedout: boolean; - isDestroyed: boolean; - }; - lastUpdate: number; -} -/** - * FactoryWithClientInstances interface. - */ -export interface IFactoryWithClients extends SplitIO.IBrowserSDK { - clientInstances: Set; - config: SplitIO.IBrowserSettings; -} -export declare const __factories: Map; -export declare function getSplitFactory(config: SplitIO.IBrowserSettings): IFactoryWithClients; -export declare function getSplitClient(factory: SplitIO.IBrowserSDK, key?: SplitIO.SplitKey, trafficType?: string): IClientWithContext; -export declare function destroySplitFactory(factory: IFactoryWithClients): Promise; -export declare function getStatus(client: SplitIO.IBrowserClient | null): ISplitStatus; -export declare function validateFeatureFlags(maybeFeatureFlags: unknown, listName?: string): false | string[]; -/** - * Manage client attributes binding - */ -export declare function initAttributes(client: SplitIO.IBrowserClient | null, attributes?: SplitIO.Attributes): void; -/** - * Gets a memoized version of the `client.getTreatmentsWithConfig` method. - * It is used to avoid duplicated impressions, because the result treatments are the same given the same `client` instance, `lastUpdate` timestamp, and list of feature flag `names` and `attributes`. - */ -export declare function memoizeGetTreatmentsWithConfig(): typeof evaluateFeatureFlags; -declare function evaluateFeatureFlags(client: SplitIO.IBrowserClient, lastUpdate: number, names: SplitIO.SplitNames, attributes?: SplitIO.Attributes, _clientAttributes?: SplitIO.Attributes): import("@splitsoftware/splitio/types/splitio").TreatmentsWithConfig; -export {}; diff --git a/types/withSplitClient.d.ts b/types/withSplitClient.d.ts deleted file mode 100644 index 5a98bcf..0000000 --- a/types/withSplitClient.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { ISplitClientChildProps } from './types'; -/** - * High-Order Component for SplitClient. - * The wrapped component receives all the props of the container, - * along with the passed props from SplitClient (see ISplitClientChildProps). - * - * @param splitKey The customer identifier. - * @param trafficType Traffic type associated with the customer identifier. If no provided here or at the config object, it will be required on the client.track() calls. - */ -export declare function withSplitClient(splitKey: SplitIO.SplitKey, trafficType?: string, attributes?: SplitIO.Attributes): (WrappedComponent: React.ComponentType, updateOnSdkUpdate?: boolean, updateOnSdkTimedout?: boolean, updateOnSdkReady?: boolean, updateOnSdkReadyFromCache?: boolean) => (props: OuterProps) => JSX.Element; diff --git a/types/withSplitFactory.d.ts b/types/withSplitFactory.d.ts deleted file mode 100644 index 183ac37..0000000 --- a/types/withSplitFactory.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { ISplitFactoryChildProps } from './types'; -/** - * High-Order Component for SplitFactory. - * The wrapped component receives all the props of the container, - * along with the passed props from SplitFactory (see ISplitFactoryChildProps). - * - * @param config Config object used to instantiate a Split factory - * @param factory Split factory instance to use instead of creating a new one with the config object. - */ -export declare function withSplitFactory(config?: SplitIO.IBrowserSettings, factory?: SplitIO.IBrowserSDK, attributes?: SplitIO.Attributes): (WrappedComponent: React.ComponentType, updateOnSdkUpdate?: boolean, updateOnSdkTimedout?: boolean, updateOnSdkReady?: boolean, updateOnSdkReadyFromCache?: boolean) => (props: OuterProps) => JSX.Element; diff --git a/types/withSplitTreatments.d.ts b/types/withSplitTreatments.d.ts deleted file mode 100644 index 848c42e..0000000 --- a/types/withSplitTreatments.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { ISplitTreatmentsChildProps } from './types'; -/** - * High-Order Component for SplitTreatments. - * The wrapped component receives all the props of the container, - * along with the passed props from SplitTreatments (see ISplitTreatmentsChildProps). - * - * @param names list of feature flag names - * @param attributes An object of type Attributes used to evaluate the feature flags. - */ -export declare function withSplitTreatments(names: string[], attributes?: SplitIO.Attributes): (WrappedComponent: React.ComponentType) => (props: OuterProps) => JSX.Element;