Merge pull request #155 from splitio/development

Release v1.9.0

Author: EmilianoSanchez

.eslintrc.js

@@ -35,6 +35,9 @@ module.exports = {
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/no-unused-vars': ['warn', { 'argsIgnorePattern': '^_' }],
+    'prefer-const': ['error', {
+      'destructuring': 'all'
+    }]
   },
   'overrides': [{
     'files': ['src/**/*.ts', 'src/**/*.tsx'],
@@ -52,7 +55,7 @@ module.exports = {
       'compat/compat': ['error', 'defaults, not ie < 11'],
       'no-throw-literal': 'error',
       'import/no-self-import': 'error',
-      // 'import/no-default-export': 'error', // Default exports are a common practice in React
+      'import/no-default-export': 'error',
     }
   }]
 }

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @splitio/sdk

CHANGES.txt

@@ -1,3 +1,8 @@
+1.9.0 (July 18, 2023)
+ - Updated some transitive dependencies for vulnerability fixes.
+ - Updated @splitsoftware/splitio package to version 10.23.0 that includes:
+      - Updated streaming architecture implementation to apply feature flag updates from the notification received which is now enhanced, improving efficiency and reliability of the whole update system.
+
 1.8.3 (May 16, 2023)
  - Updated @splitsoftware/splitio package to version 10.22.5 that includes:
       - Updated terminology on the SDKs codebase to be more aligned with current standard without causing a breaking change. The core change is the term split for feature flag on things like logs and IntelliSense comments.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@splitsoftware/splitio-react",
-  "version": "1.8.3",
+  "version": "1.9.0",
   "description": "A React library to easily integrate and use Split JS SDK",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -62,7 +62,7 @@
   },
   "homepage": "https://github.com/splitio/react-client#readme",
   "dependencies": {
-    "@splitsoftware/splitio": "10.22.5",
+    "@splitsoftware/splitio": "10.23.0",
     "memoize-one": "^5.1.1",
     "shallowequal": "^1.1.0"
   },
@@ -100,7 +100,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "npm run check",
+      "pre-commit": "npm run check && npm run build",
       "pre-push": "npm test && npm run build"
     }
   }

package.json

@@ -1,5 +1,5 @@
 import React from 'react';
-import SplitContext from './SplitContext';
+import { SplitContext } from './SplitContext';
 import { ISplitClientProps, ISplitContextValues, IUpdateProps } from './types';
 import { ERROR_SC_NO_FACTORY } from './constants';
 import { getStatus, getSplitSharedClient, initAttributes } from './utils';
@@ -26,7 +26,7 @@ export class SplitComponent extends React.Component<IUpdateProps & { factory: Sp
   static getDerivedStateFromProps(props: ISplitClientProps & { factory: SplitIO.IBrowserSDK | null, client: SplitIO.IBrowserClient | null }, 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
-    if (client) initAttributes(client, attributes);
+    initAttributes(client, attributes);
     const status = getStatus(client);
     // no need to compare status.isTimedout, since it derives from isReady and hasTimedout
     if (client !== state.client ||
@@ -119,11 +119,13 @@ export class SplitComponent extends React.Component<IUpdateProps & { factory: Sp
   render() {
     const { children } = this.props;
     return (
-      <SplitContext.Provider value={this.state} >{
-        typeof children === 'function' ?
-          children({ ...this.state }) :
-          children
-      }</SplitContext.Provider>
+      <SplitContext.Provider value={this.state} >
+        {
+          typeof children === 'function' ?
+            children({ ...this.state }) :
+            children
+        }
+      </SplitContext.Provider>
     );
   }
 }
@@ -138,19 +140,17 @@ export class SplitComponent extends React.Component<IUpdateProps & { factory: Sp
  *
  * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#advanced-instantiate-multiple-sdk-clients}
  */
-function SplitClient(props: ISplitClientProps) {
+export function SplitClient(props: ISplitClientProps) {
   return (
-    <SplitContext.Consumer>{
-      (splitContext: ISplitContextValues) => {
+    <SplitContext.Consumer>
+      {(splitContext: ISplitContextValues) => {
         const { factory } = splitContext;
         // getSplitSharedClient is idempotent like factory.client: it returns the same client given the same factory, Split Key and TT
-        const client = factory ? getSplitSharedClient(factory, props.splitKey, props.trafficType, props.attributes) : null;
+        const client = factory ? getSplitSharedClient(factory, props.splitKey, props.trafficType) : null;
         return (
           <SplitComponent {...props} factory={factory} client={client} attributes={props.attributes} />
         );
-      }
-    }</SplitContext.Consumer>
+      }}
+    </SplitContext.Consumer>
   );
 }
-
-export default SplitClient;

src/SplitClient.tsx

@@ -4,12 +4,7 @@ import { EXCEPTION_NO_REACT_OR_CREATECONTEXT } from './constants';
 
 if (!React || !React.createContext) throw new Error(EXCEPTION_NO_REACT_OR_CREATECONTEXT);
 
-/**
- * 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.
- */
-const SplitContext = React.createContext<ISplitContextValues>({
+export const INITIAL_CONTEXT: ISplitContextValues = {
   client: null,
   factory: null,
   isReady: false,
@@ -18,7 +13,11 @@ const SplitContext = React.createContext<ISplitContextValues>({
   hasTimedout: false,
   lastUpdate: 0,
   isDestroyed: false,
-});
+}
 
-export default SplitContext;
-export { 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 const SplitContext = React.createContext<ISplitContextValues>(INITIAL_CONTEXT);

src/SplitContext.ts

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { SplitComponent } from './SplitClient';
 import { ISplitFactoryProps } from './types';
-import { VERSION, WARN_SF_CONFIG_AND_FACTORY, ERROR_SF_NO_CONFIG_AND_FACTORY } from './constants';
+import { WARN_SF_CONFIG_AND_FACTORY, ERROR_SF_NO_CONFIG_AND_FACTORY } from './constants';
 import { getSplitFactory, destroySplitFactory, IFactoryWithClients } from './utils';
 
 /**
@@ -15,7 +15,7 @@ import { getSplitFactory, destroySplitFactory, IFactoryWithClients } from './uti
  *
  * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK}
  */
-class SplitFactory extends React.Component<ISplitFactoryProps, { factory: SplitIO.IBrowserSDK | null, client: SplitIO.IBrowserClient | null }> {
+export class SplitFactory extends React.Component<ISplitFactoryProps, { factory: SplitIO.IBrowserSDK | null, client: SplitIO.IBrowserClient | null }> {
 
   static defaultProps: ISplitFactoryProps = {
     updateOnSdkUpdate: false,
@@ -46,16 +46,14 @@ class SplitFactory extends React.Component<ISplitFactoryProps, { factory: SplitI
       factory = propFactory;
     } else {
       if (config) {
-        // Don't try this at home. Used to overwrite the settings version when we create our own factory.
-        (config as any).version = VERSION;
         // We use an idempotent variant of the Split factory builder (i.e., given the same config, it returns the same already
         // created instance), since React component constructors is part of render-phase and can be invoked multiple times.
         factory = getSplitFactory(config);
       }
     }
     this.isFactoryExternal = propFactory ? true : false;
 
-    // Instantiate main client.
+    // Instantiate main client. Attributes are set on `SplitComponent.getDerivedStateFromProps`
     const client = factory ? factory.client() : null;
 
     this.state = {
@@ -79,5 +77,3 @@ class SplitFactory extends React.Component<ISplitFactoryProps, { factory: SplitI
     );
   }
 }
-
-export default SplitFactory;

src/SplitFactory.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import memoizeOne from 'memoize-one';
 import shallowEqual from 'shallowequal';
-import SplitContext from './SplitContext';
+import { SplitContext } from './SplitContext';
 import { ISplitTreatmentsProps, ISplitContextValues } from './types';
 import { getControlTreatmentsWithConfig, WARN_ST_NO_CLIENT } from './constants';
 
@@ -23,7 +23,7 @@ function evaluateFeatureFlags(client: SplitIO.IBrowserClient, lastUpdate: number
  *
  * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#get-treatments-with-configurations}
  */
-class SplitTreatments extends React.Component<ISplitTreatmentsProps> {
+export class SplitTreatments extends React.Component<ISplitTreatmentsProps> {
 
   private logWarning?: boolean;
 
@@ -62,5 +62,3 @@ class SplitTreatments extends React.Component<ISplitTreatmentsProps> {
   }
 
 }
-
-export default SplitTreatments;

src/SplitTreatments.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, RenderResult, act } from '@testing-library/react';
+import { render, act } from '@testing-library/react';
 
 /** Mocks and test utils */
 import { mockSdk, Event, assertNoListeners, clientListenerCount } from './testUtils/mockSplitSdk';
@@ -11,9 +11,9 @@ import { sdkBrowser } from './testUtils/sdkConfigs';
 
 /** Test target */
 import { ISplitClientChildProps } from '../types';
-import SplitFactory from '../SplitFactory';
-import SplitClient from '../SplitClient';
-import SplitContext, { ISplitContextValues } from '../SplitContext';
+import { SplitFactory } from '../SplitFactory';
+import { SplitClient } from '../SplitClient';
+import { SplitContext } from '../SplitContext';
 import { ERROR_SC_NO_FACTORY } from '../constants';
 import { testAttributesBinding, TestComponentProps } from './testUtils/utils';
 
@@ -121,7 +121,8 @@ describe('SplitClient', () => {
             return null;
           }}
         </SplitClient>
-      </SplitFactory>);
+      </SplitFactory>
+    );
 
     act(() => (outerFactory as any).client('user2').__emitter__.emit(Event.SDK_READY_TIMED_OUT));
     act(() => (outerFactory as any).client('user2').__emitter__.emit(Event.SDK_READY_FROM_CACHE));
@@ -171,7 +172,8 @@ describe('SplitClient', () => {
             return null;
           }}
         </SplitClient>
-      </SplitFactory>);
+      </SplitFactory>
+    );
 
     act(() => (outerFactory as any).client('user2').__emitter__.emit(Event.SDK_READY_TIMED_OUT));
     act(() => (outerFactory as any).client('user2').__emitter__.emit(Event.SDK_READY));
@@ -216,7 +218,8 @@ describe('SplitClient', () => {
             return null;
           }}
         </SplitClient>
-      </SplitFactory>);
+      </SplitFactory>
+    );
 
     act(() => (outerFactory as any).client('user2').__emitter__.emit(Event.SDK_READY_TIMED_OUT));
     act(() => (outerFactory as any).client('user2').__emitter__.emit(Event.SDK_READY));
@@ -229,14 +232,16 @@ describe('SplitClient', () => {
 
     const Component = () => {
       return (
-        <SplitContext.Consumer>{(value: ISplitContextValues) => {
-          expect(value.client).toBe(outerFactory.client('user2'));
-          expect(value.isReady).toBe(false);
-          expect(value.isTimedout).toBe(false);
-          expect(value.lastUpdate).toBe(0);
-          done();
-          return null;
-        }}</SplitContext.Consumer>
+        <SplitContext.Consumer>
+          {(value) => {
+            expect(value.client).toBe(outerFactory.client('user2'));
+            expect(value.isReady).toBe(false);
+            expect(value.isTimedout).toBe(false);
+            expect(value.lastUpdate).toBe(0);
+            done();
+            return null;
+          }}
+        </SplitContext.Consumer>
       );
     };
 
@@ -245,7 +250,8 @@ describe('SplitClient', () => {
         <SplitClient splitKey='user2' >
           <Component />
         </SplitClient>
-      </SplitFactory>);
+      </SplitFactory>
+    );
   });
 
   test('logs error and passes null client if rendered outside an SplitProvider component.', () => {
@@ -256,15 +262,15 @@ describe('SplitClient', () => {
           expect(client).toBe(null);
           return null;
         }}
-      </SplitClient>);
+      </SplitClient>
+    );
     expect(errorSpy).toBeCalledWith(ERROR_SC_NO_FACTORY);
   });
 
   test(`passes a new client if re-rendered with a different splitKey.
         Only updates the state if the new client triggers an event, but not the previous one.`, (done) => {
     const outerFactory = SplitSdk(sdkBrowser);
-    let renderTimes = 0; // eslint-disable-next-line prefer-const
-    let wrapper: RenderResult;
+    let renderTimes = 0;
 
     class InnerComponent extends React.Component<any, { splitKey: string }> {
 
@@ -294,6 +300,7 @@ describe('SplitClient', () => {
                           expect(renderTimes).toBe(6);
 
                           // check that outerFactory's clients have no event listeners
+                          // eslint-disable-next-line no-use-before-define
                           wrapper.unmount();
                           assertNoListeners(outerFactory);
                           done();
@@ -352,10 +359,11 @@ describe('SplitClient', () => {
       }
     }
 
-    wrapper = render(
+    const wrapper = render(
       <SplitFactory factory={outerFactory} >
         <InnerComponent />
-      </SplitFactory>);
+      </SplitFactory>
+    );
   });
 
   test('attributes binding test with utility', (done) => {