Release v1.10.0

.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': {
@@ -28,7 +29,7 @@ module.exports = {
     'eol-last': ['error', 'always'],
     'keyword-spacing': 'error',
     'no-trailing-spaces': 'error',
-    'space-before-function-paren': ['error', {'named': 'never'}],
+    'space-before-function-paren': ['error', { 'named': 'never' }],
     'react/display-name': 'off',
     '@typescript-eslint/no-empty-function': 'off',
     '@typescript-eslint/no-inferrable-types': 'off',
@@ -39,6 +40,11 @@ module.exports = {
       'destructuring': 'all'
     }]
   },
+  'settings': {
+    'react': {
+      'version': '16.3.0' // minimum supported version of React
+    }
+  },
   'overrides': [{
     'files': ['src/**/*.ts', 'src/**/*.tsx'],
     'excludedFiles': ['src/**/__tests__/**'],
@@ -52,7 +58,7 @@ module.exports = {
     },
     'rules': {
       'no-restricted-syntax': ['error', 'ForOfStatement', 'ForInStatement'],
-      'compat/compat': ['error', 'defaults, not ie < 11'],
+      'compat/compat': ['error', 'defaults, ie 11'],
       'no-throw-literal': 'error',
       'import/no-self-import': 'error',
       'import/no-default-export': 'error',

.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

.gitignore

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

CHANGES.txt

@@ -1,3 +1,19 @@
+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.
  - Updated @splitsoftware/splitio package to version 10.23.0 that includes:

README.md

@@ -11,7 +11,7 @@ This SDK is designed to work with Split, the platform for controlled rollouts, w
 
 This SDK is compatible with React 16.3.0 and above, since it uses [React Context API](https://reactjs.org/docs/context.html).
 
-Some features, such as `useClient` and `useManager`, use [React Hooks API](https://reactjs.org/docs/hooks-overview.html) that requires React 16.8.0 or later.
+Some features, such as `useSplitClient` and `useSplitTreatments`, use [React Hooks API](https://reactjs.org/docs/hooks-overview.html) that requires React 16.8.0 or later.
 
 ## Getting started
 Below is a simple example that describes the instantiation and most basic usage of our SDK:
@@ -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>
   );
 }