Merge branch 'hooks_update_options' into hooks_polishing

Author: EmilianoSanchez

.eslintrc.js

@@ -7,7 +7,8 @@ module.exports = {
   'extends': [
     'eslint:recommended',
     'plugin:react/recommended',
-    'plugin:@typescript-eslint/recommended'
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended'
   ],
   'parser': '@typescript-eslint/parser',
   'parserOptions': {

.github/workflows/ci.yml

@@ -43,7 +43,7 @@ jobs:
         run: npm run test -- --coverage
 
       - name: npm build
-        run: BUILD_BRANCH=$(echo "${GITHUB_REF#refs/heads/}") BUILD_COMMIT=${{ github.sha }} npm run build
+        run: BUILD_BRANCH=$(echo "${GITHUB_REF#refs/heads/}") npm run build
 
       - name: Set VERSION env
         run: echo "VERSION=$(cat package.json | jq -r .version)" >> $GITHUB_ENV

CHANGES.txt

@@ -1,3 +1,11 @@
+1.10.0 (XXX XX, 2023)
+ - 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)
+ - 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",
@@ -19,7 +19,7 @@
   "scripts": {
     "build:cjs": "rimraf lib/* types/* && tsc -m commonjs --outDir lib -d true --declarationDir types",
     "build:esm": "rimraf es/* && tsc",
-    "build:umd": "rimraf umd/* && webpack --config webpack.dev.js --env branch=$BUILD_BRANCH --env commit_hash=$BUILD_COMMIT && webpack --config webpack.prod.js --env branch=$BUILD_BRANCH --env commit_hash=$BUILD_COMMIT",
+    "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",
     "check": "npm run check:lint && npm run check:types",
@@ -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"
   },
@@ -81,6 +81,7 @@
     "eslint-plugin-compat": "^4.1.2",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^3.1.0",
     "jest": "^27.2.3",
     "react": "^18.0.0",

package.json

@@ -2,7 +2,7 @@ import React from 'react';
 import { SplitContext } from './SplitContext';
 import { ISplitClientProps, ISplitContextValues, IUpdateProps } from './types';
 import { ERROR_SC_NO_FACTORY } from './constants';
-import { getStatus, getSplitClient, initAttributes } from './utils';
+import { getStatus, getSplitClient, initAttributes, IClientWithContext } from './utils';
 
 /**
  * Common component used to handle the status and events of a Split client passed as prop.
@@ -58,7 +58,6 @@ export class SplitComponent extends React.Component<IUpdateProps & { factory: Sp
       factory,
       client,
       ...getStatus(client),
-      lastUpdate: 0,
     };
   }
 
@@ -83,21 +82,20 @@ export class SplitComponent extends React.Component<IUpdateProps & { factory: Sp
     }
   }
 
-  // NOTE: assuming that SDK events are scattered in time so that Date.now() timestamps are unique per event and trigger an update
   setReady = () => {
-    if (this.props.updateOnSdkReady) this.setState({ lastUpdate: Date.now() });
+    if (this.props.updateOnSdkReady) this.setState({ lastUpdate: (this.state.client as IClientWithContext).lastUpdate });
   }
 
   setReadyFromCache = () => {
-    if (this.props.updateOnSdkReadyFromCache) this.setState({ lastUpdate: Date.now() });
+    if (this.props.updateOnSdkReadyFromCache) this.setState({ lastUpdate: (this.state.client as IClientWithContext).lastUpdate });
   }
 
   setTimedout = () => {
-    if (this.props.updateOnSdkTimedout) this.setState({ lastUpdate: Date.now() });
+    if (this.props.updateOnSdkTimedout) this.setState({ lastUpdate: (this.state.client as IClientWithContext).lastUpdate });
   }
 
   setUpdate = () => {
-    if (this.props.updateOnSdkUpdate) this.setState({ lastUpdate: Date.now() });
+    if (this.props.updateOnSdkUpdate) this.setState({ lastUpdate: (this.state.client as IClientWithContext).lastUpdate });
   }
 
   componentDidMount() {
@@ -112,7 +110,7 @@ export class SplitComponent extends React.Component<IUpdateProps & { factory: Sp
   }
 
   componentWillUnmount() {
-    // unsubscrite to SDK client events, to remove references to SplitClient instance methods
+    // unsubscribe from events, to remove references to SplitClient instance methods
     this.unsubscribeFromEvents(this.props.client);
   }
 

src/SplitClient.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, act } from '@testing-library/react';
 
 /** Mocks and test utils */
-import { mockSdk, Event, assertNoListeners, clientListenerCount } from './testUtils/mockSplitSdk';
+import { mockSdk, Event } from './testUtils/mockSplitSdk';
 jest.mock('@splitsoftware/splitio/client', () => {
   return { SplitFactory: mockSdk() };
 });
@@ -20,30 +20,22 @@ import { testAttributesBinding, TestComponentProps } from './testUtils/utils';
 describe('SplitClient', () => {
 
   test('passes no-ready props to the child if client is not ready.', () => {
-    let clientToCheck;
-
     render(
       <SplitFactory config={sdkBrowser} >
         <SplitClient splitKey='user1' >
-          {({ client, isReady, isReadyFromCache, hasTimedout, isTimedout, isDestroyed, lastUpdate }: ISplitClientChildProps) => {
+          {({ isReady, isReadyFromCache, hasTimedout, isTimedout, isDestroyed, lastUpdate }: ISplitClientChildProps) => {
             expect(isReady).toBe(false);
             expect(isReadyFromCache).toBe(false);
             expect(hasTimedout).toBe(false);
             expect(isTimedout).toBe(false);
             expect(isDestroyed).toBe(false);
             expect(lastUpdate).toBe(0);
 
-            clientToCheck = client;
             return null;
           }}
         </SplitClient>
       </SplitFactory>
     );
-
-    // After component mount, listeners should be attached for all ONCE events when none of them has been emitted yet
-    expect(clientListenerCount(clientToCheck, Event.SDK_READY)).toBe(1);
-    expect(clientListenerCount(clientToCheck, Event.SDK_READY_FROM_CACHE)).toBe(1);
-    expect(clientListenerCount(clientToCheck, Event.SDK_READY_TIMED_OUT)).toBe(1);
   });
 
   test('passes ready props to the child if client is ready.', async () => {
@@ -52,7 +44,6 @@ describe('SplitClient', () => {
     (outerFactory as any).client().__emitter__.emit(Event.SDK_READY);
     (outerFactory.manager().names as jest.Mock).mockReturnValue(['split1']);
     await outerFactory.client().ready();
-    let clientToCheck;
 
     render(
       <SplitFactory factory={outerFactory} >
@@ -66,17 +57,11 @@ describe('SplitClient', () => {
             expect(isDestroyed).toBe(false);
             expect(lastUpdate).toBe(0);
 
-            clientToCheck = client;
             return null;
           }}
         </SplitClient>
       </SplitFactory>
     );
-
-    // After component mount, listeners should not be attached for those ONCE events that has been already emitted
-    expect(clientListenerCount(clientToCheck, Event.SDK_READY)).toBe(0);
-    expect(clientListenerCount(clientToCheck, Event.SDK_READY_FROM_CACHE)).toBe(0);
-    expect(clientListenerCount(clientToCheck, Event.SDK_READY_TIMED_OUT)).toBe(0); // this event was not emitted, but will not anyway, since SDK_READY has.
   });
 
   test('rerender child on SDK_READY_TIMEDOUT, SDK_READY_FROM_CACHE, SDK_READY and SDK_UPDATE events.', async () => {
@@ -89,7 +74,7 @@ describe('SplitClient', () => {
     let renderTimes = 0;
     let previousLastUpdate = -1;
 
-    const wrapper = render(
+    render(
       <SplitFactory factory={outerFactory} >
         <SplitClient splitKey='user2' updateOnSdkTimedout={true} updateOnSdkUpdate={true} >
           {({ client, isReady, isReadyFromCache, hasTimedout, isTimedout, lastUpdate }: ISplitClientChildProps) => {
@@ -114,8 +99,7 @@ describe('SplitClient', () => {
                 fail('Child must not be rerendered');
             }
             expect(client).toBe(outerFactory.client('user2'));
-            expect(lastUpdate).toBeGreaterThanOrEqual(previousLastUpdate);
-            expect(lastUpdate).toBeLessThanOrEqual(Date.now());
+            expect(lastUpdate).toBeGreaterThan(previousLastUpdate);
             renderTimes++;
             previousLastUpdate = lastUpdate;
             return null;
@@ -130,10 +114,6 @@ describe('SplitClient', () => {
     act(() => (outerFactory as any).client('user2').__emitter__.emit(Event.SDK_UPDATE));
 
     expect(renderTimes).toBe(5);
-
-    // check that outerFactory's clients have no event listeners
-    wrapper.unmount();
-    assertNoListeners(outerFactory);
   });
 
   test('rerender child on SDK_READY_TIMED_OUT and SDK_UPDATE events, but not on SDK_READY.', async () => {
@@ -146,7 +126,7 @@ describe('SplitClient', () => {
     let renderTimes = 0;
     let previousLastUpdate = -1;
 
-    const wrapper = render(
+    render(
       <SplitFactory factory={outerFactory} >
         <SplitClient splitKey='user2' updateOnSdkReady={false} updateOnSdkTimedout={true} updateOnSdkUpdate={true} >
           {({ client, isReady, isReadyFromCache, hasTimedout, isTimedout, lastUpdate }: ISplitClientChildProps) => {
@@ -165,8 +145,7 @@ describe('SplitClient', () => {
                 fail('Child must not be rerendered');
             }
             expect(client).toBe(outerFactory.client('user2'));
-            expect(lastUpdate).toBeGreaterThanOrEqual(previousLastUpdate);
-            expect(lastUpdate).toBeLessThanOrEqual(Date.now());
+            expect(lastUpdate).toBeGreaterThan(previousLastUpdate);
             renderTimes++;
             previousLastUpdate = lastUpdate;
             return null;
@@ -179,10 +158,6 @@ describe('SplitClient', () => {
     act(() => (outerFactory as any).client('user2').__emitter__.emit(Event.SDK_READY));
     act(() => (outerFactory as any).client('user2').__emitter__.emit(Event.SDK_UPDATE));
     expect(renderTimes).toBe(3);
-
-    // check that outerFactory's clients have no event listeners
-    wrapper.unmount();
-    assertNoListeners(outerFactory);
   });
 
   test('rerender child only on SDK_READY event, as default behaviour.', async () => {
@@ -212,7 +187,6 @@ describe('SplitClient', () => {
             }
             expect(client).toBe(outerFactory.client('user2'));
             expect(lastUpdate).toBeGreaterThan(previousLastUpdate);
-            expect(lastUpdate).toBeLessThanOrEqual(Date.now());
             renderTimes++;
             previousLastUpdate = lastUpdate;
             return null;
@@ -299,10 +273,6 @@ describe('SplitClient', () => {
                         setTimeout(() => {
                           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();
                         });
                       });
@@ -359,7 +329,7 @@ describe('SplitClient', () => {
       }
     }
 
-    const wrapper = render(
+    render(
       <SplitFactory factory={outerFactory} >
         <InnerComponent />
       </SplitFactory>

src/__tests__/SplitClient.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, act } from '@testing-library/react';
 
 /** Mocks */
-import { mockSdk, Event, assertNoListeners } from './testUtils/mockSplitSdk';
+import { mockSdk, Event } from './testUtils/mockSplitSdk';
 jest.mock('@splitsoftware/splitio/client', () => {
   return { SplitFactory: mockSdk() };
 });
@@ -67,7 +67,7 @@ describe('SplitFactory', () => {
     let renderTimes = 0;
     let previousLastUpdate = -1;
 
-    const wrapper = render(
+    render(
       <SplitFactory factory={outerFactory} updateOnSdkTimedout={true} updateOnSdkUpdate={true} >
         {({ factory, isReady, isReadyFromCache, hasTimedout, isTimedout, lastUpdate }: ISplitFactoryChildProps) => {
           const statusProps = [isReady, isReadyFromCache, hasTimedout, isTimedout];
@@ -91,8 +91,7 @@ describe('SplitFactory', () => {
               fail('Child must not be rerendered');
           }
           expect(factory).toBe(outerFactory);
-          expect(lastUpdate).toBeGreaterThanOrEqual(previousLastUpdate);
-          expect(lastUpdate).toBeLessThanOrEqual(Date.now());
+          expect(lastUpdate).toBeGreaterThan(previousLastUpdate);
           renderTimes++;
           previousLastUpdate = lastUpdate;
           return null;
@@ -104,19 +103,16 @@ describe('SplitFactory', () => {
     act(() => (outerFactory as any).client().__emitter__.emit(Event.SDK_READY_FROM_CACHE));
     act(() => (outerFactory as any).client().__emitter__.emit(Event.SDK_READY));
     act(() => (outerFactory as any).client().__emitter__.emit(Event.SDK_UPDATE));
-    expect(renderTimes).toBe(5);
 
-    // check that outerFactory's clients have no event listeners
-    wrapper.unmount();
-    assertNoListeners(outerFactory);
+    expect(renderTimes).toBe(5);
   });
 
   test('rerenders child on SDK_READY_TIMED_OUT and SDK_UPDATE events, but not on SDK_READY.', async () => {
     const outerFactory = SplitSdk(sdkBrowser);
     let renderTimes = 0;
     let previousLastUpdate = -1;
 
-    const wrapper = render(
+    render(
       <SplitFactory factory={outerFactory} updateOnSdkReady={false} updateOnSdkTimedout={true} updateOnSdkUpdate={true} >
         {({ factory, isReady, isReadyFromCache, hasTimedout, isTimedout, lastUpdate }: ISplitFactoryChildProps) => {
           const statusProps = [isReady, isReadyFromCache, hasTimedout, isTimedout];
@@ -134,8 +130,7 @@ describe('SplitFactory', () => {
               fail('Child must not be rerendered');
           }
           expect(factory).toBe(outerFactory);
-          expect(lastUpdate).toBeGreaterThanOrEqual(previousLastUpdate);
-          expect(lastUpdate).toBeLessThanOrEqual(Date.now());
+          expect(lastUpdate).toBeGreaterThan(previousLastUpdate);
           renderTimes++;
           previousLastUpdate = lastUpdate;
           return null;
@@ -146,11 +141,8 @@ describe('SplitFactory', () => {
     act(() => (outerFactory as any).client().__emitter__.emit(Event.SDK_READY_TIMED_OUT));
     act(() => (outerFactory as any).client().__emitter__.emit(Event.SDK_READY));
     act(() => (outerFactory as any).client().__emitter__.emit(Event.SDK_UPDATE));
-    expect(renderTimes).toBe(3);
 
-    // check that outerFactory's clients have no event listeners
-    wrapper.unmount();
-    assertNoListeners(outerFactory);
+    expect(renderTimes).toBe(3);
   });
 
   test('rerenders child only on SDK_READY and SDK_READY_FROM_CACHE event, as default behaviour.', async () => {
@@ -174,7 +166,6 @@ describe('SplitFactory', () => {
           }
           expect(factory).toBe(outerFactory);
           expect(lastUpdate).toBeGreaterThan(previousLastUpdate);
-          expect(lastUpdate).toBeLessThanOrEqual(Date.now());
           renderTimes++;
           previousLastUpdate = lastUpdate;
           return null;