Merge pull request #230 from splitio/development

Release v2.1.0

Author: EmilianoSanchez

CHANGES.txt

@@ -1,3 +1,13 @@
+2.1.0 (March 28, 2025)
+ - Added a new optional `properties` argument to the options object of the `useSplitTreatments` hook, allowing to pass a map of properties to append to the generated impressions sent to Split backend. Read more in our docs.
+ - Updated @splitsoftware/splitio package to version 11.2.0 that includes some minor updates:
+      - Added support for the new impressions tracking toggle available on feature flags, both respecting the setting and including the new field being returned on `SplitView` type objects. Read more in our docs.
+      - Added two new configuration options for the SDK's `LOCALSTORAGE` storage type to control the behavior of the persisted rollout plan cache in the browser:
+           - `storage.expirationDays` to specify the validity period of the rollout plan cache in days.
+           - `storage.clearOnInit` to clear the rollout plan cache on SDK initialization.
+      - Updated SDK_READY_FROM_CACHE event when using the `LOCALSTORAGE` storage type to be emitted alongside the SDK_READY event if it has not already been emitted.
+ - Updated the internal imports of React library from default to namespace imports as this is the recommended approach for better compatibility with React, TypeScript, ES modules, and tree shaking (https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports).
+
 2.0.1 (December 4, 2024)
  - Updated @splitsoftware/splitio package to version 11.0.3 that includes some improvements and bugfixes.
  - Updated internal handling of the `updateOnSdkTimedout` param to remove the wrong log "[ERROR] A listener was added for SDK_READY_TIMED_OUT on the SDK, which has already fired and won't be emitted again".

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@splitsoftware/splitio-react",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "A React library to easily integrate and use Split JS SDK",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -63,7 +63,7 @@
   },
   "homepage": "https://github.com/splitio/react-client#readme",
   "dependencies": {
-    "@splitsoftware/splitio": "11.0.3",
+    "@splitsoftware/splitio": "11.2.0",
     "memoize-one": "^5.1.1",
     "shallowequal": "^1.1.0",
     "tslib": "^2.3.1"

package.json

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { SplitContext } from './SplitContext';
 import { ISplitClientProps } from './types';
 import { useSplitClient } from './useSplitClient';

src/SplitClient.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ISplitContextValues } from './types';
 import { EXCEPTION_NO_SFP } from './constants';
 

src/SplitContext.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { ISplitFactoryProviderProps } from './types';
 import { VERSION, WARN_SF_CONFIG_AND_FACTORY } from './constants';

src/SplitFactoryProvider.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { SplitContext } from './SplitContext';
 import { ISplitTreatmentsProps } from './types';

src/SplitTreatments.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { render, act } from '@testing-library/react';
 
 /** Mocks and test utils */

src/__tests__/SplitClient.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { render } from '@testing-library/react';
 import { SplitContext } from '../SplitContext';
 import { SplitFactoryProvider } from '../SplitFactoryProvider';

src/__tests__/SplitContext.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { render, act } from '@testing-library/react';
 
 /** Mocks */

src/__tests__/SplitFactoryProvider.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { render, RenderResult, act } from '@testing-library/react';
 
 /** Mocks */
@@ -189,7 +189,7 @@ describe('SplitTreatments', () => {
     // once operational (SDK_READY_FROM_CACHE), it evaluates feature flags
     act(() => client.__emitter__.emit(Event.SDK_READY_FROM_CACHE));
 
-    expect(client.getTreatmentsWithConfig).toBeCalledWith(featureFlagNames, attributes);
+    expect(client.getTreatmentsWithConfig).toBeCalledWith(featureFlagNames, attributes, undefined);
     expect(client.getTreatmentsWithConfig).toHaveReturnedWith(treatments);
   });
 });

src/__tests__/SplitTreatments.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { render } from '@testing-library/react';
 import { ISplitStatus } from '../../types';
 const { SplitFactory: originalSplitFactory } = jest.requireActual('@splitsoftware/splitio/client');

src/__tests__/testUtils/utils.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { act, render } from '@testing-library/react';
 
 /** Mocks */

src/__tests__/useSplitClient.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { act, render } from '@testing-library/react';
 
 /** Mocks */

src/__tests__/useSplitManager.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { act, render } from '@testing-library/react';
 
 /** Mocks */
@@ -23,6 +23,7 @@ describe('useSplitTreatments', () => {
   const featureFlagNames = ['split1'];
   const flagSets = ['set1'];
   const attributes = { att1: 'att1' };
+  const properties = { prop1: 'prop1' };
 
   test('returns the treatments evaluated by the main client of the factory at Split context, or control if the client is not operational.', () => {
     const outerFactory = SplitFactory(sdkBrowser);
@@ -33,8 +34,8 @@ describe('useSplitTreatments', () => {
     render(
       <SplitFactoryProvider factory={outerFactory} >
         {React.createElement(() => {
-          treatments = useSplitTreatments({ names: featureFlagNames, attributes }).treatments;
-          treatmentsByFlagSets = useSplitTreatments({ flagSets, attributes }).treatments;
+          treatments = useSplitTreatments({ names: featureFlagNames, attributes, properties }).treatments;
+          treatmentsByFlagSets = useSplitTreatments({ flagSets, attributes, properties }).treatments;
 
           // @ts-expect-error Options object must provide either names or flagSets
           expect(useSplitTreatments({}).treatments).toEqual({});
@@ -54,10 +55,10 @@ describe('useSplitTreatments', () => {
     // once operational (SDK_READY), it evaluates feature flags
     act(() => client.__emitter__.emit(Event.SDK_READY));
 
-    expect(client.getTreatmentsWithConfig).toBeCalledWith(featureFlagNames, attributes);
+    expect(client.getTreatmentsWithConfig).toBeCalledWith(featureFlagNames, attributes, { properties });
     expect(client.getTreatmentsWithConfig).toHaveReturnedWith(treatments);
 
-    expect(client.getTreatmentsWithConfigByFlagSets).toBeCalledWith(flagSets, attributes);
+    expect(client.getTreatmentsWithConfigByFlagSets).toBeCalledWith(flagSets, attributes, { properties });
     expect(client.getTreatmentsWithConfigByFlagSets).toHaveReturnedWith(treatmentsByFlagSets);
   });
 
@@ -69,7 +70,7 @@ describe('useSplitTreatments', () => {
     render(
       <SplitFactoryProvider factory={outerFactory} >
         {React.createElement(() => {
-          const treatments = useSplitTreatments({ names: featureFlagNames, attributes, splitKey: 'user2', updateOnSdkUpdate: false }).treatments;
+          const treatments = useSplitTreatments({ names: featureFlagNames, attributes, properties, splitKey: 'user2', updateOnSdkUpdate: false }).treatments;
 
           renderTimes++;
           switch (renderTimes) {
@@ -81,7 +82,7 @@ describe('useSplitTreatments', () => {
             case 2:
             case 3:
               // once operational (SDK_READY or SDK_READY_FROM_CACHE), it evaluates feature flags
-              expect(client.getTreatmentsWithConfig).toHaveBeenLastCalledWith(featureFlagNames, attributes);
+              expect(client.getTreatmentsWithConfig).toHaveBeenLastCalledWith(featureFlagNames, attributes, { properties });
               expect(client.getTreatmentsWithConfig).toHaveLastReturnedWith(treatments);
               break;
             default:
@@ -209,7 +210,7 @@ describe('useSplitTreatments', () => {
     // If useSplitTreatments evaluates with the main client and have default update options, it re-renders for each main client event.
     expect(countUseSplitTreatments).toEqual(4);
     expect(mainClient.getTreatmentsWithConfig).toHaveBeenCalledTimes(3); // when ready from cache, ready and update
-    expect(mainClient.getTreatmentsWithConfig).toHaveBeenLastCalledWith(['split_test'], { att1: 'att1' });
+    expect(mainClient.getTreatmentsWithConfig).toHaveBeenLastCalledWith(['split_test'], { att1: 'att1' }, undefined);
 
     // If useSplitTreatments evaluates with a different client and have default update options, it re-renders for each event of the new client.
     expect(countUseSplitTreatmentsUser2).toEqual(4);
@@ -218,7 +219,7 @@ describe('useSplitTreatments', () => {
     expect(countUseSplitTreatmentsUser2WithoutUpdate).toEqual(3);
     expect(lastUpdateSetUser2WithUpdate.size).toEqual(3);
     expect(user2Client.getTreatmentsWithConfig).toHaveBeenCalledTimes(5); // when ready from cache x2, ready x2 and update x1
-    expect(user2Client.getTreatmentsWithConfig).toHaveBeenLastCalledWith(['split_test'], undefined);
+    expect(user2Client.getTreatmentsWithConfig).toHaveBeenLastCalledWith(['split_test'], undefined, undefined);
   });
 
   test('ignores flagSets and logs a warning if both names and flagSets params are provided.', () => {

src/__tests__/useSplitTreatments.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { render } from '@testing-library/react';
 
 /** Mocks */

src/__tests__/withSplitClient.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { render } from '@testing-library/react';
 
 /** Mocks */

src/__tests__/withSplitFactory.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { act, render } from '@testing-library/react';
 
 /** Mocks */

src/__tests__/withSplitTreatments.test.tsx

@@ -201,6 +201,11 @@ export type GetTreatmentsOptions = ({
    * An object of type Attributes used to evaluate the feature flags.
    */
   attributes?: SplitIO.Attributes;
+
+  /**
+   * Optional properties to append to the generated impression object sent to Split backend.
+   */
+  properties?: SplitIO.Properties;
 }
 
 /**

src/types.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useSplitContext } from './SplitContext';
 import { getSplitClient, initAttributes, getStatus } from './utils';
 import { ISplitContextValues, IUseSplitClientOptions } from './types';

src/useSplitClient.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { memoizeGetTreatmentsWithConfig } from './utils';
 import { ISplitTreatmentsChildProps, IUseSplitTreatmentsOptions } from './types';
 import { useSplitClient } from './useSplitClient';
@@ -21,13 +21,13 @@ import { useSplitClient } from './useSplitClient';
 export function useSplitTreatments(options: IUseSplitTreatmentsOptions): ISplitTreatmentsChildProps {
   const context = useSplitClient({ ...options, attributes: undefined });
   const { client, lastUpdate } = context;
-  const { names, flagSets, attributes } = options;
+  const { names, flagSets, attributes, properties } = options;
 
   const getTreatmentsWithConfig = React.useMemo(memoizeGetTreatmentsWithConfig, []);
 
   // Shallow copy `client.getAttributes` result for memoization, as it returns the same reference unless `client.clearAttributes` is invoked.
   // Note: the same issue occurs with the `names` and `attributes` arguments if they are mutated directly by the user instead of providing a new object.
-  const treatments = getTreatmentsWithConfig(client, lastUpdate, names, attributes, client ? { ...client.getAttributes() } : {}, flagSets);
+  const treatments = getTreatmentsWithConfig(client, lastUpdate, names, attributes, client ? { ...client.getAttributes() } : {}, flagSets, properties && { properties });
 
   return {
     ...context,

src/useSplitTreatments.ts

@@ -150,13 +150,13 @@ function argsAreEqual(newArgs: any[], lastArgs: any[]): boolean {
     shallowEqual(newArgs[5], lastArgs[5]); // flagSets
 }
 
-function evaluateFeatureFlags(client: SplitIO.IBrowserClient | undefined, _lastUpdate: number, names?: SplitIO.SplitNames, attributes?: SplitIO.Attributes, _clientAttributes?: SplitIO.Attributes, flagSets?: string[]) {
+function evaluateFeatureFlags(client: SplitIO.IBrowserClient | undefined, _lastUpdate: number, names?: SplitIO.SplitNames, attributes?: SplitIO.Attributes, _clientAttributes?: SplitIO.Attributes, flagSets?: string[], options?: SplitIO.EvaluationOptions) {
   if (names && flagSets) console.log(WARN_NAMES_AND_FLAGSETS);
 
   return client && (client as IClientWithContext).__getStatus().isOperational && (names || flagSets) ?
     names ?
-      client.getTreatmentsWithConfig(names, attributes) :
-      client.getTreatmentsWithConfigByFlagSets(flagSets!, attributes) :
+      client.getTreatmentsWithConfig(names, attributes, options) :
+      client.getTreatmentsWithConfigByFlagSets(flagSets!, attributes, options) :
     names ?
       getControlTreatmentsWithConfig(names) :
       {} // empty object when evaluating with flag sets and client is not ready

src/utils.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ISplitClientChildProps } from './types';
 import { SplitClient } from './SplitClient';
 

src/withSplitClient.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ISplitFactoryChildProps } from './types';
 import { SplitFactoryProvider } from './SplitFactoryProvider';
 import { SplitClient } from './SplitClient';

src/withSplitFactory.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ISplitTreatmentsChildProps } from './types';
 import { SplitTreatments } from './SplitTreatments';