Merge pull request #169 from splitio/hooks_baseline

Prepare release v1.10.0

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': {

.gitignore

@@ -4,5 +4,6 @@
 /lib
 /es
 /umd
+/types
 /coverage
 .scannerwork

CHANGES.txt

@@ -1,6 +1,18 @@
-1.9.1 (October XX, 2023)
- - Updated type definitions of the library components to not restrict the type of the `children` prop to ReactElement, allowing to pass any valid ReactNode value (Related to issue https://github.com/splitio/react-client/issues/164).
+1.10.0 (November 16, 2023)
+ - Added support for Flag Sets on the SDK, which enables grouping feature flags and interacting with the group rather than individually (more details in our documentation):
+      - Added a new `flagSets` prop to the `SplitTreatments` component and `flagSets` option to the `useSplitTreatments` hook options object, to support evaluating flags in given flag set/s. Either `names` or `flagSets` must be provided to the component and hook. If both are provided, `names` will be used.
+      - Added a new optional Split Filter configuration option. This allows the SDK and Split services to only synchronize the flags in the specified flag sets, avoiding unused or unwanted flags from being synced on the SDK instance, bringing all the benefits from a reduced payload.
+      - Added `sets` property to the `SplitView` object returned by the `split` and `splits` methods of the SDK manager to expose flag sets on flag views.
+ - Added new `useSplitClient`, `useSplitTreatments` and `useSplitManager` hooks as replacements for the now deprecated `useClient`, `useTreatments` and `useManager` hooks.
+      - These new hooks return the Split context object along with the SDK client, treatments and manager respectively, enabling direct access to status properties like `isReady`, eliminating the need for using the `useContext` hook or the client's `ready` promise.
+      - `useSplitClient` and `useSplitTreatments` accept an options object as parameter, which support the same arguments as their predecessors, with additional boolean options for controlling re-rendering: `updateOnSdkReady`, `updateOnSdkReadyFromCache`, `updateOnSdkTimedout`, and `updateOnSdkUpdate`.
+      - `useSplitTreatments` optimizes feature flag evaluations by using the `useMemo` hook to memoize `getTreatmentsWithConfig` method calls from the SDK. This avoids re-evaluating feature flags when the hook is called with the same options and the feature flag definitions have not changed.
+      - They fixed a bug in the deprecated `useClient` and `useTreatments` hooks, which caused them to not re-render and re-evaluate feature flags when they access a different SDK client than the context and its status updates (i.e., when it emits SDK_READY or other event).
+ - Added TypeScript types and interfaces to the library index exports, allowing them to be imported from the library index, e.g., `import type { ISplitFactoryProps } from '@splitsoftware/splitio-react'` (Related to issue https://github.com/splitio/react-client/issues/162).
+ - Updated type declarations of the library components to not restrict the type of the `children` prop to ReactElement, allowing to pass any valid ReactNode value (Related to issue https://github.com/splitio/react-client/issues/164).
  - Updated linter and other dependencies for vulnerability fixes.
+ - Bugfixing - Removed conditional code within hooks to adhere to the rules of hooks and prevent React warnings. Previously, this code checked for the availability of the hooks API (available in React version 16.8.0 or above) and logged an error message. Now, using hooks with React versions below 16.8.0 will throw an error.
+ - Bugfixing - Updated `useClient` and `useTreatments` hooks to re-render and re-evaluate feature flags when they consume a different SDK client than the context and its status updates (i.e., when it emits SDK_READY or other event).
 
 1.9.0 (July 18, 2023)
  - Updated some transitive dependencies for vulnerability fixes.

README.md

@@ -20,7 +20,7 @@ Below is a simple example that describes the instantiation and most basic usage
 import React from 'react';
 
 // Import SDK functions
-import { SplitFactory, SplitTreatments } from '@splitsoftware/splitio-react';
+import { SplitFactory, useSplitTreatments } from '@splitsoftware/splitio-react';
 
 // Define your config object
 const CONFIG = {
@@ -30,25 +30,27 @@ const CONFIG = {
   }
 };
 
-function MyReactComponent() {
+function MyComponent() {
+  // Evaluate feature flags with useSplitTreatments hook
+  const { treatments: { FEATURE_FLAG_NAME }, isReady } = useSplitTreatments({ names: ['FEATURE_FLAG_NAME'] });
+
+  // Check SDK readiness using isReady prop
+  if (!isReady) return <div>Loading SDK ...</div>;
+
+  if (FEATURE_FLAG_NAME.treatment === 'on') {
+    // return JSX for on treatment
+  } else if (FEATURE_FLAG_NAME.treatment === 'off') {
+    // return JSX for off treatment
+  } else {
+    // return JSX for control treatment
+  };
+}
+
+function MyApp() {
   return (
-    /* Use SplitFactory to instantiate the SDK and makes it available to nested components */
+    // Use SplitFactory to instantiate the SDK and makes it available to nested components
     <SplitFactory config={CONFIG} >
-      {/* Evaluate feature flags with SplitTreatments component */}
-      <SplitTreatments names={['FEATURE_FLAG_NAME']} >
-        {({ treatments: { FEATURE_FLAG_NAME }, isReady }) => {
-          // Check SDK readiness using isReady prop
-          if (!isReady)
-            return <div>Loading SDK ...</div>;
-          if (FEATURE_FLAG_NAME.treatment === 'on') {
-            // return JSX for on treatment
-          } else if (FEATURE_FLAG_NAME.treatment === 'off') {
-            // return JSX for off treatment
-          } else {
-            // return JSX for control treatment
-          }
-        }}
-      </SplitTreatments>
+      <MyComponent />
     </SplitFactory>
   );
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@splitsoftware/splitio-react",
-  "version": "1.9.0",
+  "version": "1.10.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.23.0",
+    "@splitsoftware/splitio": "10.24.0-beta",
     "memoize-one": "^5.1.1",
     "shallowequal": "^1.1.0"
   },
@@ -81,6 +81,7 @@
     "eslint-plugin-compat": "^4.2.0",
     "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,8 @@ import React from 'react';
 import { SplitContext } from './SplitContext';
 import { ISplitClientProps, ISplitContextValues, IUpdateProps } from './types';
 import { ERROR_SC_NO_FACTORY } from './constants';
-import { getStatus, getSplitSharedClient, initAttributes } from './utils';
+import { getStatus, getSplitClient, initAttributes, IClientWithContext } from './utils';
+import { DEFAULT_UPDATE_OPTIONS } from './useSplitClient';
 
 /**
  * Common component used to handle the status and events of a Split client passed as prop.
@@ -11,13 +12,10 @@ import { getStatus, getSplitSharedClient, initAttributes } from './utils';
 export class SplitComponent extends React.Component<IUpdateProps & { factory: SplitIO.IBrowserSDK | null, client: SplitIO.IBrowserClient | null, attributes?: SplitIO.Attributes, children: any }, ISplitContextValues> {
 
   static defaultProps = {
-    updateOnSdkUpdate: false,
-    updateOnSdkTimedout: false,
-    updateOnSdkReady: true,
-    updateOnSdkReadyFromCache: true,
     children: null,
     factory: null,
     client: null,
+    ...DEFAULT_UPDATE_OPTIONS,
   }
 
   // Using `getDerivedStateFromProps` since the state depends on the status of the client in props, which might change over time.
@@ -58,7 +56,6 @@ export class SplitComponent extends React.Component<IUpdateProps & { factory: Sp
       factory,
       client,
       ...getStatus(client),
-      lastUpdate: 0,
     };
   }
 
@@ -83,21 +80,20 @@ export class SplitComponent extends React.Component<IUpdateProps & { factory: Sp
     }
   }
 
-  // NOTE: assuming that SDK events are scatered enough in time, so that Date.now() result is unique per event and triggers 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 +108,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);
   }
 
@@ -145,8 +141,8 @@ export function SplitClient(props: ISplitClientProps) {
     <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) : null;
+        // getSplitClient is idempotent like factory.client: it returns the same client given the same factory, Split Key and TT
+        const client = factory ? getSplitClient(factory, props.splitKey, props.trafficType) : null;
         return (
           <SplitComponent {...props} factory={factory} client={client} attributes={props.attributes} />
         );

src/SplitClient.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 import { SplitComponent } from './SplitClient';
 import { ISplitFactoryProps } from './types';
 import { WARN_SF_CONFIG_AND_FACTORY, ERROR_SF_NO_CONFIG_AND_FACTORY } from './constants';
-import { getSplitFactory, destroySplitFactory, IFactoryWithClients } from './utils';
+import { getSplitFactory, destroySplitFactory, IFactoryWithClients, getSplitClient } from './utils';
+import { DEFAULT_UPDATE_OPTIONS } from './useSplitClient';
 
 /**
  * SplitFactory will initialize the Split SDK and its main client, listen for its events in order to update the Split Context,
@@ -18,11 +19,8 @@ import { getSplitFactory, destroySplitFactory, IFactoryWithClients } from './uti
 export class SplitFactory extends React.Component<ISplitFactoryProps, { factory: SplitIO.IBrowserSDK | null, client: SplitIO.IBrowserClient | null }> {
 
   static defaultProps: ISplitFactoryProps = {
-    updateOnSdkUpdate: false,
-    updateOnSdkTimedout: false,
-    updateOnSdkReady: true,
-    updateOnSdkReadyFromCache: true,
     children: null,
+    ...DEFAULT_UPDATE_OPTIONS,
   };
 
   readonly state: Readonly<{ factory: SplitIO.IBrowserSDK | null, client: SplitIO.IBrowserClient | null }>;
@@ -54,7 +52,7 @@ export class SplitFactory extends React.Component<ISplitFactoryProps, { factory:
     this.isFactoryExternal = propFactory ? true : false;
 
     // Instantiate main client. Attributes are set on `SplitComponent.getDerivedStateFromProps`
-    const client = factory ? factory.client() : null;
+    const client = factory ? getSplitClient(factory) : null;
 
     this.state = {
       client,