Merge pull request #80 from ably-labs/fix-imports

fix: use fully qualified imports with `.js` extension for ESM build

.eslintrc.json

@@ -14,15 +14,30 @@
         "ecmaVersion": "latest",
         "sourceType": "module"
     },
-    "plugins": ["@typescript-eslint", "react", "react-hooks"],
+    "plugins": ["@typescript-eslint", "react", "react-hooks", "import"],
     "rules": {
         // we should remove these at some point
-        "@typescript-eslint/no-explicit-any": 0,
-        "prefer-spread": 0
+        "@typescript-eslint/no-explicit-any": 0
     },
     "settings": {
         "react": {
             "version": "detect"
         }
-    }
+    },
+    "overrides": [
+        {
+            "files": ["**/*.{ts,tsx}"],
+            "rules": {
+                // see:
+                // https://github.com/microsoft/TypeScript/issues/16577#issuecomment-703190339
+                "import/extensions": [
+                    "error",
+                    "always",
+                    {
+                        "ignorePackages": true
+                    }
+                ]
+            }
+        }
+    ]
 }

package.json

@@ -34,9 +34,10 @@
     "devDependencies": {
         "@testing-library/react": "^13.3.0",
         "@typescript-eslint/eslint-plugin": "^6.1.0",
-        "@typescript-eslint/parser": "^6.1.0",
+        "@typescript-eslint/parser": "^6.4.0",
         "@vitejs/plugin-react": "^1.3.2",
         "eslint": "^8.45.0",
+        "eslint-plugin-import": "^2.28.0",
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-react-hooks": "^4.6.0",
         "jsdom": "^20.0.0",

sample-app/src/App.tsx

@@ -1,13 +1,12 @@
 import { Types } from 'ably';
 import React, { useState } from 'react';
 import {
-    AblyProvider,
     useChannel,
     usePresence,
     useConnectionStateListener,
     useChannelStateListener,
     useAbly,
-} from '../../src/index';
+} from '../../src/index.js';
 import './App.css';
 
 function App() {
@@ -24,9 +23,7 @@ function App() {
         }
     );
 
-    const [connectionState, setConnectionState] = useState(
-        ably.connection.state
-    );
+    const [, setConnectionState] = useState(ably.connection.state);
 
     useConnectionStateListener((stateChange) => {
         setConnectionState(stateChange.current);
@@ -82,7 +79,7 @@ function App() {
             <div style={{ position: 'fixed', width: '250px' }}>
                 <ConnectionState />
             </div>
-            <div style={{marginLeft: '250px'}}>
+            <div style={{ marginLeft: '250px' }}>
                 <h2>Channel detach</h2>
                 <button onClick={() => channel.detach()}>Detach</button>
                 <button onClick={() => ably.close()}>Close</button>

sample-app/src/script.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import * as Ably from 'ably';
 
-import App from './App';
-import { AblyProvider } from '../../src/index';
+import App from './App.js';
+import { AblyProvider } from '../../src/index.js';
 
 const container = document.getElementById('root')!;
 

src/hooks/useAbly.ts

@@ -1,6 +1,6 @@
 import { Types } from 'ably';
 import React from 'react';
-import { getContext } from '../AblyProvider';
+import { getContext } from '../AblyProvider.js';
 
 export function useAbly(id: string = 'default'): Types.RealtimePromise {
     const client = React.useContext(getContext(id)) as Types.RealtimePromise;

src/hooks/useChannel.test.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { it, beforeEach, describe, expect, vi } from 'vitest';
-import { useChannel } from './useChannel';
+import { useChannel } from './useChannel.js';
 import { render, screen, waitFor } from '@testing-library/react';
-import { FakeAblySdk, FakeAblyChannels } from '../fakes/ably';
+import { FakeAblySdk, FakeAblyChannels } from '../fakes/ably.js';
 import { Types } from 'ably';
 import { act } from 'react-dom/test-utils';
-import { AblyProvider } from '../AblyProvider';
+import { AblyProvider } from '../AblyProvider.js';
 
 function renderInCtxProvider(
     client: FakeAblySdk,

src/hooks/useChannel.ts

@@ -1,8 +1,8 @@
 import { Types } from 'ably';
 import { useEffect, useMemo, useRef } from 'react';
 import { ChannelParameters } from '../AblyReactHooks.js';
-import { useAbly } from './useAbly';
-import { useStateErrors } from './useStateErrors';
+import { useAbly } from './useAbly.js';
+import { useStateErrors } from './useStateErrors.js';
 
 export type AblyMessageCallback = Types.messageCallback<Types.Message>;
 

src/hooks/useChannelStateListener.test.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { it, beforeEach, describe, expect } from 'vitest';
-import { useChannelStateListener } from './useChannelStateListener';
+import { useChannelStateListener } from './useChannelStateListener.js';
 import { useState } from 'react';
 import { render, screen } from '@testing-library/react';
-import { FakeAblySdk, FakeAblyChannels } from '../fakes/ably';
+import { FakeAblySdk, FakeAblyChannels } from '../fakes/ably.js';
 import { Types } from 'ably';
 import { act } from 'react-dom/test-utils';
-import { AblyProvider } from '../AblyProvider';
+import { AblyProvider } from '../AblyProvider.js';
 
 function renderInCtxProvider(
     client: FakeAblySdk,

src/hooks/useChannelStateListener.ts

@@ -1,7 +1,7 @@
 import { Types } from 'ably';
-import { ChannelNameAndId } from '../AblyReactHooks';
-import { useAbly } from './useAbly';
-import { useEventListener } from './useEventListener';
+import { ChannelNameAndId } from '../AblyReactHooks.js';
+import { useAbly } from './useAbly.js';
+import { useEventListener } from './useEventListener.js';
 
 type ChannelStateListener = (stateChange: Types.ChannelStateChange) => any;
 

src/hooks/useConnectionStateListener.test.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { it, beforeEach, describe, expect } from 'vitest';
 import { useState } from 'react';
 import { render, screen } from '@testing-library/react';
-import { FakeAblySdk } from '../fakes/ably';
+import { FakeAblySdk } from '../fakes/ably.js';
 import { Types } from 'ably';
 import { act } from 'react-dom/test-utils';
-import { AblyProvider } from '../AblyProvider';
-import { useConnectionStateListener } from './useConnectionStateListener';
+import { AblyProvider } from '../AblyProvider.js';
+import { useConnectionStateListener } from './useConnectionStateListener.js';
 
 function renderInCtxProvider(
     client: FakeAblySdk,

src/hooks/useConnectionStateListener.ts

@@ -1,6 +1,6 @@
 import { Types } from 'ably';
-import { useAbly } from './useAbly';
-import { useEventListener } from './useEventListener';
+import { useAbly } from './useAbly.js';
+import { useEventListener } from './useEventListener.js';
 
 type ConnectionStateListener = (
     stateChange: Types.ConnectionStateChange

src/hooks/usePresence.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { it, beforeEach, describe, expect, vi } from 'vitest';
-import { usePresence } from './usePresence';
+import { usePresence } from './usePresence.js';
 import { render, screen, act } from '@testing-library/react';
-import { FakeAblySdk, FakeAblyChannels } from '../fakes/ably';
-import { AblyProvider } from '../AblyProvider';
+import { FakeAblySdk, FakeAblyChannels } from '../fakes/ably.js';
+import { AblyProvider } from '../AblyProvider.js';
 import { Types } from 'ably';
 
 function renderInCtxProvider(

src/hooks/usePresence.ts

@@ -2,7 +2,7 @@ import { Types } from 'ably';
 import { useCallback, useEffect, useState } from 'react';
 import { ChannelParameters } from '../AblyReactHooks.js';
 import { useAbly } from './useAbly.js';
-import { useStateErrors } from './useStateErrors';
+import { useStateErrors } from './useStateErrors.js';
 
 export interface PresenceResult<T> {
     presenceData: PresenceMessage<T>[];

src/hooks/useStateErrors.ts

@@ -1,8 +1,8 @@
 import { Types } from 'ably';
 import { useState } from 'react';
-import { useConnectionStateListener } from './useConnectionStateListener';
-import { useChannelStateListener } from './useChannelStateListener';
-import { ChannelNameAndOptions } from '../AblyReactHooks';
+import { useConnectionStateListener } from './useConnectionStateListener.js';
+import { useChannelStateListener } from './useChannelStateListener.js';
+import { ChannelNameAndOptions } from '../AblyReactHooks.js';
 
 export function useStateErrors(params: ChannelNameAndOptions) {
     const [connectionError, setConnectionError] =