Prepare for typescript 5. Enable consistent type import formatting (#2608)

* Update `@typescript-eslint/*`, prettier and eslint-plugin-import

* enable consistent-type-imports and apply autofixes

* Fix usages of dynamic type imports

* add changeset

* yarn dedupe

Author: BPScott

.changeset/short-snails-push.md

@@ -0,0 +1,46 @@
+---
+'@shopify/address': patch
+'@shopify/address-mocks': patch
+'@shopify/async': patch
+'graphql-fixtures': patch
+'graphql-mini-transforms': patch
+'@shopify/graphql-persisted': patch
+'@shopify/graphql-testing': patch
+'graphql-tool-utilities': patch
+'graphql-typed': patch
+'graphql-typescript-definitions': patch
+'graphql-validate-fixtures': patch
+'@shopify/jest-dom-mocks': patch
+'@shopify/jest-koa-mocks': patch
+'@shopify/koa-metrics': patch
+'@shopify/koa-performance': patch
+'@shopify/koa-shopify-webhooks': patch
+'@shopify/logger': patch
+'@shopify/performance': patch
+'@shopify/react-async': patch
+'@shopify/react-bugsnag': patch
+'@shopify/react-form': patch
+'@shopify/react-form-state': patch
+'@shopify/react-google-analytics': patch
+'@shopify/react-graphql': patch
+'@shopify/react-graphql-universal-provider': patch
+'@shopify/react-hooks': patch
+'@shopify/react-html': patch
+'@shopify/react-i18n': patch
+'@shopify/react-i18n-universal-provider': patch
+'@shopify/react-idle': patch
+'@shopify/react-import-remote': patch
+'@shopify/react-intersection-observer': patch
+'@shopify/react-network': patch
+'@shopify/react-performance': patch
+'@shopify/react-server': patch
+'@shopify/react-shortcuts': patch
+'@shopify/react-testing': patch
+'@shopify/react-web-worker': patch
+'@shopify/statsd': patch
+'@shopify/storybook-a11y-test': patch
+'@shopify/useful-types': patch
+'@shopify/web-worker': patch
+---
+
+Use `import type` everywhere that we deal with importing types

.eslintrc.js

@@ -27,6 +27,9 @@ module.exports = {
     '@shopify/jsx-no-hardcoded-content': 'off',
     // reports false positives with React's useRef hook
     'require-atomic-updates': 'off',
+    '@typescript-eslint/consistent-type-imports': 'error',
+    '@typescript-eslint/consistent-type-exports': 'error',
+    '@typescript-eslint/no-import-type-side-effects': 'error',
     '@typescript-eslint/no-unnecessary-type-arguments': 'off',
     '@typescript-eslint/no-unnecessary-condition': 'off',
     '@typescript-eslint/prefer-readonly': 'off',
@@ -35,6 +38,7 @@ module.exports = {
     '@typescript-eslint/no-misused-promises': 'off',
     '@typescript-eslint/await-thenable': 'off',
     'import/no-extraneous-dependencies': 'error',
+    'import/consistent-type-specifier-style': 'error',
     'no-restricted-imports': [
       'error',
       {

config/typescript/matchers.d.ts

@@ -1,4 +1,4 @@
-import {ComponentType, Context as ReactContext} from 'react';
+import type {ComponentType, Context as ReactContext} from 'react';
 import type {} from 'saddle-up/matchers';
 import type {} from 'saddle-up/koa-matchers';
 

package.json

@@ -69,7 +69,7 @@
     "jest-watch-typeahead": "^2.2.2",
     "npm-run-all": "^4.1.5",
     "plop": "^2.6.0",
-    "prettier": "~2.7.1",
+    "prettier": "~2.8.6",
     "puppeteer": "^13.2.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

packages/address-mocks/src/index.ts

@@ -1,9 +1,9 @@
-import {
-  GRAPHQL_ENDPOINT,
+import type {
   LoadCountriesResponse,
   LoadCountryResponse,
   ResponseError,
 } from '@shopify/address-consts';
+import {GRAPHQL_ENDPOINT} from '@shopify/address-consts';
 import {fetch} from '@shopify/jest-dom-mocks';
 
 import {fixtures} from './fixtures';

packages/address/src/loader.ts

@@ -1,8 +1,10 @@
-import {
+import type {
   Country,
   LoadCountriesResponse,
   LoadCountryResponse,
   ResponseError,
+} from '@shopify/address-consts';
+import {
   GRAPHQL_ENDPOINT,
   HEADERS,
   GraphqlOperationName,

packages/address/src/utilities.ts

@@ -1,4 +1,5 @@
-import {Address, FieldName, Country, Zone} from '@shopify/address-consts';
+import type {Address, Country, Zone} from '@shopify/address-consts';
+import {FieldName} from '@shopify/address-consts';
 
 export const FIELD_REGEXP = /({\w+})/g;
 /* eslint-disable @typescript-eslint/naming-convention */

packages/async/src/tests/babel-plugin.test.ts

@@ -1,6 +1,7 @@
 import {transformAsync} from '@babel/core';
 
-import asyncBabelPlugin, {Options} from '../babel-plugin';
+import type {Options} from '../babel-plugin';
+import asyncBabelPlugin from '../babel-plugin';
 
 const defaultPackage = 'some-async-package';
 const defaultImport = 'createAsyncComponent';

packages/graphql-fixtures/src/fill.ts

@@ -1,24 +1,22 @@
 import {faker} from '@faker-js/faker/locale/en';
-import {
+import type {
   GraphQLSchema,
   GraphQLType,
+  GraphQLObjectType,
+  GraphQLEnumType,
+  GraphQLScalarType,
+} from 'graphql';
+import {
   isNonNullType,
   isEnumType,
   isListType,
   isAbstractType,
-  GraphQLObjectType,
-  GraphQLEnumType,
   isScalarType,
-  GraphQLScalarType,
 } from 'graphql';
 import type {DocumentNode, GraphQLOperation} from 'graphql-typed';
 import type {IfEmptyObject, IfAllNullableKeys} from '@shopify/useful-types';
-import {
-  compile,
-  Field,
-  InlineFragment,
-  Operation,
-} from 'graphql-tool-utilities';
+import type {Field, InlineFragment, Operation} from 'graphql-tool-utilities';
+import {compile} from 'graphql-tool-utilities';
 
 import {randomFromArray, chooseNull} from './utilities';
 

packages/graphql-fixtures/src/tests/fill.test.ts

@@ -1,9 +1,11 @@
 // eslint-disable-next-line @shopify/typescript/prefer-build-client-schema
 import {buildSchema} from 'graphql';
-import {parse, DocumentNode} from 'graphql-typed';
+import type {DocumentNode} from 'graphql-typed';
+import {parse} from 'graphql-typed';
 import {faker as originalFaker} from '@faker-js/faker/locale/en';
 
-import {createFiller, list, Options, faker} from '../fill';
+import type {Options} from '../fill';
+import {createFiller, list, faker} from '../fill';
 
 jest.mock('../utilities', () => {
   const utilities = jest.requireActual('../utilities');

packages/graphql-mini-transforms/src/document.ts

@@ -1,8 +1,6 @@
 import {createHash} from 'crypto';
 
-import {
-  print,
-  parse,
+import type {
   DocumentNode as UntypedDocumentNode,
   DefinitionNode,
   SelectionSetNode,
@@ -11,6 +9,7 @@ import {
   SelectionNode,
   Location,
 } from 'graphql';
+import {print, parse} from 'graphql';
 import type {DocumentNode, SimpleDocument} from 'graphql-typed';
 
 const IMPORT_REGEX = /^#import\s+['"]([^'"]*)['"];?[\s\n]*/gm;

packages/graphql-mini-transforms/src/webpack-loader.ts

@@ -1,7 +1,8 @@
 import {dirname} from 'path';
 
 import type {LoaderContext} from 'webpack';
-import {parse, DocumentNode} from 'graphql';
+import type {DocumentNode} from 'graphql';
+import {parse} from 'graphql';
 
 import {cleanDocument, extractImports, toSimpleDocument} from './document';
 

packages/graphql-persisted/src/apollo.ts

@@ -1,10 +1,5 @@
-import {
-  ApolloLink,
-  Operation,
-  NextLink,
-  Observable,
-  FetchResult,
-} from '@apollo/client';
+import type {Operation, NextLink, FetchResult} from '@apollo/client';
+import {ApolloLink, Observable} from '@apollo/client';
 
 import {CacheMissBehavior} from './shared';
 

packages/graphql-persisted/src/tests/koa-middleware.test.ts

@@ -3,8 +3,8 @@ import {Header} from '@shopify/network';
 import {createMockContext} from '@shopify/jest-koa-mocks';
 import {setAssets} from '@shopify/sewing-kit-koa';
 
+import type {Cache} from '../koa-middleware';
 import {
-  Cache,
   CacheMissBehavior,
   createPersistedGraphQLMiddleware,
 } from '../koa-middleware';

packages/graphql-persisted/src/tests/utilities.ts

@@ -1,12 +1,6 @@
-import {
-  ApolloLink,
-  execute,
-  Operation,
-  Observable,
-  FetchResult,
-  NextLink,
-} from '@apollo/client';
-import {DocumentNode} from 'graphql-typed';
+import type {Operation, FetchResult, NextLink} from '@apollo/client';
+import {ApolloLink, execute, Observable} from '@apollo/client';
+import type {DocumentNode} from 'graphql-typed';
 
 interface ExecuteOnceOutcome {
   operation: Operation;

packages/graphql-testing/src/factory.ts

@@ -1,4 +1,5 @@
-import {GraphQL, Options} from './graphql-controller';
+import type {Options} from './graphql-controller';
+import {GraphQL} from './graphql-controller';
 import type {GraphQLMock} from './types';
 
 export function createGraphQLFactory(options?: Options) {

packages/graphql-testing/src/graphql-controller.ts

@@ -1,9 +1,5 @@
-import {
-  ApolloClient,
-  ApolloLink,
-  InMemoryCacheConfig,
-  InMemoryCache,
-} from '@apollo/client';
+import type {InMemoryCacheConfig} from '@apollo/client';
+import {ApolloClient, ApolloLink, InMemoryCache} from '@apollo/client';
 
 import {MockLink, InflightLink} from './links';
 import {Operations} from './operations';

packages/graphql-testing/src/links/inflight.ts

@@ -1,10 +1,5 @@
-import {
-  ApolloLink,
-  Observable,
-  Operation,
-  NextLink,
-  FetchResult,
-} from '@apollo/client';
+import type {Operation, NextLink, FetchResult} from '@apollo/client';
+import {ApolloLink, Observable} from '@apollo/client';
 
 import type {MockRequest} from '../types';
 

packages/graphql-testing/src/links/mocks.ts

@@ -1,5 +1,7 @@
-import {ApolloLink, Observable, Operation} from '@apollo/client';
-import {ExecutionResult, GraphQLError} from 'graphql';
+import type {Operation} from '@apollo/client';
+import {ApolloLink, Observable} from '@apollo/client';
+import type {ExecutionResult} from 'graphql';
+import {GraphQLError} from 'graphql';
 
 import type {GraphQLMock, MockGraphQLFunction} from '../types';
 

packages/graphql-testing/src/links/tests/mocks.test.ts

@@ -1,7 +1,7 @@
 import {gql} from '@apollo/client';
 import {GraphQLError} from 'graphql';
 
-import {MockGraphQLResponse} from '../../types';
+import type {MockGraphQLResponse} from '../../types';
 import {MockLink} from '../mocks';
 
 import {executeOnce} from './utilities';

packages/graphql-testing/src/links/tests/utilities.ts

@@ -1,12 +1,6 @@
-import {
-  ApolloLink,
-  execute,
-  Operation,
-  Observable,
-  FetchResult,
-  NextLink,
-} from '@apollo/client';
-import {DocumentNode} from 'graphql-typed';
+import type {Operation, FetchResult, NextLink} from '@apollo/client';
+import {ApolloLink, execute, Observable} from '@apollo/client';
+import type {DocumentNode} from 'graphql-typed';
 
 interface ExecuteOnceOutcome {
   operation: Operation;

packages/graphql-testing/src/tests/e2e.test.tsx

@@ -1,7 +1,7 @@
 import React, {useCallback} from 'react';
 import {GraphQLError} from 'graphql';
 import {gql} from '@apollo/client';
-import {DocumentNode} from 'graphql-typed';
+import type {DocumentNode} from 'graphql-typed';
 import {mount} from '@shopify/react-testing';
 import {ApolloProvider, useQuery, ApolloError} from '@shopify/react-graphql';
 

packages/graphql-tool-utilities/src/ast.ts

@@ -1,14 +1,14 @@
 import type {DocumentNode, GraphQLInputType, GraphQLSchema} from 'graphql';
-import {
+import type {
   BooleanCondition,
   CompilerOptions,
-  compileToLegacyIR as compileToIR,
   LegacyCompilerContext,
   LegacyField,
   LegacyFragment,
   LegacyInlineFragment,
   LegacyOperation,
 } from 'apollo-codegen-core/lib/compiler/legacyIR';
+import {compileToLegacyIR as compileToIR} from 'apollo-codegen-core/lib/compiler/legacyIR';
 
 export enum OperationType {
   Query = 'query',

packages/graphql-typed/src/index.ts

@@ -1,9 +1,9 @@
-import {
-  parse as graphQLParse,
+import type {
   DocumentNode as BaseDocumentNode,
   Source,
   ParseOptions,
 } from 'graphql';
+import {parse as graphQLParse} from 'graphql';
 
 export interface GraphQLOperation<Data = {}, Variables = {}, DeepPartial = {}> {
   // We need something to actually use the types, otherwise TypeScript

packages/graphql-typescript-definitions/src/cli.ts

@@ -5,7 +5,8 @@ import yargs from 'yargs';
 
 import {EnumFormat, ExportFormat} from './types';
 
-import {Builder, SchemaBuild, DocumentBuild} from '.';
+import type {SchemaBuild, DocumentBuild} from '.';
+import {Builder} from '.';
 
 const argv = yargs
   .usage('Usage: $0 [options]')

packages/graphql-typescript-definitions/src/filesystem/default-graphql-filesystem.ts

@@ -1,4 +1,5 @@
-import {FSWatcher, watch} from 'chokidar';
+import type {FSWatcher} from 'chokidar';
+import {watch} from 'chokidar';
 import type {GraphQLProjectConfig, GraphQLConfig} from 'graphql-config';
 import {
   getGraphQLProjectIncludedFilePaths,