Upgrade JS SDK v10.29.0: large segments and factory destroy method

.gitignore

@@ -1,8 +1,8 @@
 .DS_Store
 /.vscode
 /node_modules
-/lib
-/es
+/cjs
+/esm
 /umd
 /types
 /coverage

CHANGES.txt

@@ -1,3 +1,8 @@
+1.14.0 (October XX, 2024)
+ - Added support for targeting rules based on large segments for browsers.
+ - Updated @splitsoftware/splitio package to version 10.29.0 that includes minor updates, and updated some transitive dependencies for vulnerability fixes.
+ - Renamed distribution folders from `/lib` to `/cjs` for CommonJS build, and `/es` to `/esm` for EcmaScript Modules build.
+
 1.13.0 (September 6, 2024)
  - Updated @splitsoftware/splitio package to version 10.28.0 that includes minor updates:
       - Added `sync.requestOptions.getHeaderOverrides` configuration option to enhance SDK HTTP request Headers for Authorization Frameworks.

package.json

@@ -1,9 +1,9 @@
 {
   "name": "@splitsoftware/splitio-react",
-  "version": "1.13.0",
+  "version": "1.13.1-rc.0",
   "description": "A React library to easily integrate and use Split JS SDK",
-  "main": "lib/index.js",
-  "module": "es/index.js",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
   "types": "types/index.d.ts",
   "files": [
     "README.md",
@@ -12,17 +12,17 @@
     "LICENSE",
     "CHANGES.txt",
     "src",
-    "lib",
-    "es",
+    "cjs",
+    "esm",
     "types"
   ],
   "sideEffects": false,
   "scripts": {
-    "build:cjs": "rimraf lib/* types/* && tsc -m commonjs --outDir lib -d true --declarationDir types",
-    "build:esm": "rimraf es/* && tsc",
+    "build:cjs": "rimraf cjs/* types/* && tsc -m commonjs --outDir cjs -d true --declarationDir types",
+    "build:esm": "rimraf esm/* && tsc",
     "build:umd": "rimraf umd/* && webpack --config webpack.dev.js --env branch=$BUILD_BRANCH && webpack --config webpack.prod.js --env branch=$BUILD_BRANCH",
     "build": "npm run build:cjs && npm run build:esm && npm run build:umd",
-    "postbuild": "replace 'REACT_SDK_VERSION_NUMBER' $npm_package_version ./lib/constants.js ./es/constants.js ./umd -r",
+    "postbuild": "replace 'REACT_SDK_VERSION_NUMBER' $npm_package_version ./cjs/constants.js ./esm/constants.js ./umd -r",
     "check": "npm run check:lint && npm run check:types",
     "check:lint": "eslint 'src/**/*.ts*'",
     "check:types": "tsc --noEmit",
@@ -63,7 +63,7 @@
   },
   "homepage": "https://github.com/splitio/react-client#readme",
   "dependencies": {
-    "@splitsoftware/splitio": "10.28.0",
+    "@splitsoftware/splitio": "10.28.1-rc.2",
     "memoize-one": "^5.1.1",
     "shallowequal": "^1.1.0",
     "tslib": "^2.3.1"

src/SplitClient.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import { SplitContext } from './SplitContext';
-import { ISplitClientProps, ISplitContextValues, IUpdateProps } from './types';
+import { ISplitClientProps, ISplitContextValues } from './types';
 import { getStatus, getSplitClient, initAttributes, IClientWithContext } from './utils';
 import { DEFAULT_UPDATE_OPTIONS } from './useSplitClient';
 
+type ISplitComponentProps = ISplitClientProps & { factory: SplitIO.IBrowserSDK | null, client: SplitIO.IBrowserClient | null, attributes?: SplitIO.Attributes };
+
 /**
  * Common component used to handle the status and events of a Split client passed as prop.
  * Reused by both SplitFactoryProvider (main client) and SplitClient (any client) components.
  */
-export class SplitComponent extends React.Component<IUpdateProps & { factory: SplitIO.IBrowserSDK | null, client: SplitIO.IBrowserClient | null, attributes?: SplitIO.Attributes, children: any }, ISplitContextValues> {
+export class SplitComponent extends React.Component<ISplitComponentProps, ISplitContextValues> {
 
   static defaultProps = {
     children: null,
@@ -20,7 +22,7 @@ export class SplitComponent extends React.Component<IUpdateProps & { factory: Sp
   // Using `getDerivedStateFromProps` since the state depends on the status of the client in props, which might change over time.
   // It could be avoided by removing the client and its status from the component state.
   // But it implies to have another instance property to use instead of the state, because we need a unique reference value for SplitContext.Provider
-  static getDerivedStateFromProps(props: ISplitClientProps & { factory: SplitIO.IBrowserSDK | null, client: SplitIO.IBrowserClient | null }, state: ISplitContextValues) {
+  static getDerivedStateFromProps(props: ISplitComponentProps, state: ISplitContextValues) {
     const { client, factory, attributes } = props;
     // initAttributes can be called in the `render` method too, but it is better here for separation of concerns
     initAttributes(client, attributes);
@@ -42,7 +44,7 @@ export class SplitComponent extends React.Component<IUpdateProps & { factory: Sp
 
   readonly state: Readonly<ISplitContextValues>;
 
-  constructor(props: ISplitClientProps & { factory: SplitIO.IBrowserSDK | null, client: SplitIO.IBrowserClient | null }) {
+  constructor(props: ISplitComponentProps) {
     super(props);
     const { factory, client } = props;
 
@@ -93,7 +95,7 @@ export class SplitComponent extends React.Component<IUpdateProps & { factory: Sp
     this.subscribeToEvents(this.props.client);
   }
 
-  componentDidUpdate(prevProps: ISplitClientProps & { factory: SplitIO.IBrowserSDK | null, client: SplitIO.IBrowserClient | null }) {
+  componentDidUpdate(prevProps: ISplitComponentProps) {
     if (this.props.client !== prevProps.client) {
       this.unsubscribeFromEvents(prevProps.client);
       this.subscribeToEvents(this.props.client);

src/SplitFactoryProvider.tsx

@@ -28,7 +28,9 @@ export function SplitFactoryProvider(props: ISplitFactoryProps) {
   }
 
   const [configFactory, setConfigFactory] = React.useState<IFactoryWithClients | null>(null);
-  const factory = propFactory || (configFactory && config === configFactory.config ? configFactory : null);
+  const factory = React.useMemo(() => {
+    return propFactory || (configFactory && config === configFactory.config ? configFactory : null);
+  }, [config, propFactory, configFactory]);
   const client = factory ? getSplitClient(factory) : null;
 
   // Effect to initialize and destroy the factory

src/__tests__/SplitFactory.test.tsx

@@ -31,7 +31,7 @@ describe('SplitFactory', () => {
           expect(isTimedout).toBe(false);
           expect(isDestroyed).toBe(false);
           expect(lastUpdate).toBe(0);
-          expect((factory as SplitIO.ISDK).settings.version).toContain('react-');
+          expect((factory as SplitIO.IBrowserSDK).settings.version).toContain('react-');
           return null;
         }}
       </SplitFactory>
@@ -55,7 +55,7 @@ describe('SplitFactory', () => {
           expect(isTimedout).toBe(false);
           expect(isDestroyed).toBe(false);
           expect(lastUpdate).toBe((outerFactory.client() as IClientWithContext).__getStatus().lastUpdate);
-          expect((factory as SplitIO.ISDK).settings.version).toBe(outerFactory.settings.version);
+          expect((factory as SplitIO.IBrowserSDK).settings.version).toBe(outerFactory.settings.version);
           return null;
         }}
       </SplitFactory>
@@ -239,7 +239,7 @@ describe('SplitFactory', () => {
       <SplitFactory config={sdkBrowser} >
         {({ factory }) => {
           expect(__factories.size).toBe(1);
-          destroyMainClientSpy = jest.spyOn((factory as SplitIO.ISDK).client(), 'destroy');
+          destroyMainClientSpy = jest.spyOn((factory as SplitIO.IBrowserSDK).client(), 'destroy');
           return (
             <SplitClient splitKey='other_key' >
               {({ client }) => {
@@ -267,7 +267,7 @@ describe('SplitFactory', () => {
         {({ factory }) => {
           // if factory is provided as a prop, `factories` cache is not modified
           expect(__factories.size).toBe(0);
-          destroyMainClientSpy = jest.spyOn((factory as SplitIO.ISDK).client(), 'destroy');
+          destroyMainClientSpy = jest.spyOn((factory as SplitIO.IBrowserSDK).client(), 'destroy');
           return (
             <SplitClient splitKey='other_key' >
               {({ client }) => {

src/__tests__/SplitFactoryProvider.test.tsx

@@ -14,7 +14,7 @@ const logSpy = jest.spyOn(console, 'log');
 import { ISplitFactoryChildProps } from '../types';
 import { SplitFactoryProvider } from '../SplitFactoryProvider';
 import { SplitClient } from '../SplitClient';
-import { SplitContext } from '../SplitContext';
+import { INITIAL_CONTEXT, SplitContext } from '../SplitContext';
 import { __factories, IClientWithContext } from '../utils';
 import { WARN_SF_CONFIG_AND_FACTORY } from '../constants';
 
@@ -55,7 +55,7 @@ describe('SplitFactoryProvider', () => {
           expect(isTimedout).toBe(false);
           expect(isDestroyed).toBe(false);
           expect(lastUpdate).toBe((outerFactory.client() as IClientWithContext).__getStatus().lastUpdate);
-          expect((factory as SplitIO.ISDK).settings.version).toBe(outerFactory.settings.version);
+          expect((factory as SplitIO.IBrowserSDK).settings.version).toBe(outerFactory.settings.version);
           return null;
         }}
       </SplitFactoryProvider>
@@ -301,11 +301,7 @@ describe('SplitFactoryProvider', () => {
       return (
         <SplitContext.Consumer>
           {(value) => {
-            expect(value.factory).toBe(null);
-            expect(value.client).toBe(null);
-            expect(value.isReady).toBe(false);
-            expect(value.isTimedout).toBe(false);
-            expect(value.lastUpdate).toBe(0);
+            expect(value).toEqual(INITIAL_CONTEXT);
             done();
             return null;
           }}
@@ -338,7 +334,7 @@ describe('SplitFactoryProvider', () => {
 
   test('cleans up on update and unmount if config prop is provided.', () => {
     let renderTimes = 0;
-    const createdFactories = new Set<SplitIO.ISDK>();
+    const createdFactories = new Set<SplitIO.IBrowserSDK>();
     const clientDestroySpies: jest.SpyInstance[] = [];
     const outerFactory = SplitSdk(sdkBrowser);