Add rule to use import and import type

.eslintrc

@@ -6,22 +6,23 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier"
+    "prettier",
   ],
   "rules": {
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "error",
-    "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/no-unused-vars": [
       "warn",
       {
         "argsIgnorePattern": "^_",
         "varsIgnorePattern": "^_",
-        "caughtErrorsIgnorePattern": "^_"
-      }
+        "caughtErrorsIgnorePattern": "^_",
+      },
     ],
     "no-console": ["error", { "allow": ["warn", "error"] }],
-    "react-refresh/only-export-components": ["warn", { "allowConstantExport": true }]
-  }
+    "react-hooks/exhaustive-deps": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "react-refresh/only-export-components": ["warn", { "allowConstantExport": true }],
+  },
 }

examples/minimal-react/src/components/App.tsx

@@ -1,5 +1,6 @@
 import VideoPlayer from "./VideoPlayer";
-import { SCREEN_SHARING_MEDIA_CONSTRAINTS, Client } from "@fishjam-dev/react-client";
+import type { Client } from "@fishjam-dev/react-client";
+import { SCREEN_SHARING_MEDIA_CONSTRAINTS } from "@fishjam-dev/react-client";
 import { useState } from "react";
 import { useConnect, useDisconnect, useClient, useStatus, useTracks } from "./client";
 

examples/minimal-react/src/components/VideoPlayer.tsx

@@ -1,4 +1,5 @@
-import { RefObject, useEffect, useRef } from "react";
+import type { RefObject } from "react";
+import { useEffect, useRef } from "react";
 
 type Props = {
   stream: MediaStream | null | undefined;

examples/minimal-react/src/components/client.ts

@@ -1,5 +1,5 @@
 import { create } from "@fishjam-dev/react-client";
-import { PeerMetadata, TrackMetadata } from "./App";
+import type { PeerMetadata, TrackMetadata } from "./App";
 
 // Create a Membrane client instance
 // remember to use FishjamContextProvider

examples/use-camera-and-microphone-example/src/Badge.tsx

@@ -1,4 +1,4 @@
-import { PeerStatus } from "@fishjam-dev/react-client";
+import type { PeerStatus } from "@fishjam-dev/react-client";
 
 type Props = {
   status: PeerStatus;

examples/use-camera-and-microphone-example/src/DeviceControls.tsx

@@ -1,5 +1,5 @@
-import { PeerStatus, UseMicrophoneResult, UseCameraResult, UseScreenShareResult } from "@fishjam-dev/react-client";
-import { TrackMetadata } from "./fishjamSetup";
+import type { PeerStatus, UseMicrophoneResult, UseCameraResult, UseScreenShareResult } from "@fishjam-dev/react-client";
+import type { TrackMetadata } from "./fishjamSetup";
 
 type DeviceControlsProps = {
   status: PeerStatus;

examples/use-camera-and-microphone-example/src/DeviceSelector.tsx

@@ -1,4 +1,5 @@
-import { ChangeEvent, useState } from "react";
+import type { ChangeEvent } from "react";
+import { useState } from "react";
 
 type Props = {
   name: string;

examples/use-camera-and-microphone-example/src/VideoPlayer.tsx

@@ -1,4 +1,5 @@
-import { RefObject, useEffect, useRef } from "react";
+import type { RefObject } from "react";
+import { useEffect, useRef } from "react";
 
 type Props = {
   stream: MediaStream | null | undefined;

examples/use-camera-and-microphone-example/src/fishjamSetup.tsx

@@ -1,5 +1,6 @@
 import { z } from "zod";
-import { ClientEvents, create } from "@fishjam-dev/react-client";
+import type { ClientEvents } from "@fishjam-dev/react-client";
+import { create } from "@fishjam-dev/react-client";
 import { useEffect, useState } from "react";
 
 const peerMetadataSchema = z.object({

src/Client.ts

@@ -1,23 +1,25 @@
 import EventEmitter from "events";
-import TypedEmitter from "typed-emitter";
-import {
+import type TypedEmitter from "typed-emitter";
+import type {
   AuthErrorReason,
   BandwidthLimit,
   Component,
   ConnectConfig,
   CreateConfig,
-  FishjamClient,
   MessageEvents,
   Peer,
   SimulcastConfig,
   TrackBandwidthLimit,
   TrackContext,
   TrackEncoding,
 } from "@fishjam-dev/ts-client";
-import { PeerId, PeerState, PeerStatus, Track, TrackId, TrackWithOrigin } from "./state.types";
-import { DeviceManager, DeviceManagerEvents } from "./DeviceManager";
-import { MediaDeviceType, ScreenShareManager, ScreenShareManagerConfig } from "./ScreenShareManager";
-import {
+import { FishjamClient } from "@fishjam-dev/ts-client";
+import type { PeerId, PeerState, PeerStatus, Track, TrackId, TrackWithOrigin } from "./state.types";
+import type { DeviceManagerEvents } from "./DeviceManager";
+import { DeviceManager } from "./DeviceManager";
+import type { MediaDeviceType, ScreenShareManagerConfig } from "./ScreenShareManager";
+import { ScreenShareManager } from "./ScreenShareManager";
+import type {
   DeviceManagerConfig,
   DeviceState,
   InitMediaConfig,

src/DeviceManager.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   AudioOrVideoType,
   CurrentDevices,
   DeviceError,
@@ -9,14 +9,10 @@ import {
   GetMedia,
   InitMediaConfig,
   Media,
-  NOT_FOUND_ERROR,
-  OVERCONSTRAINED_ERROR,
-  parseError,
-  PERMISSION_DENIED,
   StorageConfig,
-  UNHANDLED_ERROR,
   UseUserMediaStartConfig,
 } from "./types";
+import { NOT_FOUND_ERROR, OVERCONSTRAINED_ERROR, parseError, PERMISSION_DENIED, UNHANDLED_ERROR } from "./types";
 
 import { loadObject, saveObject } from "./localStorage";
 import {
@@ -27,8 +23,8 @@ import {
 } from "./constraints";
 
 import EventEmitter from "events";
-import TypedEmitter from "typed-emitter";
-import { TrackType } from "./ScreenShareManager";
+import type TypedEmitter from "typed-emitter";
+import type { TrackType } from "./ScreenShareManager";
 
 const removeExact = (
   trackConstraints: boolean | MediaTrackConstraints | undefined,

src/ScreenShareManager.ts

@@ -1,6 +1,7 @@
 import EventEmitter from "events";
-import TypedEmitter from "typed-emitter";
-import { AudioOrVideoType, DeviceError, DevicesStatus, parseError } from "./types";
+import type TypedEmitter from "typed-emitter";
+import type { AudioOrVideoType, DeviceError, DevicesStatus } from "./types";
+import { parseError } from "./types";
 
 export type TrackType = "audio" | "video" | "audiovideo";
 export type MediaDeviceType = "displayMedia" | "userMedia";

src/create.tsx

@@ -1,18 +1,9 @@
-import {
-  createContext,
-  JSX,
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useSyncExternalStore,
-} from "react";
+import type { JSX, ReactNode } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 import type { Selector, State } from "./state.types";
-import { PeerStatus, TrackId, TrackWithOrigin } from "./state.types";
-import { ConnectConfig, CreateConfig } from "@fishjam-dev/ts-client";
-import {
+import type { PeerStatus, TrackId, TrackWithOrigin } from "./state.types";
+import type { ConnectConfig, CreateConfig } from "@fishjam-dev/ts-client";
+import type {
   DeviceManagerConfig,
   UseCameraAndMicrophoneResult,
   UseCameraResult,
@@ -21,8 +12,9 @@ import {
   UseSetupMediaConfig,
   UseSetupMediaResult,
 } from "./types";
-import { Client, ClientApi, ClientEvents } from "./Client";
-import { MediaDeviceType, ScreenShareManagerConfig } from "./ScreenShareManager";
+import type { ClientApi, ClientEvents } from "./Client";
+import { Client } from "./Client";
+import type { MediaDeviceType, ScreenShareManagerConfig } from "./ScreenShareManager";
 
 export type FishjamContextProviderProps = {
   children: ReactNode;

src/state.types.ts

@@ -1,9 +1,9 @@
 import type { TrackEncoding, VadStatus, SimulcastConfig } from "@fishjam-dev/ts-client";
-import { UseUserMediaState } from "./types";
-import { UseCameraAndMicrophoneResult } from "./types";
-import { Client } from "./Client";
-import { DeviceManager } from "./DeviceManager";
-import { ScreenShareManager } from "./ScreenShareManager";
+import type { UseUserMediaState } from "./types";
+import type { UseCameraAndMicrophoneResult } from "./types";
+import type { Client } from "./Client";
+import type { DeviceManager } from "./DeviceManager";
+import type { ScreenShareManager } from "./ScreenShareManager";
 
 export type TrackId = string;
 export type PeerId = string;

src/types.ts

@@ -1,6 +1,6 @@
-import { SimulcastConfig, TrackBandwidthLimit } from "@fishjam-dev/ts-client";
-import { ScreenShareManagerConfig } from "./ScreenShareManager";
-import { Track } from "./state.types";
+import type { SimulcastConfig, TrackBandwidthLimit } from "@fishjam-dev/ts-client";
+import type { ScreenShareManagerConfig } from "./ScreenShareManager";
+import type { Track } from "./state.types";
 
 export type AudioOrVideoType = "audio" | "video";
 

tests/globalSetupState.ts

@@ -1,4 +1,4 @@
-import { StartedDockerComposeEnvironment } from "testcontainers";
+import type { StartedDockerComposeEnvironment } from "testcontainers";
 
 export type SetupState = {
   fishjamContainer: StartedDockerComposeEnvironment | null;

tests/utils.ts

@@ -1,4 +1,5 @@
-import { expect, Page, test } from "@playwright/test";
+import type { Page } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 
 export const joinRoomAndAddScreenShare = async (page: Page, roomId: string): Promise<string> =>
   test.step("Join room and add track", async () => {