From 5fd216637b84dae84d2cddd8d0f696f87f4f7adf Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Mon, 4 Nov 2024 14:37:02 -0300 Subject: [PATCH 1/7] Update README.md file --- README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index 3937848..8e26797 100644 --- a/README.md +++ b/README.md @@ -9,9 +9,7 @@ This SDK is designed to work with Split, the platform for controlled rollouts, w ## Compatibility -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 `useSplitClient` and `useSplitTreatments`, use [React Hooks API](https://reactjs.org/docs/hooks-overview.html) that requires React 16.8.0 or later. +This SDK is compatible with React 16.8.0 and above, since it uses **React Hooks** introduced in that version. ## Getting started Below is a simple example that describes the instantiation and most basic usage of our SDK: From b930e2ecb2f438a93c750c830824701226c55f3a Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Tue, 5 Nov 2024 11:46:07 -0300 Subject: [PATCH 2/7] Update MIGRATION-GUIDE.md --- CHANGES.txt | 2 +- MIGRATION-GUIDE.md | 255 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 256 insertions(+), 1 deletion(-) diff --git a/CHANGES.txt b/CHANGES.txt index 484690e..7825250 100644 --- a/CHANGES.txt +++ b/CHANGES.txt @@ -7,7 +7,7 @@ - BREAKING CHANGES: - Updated the default value of the `updateOnSdkUpdate` and `updateOnSdkTimedout` parameters of the `useSplitClient` and `useSplitTreatments` hooks options object to `true`, to re-render on all SDK events by default. The same applies for the equivalent props in the `[with]SplitClient` and `[with]SplitTreatments` components. - Updated error handling: using the library modules without wrapping them in a `SplitFactoryProvider` component will now throw an error instead of logging it, as the modules requires the `SplitContext` to work properly. - - Updated the `SplitFactoryProvider` component to not accept a child as a function (render prop), to avoid unnecessary re-renders when using the library hooks. Refer to ./MIGRATION-GUIDE.md for instructions on how to migrate the child as a function to a regular component. + - Updated the `SplitFactoryProvider` component to not accept a child as a function (render prop), to avoid unnecessary re-renders when using the library hooks. Refer to ./MIGRATION-GUIDE.md for instructions on how to migrate the child as a function to a regular React element. - Removed the `core.trafficType` option from the SDK configuration object, and the `trafficType` parameter from the SDK `client()` method, `useSplitClient`, `useTrack`, `withSplitClient` and `SplitClient` component. This is because traffic types can no longer be bound to SDK clients in JavaScript SDK v11.0.0, and so the traffic type must be provided as first argument in the `track` method calls. - Removed deprecated modules: `SplitFactory` component, `useClient`, `useTreatments` and `useManager` hooks. Refer to ./MIGRATION-GUIDE.md for instructions on how to migrate to the new alternatives. - Renamed `SplitSdk` to `SplitFactory` function, which is the underlying Split SDK factory, i.e., `import { SplitFactory } from '@splitsoftware/splitio'`. diff --git a/MIGRATION-GUIDE.md b/MIGRATION-GUIDE.md index 36932cd..7a60ba9 100644 --- a/MIGRATION-GUIDE.md +++ b/MIGRATION-GUIDE.md @@ -1,4 +1,259 @@ +# Migrating to React SDK v2.0.0: + +React SDK v2.0.0 has a few breaking changes that you should consider when migrating from a previous version. The main changes are: + +- Deprecated `useClient`, `useTreatments`, and `useManager` hooks have been removed. + +Follow [this section](#migrating-to-get-react-sdk-v1100-improvements-replacing-the-deprecated-useclient-usetreatments-and-usemanager-hooks) to migrate to the new hooks `useSplitClient`, `useSplitTreatments`, and `useSplitManager` respectively. + +- Deprecated `SplitFactory` provider has been removed, `withSplitFactory` is deprecated, and `SplitFactoryProvider` doesn't accept `updateOn` props and a render function as children anymore. + +To migrate your existing code to the new version of `SplitFactoryProvider`, consider the following refactor example. Replace: + +```tsx +const MyComponent = (props: ISplitContextValues) => { + const { factory, client, isReady, isReadyFromCache, ... } = props; + ... +}; + +// if using SplitFactoryProvider v1.11.0 +const App = () => { + return ( + + {MyComponent} + + ); +}; + +// or SplitFactory +const App = () => { + return ( + + {MyComponent} + + ); +}; + +// or withSplitFactory +const App = withSplitFactory(mySplitConfig, undefined, DEFAULT_CLIENT_ATTRIBUTES)( + MyComponent, false /* updateOnSdkUpdate */ +); +``` + +with: + +```tsx +const MyComponent = () => { + const props: ISplitContextValues = useSplitClient({ updateOnSdkUpdate: false, attributes: DEFAULT_CLIENT_ATTRIBUTES }); + const { factory, client, isReady, isReadyFromCache, ... } = props; + ... +}; + +const App = () => { + return ( + + + + ); +}; +``` + +Notice that `MyComponent` was refactored to use the `useSplitClient` hook and is passed as a React element rather than a render function as children. +The `useSplitClient` hook is called without providing an `splitKey` param, meaning that the client at the context will be used, i.e., the default client which key is set in the `core.key` property of the `mySplitConfig` object, and the `updateOn` and `attributes` props are passed as options to the hook. + +- High-Order-Components (`withSplitClient`, `withSplitTreatments`) and components that accept a render function as child component (`SplitTreatments`, and `SplitClient`) have been deprecated and might be removed in future major releases. The deprecation is intended to simplify the API and discourage the use of old patterns (HOCs and render props) in favor of hook alternatives to take advantage of React optimizations. + +To migrate your existing code based on `withSplitClient` or `SplitClient`, consider the following refactor using the `useSplitClient` hook. Replace: + +```tsx +const MyComponent = (props: ISplitContextValues) => { + const { client, isReady, ... } = props; + ... +}; + +const App = withSplitFactory(mySplitConfig)( + withSplitClient(KEY)( + MyComponent, undefined, undefined, undefined, false /* updateOnSdkReadyFromCache */ + ) +); + +// or +const App = () => { + return ( + + + {MyComponent} + + + ) +}; +``` + +with: + +```tsx +const MyComponent = () => { + const props: ISplitContextValues = useSplitClient({ splitKey: KEY, updateOnSdkReadyFromCache: false }); + const { client, isReady, ... } = props; + ... +}; + +const App = () => { + return ( + + + + ) +}; +``` + +To migrate your existing code based on `withSplitTreatments` or `SplitTreatments`, consider the following refactor using the `useSplitTreatments` hook. Replace: + +```tsx +const MyComponent = (props: ISplitTreatmentsChildProps) => { + const { treatments, isReady, ... } = props; + ... +}; + +const App = withSplitFactory(mySplitConfig)( + withSplitClient(KEY)( + withSplitTreatments(FEATURE_FLAG_NAMES, ATTRIBUTES)( + MyComponent, undefined, undefined, undefined, false /* updateOnSdkReadyFromCache */ + ) + ) +); + +// or +const App = () => { + return ( + + + + {MyComponent} + + + + ) +}; +``` + +with: + +```tsx +const MyComponent = () => { + const props: ISplitTreatmentsChildProps = useSplitTreatments({ splitKey: KEY, names: FEATURE_FLAG_NAMES, attributes: ATTRIBUTES, updateOnSdkReadyFromCache: false }); + const { treatments, isReady, ... } = props; + ... +}; + +const App = () => { + return ( + + + + ) +}; +``` + +- Renamed `SplitSdk` function to `SplitFactory`. + +If you are using the `SplitSdk` function to create a factory and pass it to the `SplitFactoryProvider` component, you should rename it to `SplitFactory`. For example: + +```tsx +import { SplitSdk, SplitFactoryProvider } from '@splitsoftware/splitio-react'; + +const myFactory = SplitSdk(mySplitConfig); + +const App = () => { + return ( + + + + ); +}; +``` + +should be refactored to: + +```tsx +import { SplitFactory, SplitFactoryProvider } from '@splitsoftware/splitio-react'; + +const myFactory = SplitFactory(mySplitConfig); + +const App = () => { + return ( + + + + ); +}; +``` + +- Traffic type cannot be bound to SDK clients anymore. + +If you were passing the `trafficType` to the SDK config or the `useSplitClient` or `useTrack` hooks, you should remove it. The `trafficType` is now required to be passed as initial argument of the `track` method. For example: + +```tsx +const mySplitConfig = { + core: { + authorizationKey: YOUR_CLIENT_SIDE_SDK_KEY, + key: USER_KEY, + trafficType: 'user' + } +} + +const MyComponent = () => { + const track = useTrack(); + const accountTrack = useTrack(ACCOUNT_KEY, 'account'); + + useEffect(() => { + track('my_event'); + accountTrack('my_event'); + }, []); + + ... +}; + +const App = () => { + return ( + + + + ) +}; +``` + +should be refactored to: + +```tsx +const mySplitConfig = { + core: { + authorizationKey: YOUR_CLIENT_SIDE_SDK_KEY, + key: USER_KEY + } +} + +const MyComponent = () => { + const track = useTrack(); + const accountTrack = useTrack(ACCOUNT_KEY); + + useEffect(() => { + track('user', 'my_event'); + accountTrack('account', 'my_event'); + }, []); + ... +}; + +const App = () => { + return ( + + + + ) +}; +``` + # Migrating to get React SDK v1.11.0 improvements: Replacing the deprecated `SplitFactory` and `withSplitFactory` components Starting from React SDK v1.11.0, the `SplitFactoryProvider` component is available and can replace the older `SplitFactory` and `withSplitFactory` components. The deprecated components will continue working, until they are removed in a future major release. From 71e6425efac2b494eab1a55f09c3fac9d1391349 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Tue, 5 Nov 2024 13:24:38 -0300 Subject: [PATCH 3/7] Polishing --- CHANGES.txt | 2 +- MIGRATION-GUIDE.md | 34 +++++++++++++++++----------------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/CHANGES.txt b/CHANGES.txt index 7825250..d2029df 100644 --- a/CHANGES.txt +++ b/CHANGES.txt @@ -7,7 +7,7 @@ - BREAKING CHANGES: - Updated the default value of the `updateOnSdkUpdate` and `updateOnSdkTimedout` parameters of the `useSplitClient` and `useSplitTreatments` hooks options object to `true`, to re-render on all SDK events by default. The same applies for the equivalent props in the `[with]SplitClient` and `[with]SplitTreatments` components. - Updated error handling: using the library modules without wrapping them in a `SplitFactoryProvider` component will now throw an error instead of logging it, as the modules requires the `SplitContext` to work properly. - - Updated the `SplitFactoryProvider` component to not accept a child as a function (render prop), to avoid unnecessary re-renders when using the library hooks. Refer to ./MIGRATION-GUIDE.md for instructions on how to migrate the child as a function to a regular React element. + - Updated the `SplitFactoryProvider` component to not accept a child as a function (render prop), to avoid unnecessary re-renders when using the library hooks. Refer to ./MIGRATION-GUIDE.md for instructions on how to migrate your component to be passed as a regular React JSX element if you were using this pattern. - Removed the `core.trafficType` option from the SDK configuration object, and the `trafficType` parameter from the SDK `client()` method, `useSplitClient`, `useTrack`, `withSplitClient` and `SplitClient` component. This is because traffic types can no longer be bound to SDK clients in JavaScript SDK v11.0.0, and so the traffic type must be provided as first argument in the `track` method calls. - Removed deprecated modules: `SplitFactory` component, `useClient`, `useTreatments` and `useManager` hooks. Refer to ./MIGRATION-GUIDE.md for instructions on how to migrate to the new alternatives. - Renamed `SplitSdk` to `SplitFactory` function, which is the underlying Split SDK factory, i.e., `import { SplitFactory } from '@splitsoftware/splitio'`. diff --git a/MIGRATION-GUIDE.md b/MIGRATION-GUIDE.md index 7a60ba9..15f4447 100644 --- a/MIGRATION-GUIDE.md +++ b/MIGRATION-GUIDE.md @@ -3,11 +3,11 @@ React SDK v2.0.0 has a few breaking changes that you should consider when migrating from a previous version. The main changes are: -- Deprecated `useClient`, `useTreatments`, and `useManager` hooks have been removed. +- **Deprecated `useClient`, `useTreatments`, and `useManager` hooks have been removed.** Follow [this section](#migrating-to-get-react-sdk-v1100-improvements-replacing-the-deprecated-useclient-usetreatments-and-usemanager-hooks) to migrate to the new hooks `useSplitClient`, `useSplitTreatments`, and `useSplitManager` respectively. -- Deprecated `SplitFactory` provider has been removed, `withSplitFactory` is deprecated, and `SplitFactoryProvider` doesn't accept `updateOn` props and a render function as children anymore. +- **Deprecated `SplitFactory` provider has been removed, `withSplitFactory` is deprecated, and `SplitFactoryProvider` doesn't accept `updateOn` props and a render function as children anymore.** To migrate your existing code to the new version of `SplitFactoryProvider`, consider the following refactor example. Replace: @@ -37,7 +37,7 @@ const App = () => { // or withSplitFactory const App = withSplitFactory(mySplitConfig, undefined, DEFAULT_CLIENT_ATTRIBUTES)( - MyComponent, false /* updateOnSdkUpdate */ + MyComponent, false /* updateOnSdkUpdate = false */ ); ``` @@ -45,14 +45,14 @@ with: ```tsx const MyComponent = () => { - const props: ISplitContextValues = useSplitClient({ updateOnSdkUpdate: false, attributes: DEFAULT_CLIENT_ATTRIBUTES }); + const props: ISplitContextValues = useSplitClient({ updateOnSdkUpdate: false }); const { factory, client, isReady, isReadyFromCache, ... } = props; ... }; const App = () => { return ( - + ); @@ -62,9 +62,9 @@ const App = () => { Notice that `MyComponent` was refactored to use the `useSplitClient` hook and is passed as a React element rather than a render function as children. The `useSplitClient` hook is called without providing an `splitKey` param, meaning that the client at the context will be used, i.e., the default client which key is set in the `core.key` property of the `mySplitConfig` object, and the `updateOn` and `attributes` props are passed as options to the hook. -- High-Order-Components (`withSplitClient`, `withSplitTreatments`) and components that accept a render function as child component (`SplitTreatments`, and `SplitClient`) have been deprecated and might be removed in future major releases. The deprecation is intended to simplify the API and discourage the use of old patterns (HOCs and render props) in favor of hook alternatives to take advantage of React optimizations. +- **High-Order-Components (`withSplitClient`, `withSplitTreatments`) and components that accept a render function as child component (`SplitTreatments`, and `SplitClient`) have been deprecated and might be removed in a future major release.** -To migrate your existing code based on `withSplitClient` or `SplitClient`, consider the following refactor using the `useSplitClient` hook. Replace: +The deprecation is intended to simplify the API and discourage the use of old patterns (HOCs and render props) in favor of hook alternatives to take advantage of React optimizations. To migrate your existing code based on `withSplitClient` or `SplitClient`, consider the following refactor using the `useSplitClient` hook. Replace: ```tsx const MyComponent = (props: ISplitContextValues) => { @@ -73,8 +73,8 @@ const MyComponent = (props: ISplitContextValues) => { }; const App = withSplitFactory(mySplitConfig)( - withSplitClient(KEY)( - MyComponent, undefined, undefined, undefined, false /* updateOnSdkReadyFromCache */ + withSplitClient(OTHER_KEY, OTHER_KEY_ATTRIBUTES)( + MyComponent, undefined, undefined, undefined, false /* updateOnSdkReadyFromCache = false */ ) ); @@ -82,7 +82,7 @@ const App = withSplitFactory(mySplitConfig)( const App = () => { return ( - + {MyComponent} @@ -94,7 +94,7 @@ with: ```tsx const MyComponent = () => { - const props: ISplitContextValues = useSplitClient({ splitKey: KEY, updateOnSdkReadyFromCache: false }); + const props: ISplitContextValues = useSplitClient({ splitKey: OTHER_KEY, attributes: OTHER_KEY_ATTRIBUTES, updateOnSdkReadyFromCache: false }); const { client, isReady, ... } = props; ... }; @@ -117,9 +117,9 @@ const MyComponent = (props: ISplitTreatmentsChildProps) => { }; const App = withSplitFactory(mySplitConfig)( - withSplitClient(KEY)( + withSplitClient(OTHER_KEY)( withSplitTreatments(FEATURE_FLAG_NAMES, ATTRIBUTES)( - MyComponent, undefined, undefined, undefined, false /* updateOnSdkReadyFromCache */ + MyComponent ) ) ); @@ -128,7 +128,7 @@ const App = withSplitFactory(mySplitConfig)( const App = () => { return ( - + {MyComponent} @@ -142,7 +142,7 @@ with: ```tsx const MyComponent = () => { - const props: ISplitTreatmentsChildProps = useSplitTreatments({ splitKey: KEY, names: FEATURE_FLAG_NAMES, attributes: ATTRIBUTES, updateOnSdkReadyFromCache: false }); + const props: ISplitTreatmentsChildProps = useSplitTreatments({ splitKey: OTHER_KEY, names: FEATURE_FLAG_NAMES, attributes: ATTRIBUTES }); const { treatments, isReady, ... } = props; ... }; @@ -156,7 +156,7 @@ const App = () => { }; ``` -- Renamed `SplitSdk` function to `SplitFactory`. +- **Renamed `SplitSdk` function to `SplitFactory`.** If you are using the `SplitSdk` function to create a factory and pass it to the `SplitFactoryProvider` component, you should rename it to `SplitFactory`. For example: @@ -190,7 +190,7 @@ const App = () => { }; ``` -- Traffic type cannot be bound to SDK clients anymore. +- **Traffic type cannot be bound to SDK clients anymore.** If you were passing the `trafficType` to the SDK config or the `useSplitClient` or `useTrack` hooks, you should remove it. The `trafficType` is now required to be passed as initial argument of the `track` method. For example: From 4b6a28d8e29d86843fa669b6b2d15abf1d34fe91 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Tue, 5 Nov 2024 16:46:09 -0300 Subject: [PATCH 4/7] Polishing --- MIGRATION-GUIDE.md | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/MIGRATION-GUIDE.md b/MIGRATION-GUIDE.md index 15f4447..0ed5282 100644 --- a/MIGRATION-GUIDE.md +++ b/MIGRATION-GUIDE.md @@ -1,5 +1,5 @@ -# Migrating to React SDK v2.0.0: +# Migrating to React SDK v2.0.0 React SDK v2.0.0 has a few breaking changes that you should consider when migrating from a previous version. The main changes are: @@ -9,7 +9,7 @@ Follow [this section](#migrating-to-get-react-sdk-v1100-improvements-replacing-t - **Deprecated `SplitFactory` provider has been removed, `withSplitFactory` is deprecated, and `SplitFactoryProvider` doesn't accept `updateOn` props and a render function as children anymore.** -To migrate your existing code to the new version of `SplitFactoryProvider`, consider the following refactor example. Replace: +To migrate your existing code to the new version of `SplitFactoryProvider`, consider the following refactor example: ```tsx const MyComponent = (props: ISplitContextValues) => { @@ -41,7 +41,7 @@ const App = withSplitFactory(mySplitConfig, undefined, DEFAULT_CLIENT_ATTRIBUTES ); ``` -with: +should be refactored to: ```tsx const MyComponent = () => { @@ -59,12 +59,14 @@ const App = () => { }; ``` -Notice that `MyComponent` was refactored to use the `useSplitClient` hook and is passed as a React element rather than a render function as children. -The `useSplitClient` hook is called without providing an `splitKey` param, meaning that the client at the context will be used, i.e., the default client which key is set in the `core.key` property of the `mySplitConfig` object, and the `updateOn` and `attributes` props are passed as options to the hook. +Notice that `MyComponent` was refactored to use the `useSplitClient` hook and is passed as a React JSX element rather than a render function. +The `useSplitClient` hook is called without providing an `splitKey` param, meaning that the default client, which key is set in the `core.key` property of the `mySplitConfig` object, will be used, and the `updateOn` and `attributes` props are passed as options to the hook. - **High-Order-Components (`withSplitClient`, `withSplitTreatments`) and components that accept a render function as child component (`SplitTreatments`, and `SplitClient`) have been deprecated and might be removed in a future major release.** -The deprecation is intended to simplify the API and discourage the use of old patterns (HOCs and render props) in favor of hook alternatives to take advantage of React optimizations. To migrate your existing code based on `withSplitClient` or `SplitClient`, consider the following refactor using the `useSplitClient` hook. Replace: +The deprecation is intended to simplify the API and discourage the use of old patterns (HOCs and render props) in favor of hook alternatives to take advantage of React optimizations. + +To migrate your existing code based on `withSplitClient` or `SplitClient`, consider the following refactor using the `useSplitClient` hook: ```tsx const MyComponent = (props: ISplitContextValues) => { @@ -90,7 +92,7 @@ const App = () => { }; ``` -with: +should be refactored to: ```tsx const MyComponent = () => { @@ -108,7 +110,7 @@ const App = () => { }; ``` -To migrate your existing code based on `withSplitTreatments` or `SplitTreatments`, consider the following refactor using the `useSplitTreatments` hook. Replace: +To migrate your existing code based on `withSplitTreatments` or `SplitTreatments`, consider the following refactor using the `useSplitTreatments` hook: ```tsx const MyComponent = (props: ISplitTreatmentsChildProps) => { @@ -138,7 +140,7 @@ const App = () => { }; ``` -with: +should be refactored to: ```tsx const MyComponent = () => { From 2897070715c49a37245051cb194ca9b53f29f089 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Wed, 6 Nov 2024 16:20:34 -0300 Subject: [PATCH 5/7] Polishing --- MIGRATION-GUIDE.md | 2 +- README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/MIGRATION-GUIDE.md b/MIGRATION-GUIDE.md index 0ed5282..dac505a 100644 --- a/MIGRATION-GUIDE.md +++ b/MIGRATION-GUIDE.md @@ -64,7 +64,7 @@ The `useSplitClient` hook is called without providing an `splitKey` param, meani - **High-Order-Components (`withSplitClient`, `withSplitTreatments`) and components that accept a render function as child component (`SplitTreatments`, and `SplitClient`) have been deprecated and might be removed in a future major release.** -The deprecation is intended to simplify the API and discourage the use of old patterns (HOCs and render props) in favor of hook alternatives to take advantage of React optimizations. +The deprecation is intended to simplify the API and discourage using old patterns (HOCs and render props) in favor of the *hook* alternatives, to take advantage of React optimizations. To migrate your existing code based on `withSplitClient` or `SplitClient`, consider the following refactor using the `useSplitClient` hook: diff --git a/README.md b/README.md index 8e26797..bfc8290 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ This SDK is designed to work with Split, the platform for controlled rollouts, w ## Compatibility -This SDK is compatible with React 16.8.0 and above, since it uses **React Hooks** introduced in that version. +This SDK is compatible with React 16.8.0 and above, since it uses **React Hooks API** introduced in that version. ## Getting started Below is a simple example that describes the instantiation and most basic usage of our SDK: From 7acd62393b24e7042defc34340a3448bdf3525ea Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Fri, 8 Nov 2024 18:25:14 -0300 Subject: [PATCH 6/7] Lena's feedback --- .github/workflows/ci-cd.yml | 2 +- CHANGES.txt | 1 + MIGRATION-GUIDE.md | 14 +++++++------- README.md | 4 ++-- webpack.common.js | 2 +- 5 files changed, 12 insertions(+), 11 deletions(-) diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml index 3870a1f..57bc60a 100644 --- a/.github/workflows/ci-cd.yml +++ b/.github/workflows/ci-cd.yml @@ -27,7 +27,7 @@ jobs: with: fetch-depth: 0 - - name: Set up nodejs + - name: Set up Node.js uses: actions/setup-node@v3 with: node-version: 'lts/*' diff --git a/CHANGES.txt b/CHANGES.txt index d2029df..2f76f56 100644 --- a/CHANGES.txt +++ b/CHANGES.txt @@ -5,6 +5,7 @@ - Renamed distribution folders from `/lib` to `/cjs` for CommonJS build, and `/es` to `/esm` for ECMAScript Modules build. - Bugfixing - When the `config` prop is provided, the `SplitFactoryProvider` now makes the SDK factory and client instances available in the context immediately during the initial render, instead of waiting for the first SDK event (Related to https://github.com/splitio/react-client/issues/198). This change fixes a bug in the `useTrack` hook, which was not retrieving the client's `track` method during the initial render. - BREAKING CHANGES: + - NOTE: Refer to ./MIGRATION-GUIDE.md for instructions on how to migrate your codebase from version 1.x to 2.0.0. - Updated the default value of the `updateOnSdkUpdate` and `updateOnSdkTimedout` parameters of the `useSplitClient` and `useSplitTreatments` hooks options object to `true`, to re-render on all SDK events by default. The same applies for the equivalent props in the `[with]SplitClient` and `[with]SplitTreatments` components. - Updated error handling: using the library modules without wrapping them in a `SplitFactoryProvider` component will now throw an error instead of logging it, as the modules requires the `SplitContext` to work properly. - Updated the `SplitFactoryProvider` component to not accept a child as a function (render prop), to avoid unnecessary re-renders when using the library hooks. Refer to ./MIGRATION-GUIDE.md for instructions on how to migrate your component to be passed as a regular React JSX element if you were using this pattern. diff --git a/MIGRATION-GUIDE.md b/MIGRATION-GUIDE.md index dac505a..bf75182 100644 --- a/MIGRATION-GUIDE.md +++ b/MIGRATION-GUIDE.md @@ -3,11 +3,11 @@ React SDK v2.0.0 has a few breaking changes that you should consider when migrating from a previous version. The main changes are: -- **Deprecated `useClient`, `useTreatments`, and `useManager` hooks have been removed.** +### • Deprecated `useClient`, `useTreatments`, and `useManager` hooks have been removed. -Follow [this section](#migrating-to-get-react-sdk-v1100-improvements-replacing-the-deprecated-useclient-usetreatments-and-usemanager-hooks) to migrate to the new hooks `useSplitClient`, `useSplitTreatments`, and `useSplitManager` respectively. +Follow [this section](#migrating-to-get-react-sdk-v1100-improvements-replacing-the-deprecated-useclient-usetreatments-and-usemanager-hooks) to migrate to the new hooks `useSplitClient`, `useSplitTreatments`, and `useSplitManager`. -- **Deprecated `SplitFactory` provider has been removed, `withSplitFactory` is deprecated, and `SplitFactoryProvider` doesn't accept `updateOn` props and a render function as children anymore.** +### • Deprecated `SplitFactory` provider has been removed, `withSplitFactory` is deprecated, and `SplitFactoryProvider` doesn't accept `updateOn` props and a render function as children anymore. To migrate your existing code to the new version of `SplitFactoryProvider`, consider the following refactor example: @@ -62,7 +62,7 @@ const App = () => { Notice that `MyComponent` was refactored to use the `useSplitClient` hook and is passed as a React JSX element rather than a render function. The `useSplitClient` hook is called without providing an `splitKey` param, meaning that the default client, which key is set in the `core.key` property of the `mySplitConfig` object, will be used, and the `updateOn` and `attributes` props are passed as options to the hook. -- **High-Order-Components (`withSplitClient`, `withSplitTreatments`) and components that accept a render function as child component (`SplitTreatments`, and `SplitClient`) have been deprecated and might be removed in a future major release.** +### • High-Order-Components (`withSplitClient`, `withSplitTreatments`) and components that accept a render function as child component (`SplitTreatments`, and `SplitClient`) have been deprecated and might be removed in a future major release. The deprecation is intended to simplify the API and discourage using old patterns (HOCs and render props) in favor of the *hook* alternatives, to take advantage of React optimizations. @@ -158,7 +158,7 @@ const App = () => { }; ``` -- **Renamed `SplitSdk` function to `SplitFactory`.** +### • Renamed `SplitSdk` function to `SplitFactory`. If you are using the `SplitSdk` function to create a factory and pass it to the `SplitFactoryProvider` component, you should rename it to `SplitFactory`. For example: @@ -192,9 +192,9 @@ const App = () => { }; ``` -- **Traffic type cannot be bound to SDK clients anymore.** +### • Traffic type cannot be bound to SDK clients anymore. -If you were passing the `trafficType` to the SDK config or the `useSplitClient` or `useTrack` hooks, you should remove it. The `trafficType` is now required to be passed as initial argument of the `track` method. For example: +If you were passing the `trafficType` to the SDK config, `useSplitClient` hook, or `useTrack` hook, you should remove it. The `trafficType` must now be passed as the first argument of the `track` method. For example: ```tsx const mySplitConfig = { diff --git a/README.md b/README.md index bfc8290..8c11056 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ This SDK is designed to work with Split, the platform for controlled rollouts, w ## Compatibility -This SDK is compatible with React 16.8.0 and above, since it uses **React Hooks API** introduced in that version. +This SDK is compatible with React 16.8.0 and above, since it uses [React Hooks API](https://react.dev/reference/react/hooks) introduced in that version. ## Getting started Below is a simple example that describes the instantiation and most basic usage of our SDK: @@ -83,7 +83,7 @@ Split has built and maintains SDKs for: * Java [Github](https://github.com/splitio/java-client) [Docs](https://help.split.io/hc/en-us/articles/360020405151-Java-SDK) * JavaScript [Github](https://github.com/splitio/javascript-client) [Docs](https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK) * JavaScript for Browser [Github](https://github.com/splitio/javascript-browser-client) [Docs](https://help.split.io/hc/en-us/articles/360058730852-Browser-SDK) -* Node [Github](https://github.com/splitio/javascript-client) [Docs](https://help.split.io/hc/en-us/articles/360020564931-Node-js-SDK) +* Node.js [Github](https://github.com/splitio/javascript-client) [Docs](https://help.split.io/hc/en-us/articles/360020564931-Node-js-SDK) * PHP [Github](https://github.com/splitio/php-client) [Docs](https://help.split.io/hc/en-us/articles/360020350372-PHP-SDK) * PHP thin-client [Github](https://github.com/splitio/php-thin-client) [Docs](https://help.split.io/hc/en-us/articles/18305128673933-PHP-Thin-Client-SDK) * Python [Github](https://github.com/splitio/python-client) [Docs](https://help.split.io/hc/en-us/articles/360020359652-Python-SDK) diff --git a/webpack.common.js b/webpack.common.js index dec2458..a49136d 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -30,7 +30,7 @@ module.exports = { ], }, - node: false, // Not include Node polyfills, https://webpack.js.org/configuration/node + node: false, // Not include Node.js polyfills, https://webpack.js.org/configuration/node target: ['web', 'es5'], // target 'es5', since 'es2015' is the default in Webpack 5 externals: { From 9d9ab3d44574748381f67d19df36977fcc47c793 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Fri, 8 Nov 2024 18:29:47 -0300 Subject: [PATCH 7/7] Lena's feedback --- MIGRATION-GUIDE.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/MIGRATION-GUIDE.md b/MIGRATION-GUIDE.md index bf75182..df9bce4 100644 --- a/MIGRATION-GUIDE.md +++ b/MIGRATION-GUIDE.md @@ -59,8 +59,7 @@ const App = () => { }; ``` -Notice that `MyComponent` was refactored to use the `useSplitClient` hook and is passed as a React JSX element rather than a render function. -The `useSplitClient` hook is called without providing an `splitKey` param, meaning that the default client, which key is set in the `core.key` property of the `mySplitConfig` object, will be used, and the `updateOn` and `attributes` props are passed as options to the hook. +Notice that `MyComponent` was refactored to use the `useSplitClient` hook and is passed as a React JSX element rather than a render function. The `useSplitClient` hook is called without providing a `splitKey` param. This means that the default client (whose key is set in the `core.key` property of the `mySplitConfig` object) will be used, and the `updateOn` and `attributes` props are passed as options to the hook. ### • High-Order-Components (`withSplitClient`, `withSplitTreatments`) and components that accept a render function as child component (`SplitTreatments`, and `SplitClient`) have been deprecated and might be removed in a future major release.