graphiql 5: set "importsNotUsedAsValues": "error" in tsconfig

.changeset/pink-onions-complain.md

@@ -0,0 +1,9 @@
+---
+'@graphiql/plugin-code-exporter': minor
+'@graphiql/plugin-doc-explorer': minor
+'@graphiql/plugin-history': minor
+'@graphiql/react': minor
+'graphiql': minor
+---
+
+set "importsNotUsedAsValues": "error" in tsconfig

packages/graphiql-plugin-code-exporter/src/index.tsx

@@ -1,5 +1,5 @@
 import { useOperationsEditorState, type GraphiQLPlugin } from '@graphiql/react';
-import { FC } from 'react';
+import type { FC } from 'react';
 import GraphiQLCodeExporter, {
   GraphiQLCodeExporterProps,
 } from 'graphiql-code-exporter';

packages/graphiql-plugin-doc-explorer/src/components/__tests__/doc-explorer.spec.tsx

@@ -1,4 +1,4 @@
-import { Mock } from 'vitest';
+import type { Mock } from 'vitest';
 import { useGraphiQL as $useGraphiQL } from '@graphiql/react';
 import { render } from '@testing-library/react';
 import { GraphQLInt, GraphQLObjectType, GraphQLSchema } from 'graphql';

packages/graphiql-plugin-doc-explorer/src/components/__tests__/test-utils.ts

@@ -1,5 +1,5 @@
 'use no memo';
-import { GraphQLNamedType, GraphQLType } from 'graphql';
+import type { GraphQLNamedType, GraphQLType } from 'graphql';
 
 export function unwrapType(type: GraphQLType): GraphQLNamedType {
   return 'ofType' in type ? unwrapType(type.ofType) : type;

packages/graphiql-plugin-doc-explorer/src/components/__tests__/type-documentation.spec.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect } from 'react';
 import { fireEvent, render } from '@testing-library/react';
-import { GraphQLNamedType } from 'graphql';
+import type { GraphQLNamedType } from 'graphql';
 import {
   ExampleSchema,
   ExampleEnum,
@@ -10,7 +10,7 @@ import {
 import { docExplorerStore } from '../../context';
 import { TypeDocumentation } from '../type-documentation';
 import { unwrapType } from './test-utils';
-import { SlicesWithActions } from '@graphiql/react';
+import type { SlicesWithActions } from '@graphiql/react';
 
 vi.mock('@graphiql/react', async () => {
   const originalModule =

packages/graphiql-plugin-doc-explorer/src/components/argument.tsx

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { GraphQLArgument } from 'graphql';
+import type { FC } from 'react';
+import type { GraphQLArgument } from 'graphql';
 import { MarkdownContent } from '@graphiql/react';
 import { DefaultValue } from './default-value';
 import { TypeLink } from './type-link';

packages/graphiql-plugin-doc-explorer/src/components/default-value.tsx

@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { astFromValue, print, ValueNode } from 'graphql';
-import { DocExplorerFieldDef } from '../context';
+import type { DocExplorerFieldDef } from '../context';
 import './default-value.css';
 
 const printDefault = (ast?: ValueNode | null): string => {

packages/graphiql-plugin-doc-explorer/src/components/deprecation-reason.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { MarkdownContent } from '@graphiql/react';
 import './deprecation-reason.css';
 

packages/graphiql-plugin-doc-explorer/src/components/directive.tsx

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { DirectiveNode } from 'graphql';
+import type { FC } from 'react';
+import type { DirectiveNode } from 'graphql';
 import './directive.css';
 
 type DirectiveProps = {

packages/graphiql-plugin-doc-explorer/src/components/doc-explorer.tsx

@@ -1,5 +1,5 @@
 import { isType } from 'graphql';
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { ChevronLeftIcon, Spinner, useGraphiQL, pick } from '@graphiql/react';
 import { useDocExplorer, useDocExplorerActions } from '../context';
 import { FieldDocumentation } from './field-documentation';

packages/graphiql-plugin-doc-explorer/src/components/field-documentation.tsx

@@ -1,7 +1,7 @@
-import { GraphQLArgument } from 'graphql';
+import type { GraphQLArgument } from 'graphql';
 import { FC, useState } from 'react';
 import { Button, MarkdownContent } from '@graphiql/react';
-import { DocExplorerFieldDef } from '../context';
+import type { DocExplorerFieldDef } from '../context';
 import { Argument } from './argument';
 import { DeprecationReason } from './deprecation-reason';
 import { Directive } from './directive';

packages/graphiql-plugin-doc-explorer/src/components/field-link.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { DocExplorerFieldDef, useDocExplorerActions } from '../context';
 import './field-link.css';
 

packages/graphiql-plugin-doc-explorer/src/components/schema-documentation.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import type { GraphQLSchema } from 'graphql';
 import { MarkdownContent } from '@graphiql/react';
 import { ExplorerSection } from './section';

packages/graphiql-plugin-doc-explorer/src/components/section.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import {
   ArgumentIcon,
   DeprecatedArgumentIcon,

packages/graphiql-plugin-doc-explorer/src/components/type-documentation.tsx

@@ -10,7 +10,7 @@ import {
   isObjectType,
 } from 'graphql';
 import { useGraphiQL, Button, MarkdownContent } from '@graphiql/react';
-import { DocExplorerFieldDef } from '../context';
+import type { DocExplorerFieldDef } from '../context';
 import { Argument } from './argument';
 import { DefaultValue } from './default-value';
 import { DeprecationReason } from './deprecation-reason';

packages/graphiql-plugin-doc-explorer/src/components/type-link.tsx

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { GraphQLType } from 'graphql';
+import type { FC } from 'react';
+import type { GraphQLType } from 'graphql';
 import { useDocExplorerActions } from '../context';
 import { renderType } from './utils';
 import './type-link.css';

packages/graphiql-plugin-doc-explorer/src/components/utils.tsx

@@ -6,7 +6,7 @@ import {
   isListType,
   isNonNullType,
 } from 'graphql';
-import { JSX } from 'react';
+import type { JSX } from 'react';
 
 export function renderType(
   type: GraphQLType,

packages/graphiql-plugin-doc-explorer/src/schema-reference.ts

@@ -11,7 +11,7 @@ import type {
   GraphQLInputType,
   GraphQLType,
 } from 'graphql';
-import { Maybe } from 'graphql/jsutils/Maybe';
+import type { Maybe } from 'graphql/jsutils/Maybe';
 
 /**
  * Copied from packages/codemirror-graphql/src/jump.ts

packages/graphiql-plugin-history/src/__tests__/components.spec.tsx

@@ -1,4 +1,4 @@
-import { Mock } from 'vitest';
+import type { Mock } from 'vitest';
 import { fireEvent, render } from '@testing-library/react';
 import type { ComponentProps } from 'react';
 import { formatQuery, HistoryItem } from '../components';

packages/graphiql-plugin-history/src/context.tsx → packages/graphiql-plugin-history/src/context.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line react/jsx-filename-extension -- TODO
 import { FC, ReactElement, ReactNode, useEffect } from 'react';
 import { createStore } from 'zustand';
 import {

packages/graphiql-react/src/components/header-editor.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useRef } from 'react';
 import { useGraphiQL, useGraphiQLActions } from './provider';
-import { EditorProps } from '../types';
+import type { EditorProps } from '../types';
 import { HEADER_URI, KEY_BINDINGS, STORAGE_KEY } from '../constants';
 import {
   getOrCreateModel,

packages/graphiql-react/src/components/provider.tsx

@@ -21,7 +21,7 @@ import {
 } from '../stores';
 import { StorageStore, useStorage } from '../stores/storage';
 import { ThemeStore } from '../stores/theme';
-import { SlicesWithActions } from '../types';
+import type { SlicesWithActions } from '../types';
 import { pick, useDidUpdate, useSynchronizeValue } from '../utility';
 import {
   FragmentDefinitionNode,

packages/graphiql-react/src/components/query-editor.tsx

@@ -13,7 +13,7 @@ import {
   cleanupDisposables,
   cn,
 } from '../utility';
-import { MonacoEditor, EditorProps, SchemaReference } from '../types';
+import type { MonacoEditor, EditorProps, SchemaReference } from '../types';
 import {
   KEY_BINDINGS,
   MONACO_GRAPHQL_API,

packages/graphiql-react/src/components/response-editor.tsx

@@ -12,7 +12,7 @@ import {
   cn,
 } from '../utility';
 import { KEY_BINDINGS, RESPONSE_URI } from '../constants';
-import { EditorProps } from '../types';
+import type { EditorProps } from '../types';
 import type { editor as monacoEditor, Position } from '../monaco-editor';
 import { Range, languages } from '../monaco-editor';
 

packages/graphiql-react/src/components/toolbar-menu/index.tsx

@@ -1,6 +1,6 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { cn } from '../../utility';
-import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
 import { DropdownMenu } from '../dropdown-menu';
 import { Tooltip } from '../tooltip';
 import './index.css';

packages/graphiql-react/src/components/tooltip/index.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import * as T from '@radix-ui/react-tooltip';
 import './index.css';
 

packages/graphiql-react/src/components/variable-editor.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useRef } from 'react';
 import { useGraphiQL, useGraphiQLActions } from './provider';
-import { EditorProps } from '../types';
+import type { EditorProps } from '../types';
 import { KEY_BINDINGS, STORAGE_KEY, VARIABLE_URI } from '../constants';
 import {
   getOrCreateModel,

packages/graphiql-react/src/constants.ts

@@ -2,7 +2,7 @@
 import { initializeMode } from 'monaco-graphql/esm/lite.js';
 import { parse, print } from 'graphql';
 import { KeyCode, KeyMod, Uri, languages } from './monaco-editor';
-import { EditorSlice } from './stores';
+import type { EditorSlice } from './stores';
 
 export const isMacOs =
   typeof navigator !== 'undefined' && navigator.userAgent.includes('Mac');

packages/graphiql-react/src/icons/index.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, FC, SVGProps } from 'react';
+import type { ComponentProps, FC, SVGProps } from 'react';
 
 import _ArgumentIcon from './argument.svg?react';
 import _ChevronDownIcon from './chevron-down.svg?react';

packages/graphiql-react/src/stores/editor.ts

@@ -4,7 +4,7 @@ import type {
   OperationDefinitionNode,
   DocumentNode,
 } from 'graphql';
-import { OperationFacts } from 'graphql-language-service';
+import type { OperationFacts } from 'graphql-language-service';
 import { MaybePromise, mergeAst } from '@graphiql/toolkit';
 import { print } from 'graphql';
 import { storageStore } from './storage';
@@ -17,7 +17,7 @@ import {
   clearHeadersFromTabs,
   serializeTabState,
 } from '../utility/tabs';
-import { SlicesWithActions, MonacoEditor } from '../types';
+import type { SlicesWithActions, MonacoEditor } from '../types';
 import { debounce, formatJSONC } from '../utility';
 import { STORAGE_KEY } from '../constants';
 

packages/graphiql-react/src/stores/execution.ts

@@ -15,7 +15,7 @@ import getValue from 'get-value';
 
 import type { StateCreator } from 'zustand';
 import { formatJSONC, parseJSONC } from '../utility';
-import { SlicesWithActions, MonacoEditor } from '../types';
+import type { SlicesWithActions, MonacoEditor } from '../types';
 import { Range } from '../monaco-editor';
 
 export interface ExecutionSlice {

packages/graphiql-react/src/stores/plugin.ts

@@ -1,4 +1,4 @@
-import { ComponentType } from 'react';
+import type { ComponentType } from 'react';
 import type { StateCreator } from 'zustand';
 import type { SlicesWithActions } from '../types';
 import { storageStore } from './storage';

packages/graphiql-react/src/stores/schema.ts

@@ -12,9 +12,9 @@ import {
   GraphQLSchema,
   IntrospectionQuery,
 } from 'graphql';
-import { Dispatch } from 'react';
+import type { Dispatch } from 'react';
 import type { StateCreator } from 'zustand';
-import { SlicesWithActions, SchemaReference } from '../types';
+import type { SlicesWithActions, SchemaReference } from '../types';
 
 type MaybeGraphQLSchema = GraphQLSchema | null | undefined;
 

packages/graphiql-react/src/types.test-d.ts

@@ -9,7 +9,7 @@ import type {
   PluginActions,
   SchemaActions,
 } from './stores';
-import { AllSlices, AllActions } from './types';
+import type { AllSlices, AllActions } from './types';
 
 describe('Should not have conflicting types', () => {
   interface OverlapError<K extends PropertyKey> {

packages/graphiql-react/src/types.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithoutRef } from 'react';
-import { AllTypeInfo } from 'graphql-language-service/esm/types';
+import type { ComponentPropsWithoutRef } from 'react';
+import type { AllTypeInfo } from 'graphql-language-service/esm/types';
 import type { editor as monacoEditor } from './monaco-editor';
-import {
+import type {
   EditorSlice,
   ExecutionSlice,
   PluginSlice,
@@ -12,7 +12,7 @@ import {
   PluginActions,
   SchemaActions,
 } from './stores';
-import { RuleKind } from 'graphql-language-service';
+import type { RuleKind } from 'graphql-language-service';
 
 export type EditorProps = ComponentPropsWithoutRef<'div'>;
 

packages/graphiql-react/src/utility/create-editor.ts

@@ -1,7 +1,7 @@
-import { KeyboardEventHandler, RefObject } from 'react';
+import type { KeyboardEventHandler, RefObject } from 'react';
 import type { Uri } from '../monaco-editor';
 import { editor as monacoEditor } from '../monaco-editor';
-import { MonacoEditor } from '../types';
+import type { MonacoEditor } from '../types';
 
 export const EDITOR_THEME = {
   dark: 'graphiql-DARK',

packages/graphiql-react/src/utility/hooks.ts

@@ -2,8 +2,8 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { storageStore } from '../stores';
 import { debounce } from './debounce';
-import { MonacoEditor } from '../types';
-import { type editor as monacoEditor } from '../monaco-editor';
+import type { MonacoEditor } from '../types';
+import type { editor as monacoEditor } from '../monaco-editor';
 import { useGraphiQL, useGraphiQLActions } from '../components';
 
 export function useSynchronizeValue(editor?: MonacoEditor, value?: string) {

packages/graphiql-react/tsconfig.json

@@ -16,6 +16,7 @@
     "jsx": "react-jsx",
     "declaration": true,
     "noUncheckedIndexedAccess": true,
+    "importsNotUsedAsValues": "error",
     "types": ["vitest/globals", "@testing-library/jest-dom"]
   }
 }

packages/graphiql/src/GraphiQL.spec.tsx

@@ -9,7 +9,7 @@
 import { act, render, waitFor, fireEvent } from '@testing-library/react';
 import { Component } from 'react';
 import { GraphiQL } from './GraphiQL';
-import { Fetcher } from '@graphiql/toolkit';
+import type { Fetcher } from '@graphiql/toolkit';
 import { ToolbarButton } from '@graphiql/react';
 import '@graphiql/react/setup-workers/vite';
 

packages/graphiql/src/ui/footer.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 
 // Configure the UI by providing this Component as a child of GraphiQL.
 export const GraphiQLFooter: FC<{ children: ReactNode }> = ({ children }) => {