Skip to content

Commit

Permalink
Polishing
Browse files Browse the repository at this point in the history
  • Loading branch information
EmilianoSanchez committed Nov 5, 2024
1 parent b930e2e commit 71e6425
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 18 deletions.
2 changes: 1 addition & 1 deletion CHANGES.txt
Original file line number Diff line number Diff line change
Expand Up @@ -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'`.
Expand Down
34 changes: 17 additions & 17 deletions MIGRATION-GUIDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -37,22 +37,22 @@ const App = () => {

// or withSplitFactory
const App = withSplitFactory(mySplitConfig, undefined, DEFAULT_CLIENT_ATTRIBUTES)(
MyComponent, false /* updateOnSdkUpdate */
MyComponent, false /* updateOnSdkUpdate = false */
);
```

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 (
<SplitFactoryProvider config={mySplitConfig} >
<SplitFactoryProvider config={mySplitConfig} attributes={DEFAULT_CLIENT_ATTRIBUTES} >
<MyComponent />
</SplitFactoryProvider>
);
Expand All @@ -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) => {
Expand All @@ -73,16 +73,16 @@ 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 */
)
);

// or
const App = () => {
return (
<SplitFactory config={mySplitConfig} >
<SplitClient splitKey={KEY} updateOnSdkReadyFromCache={false} >
<SplitClient splitKey={OTHER_KEY} attributes={OTHER_KEY_ATTRIBUTES} updateOnSdkReadyFromCache={false} >
{MyComponent}
</SplitClient>
</SplitFactory>
Expand All @@ -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;
...
};
Expand All @@ -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
)
)
);
Expand All @@ -128,7 +128,7 @@ const App = withSplitFactory(mySplitConfig)(
const App = () => {
return (
<SplitFactory config={mySplitConfig} >
<SplitClient splitKey={KEY} updateOnSdkReadyFromCache={false} >
<SplitClient splitKey={OTHER_KEY} >
<SplitTreatments names={FEATURE_FLAG_NAMES} attributes={ATTRIBUTES} >
{MyComponent}
</SplitTreatments>
Expand All @@ -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;
...
};
Expand All @@ -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:

Expand Down Expand Up @@ -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:

Expand Down

0 comments on commit 71e6425

Please sign in to comment.