Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ECO-1416] Add migration guide for v2 #1670

Merged
merged 5 commits into from
Mar 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ably.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1578,7 +1578,7 @@
*
* @param method - The request method to use, such as `GET`, `POST`.
* @param path - The request path.
* @param version - The major version of the Ably REST API to use. See the [REST API reference](https://ably.com/docs/api/rest-api#versioning) for information on versioning.
* @param version - The version of the Ably REST API to use. See the [REST API reference](https://ably.com/docs/api/rest-api#versioning) for information on versioning.
* @param params - The parameters to include in the URL query of the request. The parameters depend on the endpoint being queried. See the [REST API reference](https://ably.com/docs/api/rest-api) for the available parameters of each endpoint.
* @param body - The JSON body of the request.
* @param headers - Additional HTTP headers to include in the request.
Expand Down Expand Up @@ -1669,7 +1669,7 @@
*
* @param method - The request method to use, such as `GET`, `POST`.
* @param path - The request path.
* @param version - The major version of the Ably REST API to use. See the [REST API reference](https://ably.com/docs/api/rest-api#versioning) for information on versioning.
* @param version - The version of the Ably REST API to use. See the [REST API reference](https://ably.com/docs/api/rest-api#versioning) for information on versioning.
* @param params - The parameters to include in the URL query of the request. The parameters depend on the endpoint being queried. See the [REST API reference](https://ably.com/docs/api/rest-api) for the available parameters of each endpoint.
* @param body - The JSON body of the request.
* @param headers - Additional HTTP headers to include in the request.
Expand Down Expand Up @@ -2175,8 +2175,8 @@
*/
get(name: string, channelOptions?: ChannelOptions): T;
/**
* @experimental This is a preview feature and may change in a future non-major release.

Check warning on line 2178 in ably.d.ts

View workflow job for this annotation

GitHub Actions / lint

Invalid JSDoc tag name "experimental"
* This experimental method allows you to create custom realtime data feeds by selectively subscribing

Check warning on line 2179 in ably.d.ts

View workflow job for this annotation

GitHub Actions / lint

Expected no lines between tags
* to receive only part of the data from the channel.
* See the [announcement post](https://pages.ably.com/subscription-filters-preview) for more information.
*
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,42 +9,47 @@ Since these hooks now return more values we've opted to change them to return ob
You can still access the return values using simple destructuring syntax like in the below example:

```jsx
const { channel, ably } = useChannel("your-channel-name", (message) => { /* ... */ });
const { channel, ably } = useChannel('your-channel-name', (message) => {
/* ... */
});

const { presenceData, updateStatus } = usePresence("your-channel-name");
const { presenceData, updateStatus } = usePresence('your-channel-name');
```

### Replacing `configureAbly` with `AblyProvider`
### Replacing `configureAbly` with `AblyProvider`

In versions 1 and 2 of our react-hooks, we exported a function called `configureAbly` which was used to register an Ably client instance to global state.
This caused a few issues (most notably it made the hooks difficult to use with hot module reloading), so we have replaced the global configuration function with a context provider (`AblyProvider`)
The simplest way to use the context provider is to create your own ably-js client outside and then pass it as a prop to the `AblyProvider`.
All child components of the `AblyProvider` will then be able to use the hooks, making use of the provided Ably client instance. For this reason, we recommend putting the `AblyProvider` high up in your component tree, surrounding all components which may need to use Ably hooks.

For example, replace this:

```jsx
configureAbly(options);
```

With this:

```jsx
const client = new Ably.Realtime(options);

return <AblyProvider client={ably}>
{children}
</AblyProvider>
return <AblyProvider client={ably}>{children}</AblyProvider>;
```

If you were already using multiple Ably clients in the same react application, you may pass in an optional `id` prop to the provider, which you can then pass to the hooks to specify which Ably client instance the hook should use:

```jsx
const client = new Ably.Realtime(options);

return <AblyProvider client={ably} id="foo">
{children}
</AblyProvider>
return (
<AblyProvider client={ably} id="foo">
{children}
</AblyProvider>
);

// in a child component:
useChannel({channelName: 'my_channel', id: 'foo'}, (msg) => {
useChannel({ channelName: 'my_channel', id: 'foo' }, (msg) => {
console.log(msg);
});
```
Loading
Loading