set importsNotUsedAsValues:error and use import type where possible (#…

…2595)

.changeset/lucky-adults-remember.md

@@ -0,0 +1,46 @@
+---
+'@shopify/address': patch
+'@shopify/address-mocks': patch
+'@shopify/async': patch
+'@shopify/dates': patch
+'graphql-config-utilities': patch
+'graphql-fixtures': patch
+'graphql-mini-transforms': patch
+'@shopify/graphql-persisted': patch
+'@shopify/graphql-testing': patch
+'graphql-tool-utilities': patch
+'graphql-typescript-definitions': patch
+'graphql-validate-fixtures': patch
+'@shopify/jest-dom-mocks': patch
+'@shopify/jest-koa-mocks': patch
+'@shopify/koa-liveness-ping': patch
+'@shopify/koa-metrics': patch
+'@shopify/koa-performance': patch
+'@shopify/koa-shopify-graphql-proxy': patch
+'@shopify/koa-shopify-webhooks': patch
+'@shopify/performance': patch
+'@shopify/react-async': patch
+'@shopify/react-bugsnag': patch
+'@shopify/react-compose': patch
+'@shopify/react-cookie': patch
+'@shopify/react-effect': patch
+'@shopify/react-form': patch
+'@shopify/react-form-state': patch
+'@shopify/react-google-analytics': patch
+'@shopify/react-graphql': patch
+'@shopify/react-html': patch
+'@shopify/react-hydrate': patch
+'@shopify/react-i18n': patch
+'@shopify/react-idle': 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/sewing-kit-koa': patch
+'@shopify/web-worker': patch
+---
+
+Use `import type` when importing types

config/typescript/tsconfig.base.json

@@ -20,8 +20,6 @@
     // These values are are not controled by strict mode, though they are
     // enabled in the 'strictest' config that we inherit from.
     // These reach a level of pedanticness we aren't worried about
-    // importsNotUsedAsValues has 50 violations, but they're trivial fixes
-    "importsNotUsedAsValues": "remove",
     "noImplicitOverride": false,
     "noPropertyAccessFromIndexSignature": false,
     "noUncheckedIndexedAccess": false,

packages/address-mocks/src/fixtures/countries_af.ts

@@ -1,4 +1,4 @@
-import {LoadCountriesResponse} from '@shopify/address-consts';
+import type {LoadCountriesResponse} from '@shopify/address-consts';
 
 const data: LoadCountriesResponse = {
   data: {

packages/address-mocks/src/fixtures/countries_en.ts

@@ -1,4 +1,4 @@
-import {LoadCountriesResponse} from '@shopify/address-consts';
+import type {LoadCountriesResponse} from '@shopify/address-consts';
 
 const data: LoadCountriesResponse = {
   data: {

packages/address-mocks/src/fixtures/countries_fr.ts

@@ -1,4 +1,4 @@
-import {LoadCountriesResponse} from '@shopify/address-consts';
+import type {LoadCountriesResponse} from '@shopify/address-consts';
 
 const data: LoadCountriesResponse = {
   data: {

packages/address-mocks/src/fixtures/countries_ja.ts

@@ -1,4 +1,4 @@
-import {LoadCountriesResponse} from '@shopify/address-consts';
+import type {LoadCountriesResponse} from '@shopify/address-consts';
 
 const data: LoadCountriesResponse = {
   data: {

packages/address-mocks/src/fixtures/country_ca_af.ts

@@ -1,4 +1,4 @@
-import {LoadCountryResponse} from '@shopify/address-consts';
+import type {LoadCountryResponse} from '@shopify/address-consts';
 
 const data: LoadCountryResponse = {
   data: {

packages/address-mocks/src/fixtures/country_ca_en.ts

@@ -1,4 +1,4 @@
-import {LoadCountryResponse} from '@shopify/address-consts';
+import type {LoadCountryResponse} from '@shopify/address-consts';
 
 const data: LoadCountryResponse = {
   data: {

packages/address-mocks/src/fixtures/country_ca_fr.ts

@@ -1,4 +1,4 @@
-import {LoadCountryResponse} from '@shopify/address-consts';
+import type {LoadCountryResponse} from '@shopify/address-consts';
 
 const data: LoadCountryResponse = {
   data: {

packages/address-mocks/src/fixtures/country_ca_ja.ts

@@ -1,4 +1,4 @@
-import {LoadCountryResponse} from '@shopify/address-consts';
+import type {LoadCountryResponse} from '@shopify/address-consts';
 
 const data: LoadCountryResponse = {
   data: {

packages/address-mocks/src/fixtures/index.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   LoadCountriesResponse,
   LoadCountryResponse,
 } from '@shopify/address-consts';

packages/address/src/AddressFormatter.ts

@@ -1,4 +1,4 @@
-import {Address, FieldName, Country} from '@shopify/address-consts';
+import type {Address, FieldName, Country} from '@shopify/address-consts';
 
 import {formatAddress, buildOrderedFields} from './format';
 import {loadCountry, loadCountries} from './loader';

packages/address/src/format.ts

@@ -1,4 +1,4 @@
-import {Address, Country, FieldName} from '@shopify/address-consts';
+import type {Address, Country, FieldName} from '@shopify/address-consts';
 
 import {FIELDS_MAPPING, FIELD_REGEXP, renderLineTemplate} from './utilities';
 

packages/address/src/tests/AddressFormatter.test.ts

@@ -1,5 +1,5 @@
 import {fetch} from '@shopify/jest-dom-mocks';
-import {Address} from '@shopify/address-consts';
+import type {Address} from '@shopify/address-consts';
 import {mockCountryRequests} from '@shopify/address-mocks';
 
 import AddressFormatter from '../AddressFormatter';

packages/address/src/tests/format.test.ts

@@ -1,4 +1,4 @@
-import {Address} from '@shopify/address-consts';
+import type {Address} from '@shopify/address-consts';
 import {fixtures} from '@shopify/address-mocks';
 
 import {buildOrderedFields, formatAddress} from '../format';

packages/address/src/tests/utilities.test.ts

@@ -1,4 +1,4 @@
-import {Address} from '@shopify/address-consts';
+import type {Address} from '@shopify/address-consts';
 import {fixtures} from '@shopify/address-mocks';
 
 import {renderLineTemplate} from '../utilities';

packages/async/src/babel-plugin.ts

@@ -1,5 +1,5 @@
-import Types from '@babel/types';
-import {NodePath, Binding} from '@babel/traverse';
+import type Types from '@babel/types';
+import type {NodePath, Binding} from '@babel/traverse';
 
 /* eslint-disable @typescript-eslint/naming-convention */
 const DEFAULT_PACKAGES_TO_PROCESS = {

packages/async/src/resolver.ts

@@ -1,4 +1,4 @@
-import {Import} from './types';
+import type {Import} from './types';
 
 export interface Resolver<T> {
   readonly id?: string;

packages/dates/src/get-date-diff.ts

@@ -1,4 +1,4 @@
-import {TimeUnit} from './constants';
+import type {TimeUnit} from './constants';
 
 export function getDateDiff(
   resolution: TimeUnit,

packages/graphql-config-utilities/src/config.ts

@@ -2,7 +2,7 @@ import {existsSync} from 'fs';
 import {promisify} from 'util';
 import {resolve} from 'path';
 
-import {GraphQLConfig, GraphQLProjectConfig} from 'graphql-config';
+import type {GraphQLConfig, GraphQLProjectConfig} from 'graphql-config';
 // we need to use an import/require here because it does not force consumers to
 // enable esModuleInterop in tsconfig.json
 import glob from 'glob';

packages/graphql-fixtures/src/fill.ts

@@ -11,8 +11,8 @@ import {
   isScalarType,
   GraphQLScalarType,
 } from 'graphql';
-import {DocumentNode, GraphQLOperation} from 'graphql-typed';
-import {IfEmptyObject, IfAllNullableKeys} from '@shopify/useful-types';
+import type {DocumentNode, GraphQLOperation} from 'graphql-typed';
+import type {IfEmptyObject, IfAllNullableKeys} from '@shopify/useful-types';
 import {
   compile,
   Field,

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

@@ -11,7 +11,7 @@ import {
   SelectionNode,
   Location,
 } from 'graphql';
-import {DocumentNode, SimpleDocument} from 'graphql-typed';
+import type {DocumentNode, SimpleDocument} from 'graphql-typed';
 
 const IMPORT_REGEX = /^#import\s+['"]([^'"]*)['"];?[\s\n]*/gm;
 const DEFAULT_NAME = 'Operation';

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

@@ -1,4 +1,4 @@
-import {Context} from 'koa';
+import type {Context} from 'koa';
 import compose from 'koa-compose';
 import bodyparser from 'koa-bodyparser';
 import {getAssets} from '@shopify/sewing-kit-koa';

packages/graphql-testing/src/factory.ts

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

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

@@ -8,7 +8,7 @@ import {
 import {MockLink, InflightLink} from './links';
 import {Operations} from './operations';
 import {operationNameFromFindOptions} from './utilities';
-import {GraphQLMock, MockRequest, FindOptions} from './types';
+import type {GraphQLMock, MockRequest, FindOptions} from './types';
 
 export interface Options {
   cacheOptions?: InMemoryCacheConfig;

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

@@ -6,7 +6,7 @@ import {
   FetchResult,
 } from '@apollo/client';
 
-import {MockRequest} from '../types';
+import type {MockRequest} from '../types';
 
 interface Options {
   onCreated(request: MockRequest): void;

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

@@ -1,7 +1,7 @@
 import {ApolloLink, Observable, Operation} from '@apollo/client';
 import {ExecutionResult, GraphQLError} from 'graphql';
 
-import {GraphQLMock, MockGraphQLFunction} from '../types';
+import type {GraphQLMock, MockGraphQLFunction} from '../types';
 
 export class MockLink extends ApolloLink {
   constructor(private mock: GraphQLMock) {

packages/graphql-testing/src/matchers/index.ts

@@ -1,4 +1,4 @@
-import {GraphQLOperation} from 'graphql-typed';
+import type {GraphQLOperation} from 'graphql-typed';
 
 import {toHavePerformedGraphQLOperation} from './operations';
 

packages/graphql-testing/src/matchers/operations.ts

@@ -3,10 +3,10 @@ import {
   printExpected,
   EXPECTED_COLOR as expectedColor,
 } from 'jest-matcher-utils';
-import {GraphQLOperation, DocumentNode} from 'graphql-typed';
-import {Operation} from '@apollo/client';
+import type {GraphQLOperation, DocumentNode} from 'graphql-typed';
+import type {Operation} from '@apollo/client';
 
-import {GraphQL} from '../graphql-controller';
+import type {GraphQL} from '../graphql-controller';
 import {
   operationNameFromDocument,
   operationTypeFromDocument,

packages/graphql-testing/src/matchers/utilities.ts

@@ -6,7 +6,7 @@ import {
   printWithType,
   printReceived,
 } from 'jest-matcher-utils';
-import {Operation} from '@apollo/client';
+import type {Operation} from '@apollo/client';
 
 import {GraphQL} from '../graphql-controller';
 

packages/graphql-testing/src/operations.ts

@@ -1,7 +1,7 @@
-import {Operation} from '@apollo/client';
+import type {Operation} from '@apollo/client';
 
 import {operationNameFromFindOptions} from './utilities';
-import {FindOptions} from './types';
+import type {FindOptions} from './types';
 
 export class Operations {
   private operations: Operation[] = [];

packages/graphql-testing/src/types.ts

@@ -1,5 +1,5 @@
-import {DocumentNode} from 'graphql';
-import {GraphQLRequest, Operation} from '@apollo/client';
+import type {DocumentNode} from 'graphql';
+import type {GraphQLRequest, Operation} from '@apollo/client';
 
 export interface FindOptions {
   query?: DocumentNode | {resolver: {resolved?: DocumentNode}};

packages/graphql-testing/src/utilities.ts

@@ -1,6 +1,6 @@
-import {DocumentNode, OperationDefinitionNode} from 'graphql';
+import type {DocumentNode, OperationDefinitionNode} from 'graphql';
 
-import {FindOptions} from './types';
+import type {FindOptions} from './types';
 
 export function operationNameFromFindOptions({query, mutation}: FindOptions) {
   const passedOptions = [query, mutation].filter(Boolean);

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

@@ -1,4 +1,4 @@
-import {DocumentNode, GraphQLInputType, GraphQLSchema} from 'graphql';
+import type {DocumentNode, GraphQLInputType, GraphQLSchema} from 'graphql';
 import {
   BooleanCondition,
   CompilerOptions,

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

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

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

@@ -1,6 +1,6 @@
 import {EventEmitter} from 'events';
 
-import {GraphQLProjectConfig, GraphQLConfig} from 'graphql-config';
+import type {GraphQLProjectConfig, GraphQLConfig} from 'graphql-config';
 
 export interface GraphQLFilesystem {
   watch(config: GraphQLConfig): Promise<void>;

packages/graphql-typescript-definitions/src/print/document/context.ts

@@ -3,7 +3,7 @@ import {relative, dirname} from 'path';
 import * as t from '@babel/types';
 import {AST, Fragment, isOperation, Operation} from 'graphql-tool-utilities';
 
-import {EnumFormat, ExportFormat} from '../../types';
+import type {EnumFormat, ExportFormat} from '../../types';
 
 import {upperCaseFirst} from './utilities';
 

packages/graphql-typescript-definitions/src/print/document/index.ts

@@ -1,5 +1,5 @@
 import * as t from '@babel/types';
-import {GraphQLObjectType} from 'graphql';
+import type {GraphQLObjectType} from 'graphql';
 import {
   AST,
   Fragment,

packages/graphql-typescript-definitions/src/print/document/language.ts

@@ -27,8 +27,8 @@ import {
 
 import {scalarTypeMap} from '../utilities';
 
-import {ObjectStack} from './utilities';
-import {OperationContext} from './context';
+import type {ObjectStack} from './utilities';
+import type {OperationContext} from './context';
 
 export function tsInterfaceBodyForObjectField(
   {fields = []}: PrintableFieldDetails,

packages/graphql-typescript-definitions/src/print/document/utilities.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   GraphQLCompositeType,
   // We need to bring these in as they are implicitly referenced by
   // GraphQLCompositeType, but TypeScript doesn’t know this when it
@@ -10,7 +10,7 @@ import {
   // @ts-expect-error TS needs this implict reference though we never use it explicitly
   GraphQLUnionType,
 } from 'graphql';
-import {Field} from 'graphql-tool-utilities';
+import type {Field} from 'graphql-tool-utilities';
 
 export class ObjectStack {
   private readonly seenFields = new Set<string>();

packages/graphql-validate-fixtures/src/validate.ts

@@ -15,8 +15,8 @@ import {
   isObjectType,
   isScalarType,
 } from 'graphql';
-import {GraphQLProjectConfig} from 'graphql-config';
-import {AST, Field, Operation} from 'graphql-tool-utilities';
+import type {GraphQLProjectConfig} from 'graphql-config';
+import type {AST, Field, Operation} from 'graphql-tool-utilities';
 
 export type KeyPath = string;
 

packages/jest-dom-mocks/src/request-idle-callback.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   RequestIdleCallback as IdleCallback,
   WindowWithRequestIdleCallback,
 } from '@shopify/async';

packages/jest-koa-mocks/src/create-mock-context/tests/create-mock-context.test.ts

@@ -1,4 +1,4 @@
-import {Context} from 'koa';
+import type {Context} from 'koa';
 
 import createContext from '../create-mock-context';
 

packages/jest-koa-mocks/src/create-mock-cookies/create-mock-cookies.ts

@@ -1,4 +1,4 @@
-import {Context} from 'koa';
+import type {Context} from 'koa';
 
 export type Cookies = Context['cookies'];
 

packages/koa-liveness-ping/src/index.ts

@@ -1,4 +1,4 @@
-import {Context} from 'koa';
+import type {Context} from 'koa';
 
 export default function ping() {
   return async function pingMiddleware(ctx: Context, next: Function) {

packages/koa-metrics/src/content.ts

@@ -1,4 +1,4 @@
-import {Context} from 'koa';
+import type {Context} from 'koa';
 
 export function getContentLength(ctx: Context): number | null {
   const responseContentLength: string | undefined =

packages/koa-metrics/src/middleware.ts

@@ -1,4 +1,4 @@
-import {Context} from 'koa';
+import type {Context} from 'koa';
 import {StatsDClient, Logger} from '@shopify/statsd';
 
 import {tagsForRequest, tagsForResponse} from './tags';