add type-import lint rule (#1264)

.changeset/fast-oranges-leave.md

@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Enable "@typescript-eslint/consistent-type-imports" lint rule

.eslintrc.js

@@ -22,6 +22,14 @@ module.exports = {
     "testing-library/no-node-access": "off",
     "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/no-unused-vars": ["warn", { ignoreRestSiblings: true }],
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        prefer: "type-imports",
+        disallowTypeAnnotations: false,
+        fixStyle: "separate-type-imports",
+      },
+    ],
   },
   settings: {
     react: {

src/@types/svg.d.ts

@@ -1,5 +1,5 @@
 declare module "*.svg" {
-  import * as React from "react";
+  import type * as React from "react";
 
   export const ReactComponent: React.FunctionComponent<
     React.SVGProps<SVGSVGElement> & { title?: string }

src/application/App.tsx

@@ -1,27 +1,26 @@
 import { useEffect, useState, useRef } from "react";
-import {
-  useReactiveVar,
-  gql,
-  useQuery,
-  makeVar,
-  TypedDocumentNode,
-} from "@apollo/client";
+import type { TypedDocumentNode } from "@apollo/client";
+import { useReactiveVar, gql, useQuery, makeVar } from "@apollo/client";
 
 import { currentScreen, Screens } from "./components/Layouts/Navigation";
 import { Queries } from "./components/Queries/Queries";
 import { Mutations } from "./components/Mutations/Mutations";
 import { Explorer } from "./components/Explorer/Explorer";
 import { Cache } from "./components/Cache/Cache";
-import { GetOperationCounts, GetOperationCountsVariables } from "./types/gql";
+import type {
+  GetOperationCounts,
+  GetOperationCountsVariables,
+} from "./types/gql";
 import { Tabs } from "./components/Tabs";
 import { Button } from "./components/Button";
 import IconSettings from "@apollo/icons/default/IconSettings.svg";
 import IconSync from "@apollo/icons/small/IconSync.svg";
 import { SettingsModal } from "./components/Layouts/SettingsModal";
 import Logo from "@apollo/icons/logos/LogoSymbol.svg";
-import { BannerAlert, BannerAlertConfig } from "./components/BannerAlert";
-import { GetStates } from "./stateMachine";
-import { DevtoolsMachine } from "./machines";
+import type { BannerAlertConfig } from "./components/BannerAlert";
+import { BannerAlert } from "./components/BannerAlert";
+import type { GetStates } from "./stateMachine";
+import type { DevtoolsMachine } from "./machines";
 import { ClientNotFoundModal } from "./components/ClientNotFoundModal";
 import { getPanelActor } from "../extension/devtools/panelActor";
 

src/application/__tests__/AppProvider.test.tsx

@@ -5,7 +5,7 @@ import { gql } from "@apollo/client";
 import matchMediaMock from "../utilities/testing/matchMedia";
 import { Mode, colorTheme } from "../theme";
 import { AppProvider, getQueryData, getMutationData } from "../index";
-import { QueryInfo } from "../../extension/tab/helpers";
+import type { QueryInfo } from "../../extension/tab/helpers";
 import { print, getIntrospectionQuery } from "graphql";
 
 const matchMedia = matchMediaMock();

src/application/components/BannerAlert.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { makeVar, useReactiveVar } from "@apollo/client";
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { LoadingSpinner } from "./Explorer/LoadingSpinner";
 import IconCheck from "@apollo/icons/default/IconCheck.svg";
 import IconError from "@apollo/icons/default/IconError.svg";

src/application/components/Button.tsx

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ElementType } from "react";
+import type { ComponentPropsWithoutRef, ElementType } from "react";
 import { clsx } from "clsx";
 
 type NativeButtonProps = ComponentPropsWithoutRef<"button">;

src/application/components/ButtonGroup.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 interface ButtonGroupProps {
   children: ReactNode;

src/application/components/Cache/Cache.tsx

@@ -1,12 +1,14 @@
-import { Fragment, useState, useMemo, ReactNode } from "react";
-import { gql, useQuery, TypedDocumentNode } from "@apollo/client";
+import type { ReactNode } from "react";
+import { Fragment, useState, useMemo } from "react";
+import type { TypedDocumentNode } from "@apollo/client";
+import { gql, useQuery } from "@apollo/client";
 
 import { SidebarLayout } from "../Layouts/SidebarLayout";
 import { SearchField } from "../SearchField";
 import { EntityList } from "./sidebar/EntityList";
 import { Loading } from "./common/Loading";
-import { GetCache, GetCacheVariables } from "../../types/gql";
-import { JSONObject } from "../../types/json";
+import type { GetCache, GetCacheVariables } from "../../types/gql";
+import type { JSONObject } from "../../types/json";
 import { JSONTreeViewer } from "../JSONTreeViewer";
 import clsx from "clsx";
 import { CopyButton } from "../CopyButton";

src/application/components/Cache/common/utils.ts

@@ -1,4 +1,4 @@
-import { JSONObject } from "../../../types/json";
+import type { JSONObject } from "../../../types/json";
 
 // Return an alphabetically sorted list of all root cache ID's. ROOT_QUERY,
 // ROOT_MUTATION, and ROOT_SUBSCRIPTION will be listed first (if they exist).

src/application/components/Cache/sidebar/EntityList.tsx

@@ -2,7 +2,7 @@ import { List } from "../../List";
 import { ListItem } from "../../ListItem";
 
 import { getRootCacheIds } from "../common/utils";
-import { JSONObject } from "../../../types/json";
+import type { JSONObject } from "../../../types/json";
 import HighlightMatch from "../../HighlightMatch";
 
 interface EntityListProps {

src/application/components/CodeBlock.tsx

@@ -1,4 +1,5 @@
-import { Highlight, Language, PrismTheme } from "prism-react-renderer";
+import type { Language, PrismTheme } from "prism-react-renderer";
+import { Highlight } from "prism-react-renderer";
 import { useReactiveVar } from "@apollo/client";
 import { colors } from "@apollo/brand";
 import { clsx } from "clsx";

src/application/components/CopyButton.tsx

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 import clsx from "clsx";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { Button } from "./Button";

src/application/components/Disclosure/Button.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Disclosure } from "@headlessui/react";
 import IconChevronUp from "@apollo/icons/default/IconChevronUp.svg";
 import clsx from "clsx";

src/application/components/Disclosure/Disclosure.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Disclosure as DisclosureRoot } from "@headlessui/react";
 import { DisclosureButton } from "./Button";
 import { DisclosurePanel } from "./Panel";

src/application/components/Disclosure/Panel.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Disclosure, Transition } from "@headlessui/react";
 
 interface DisclosurePanelProps {

src/application/components/Explorer/Explorer.tsx

@@ -5,7 +5,8 @@ import type { IntrospectionQuery } from "graphql";
 import { getIntrospectionQuery } from "graphql/utilities";
 import { colorTheme } from "../../theme";
 import { FullWidthLayout } from "../Layouts/FullWidthLayout";
-import { QueryResult } from "../../../types";
+import type { QueryResult } from "../../../types";
+import type { JSONValue, IncomingMessageEvent } from "./postMessageHelpers";
 import {
   postMessageToEmbed,
   EMBEDDABLE_EXPLORER_URL,
@@ -14,10 +15,8 @@ import {
   EXPLORER_SUBSCRIPTION_REQUEST,
   EXPLORER_SUBSCRIPTION_RESPONSE,
   EXPLORER_SUBSCRIPTION_TERMINATION,
-  JSONValue,
   SCHEMA_ERROR,
   SCHEMA_RESPONSE,
-  IncomingMessageEvent,
 } from "./postMessageHelpers";
 import {
   EXPLORER_LISTENING_FOR_HANDSHAKE,

src/application/components/Explorer/GraphRefModal.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import type React from "react";
+import { useState } from "react";
 import { clsx } from "clsx";
 import { LoadingSpinner } from "./LoadingSpinner";
 import { hasGraphRefBeenAuthenticated } from "./postMessageAuthHelpers";

src/application/components/Explorer/Telescope.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 
 interface TelescopeProps {
   className?: string;

src/application/components/Explorer/postMessageAuthHelpers.ts

@@ -1,4 +1,5 @@
-import { IncomingMessageEvent, postMessageToEmbed } from "./postMessageHelpers";
+import type { IncomingMessageEvent } from "./postMessageHelpers";
+import { postMessageToEmbed } from "./postMessageHelpers";
 
 export const SET_PARTIAL_AUTHENTICATION_TOKEN_FOR_PARENT =
   "SetPartialAuthenticationTokenForParent";

src/application/components/GitHubIssueLink.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 declare const VERSION: string;
 

src/application/components/JSONTreeViewer.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, ComponentPropsWithoutRef } from "react";
+import type { CSSProperties, ComponentPropsWithoutRef } from "react";
 import { useReactiveVar } from "@apollo/client";
 import { JSONTree } from "react-json-tree";
 import { ColorTheme, colorTheme } from "../theme";

src/application/components/Layouts/FullWidthLayout.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { clsx } from "clsx";
 
 interface FullWidthLayoutProps {

src/application/components/Layouts/SidebarLayout.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { PanelGroup, Panel, PanelResizeHandle } from "react-resizable-panels";
 
 interface SidebarLayoutProps {

src/application/components/List.tsx

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 import clsx from "clsx";
 
 type ListProps = ComponentPropsWithoutRef<"div">;

src/application/components/ListItem.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, ComponentPropsWithoutRef } from "react";
+import type { ReactNode, ComponentPropsWithoutRef } from "react";
 import { clsx } from "clsx";
 
 interface ListItemProps {

src/application/components/Modal/Body.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { clsx } from "clsx";
 
 interface BodyProps {

src/application/components/Modal/Footer.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { clsx } from "clsx";
 
 interface FooterProps {

src/application/components/Modal/Header.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { clsx } from "clsx";
 
 interface HeaderProps {

src/application/components/Modal/Modal.tsx

@@ -1,5 +1,6 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { Fragment, ReactNode } from "react";
+import type { ReactNode } from "react";
+import { Fragment } from "react";
 import { clsx } from "clsx";
 
 import { Body } from "./Body";

src/application/components/Modal/Title.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Dialog } from "@headlessui/react";
 import { clsx } from "clsx";
 

src/application/components/Mutations/Mutations.tsx

@@ -1,11 +1,12 @@
 import { Fragment, useState } from "react";
-import { gql, TypedDocumentNode, useQuery } from "@apollo/client";
+import type { TypedDocumentNode } from "@apollo/client";
+import { gql, useQuery } from "@apollo/client";
 import { List } from "../List";
 import { ListItem } from "../ListItem";
 
 import { SidebarLayout } from "../Layouts/SidebarLayout";
 import { RunInExplorerButton } from "../Queries/RunInExplorerButton";
-import { GetMutations, GetMutationsVariables } from "../../types/gql";
+import type { GetMutations, GetMutationsVariables } from "../../types/gql";
 import { JSONTreeViewer } from "../JSONTreeViewer";
 import { Tabs } from "../Tabs";
 import { QueryLayout } from "../QueryLayout";

src/application/components/Queries/Queries.tsx

@@ -1,11 +1,15 @@
 import { useState } from "react";
-import { gql, useQuery, TypedDocumentNode } from "@apollo/client";
+import type { TypedDocumentNode } from "@apollo/client";
+import { gql, useQuery } from "@apollo/client";
 import { List } from "../List";
 import { ListItem } from "../ListItem";
 
 import { SidebarLayout } from "../Layouts/SidebarLayout";
 import { RunInExplorerButton } from "./RunInExplorerButton";
-import { GetWatchedQueries, GetWatchedQueriesVariables } from "../../types/gql";
+import type {
+  GetWatchedQueries,
+  GetWatchedQueriesVariables,
+} from "../../types/gql";
 import { Tabs } from "../Tabs";
 import { JSONTreeViewer } from "../JSONTreeViewer";
 import { QueryLayout } from "../QueryLayout";

src/application/components/Queries/RunInExplorerButton.tsx

@@ -1,4 +1,4 @@
-import { Variables } from "../../types/scalars";
+import type { Variables } from "../../types/scalars";
 import {
   postMessageToEmbed,
   SET_OPERATION,

src/application/components/QueryLayout/Header.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 interface HeaderProps {
   children: ReactNode;

src/application/components/QueryLayout/QueryLayout.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { clsx } from "clsx";
 
 import { SidebarLayout } from "../Layouts/SidebarLayout";

src/application/components/QueryLayout/TabContent.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Tabs } from "../Tabs";
 
 interface TabContentProps {

src/application/components/QueryLayout/Tabs.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Tabs as TabsBase } from "../Tabs";
 
 interface TabsProps<TValue extends string> {

src/application/components/QueryLayout/Title.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 interface TitleProps {
   children: ReactNode;

src/application/components/Tabs/Content.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Content as ContentBase } from "@radix-ui/react-tabs";
 import clsx from "clsx";
 

src/application/components/Tabs/List.tsx

@@ -1,5 +1,5 @@
 import { List as ListBase } from "@radix-ui/react-tabs";
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { clsx } from "clsx";
 
 interface ListProps {

src/application/components/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Root } from "@radix-ui/react-tabs";
 import clsx from "clsx";
 

src/application/components/Tabs/Trigger.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Trigger as TriggerBase } from "@radix-ui/react-tabs";
 
 interface TriggerProps {

src/application/components/TextField.tsx

@@ -1,7 +1,7 @@
-import { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 import { clsx } from "clsx";
 
-import { ExtendProps } from "../types/props";
+import type { ExtendProps } from "../types/props";
 
 type TextFieldProps = ExtendProps<
   ComponentPropsWithoutRef<"input">,