Enable @typescript-eslint/consistent-type-imports lint rule (#2886)

* Enable @typescript-eslint/consistent-type-imports lint rule

This is to help ensure that we get proper vite/rollup lazy loading by not `import`ing more than we need to.

Revert "Enable @typescript-eslint/consistent-type-imports lint rule"

This reverts commit ba385fa00b7e410cc508fd5fb9fe972233ae114f.

Enable @typescript-eslint/consistent-type-imports lint rule

This is to help ensure that we get proper vite/rollup lazy loading by not `import`ing more than we need to.

.

* Format

src/room/AppSelectionModal.tsx

@@ -5,7 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, MouseEvent, useCallback, useMemo, useState } from "react";
+import {
+  type FC,
+  type MouseEvent,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Text } from "@vector-im/compound-web";
 import { PopOutIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

src/room/CallEndedView.tsx

@@ -5,8 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, FormEventHandler, ReactNode, useCallback, useState } from "react";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import {
+  type FC,
+  type FormEventHandler,
+  type ReactNode,
+  useCallback,
+  useState,
+} from "react";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
 import { Trans, useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import { Button, Heading, Text } from "@vector-im/compound-web";

src/room/CallEventAudioRenderer.test.tsx

@@ -10,20 +10,20 @@ import {
   afterAll,
   beforeEach,
   expect,
-  MockedFunction,
+  type MockedFunction,
   test,
   vitest,
 } from "vitest";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
 import { ConnectionState } from "livekit-client";
 import { BehaviorSubject, of } from "rxjs";
 import { afterEach } from "node:test";
-import { act, ReactNode } from "react";
+import { act, type ReactNode } from "react";
 import {
-  CallMembership,
+  type CallMembership,
   type MatrixRTCSession,
 } from "matrix-js-sdk/src/matrixrtc";
-import { RoomMember } from "matrix-js-sdk/src/matrix";
+import { type RoomMember } from "matrix-js-sdk/src/matrix";
 
 import {
   mockLivekitRoom,

src/room/CallEventAudioRenderer.tsx

@@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ReactNode, useDeferredValue, useEffect, useMemo } from "react";
+import { type ReactNode, useDeferredValue, useEffect, useMemo } from "react";
 import { filter, interval, throttle } from "rxjs";
 
-import { CallViewModel } from "../state/CallViewModel";
+import { type CallViewModel } from "../state/CallViewModel";
 import joinCallSoundMp3 from "../sound/join_call.mp3";
 import joinCallSoundOgg from "../sound/join_call.ogg";
 import leftCallSoundMp3 from "../sound/left_call.mp3";

src/room/EncryptionLock.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC } from "react";
+import { type FC } from "react";
 import { Tooltip } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
 import {

src/room/GroupCallView.tsx

@@ -5,31 +5,41 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  type FC,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useHistory } from "react-router-dom";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
 import {
   Room,
   isE2EESupported as isE2EESupportedBrowser,
 } from "livekit-client";
 import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { JoinRule } from "matrix-js-sdk/src/matrix";
 import { Heading, Text } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
 
 import type { IWidgetApiRequest } from "matrix-widget-api";
-import { widget, ElementWidgetActions, JoinCallData } from "../widget";
+import { widget, ElementWidgetActions, type JoinCallData } from "../widget";
 import { FullScreenView } from "../FullScreenView";
 import { LobbyView } from "./LobbyView";
-import { MatrixInfo } from "./VideoPreview";
+import { type MatrixInfo } from "./VideoPreview";
 import { CallEndedView } from "./CallEndedView";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
 import { findDeviceByName } from "../utils/media";
 import { ActiveCall } from "./InCallView";
-import { MUTE_PARTICIPANT_COUNT, MuteStates } from "./MuteStates";
-import { useMediaDevices, MediaDevices } from "../livekit/MediaDevicesContext";
+import { MUTE_PARTICIPANT_COUNT, type MuteStates } from "./MuteStates";
+import {
+  useMediaDevices,
+  type MediaDevices,
+} from "../livekit/MediaDevicesContext";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
 import { useMatrixRTCSessionJoinState } from "../useMatrixRTCSessionJoinState";

src/room/InCallView.tsx

@@ -10,13 +10,13 @@ import {
   RoomContext,
   useLocalParticipant,
 } from "@livekit/components-react";
-import { ConnectionState, Room } from "livekit-client";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import { ConnectionState, type Room } from "livekit-client";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
 import {
-  FC,
-  PointerEvent,
-  PropsWithoutRef,
-  TouchEvent,
+  type FC,
+  type PointerEvent,
+  type PropsWithoutRef,
+  type TouchEvent,
   forwardRef,
   useCallback,
   useEffect,
@@ -25,7 +25,7 @@ import {
   useState,
 } from "react";
 import useMeasure from "react-use-measure";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import classNames from "classnames";
 import { BehaviorSubject, map } from "rxjs";
 import { useObservable, useObservableEagerState } from "observable-hooks";
@@ -49,28 +49,32 @@ import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { ElementWidgetActions, widget } from "../widget";
 import styles from "./InCallView.module.css";
 import { GridTile } from "../tile/GridTile";
-import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
+import { type OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
 import { useLiveKit } from "../livekit/useLiveKit";
 import { useWakeLock } from "../useWakeLock";
 import { useMergedRefs } from "../useMergedRefs";
-import { MuteStates } from "./MuteStates";
-import { MatrixInfo } from "./VideoPreview";
+import { type MuteStates } from "./MuteStates";
+import { type MatrixInfo } from "./VideoPreview";
 import { InviteButton } from "../button/InviteButton";
 import { LayoutToggle } from "./LayoutToggle";
-import { ECConnectionState } from "../livekit/useECConnectionState";
+import { type ECConnectionState } from "../livekit/useECConnectionState";
 import { useOpenIDSFU } from "../livekit/openIDSFU";
-import { CallViewModel, GridMode, Layout } from "../state/CallViewModel";
-import { Grid, TileProps } from "../grid/Grid";
+import {
+  CallViewModel,
+  type GridMode,
+  type Layout,
+} from "../state/CallViewModel";
+import { Grid, type TileProps } from "../grid/Grid";
 import { useInitial } from "../useInitial";
 import { SpotlightTile } from "../tile/SpotlightTile";
-import { EncryptionSystem } from "../e2ee/sharedKeyManagement";
+import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { E2eeType } from "../e2ee/e2eeType";
 import { makeGridLayout } from "../grid/GridLayout";
 import {
-  CallLayoutOutputs,
+  type CallLayoutOutputs,
   defaultPipAlignment,
   defaultSpotlightAlignment,
 } from "../grid/CallLayout";
@@ -78,7 +82,7 @@ import { makeOneOnOneLayout } from "../grid/OneOnOneLayout";
 import { makeSpotlightExpandedLayout } from "../grid/SpotlightExpandedLayout";
 import { makeSpotlightLandscapeLayout } from "../grid/SpotlightLandscapeLayout";
 import { makeSpotlightPortraitLayout } from "../grid/SpotlightPortraitLayout";
-import { GridTileViewModel, TileViewModel } from "../state/TileViewModel";
+import { GridTileViewModel, type TileViewModel } from "../state/TileViewModel";
 import { ReactionsProvider, useReactions } from "../useReactions";
 import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
 import { useSwitchCamera } from "./useSwitchCamera";

src/room/InviteModal.test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { render, screen } from "@testing-library/react";
 import { expect, test, vi } from "vitest";
-import { Room } from "matrix-js-sdk/src/matrix";
+import { type Room } from "matrix-js-sdk/src/matrix";
 import { axe } from "vitest-axe";
 import { BrowserRouter } from "react-router-dom";
 import userEvent from "@testing-library/user-event";

src/room/InviteModal.tsx

@@ -5,9 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, MouseEvent, useCallback, useMemo, useState } from "react";
+import {
+  type FC,
+  type MouseEvent,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
-import { Room } from "matrix-js-sdk/src/matrix";
+import { type Room } from "matrix-js-sdk/src/matrix";
 import { Button, Text } from "@vector-im/compound-web";
 import {
   LinkIcon,

src/room/LayoutToggle.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ChangeEvent, FC, TouchEvent, useCallback } from "react";
+import { type ChangeEvent, type FC, type TouchEvent, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Tooltip } from "@vector-im/compound-web";
 import {

src/room/LobbyView.tsx

@@ -5,15 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useCallback, useMemo, useState } from "react";
+import { type FC, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { Button } from "@vector-im/compound-web";
 import classNames from "classnames";
 import { useHistory } from "react-router-dom";
 import { logger } from "matrix-js-sdk/src/logger";
 import { usePreviewTracks } from "@livekit/components-react";
-import { LocalVideoTrack, Track } from "livekit-client";
+import { type LocalVideoTrack, Track } from "livekit-client";
 import { useObservable } from "observable-hooks";
 import { map } from "rxjs";
 
@@ -21,8 +21,8 @@ import inCallStyles from "./InCallView.module.css";
 import styles from "./LobbyView.module.css";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { useLocationNavigation } from "../useLocationNavigation";
-import { MatrixInfo, VideoPreview } from "./VideoPreview";
-import { MuteStates } from "./MuteStates";
+import { type MatrixInfo, VideoPreview } from "./VideoPreview";
+import { type MuteStates } from "./MuteStates";
 import { InviteButton } from "../button/InviteButton";
 import {
   EndCallButton,

src/room/MuteStates.test.tsx

@@ -6,15 +6,15 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
-import React, { ReactNode } from "react";
+import React, { type ReactNode } from "react";
 import { beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 
 import { useMuteStates } from "./MuteStates";
 import {
-  MediaDevice,
-  MediaDevices,
+  type MediaDevice,
+  type MediaDevices,
   MediaDevicesContext,
 } from "../livekit/MediaDevicesContext";
 import { mockConfig } from "../utils/test";

src/room/MuteStates.ts

@@ -6,16 +6,19 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  Dispatch,
-  SetStateAction,
+  type Dispatch,
+  type SetStateAction,
   useCallback,
   useEffect,
   useMemo,
 } from "react";
-import { IWidgetApiRequest } from "matrix-widget-api";
+import { type IWidgetApiRequest } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import { MediaDevice, useMediaDevices } from "../livekit/MediaDevicesContext";
+import {
+  type MediaDevice,
+  useMediaDevices,
+} from "../livekit/MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
 import { ElementWidgetActions, widget } from "../widget";
 import { Config } from "../config/Config";

src/room/RageshakeRequestModal.tsx

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useEffect } from "react";
+import { type FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Text } from "@vector-im/compound-web";
 
-import { Modal, Props as ModalProps } from "../Modal";
+import { Modal, type Props as ModalProps } from "../Modal";
 import { FieldRow, ErrorMessage } from "../input/Input";
 import { useSubmitRageshake } from "../settings/submit-rageshake";
 

src/room/ReactionAudioRenderer.test.tsx

@@ -12,11 +12,11 @@ import {
   expect,
   test,
   vitest,
-  MockedFunction,
-  Mock,
+  type MockedFunction,
+  type Mock,
 } from "vitest";
 import { TooltipProvider } from "@vector-im/compound-web";
-import { act, ReactNode } from "react";
+import { act, type ReactNode } from "react";
 import { afterEach } from "node:test";
 
 import {

src/room/ReactionAudioRenderer.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ReactNode, useDeferredValue, useEffect, useState } from "react";
+import { type ReactNode, useDeferredValue, useEffect, useState } from "react";
 
 import { useReactions } from "../useReactions";
 import { playReactionsSound, useSetting } from "../settings/settings";

src/room/ReactionsOverlay.test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { render } from "@testing-library/react";
 import { expect, test } from "vitest";
 import { TooltipProvider } from "@vector-im/compound-web";
-import { act, ReactNode } from "react";
+import { act, type ReactNode } from "react";
 import { afterEach } from "node:test";
 
 import {

src/room/ReactionsOverlay.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ReactNode, useMemo } from "react";
+import { type ReactNode, useMemo } from "react";
 
 import { useReactions } from "../useReactions";
 import {

src/room/RoomAuthView.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useCallback, useState } from "react";
+import { type FC, useCallback, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/src/logger";

src/room/RoomPage.tsx

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useEffect, useState, ReactNode, useRef } from "react";
+import { type FC, useEffect, useState, type ReactNode, useRef } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
 import { CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { MatrixError } from "matrix-js-sdk/src/http-api";
+import { type MatrixError } from "matrix-js-sdk/src/http-api";
 import { Heading, Text } from "@vector-im/compound-web";
 
 import { useClientLegacy } from "../ClientContext";

src/room/VideoPreview.tsx

@@ -5,15 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { useEffect, useRef, FC, ReactNode } from "react";
+import { useEffect, useRef, type FC, type ReactNode } from "react";
 import useMeasure from "react-use-measure";
-import { facingModeFromLocalTrack, LocalVideoTrack } from "livekit-client";
+import { facingModeFromLocalTrack, type LocalVideoTrack } from "livekit-client";
 import classNames from "classnames";
 
 import { Avatar } from "../Avatar";
 import styles from "./VideoPreview.module.css";
-import { MuteStates } from "./MuteStates";
-import { EncryptionSystem } from "../e2ee/sharedKeyManagement";
+import { type MuteStates } from "./MuteStates";
+import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 
 export type MatrixInfo = {
   userId: string;

src/room/checkForParallelCalls.test.ts

@@ -5,8 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { vi, Mocked, test, expect } from "vitest";
-import { RoomState } from "matrix-js-sdk/src/models/room-state";
+import { vi, type Mocked, test, expect } from "vitest";
+import { type RoomState } from "matrix-js-sdk/src/models/room-state";
 
 import { PosthogAnalytics } from "../../src/analytics/PosthogAnalytics";
 import { checkForParallelCalls } from "../../src/room/checkForParallelCalls";

src/room/checkForParallelCalls.ts

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { EventType } from "matrix-js-sdk/src/@types/event";
-import { RoomState } from "matrix-js-sdk/src/models/room-state";
+import { type RoomState } from "matrix-js-sdk/src/models/room-state";
 
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 

src/room/useActiveFocus.ts

@@ -6,14 +6,14 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  MatrixRTCSession,
+  type MatrixRTCSession,
   MatrixRTCSessionEvent,
 } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { useCallback, useEffect, useState } from "react";
 import { deepCompare } from "matrix-js-sdk/src/utils";
 import { logger } from "matrix-js-sdk/src/logger";
 import {
-  LivekitFocus,
+  type LivekitFocus,
   isLivekitFocus,
 } from "matrix-js-sdk/src/matrixrtc/LivekitFocus";
 

src/room/useJoinRule.ts

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { useCallback } from "react";
-import { JoinRule } from "matrix-js-sdk/src/matrix";
+import { type JoinRule } from "matrix-js-sdk/src/matrix";
 
 import type { Room } from "matrix-js-sdk/src/models/room";
 import { useRoomState } from "./useRoomState";

src/room/useLoadGroupCall.ts

@@ -10,12 +10,12 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import {
   ClientEvent,
-  MatrixClient,
-  RoomSummary,
+  type MatrixClient,
+  type RoomSummary,
 } from "matrix-js-sdk/src/client";
 import { SyncState } from "matrix-js-sdk/src/sync";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
-import { RoomEvent, Room } from "matrix-js-sdk/src/models/room";
+import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { RoomEvent, type Room } from "matrix-js-sdk/src/models/room";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { JoinRule, MatrixError } from "matrix-js-sdk/src/matrix";
 import { useTranslation } from "react-i18next";

src/room/useRoomAvatar.ts

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { useCallback } from "react";
-import { Room } from "matrix-js-sdk/src/models/room";
+import { type Room } from "matrix-js-sdk/src/models/room";
 
 import { useRoomState } from "./useRoomState";
 

src/room/useRoomName.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { Room, RoomEvent } from "matrix-js-sdk/src/matrix";
+import { type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
 import { useState } from "react";
 
 import { useTypedEventEmitter } from "../useEvents";

src/room/useRoomState.ts

@@ -5,7 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { RoomState, RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
+import {
+  type RoomState,
+  RoomStateEvent,
+} from "matrix-js-sdk/src/models/room-state";
 import { useCallback, useMemo, useState } from "react";
 
 import type { Room } from "matrix-js-sdk/src/models/room";

src/room/useSwitchCamera.ts

@@ -9,14 +9,14 @@ import {
   fromEvent,
   map,
   merge,
-  Observable,
+  type Observable,
   of,
   startWith,
   switchMap,
 } from "rxjs";
 import {
   facingModeFromLocalTrack,
-  LocalVideoTrack,
+  type LocalVideoTrack,
   TrackEvent,
 } from "livekit-client";
 import { useObservable, useObservableEagerState } from "observable-hooks";