[ECO-4644] Rename id field to ablyId in React Hooks

src/platform/react-hooks/sample-app/src/App.tsx

@@ -22,7 +22,7 @@ function App() {
   useChannel(
     {
       channelName: 'your-derived-channel-name',
-      id: 'rob',
+      ablyId: 'rob',
     },
     (message) => {
       updateDerivedChannelMessages((prev) => [...prev, message]);
@@ -32,7 +32,7 @@ function App() {
   useChannel(
     {
       channelName: 'your-derived-channel-name',
-      id: 'frontOffice',
+      ablyId: 'frontOffice',
     },
     (message) => {
       updateFrontOfficeOnlyMessages((prev) => [...prev, message]);

src/platform/react-hooks/sample-app/src/script.tsx

@@ -6,7 +6,7 @@
 import App from './App.js';
 import { AblyProvider, ChannelProvider } from '../../src/index.js';
 
 const container = document.getElementById('root')!;
 
 function generateRandomId() {
   return Math.random().toString(36).substr(2, 9);
@@ -21,17 +21,17 @@
 root.render(
   <React.StrictMode>
     <AblyProvider client={client}>
-      <AblyProvider id="rob" client={client}>
-        <AblyProvider id="frontOffice" client={client}>
+      <AblyProvider ablyId="rob" client={client}>
+        <AblyProvider ablyId="frontOffice" client={client}>
           <ChannelProvider channelName="your-channel-name" options={{ modes: ['PRESENCE', 'PUBLISH', 'SUBSCRIBE'] }}>
             <ChannelProvider channelName="your-derived-channel-name">
               <ChannelProvider
-                id="rob"
+                ablyId="rob"
                 channelName="your-derived-channel-name"
                 deriveOptions={{ filter: 'headers.email == `"rob.pike@domain.com"` || headers.company == `"domain"`' }}
               >
                 <ChannelProvider
-                  id="frontOffice"
+                  ablyId="frontOffice"
                   channelName="your-derived-channel-name"
                   deriveOptions={{ filter: 'headers.role == `"front-office"` || headers.company == `"domain"`' }}
                 >

src/platform/react-hooks/src/AblyProvider.tsx

@@ -6,7 +6,7 @@ const canUseSymbol = typeof Symbol === 'function' && typeof Symbol.for === 'func
 interface AblyProviderProps {
   children?: React.ReactNode | React.ReactNode[] | null;
   client?: Ably.RealtimeClient;
-  id?: string;
+  ablyId?: string;
 }
 
 export interface AblyContextProps {
@@ -33,7 +33,7 @@ export function getContext(ctxId = 'default'): AblyContextType {
   return ctxMap[ctxId];
 }
 
-export const AblyProvider = ({ client, children, id = 'default' }: AblyProviderProps) => {
+export const AblyProvider = ({ client, children, ablyId = 'default' }: AblyProviderProps) => {
   const value: AblyContextProps = useMemo(
     () => ({
       client,
@@ -46,9 +46,9 @@ export const AblyProvider = ({ client, children, id = 'default' }: AblyProviderP
     throw new Error('AblyProvider: the `client` prop is required');
   }
 
-  let context = getContext(id);
+  let context = getContext(ablyId);
   if (!context) {
-    context = ctxMap[id] = React.createContext({ client, _channelNameToChannelContext: {} });
+    context = ctxMap[ablyId] = React.createContext({ client, _channelNameToChannelContext: {} });
   }
 
   return <context.Provider value={value}>{children}</context.Provider>;

src/platform/react-hooks/src/AblyReactHooks.ts

@@ -2,18 +2,15 @@ import * as Ably from 'ably';
 
 export type ChannelNameAndOptions = {
   channelName: string;
-  id?: string;
+  ablyId?: string;
   subscribeOnly?: boolean;
   skip?: boolean;
 
   onConnectionError?: (error: Ably.ErrorInfo) => unknown;
   onChannelError?: (error: Ably.ErrorInfo) => unknown;
 };
 
-export type ChannelNameAndId = {
-  channelName: string;
-  id?: string;
-};
+export type ChannelNameAndAblyId = Pick<ChannelNameAndOptions, 'channelName' | 'ablyId'>;
 export type ChannelParameters = string | ChannelNameAndOptions;
 
 export const version = '1.2.49';

src/platform/react-hooks/src/ChannelProvider.tsx

@@ -4,21 +4,21 @@ import { type AblyContextProps, getContext } from './AblyProvider.js';
 import { channelOptionsWithAgent } from './AblyReactHooks.js';
 
 interface ChannelProviderProps {
-  id?: string;
+  ablyId?: string;
   channelName: string;
   options?: Ably.ChannelOptions;
   deriveOptions?: Ably.DeriveOptions;
   children?: React.ReactNode | React.ReactNode[] | null;
 }
 
 export const ChannelProvider = ({
-  id = 'default',
+  ablyId = 'default',
   channelName,
   options,
   deriveOptions,
   children,
 }: ChannelProviderProps) => {
-  const context = getContext(id);
+  const context = getContext(ablyId);
   const { client, _channelNameToChannelContext } = React.useContext(context);
 
   if (_channelNameToChannelContext[channelName]) {

src/platform/react-hooks/src/hooks/useAbly.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import { getContext } from '../AblyProvider.js';
 import * as API from 'ably';
 
-export function useAbly(id = 'default'): API.RealtimeClient {
-  const client = React.useContext(getContext(id)).client;
+export function useAbly(ablyId = 'default'): API.RealtimeClient {
+  const client = React.useContext(getContext(ablyId)).client;
 
   if (!client) {
     throw new Error(

src/platform/react-hooks/src/hooks/useChannel.test.tsx

@@ -62,8 +62,8 @@ describe('useChannel', () => {
   it('useChannel works with multiple clients', async () => {
     renderInCtxProvider(
       ablyClient,
-      <AblyProvider client={otherClient as unknown as Ably.RealtimeClient} id="otherClient">
-        <ChannelProvider channelName="bleh" id="otherClient">
+      <AblyProvider client={otherClient as unknown as Ably.RealtimeClient} ablyId="otherClient">
+        <ChannelProvider channelName="bleh" ablyId="otherClient">
           <UseChannelComponentMultipleClients />
         </ChannelProvider>
       </AblyProvider>,
@@ -307,17 +307,17 @@ describe('useChannel with deriveOptions', () => {
     const anotherClientId = 'anotherClient';
 
     render(
-      <AblyProvider client={ablyClient as unknown as Ably.RealtimePromise} id={cliendId}>
-        <AblyProvider client={anotherClient as unknown as Ably.RealtimePromise} id={anotherClientId}>
+      <AblyProvider client={ablyClient as unknown as Ably.RealtimePromise} ablyId={cliendId}>
+        <AblyProvider client={anotherClient as unknown as Ably.RealtimePromise} ablyId={anotherClientId}>
           <ChannelProvider
-            id={cliendId}
+            ablyId={cliendId}
             channelName={Channels.tasks}
             deriveOptions={{
               filter: 'headers.user == `"robert.griesemer@domain.io"` || headers.company == `"domain"`',
             }}
           >
             <ChannelProvider
-              id={anotherClientId}
+              ablyId={anotherClientId}
               channelName={Channels.alerts}
               deriveOptions={{
                 filter: 'headers.user == `"robert.griesemer@domain.io"` || headers.company == `"domain"`',
@@ -510,7 +510,7 @@ const UseChannelComponentMultipleClients = () => {
   useChannel({ channelName: 'blah' }, (message) => {
     updateMessages((prev) => [...prev, message]);
   });
-  useChannel({ channelName: 'bleh', id: 'otherClient' }, (message) => {
+  useChannel({ channelName: 'bleh', ablyId: 'otherClient' }, (message) => {
     updateMessages((prev) => [...prev, message]);
   });
 
@@ -544,10 +544,10 @@ const UseDerivedChannelComponentMultipleClients = ({
   anotherChannelName,
 }: UseDerivedChannelComponentMultipleClientsProps) => {
   const [messages, setMessages] = useState<Ably.Message[]>([]);
-  useChannel({ id: clientId, channelName }, (message) => {
+  useChannel({ ablyId: clientId, channelName }, (message) => {
     setMessages((prev) => [...prev, message]);
   });
-  useChannel({ id: anotherClientId, channelName: anotherChannelName }, (message) => {
+  useChannel({ ablyId: anotherClientId, channelName: anotherChannelName }, (message) => {
     setMessages((prev) => [...prev, message]);
   });
 

src/platform/react-hooks/src/hooks/useChannel.ts

@@ -37,10 +37,10 @@ export function useChannel(
       ? channelNameOrNameAndOptions
       : { channelName: channelNameOrNameAndOptions };
 
-  const ably = useAbly(channelHookOptions.id);
+  const ably = useAbly(channelHookOptions.ablyId);
   const { channelName, skip } = channelHookOptions;
 
-  const { channel, derived } = useChannelInstance(channelHookOptions.id, channelName);
+  const { channel, derived } = useChannelInstance(channelHookOptions.ablyId, channelName);
 
   const publish: Ably.RealtimeChannel['publish'] = useMemo(() => {
     if (!derived) return channel.publish.bind(channel);

src/platform/react-hooks/src/hooks/useChannelInstance.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ChannelContextProps, getContext } from '../AblyProvider.js';
 
-export function useChannelInstance(id: string, channelName: string): ChannelContextProps {
-  const channelContext = React.useContext(getContext(id))._channelNameToChannelContext[channelName];
+export function useChannelInstance(ablyId: string, channelName: string): ChannelContextProps {
+  const channelContext = React.useContext(getContext(ablyId))._channelNameToChannelContext[channelName];
 
   if (!channelContext) {
     throw new Error(

src/platform/react-hooks/src/hooks/useChannelStateListener.ts

@@ -1,5 +1,5 @@
 import * as Ably from 'ably';
-import { ChannelNameAndId, ChannelNameAndOptions } from '../AblyReactHooks.js';
+import { ChannelNameAndAblyId } from '../AblyReactHooks.js';
 import { useEventListener } from './useEventListener.js';
 import { useChannelInstance } from './useChannelInstance.js';
 
@@ -8,23 +8,24 @@ type ChannelStateListener = (stateChange: Ably.ChannelStateChange) => any;
 export function useChannelStateListener(channelName: string, listener?: ChannelStateListener);
 
 export function useChannelStateListener(
-  options: ChannelNameAndOptions | string,
+  options: ChannelNameAndAblyId | string,
   state?: Ably.ChannelState | Ably.ChannelState[],
   listener?: ChannelStateListener,
 );
 
 export function useChannelStateListener(
-  channelNameOrNameAndId: ChannelNameAndOptions | string,
+  channelNameOrNameAndAblyId: ChannelNameAndAblyId | string,
   stateOrListener?: Ably.ChannelState | Ably.ChannelState[] | ChannelStateListener,
   listener?: (stateChange: Ably.ChannelStateChange) => any,
 ) {
   const channelHookOptions =
-    typeof channelNameOrNameAndId === 'object' ? channelNameOrNameAndId : { channelName: channelNameOrNameAndId };
-  const id = (channelNameOrNameAndId as ChannelNameAndId)?.id;
+    typeof channelNameOrNameAndAblyId === 'object'
+      ? channelNameOrNameAndAblyId
+      : { channelName: channelNameOrNameAndAblyId };
 
-  const { channelName } = channelHookOptions;
+  const { ablyId, channelName } = channelHookOptions;
 
-  const { channel } = useChannelInstance(id, channelName);
+  const { channel } = useChannelInstance(ablyId, channelName);
 
   const _listener = typeof listener === 'function' ? listener : (stateOrListener as ChannelStateListener);
 

src/platform/react-hooks/src/hooks/useConnectionStateListener.ts

@@ -4,23 +4,24 @@ import { useEventListener } from './useEventListener.js';
 
 type ConnectionStateListener = (stateChange: Ably.ConnectionStateChange) => any;
 
-export function useConnectionStateListener(listener: ConnectionStateListener, id?: string);
+export function useConnectionStateListener(listener: ConnectionStateListener, ablyId?: string);
 
 export function useConnectionStateListener(
   state: Ably.ConnectionState | Ably.ConnectionState[],
   listener: ConnectionStateListener,
-  id?: string,
+  ablyId?: string,
 );
 
 export function useConnectionStateListener(
   stateOrListener?: Ably.ConnectionState | Ably.ConnectionState[] | ConnectionStateListener,
-  listenerOrId?: string | ConnectionStateListener,
-  id = 'default',
+  listenerOrAblyId?: string | ConnectionStateListener,
+  ablyId = 'default',
 ) {
-  const _id = typeof listenerOrId === 'string' ? listenerOrId : id;
-  const ably = useAbly(_id);
+  const _ablyId = typeof listenerOrAblyId === 'string' ? listenerOrAblyId : ablyId;
+  const ably = useAbly(_ablyId);
 
-  const listener = typeof listenerOrId === 'function' ? listenerOrId : (stateOrListener as ConnectionStateListener);
+  const listener =
+    typeof listenerOrAblyId === 'function' ? listenerOrAblyId : (stateOrListener as ConnectionStateListener);
   const state = typeof stateOrListener !== 'function' ? stateOrListener : undefined;
 
   useEventListener<Ably.ConnectionState, Ably.ConnectionStateChange>(ably.connection, listener, state);

src/platform/react-hooks/src/hooks/usePresence.test.tsx

@@ -107,8 +107,8 @@ describe('usePresence', () => {
   it('usePresence works with multiple clients', async () => {
     renderInCtxProvider(
       ablyClient,
-      <AblyProvider id="otherClient" client={otherClient as unknown as Ably.RealtimeClient}>
-        <ChannelProvider channelName={testChannelName} id="otherClient">
+      <AblyProvider ablyId="otherClient" client={otherClient as unknown as Ably.RealtimeClient}>
+        <ChannelProvider channelName={testChannelName} ablyId="otherClient">
           <UsePresenceComponentMultipleClients />
         </ChannelProvider>
       </AblyProvider>,
@@ -233,7 +233,7 @@ const UsePresenceComponent = ({ skip }: { skip?: boolean }) => {
 
 const UsePresenceComponentMultipleClients = () => {
   const { presenceData: val1, updateStatus: update1 } = usePresence({ channelName: testChannelName }, 'foo');
-  const { updateStatus: update2 } = usePresence({ channelName: testChannelName, id: 'otherClient' }, 'bar');
+  const { updateStatus: update2 } = usePresence({ channelName: testChannelName, ablyId: 'otherClient' }, 'bar');
 
   const presentUsers = val1.map((presence, index) => {
     return (

src/platform/react-hooks/src/hooks/usePresence.ts

@@ -27,8 +27,8 @@ export function usePresence<T = any>(
       ? channelNameOrNameAndOptions
       : { channelName: channelNameOrNameAndOptions };
 
-  const ably = useAbly(params.id);
-  const { channel } = useChannelInstance(params.id, params.channelName);
+  const ably = useAbly(params.ablyId);
+  const { channel } = useChannelInstance(params.ablyId, params.channelName);
 
   const subscribeOnly = typeof channelNameOrNameAndOptions === 'string' ? false : params.subscribeOnly;
 

src/platform/react-hooks/src/hooks/useStateErrors.ts

@@ -16,15 +16,15 @@ export function useStateErrors(params: ChannelNameAndOptions) {
         setConnectionError(stateChange.reason);
       }
     },
-    params.id,
+    params.ablyId,
   );
 
   useConnectionStateListener(
     ['connected', 'closed'],
     () => {
       setConnectionError(null);
     },
-    params.id,
+    params.ablyId,
   );
 
   useChannelStateListener(params, ['suspended', 'failed', 'detached'], (stateChange) => {