fix: use 'ably' as import path from react-hooks

The import paths here only worked before by accident - tsc would compile
then to `from '../../../ably'` which in most cases would resolve to
`node_modules/ably` however in certain environments (pnpm) this would
not be the case and therefore the types would not be imported correctly.
I've updated the tsconfig compilerOptions.paths field so that these are
resolved correctly for development, and when consumed as a library these
will just import directly from the 'ably' module.

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

@@ -1,7 +1,5 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import * as Ably from 'ably';
-import { Types } from '../../../../ably.js';
+import { Types } from 'ably';
 import React, { useMemo } from 'react';
 
 const canUseSymbol = typeof Symbol === 'function' && typeof Symbol.for === 'function';
@@ -31,15 +29,15 @@ export const AblyProvider = ({ client, children, id = 'default' }: AblyProviderP
     throw new Error('AblyProvider: the `client` prop is required');
   }
 
-  if (!(client instanceof Ably.Realtime) && !client?.options?.promises) {
+  if (!(client instanceof Ably.Realtime) && !(client as any)?.options?.promises) {
     throw new Error('AblyProvider: the `client` prop must take an instance of Ably.Realtime.Promise');
   }
 
   const realtime = useMemo(() => client, [client]);
 
   let context = getContext(id);
   if (!context) {
-    context = ctxMap[id] = React.createContext(realtime ?? 1);
+    context = ctxMap[id] = React.createContext(realtime);
   }
 
   return <context.Provider value={realtime}>{children}</context.Provider>;

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

@@ -1,4 +1,4 @@
-import { Types } from '../../../../ably.js';
+import { Types } from 'ably';
 
 export type ChannelNameAndOptions = {
   channelName: string;

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

@@ -1,4 +1,4 @@
-import { Types } from '../../../../../ably.js';
+import { Types } from 'ably';
 import { useEffect, useMemo, useRef } from 'react';
 import { channelOptionsWithAgent, ChannelParameters } from '../AblyReactHooks.js';
 import { useAbly } from './useAbly.js';

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

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { Types } from '../../../../../ably.js';
+import { Types } from 'ably';
 import { ChannelNameAndId, ChannelNameAndOptions, channelOptionsWithAgent } from '../AblyReactHooks.js';
 import { useAbly } from './useAbly.js';
 import { useEventListener } from './useEventListener.js';

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

@@ -1,4 +1,4 @@
-import { Types } from '../../../../../ably.js';
+import { Types } from 'ably';
 import { useAbly } from './useAbly.js';
 import { useEventListener } from './useEventListener.js';
 

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

@@ -1,4 +1,4 @@
-import { Types } from '../../../../../ably.js';
+import { Types } from 'ably';
 import { useEffect, useRef } from 'react';
 
 type EventListener<T> = (stateChange: T) => any;

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

@@ -1,4 +1,4 @@
-import { Types } from '../../../../../ably.js';
+import { Types } from 'ably';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { channelOptionsWithAgent, ChannelParameters } from '../AblyReactHooks.js';
 import { useAbly } from './useAbly.js';

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

@@ -1,4 +1,4 @@
-import { Types } from '../../../../../ably.js';
+import { Types } from 'ably';
 import { useState } from 'react';
 import { useConnectionStateListener } from './useConnectionStateListener.js';
 import { useChannelStateListener } from './useChannelStateListener.js';

src/platform/react-hooks/tsconfig.json

@@ -14,6 +14,9 @@
     "allowJs": true,
     "jsx": "react-jsx",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["vitest/globals"]
+    "types": ["vitest/globals"],
+    "paths": {
+      "ably": ["../../../"]
+    }
   }
 }