Update changelog entry

CHANGES.txt

@@ -5,11 +5,13 @@
  - Renamed distribution folders from `/lib` to `/cjs` for CommonJS build, and `/es` to `/esm` for ECMAScript Modules build.
  - Bugfixing - When the `config` prop is provided, the `SplitFactoryProvider` now makes the SDK factory and client instances available in the context immediately during the initial render, instead of waiting for the first SDK event (Related to https://github.com/splitio/react-client/issues/198). This change fixes a bug in the `useTrack` hook, which was not retrieving the client's `track` method during the initial render.
  - BREAKING CHANGES:
+      - Updated the default value of the `updateOnSdkUpdate` and `updateOnSdkTimedout` parameters of the `useSplitClient` and `useSplitTreatments` hooks options object to `true`, to re-render by default when the SDK client emits the `SDK_UPDATE` or `SDK_READY_TIMED_OUT` events. The same applies for the equivalent props in the `[with]SplitClient` and `[with]SplitTreatments` components.
       - Updated error handling: using the library modules without wrapping them in a `SplitFactoryProvider` component will now throw an error instead of logging it, as the modules requires the `SplitContext` to work properly.
-      - Removed the `core.trafficType` configuration option and the `trafficType` parameter from the SDK `client()` method, `useSplitClient`, `useTrack`, and `SplitClient` component. This is because traffic types can no longer be bound to SDK clients in JavaScript SDK v11.0.0, and so the traffic type must be provided as first argument in the `track` method calls.
-      - Removed deprecated modules: `SplitFactory` component, `useClient`, `useTreatments` and `useManager` hooks, and `withSplitFactory`, `withSplitClient` and `withSplitTreatments` high-order components. Refer to ./MIGRATION-GUIDE.md for instructions on how to migrate to the new alternatives.
-      - Renamed some TypeScript interfaces: `ISplitFactoryProps` to `ISplitFactoryProviderProps`, and `ISplitFactoryChildProps` to `ISplitFactoryProviderChildProps`.
+      - Updated the `SplitFactoryProvider` component to not accept a child as a function (render prop), to avoid unnecessary re-renders when using the library hooks. Refer to ./MIGRATION-GUIDE.md for instructions on how to migrate the child as a function to a regular component.
+      - Removed the `core.trafficType` option from the SDK configuration object, and the `trafficType` parameter from the SDK `client()` method, `useSplitClient`, `useTrack`, `withSplitClient` and `SplitClient` component. This is because traffic types can no longer be bound to SDK clients in JavaScript SDK v11.0.0, and so the traffic type must be provided as first argument in the `track` method calls.
+      - Removed deprecated modules: `SplitFactory` component, `useClient`, `useTreatments` and `useManager` hooks. Refer to ./MIGRATION-GUIDE.md for instructions on how to migrate to the new alternatives.
       - Renamed `SplitSdk` to `SplitFactory` function, which is the underlying Split SDK factory, i.e., `import { SplitFactory } from '@splitsoftware/splitio'`.
+      - Renamed TypeScript interface: `ISplitFactoryProps` to `ISplitFactoryProviderProps`.
       - Dropped support for React below 16.8.0, as the library components where rewritten using the React Hooks API available in React v16.8.0 and above. This refactor simplifies code maintenance and reduces bundle size.
 
 1.13.0 (September 6, 2024)

src/__tests__/useSplitManager.test.tsx

@@ -12,13 +12,14 @@ import { getStatus } from '../utils';
 
 /** Test target */
 import { SplitFactoryProvider } from '../SplitFactoryProvider';
+import { SplitClient } from '../SplitClient';
 import { useSplitManager } from '../useSplitManager';
 import { EXCEPTION_NO_SFP } from '../constants';
 import { INITIAL_STATUS } from './testUtils/utils';
 
 describe('useSplitManager', () => {
 
-  test('returns the factory manager from the Split context, and updates on SDK events.', () => {
+  test('returns the factory manager and its status, and updates on SDK events.', () => {
     const outerFactory = SplitFactory(sdkBrowser);
     let hookResult;
     render(
@@ -63,4 +64,42 @@ describe('useSplitManager', () => {
     }).toThrow(EXCEPTION_NO_SFP);
   });
 
+  // @TODO remove next test case when `SplitClient` is removed.
+  test('returns the factory manager and its status, even if the Split context was updated by an SplitClient component', () => {
+    const outerFactory = SplitFactory(sdkBrowser);
+    let hookResult;
+    render(
+      <SplitFactoryProvider factory={outerFactory} >
+        <SplitClient splitKey={'other-user'} >
+          {React.createElement(() => {
+            hookResult = useSplitManager();
+            return null;
+          })}
+        </SplitClient>
+      </SplitFactoryProvider >
+    );
+
+    expect(hookResult).toStrictEqual({
+      manager: outerFactory.manager(),
+      client: outerFactory.client(),
+      factory: outerFactory,
+      ...INITIAL_STATUS,
+    });
+
+    act(() => (outerFactory.client() as any).__emitter__.emit(Event.SDK_READY));
+    // act(() => (outerFactory.client() as any).__emitter__.emit(Event.SDK_READY));
+
+    expect(hookResult).toStrictEqual({
+      manager: outerFactory.manager(),
+      client: outerFactory.client(),
+      factory: outerFactory,
+      hasTimedout: false,
+      isDestroyed: false,
+      isReady: true,
+      isReadyFromCache: false,
+      isTimedout: false,
+      lastUpdate: getStatus(outerFactory.client()).lastUpdate,
+    });
+  });
+
 });

src/types.ts

@@ -47,7 +47,7 @@ export interface ISplitContextValues extends ISplitStatus {
   /**
    * Split factory instance.
    *
-   * NOTE: This property is available for accessing factory methods not covered by the hooks,
+   * NOTE: This property is available for accessing factory methods not covered by the library hooks,
    * such as Logging configuration and User Consent.
    * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#logging}),
    * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#user-consent}
@@ -110,7 +110,7 @@ export interface ISplitFactoryChildProps extends ISplitContextValues { }
 
 /**
  * SplitFactoryProvider Props interface. These are the props accepted by the `SplitFactoryProvider` component,
- * used to instantiate a factory instance and provide it to the Split Context.
+ * used to instantiate a factory and provide it to the Split Context.
  */
 export interface ISplitFactoryProviderProps {
 
@@ -122,6 +122,7 @@ export interface ISplitFactoryProviderProps {
 
   /**
    * Split factory instance to use instead of creating a new one with the `config` object.
+   *
    * If both `factory` and `config` are provided, the `config` prop is ignored.
    */
   factory?: SplitIO.IBrowserSDK;
@@ -143,7 +144,8 @@ export interface ISplitFactoryProviderProps {
 export interface IUseSplitClientOptions extends IUpdateProps {
 
   /**
-   * The customer identifier. If not provided, the hook will use the default client (i.e., `factory.client()`), which `key` was provided in the factory configuration object.
+   * The customer identifier. If not provided, the hook will use the client available in the Split context, which is the default client by default (i.e., `factory.client()`),
+   * except the hook is wrapped by a `SplitClient` component, in which case the Split context might be updated with a different client.
    */
   splitKey?: SplitIO.SplitKey;
 

src/useSplitClient.ts

@@ -11,7 +11,7 @@ export const DEFAULT_UPDATE_OPTIONS = {
 };
 
 /**
- * 'useSplitClient' is a hook that returns the Split Context object with the client and its status corresponding to the provided key.
+ * `useSplitClient` is a hook that returns an Split Context object with the client and its status corresponding to the provided key.
  *
  * @param options - An options object with an optional `splitKey` to retrieve the client, optional `attributes` to configure the client, and update options to control on which SDK events the hook should update.
  * @returns A Split Context object merged with the client and its status.

src/useSplitManager.ts

@@ -1,8 +1,9 @@
 import { useSplitClient } from './useSplitClient';
 import { IUseSplitManagerResult } from './types';
+import { useSplitContext } from './SplitContext';
 
 /**
- * 'useSplitManager' is a hook that returns the Split Context object with the manager instance from the Split factory.
+ * `useSplitManager` is a hook that returns an Split Context object with the manager instance from the Split factory.
  *
  * @returns A Split Context object merged with the manager and its status.
  *
@@ -14,10 +15,15 @@ import { IUseSplitManagerResult } from './types';
  * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#manager}
  */
 export function useSplitManager(): IUseSplitManagerResult {
-  // Update options are not supported, because updates can be controlled at the SplitFactoryProvider component.
-  const context = useSplitClient();
+  // @TODO refactor next lines to `const context = useSplitClient();` when `SplitClient` is removed
+  // This is required to avoid retrieving the status of a non-default client if context was updated by a `SplitClient` component.
+  const { factory } = useSplitContext();
+  const context = useSplitClient({ splitKey: factory?.settings.core.key });
+
+  const manager = factory ? factory.manager() : undefined;
+
   return {
     ...context,
-    manager: context.factory ? context.factory.manager() : undefined
+    manager,
   };
 }

src/useSplitTreatments.ts

@@ -4,9 +4,9 @@ import { ISplitTreatmentsChildProps, IUseSplitTreatmentsOptions } from './types'
 import { useSplitClient } from './useSplitClient';
 
 /**
- * 'useSplitTreatments' is a hook that returns an Split Context object extended with a `treatments` property object that contains feature flag evaluations.
- * It uses the 'useSplitClient' hook to access the client, and invokes the 'client.getTreatmentsWithConfig()' method if the `names` option is provided,
- * or the 'client.getTreatmentsWithConfigByFlagSets()' method if the `flagSets` option is provided.
+ * `useSplitTreatments` is a hook that returns an Split Context object extended with a `treatments` property object that contains feature flag evaluations.
+ * It uses the `useSplitClient` hook to access the client, and invokes the `client.getTreatmentsWithConfig()` method if the `names` option is provided,
+ * or the `client.getTreatmentsWithConfigByFlagSets()` method if the `flagSets` option is provided.
  *
  * @param options - An options object with a list of feature flag names or flag sets to evaluate, and an optional `attributes` and `splitKey` values to configure the client.
  * @returns 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.

src/useTrack.ts

@@ -4,7 +4,7 @@ import { useSplitClient } from './useSplitClient';
 const noOpFalse = () => false;
 
 /**
- * 'useTrack' is a hook that retrieves the track method from a Split client.
+ * `useTrack` is a hook that retrieves the track method from a Split client.
  *
  * @returns The track method of the Split client for the provided user key. If the client is not available, the result is a no-op function that returns false.
  *

src/withSplitFactory.tsx

@@ -4,7 +4,7 @@ import { SplitFactoryProvider } from './SplitFactoryProvider';
 import { SplitClient } from './SplitClient';
 
 /**
- * High-Order Component for SplitFactoryProvider.
+ * High-Order Component for `SplitFactoryProvider`.
  * The wrapped component receives all the props of the container,
  * along with the passed props from the Split context (see `ISplitFactoryChildProps`).
  *

umd.ts

@@ -1,13 +1,15 @@
 import {
   SplitFactory,
-  SplitFactoryProvider,
+  withSplitFactory, withSplitClient, withSplitTreatments,
+  SplitFactoryProvider, SplitClient, SplitTreatments,
   useSplitClient, useSplitTreatments, useTrack, useSplitManager,
   SplitContext,
 } from './src/index';
 
 export default {
   SplitFactory,
-  SplitFactoryProvider,
+  withSplitFactory, withSplitClient, withSplitTreatments,
+  SplitFactoryProvider, SplitClient, SplitTreatments,
   useSplitClient, useSplitTreatments, useTrack, useSplitManager,
   SplitContext,
 };