[lint] Update eslint packages and prefer type imports in ts sdk (Myst…

…enLabs#12733) ## Description To ensure that the typescript sdk can remain modular, I am adding some new eslint rules around imports that should help keep modular imports as small as possible. Specifically this enforces: * imports must have a .js file extension (required for proper esm support) * type imports are preferred when an import is only used in type definitions * imports can't have cycles ## Test Plan How did you test the new or updated feature? --- If your changes are not user-facing and not a breaking change, you can skip the following section. Otherwise, please indicate what changed, and then add to the Release Notes section as highlighted during the release process. ### Type of Change (Check all that apply) - [ ] protocol change - [ ] user-visible impact - [ ] breaking change for a client SDKs - [ ] breaking change for FNs (FN binary must upgrade) - [ ] breaking change for validators or node operators (must upgrade binaries) - [ ] breaking change for on-chain data layout - [ ] necessitate either a data wipe or data migration ### Release notes
kakudo · Jun 29, 2023 · a9ef310 · a9ef310
1 parent 726cdec
commit a9ef310
Show file tree

Hide file tree

Showing 184 changed files with 1,114 additions and 889 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,18 +2,25 @@
 // SPDX-License-Identifier: Apache-2.0
 
 module.exports = {
-	plugins: ['@tanstack/query', 'unused-imports', 'prettier', 'header'],
+	plugins: ['@tanstack/query', 'unused-imports', 'prettier', 'header', 'require-extensions'],
 	extends: [
 		'eslint:recommended',
 		'react-app',
 		'plugin:@tanstack/eslint-plugin-query/recommended',
 		'prettier',
 		'plugin:prettier/recommended',
+		'plugin:import/typescript',
 	],
 	settings: {
 		react: {
 			version: '18',
 		},
+		'import/resolver': {
+			typescript: true,
+		},
+	},
+	env: {
+		es2020: true,
 	},
 	root: true,
 	ignorePatterns: [
@@ -66,7 +73,11 @@ module.exports = {
 		{
 			files: ['sdk/typescript/src/**/*'],
 			rules: {
-				'import/extensions': ['error', 'ignorePackages'],
+				'require-extensions/require-extensions': 'error',
+				'require-extensions/require-index': 'error',
+				'@typescript-eslint/consistent-type-imports': ['error'],
+				'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
+				'import/no-cycle': ['error'],
 			},
 		},
 		{
@@ -82,6 +93,10 @@ module.exports = {
 								group: 'type',
 								position: 'after',
 							},
+							{
+								pattern: '~/**',
+								group: 'internal',
+							},
 						],
 						'newlines-between': 'always',
 						alphabetize: { order: 'asc' },
@@ -223,7 +238,6 @@ module.exports = {
 							},
 						],
 						pathGroupsExcludedImportTypes: ['builtin', 'object', 'type'],
-						'newlines-between': 'always',
 						alphabetize: { order: 'asc' },
 						warnOnUnassignedImports: true,
 					},

diff --git a/apps/explorer/src/components/Activity/EpochsActivityTable.tsx b/apps/explorer/src/components/Activity/EpochsActivityTable.tsx
@@ -7,7 +7,6 @@ import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 
 import { genTableDataFromEpochsData } from './utils';
-
 import { useGetEpochs } from '~/hooks/useGetEpochs';
 import { Link } from '~/ui/Link';
 import { Pagination, useCursorPagination } from '~/ui/Pagination';

diff --git a/apps/explorer/src/components/Activity/TransactionsActivityTable.tsx b/apps/explorer/src/components/Activity/TransactionsActivityTable.tsx
@@ -7,7 +7,6 @@ import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 
 import { genTableDataFromTxData } from '../transactions/TxCardUtils';
-
 import { useGetTransactionBlocks } from '~/hooks/useGetTransactionBlocks';
 import { Link } from '~/ui/Link';
 import { Pagination, useCursorPagination } from '~/ui/Pagination';

diff --git a/apps/explorer/src/components/Activity/index.tsx b/apps/explorer/src/components/Activity/index.tsx
@@ -4,10 +4,9 @@
 import { useState } from 'react';
 // import toast from 'react-hot-toast';
 
-import { CheckpointsTable } from '../checkpoints/CheckpointsTable';
 import { EpochsActivityTable } from './EpochsActivityTable';
 import { TransactionsActivityTable } from './TransactionsActivityTable';
-
+import { CheckpointsTable } from '../checkpoints/CheckpointsTable';
 // import { PlayPause } from '~/ui/PlayPause';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/ui/Tabs';
 

diff --git a/apps/explorer/src/components/Activity/utils.tsx b/apps/explorer/src/components/Activity/utils.tsx
@@ -5,7 +5,6 @@ import { type EpochPage } from '@mysten/sui.js/src/types/epochs';
 
 import { SuiAmount } from '../Table/SuiAmount';
 import { TxTimeType } from '../tx-time/TxTimeType';
-
 import { HighlightedTableCol } from '~/components/Table/HighlightedTableCol';
 import { CheckpointSequenceLink, EpochLink } from '~/ui/InternalLink';
 import { Text } from '~/ui/Text';

diff --git a/apps/explorer/src/components/GasPriceCard/GraphTooltipContent.tsx b/apps/explorer/src/components/GasPriceCard/GraphTooltipContent.tsx
@@ -7,7 +7,6 @@ import clsx from 'clsx';
 
 import { type EpochGasInfo, type UnitsType } from './types';
 import { useGasPriceFormat } from './utils';
-
 import { Text } from '~/ui/Text';
 
 export type GraphTooltipContentProps = {

diff --git a/apps/explorer/src/components/GasPriceCard/index.tsx b/apps/explorer/src/components/GasPriceCard/index.tsx
@@ -7,11 +7,10 @@ import { ParentSize } from '@visx/responsive';
 import clsx from 'clsx';
 import { useMemo, useState } from 'react';
 
-import { ErrorBoundary } from '../error-boundary/ErrorBoundary';
 import { Graph } from './Graph';
 import { type EpochGasInfo, type GraphDurationsType, type UnitsType } from './types';
 import { GRAPH_DURATIONS, GRAPH_DURATIONS_MAP, UNITS, isDefined, useGasPriceFormat } from './utils';
-
+import { ErrorBoundary } from '../error-boundary/ErrorBoundary';
 import { Card } from '~/ui/Card';
 import { FilterList } from '~/ui/FilterList';
 import { Heading } from '~/ui/Heading';

diff --git a/apps/explorer/src/components/HomeMetrics/Checkpoint.tsx b/apps/explorer/src/components/HomeMetrics/Checkpoint.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { StatsWrapper } from './FormattedStatsAmount';
-
 import { useGetNetworkMetrics } from '~/hooks/useGetNetworkMetrics';
 
 export function Checkpoint() {

diff --git a/apps/explorer/src/components/HomeMetrics/NetworkTPS.tsx b/apps/explorer/src/components/HomeMetrics/NetworkTPS.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { StatsWrapper } from './FormattedStatsAmount';
-
 import { useGetNetworkMetrics } from '~/hooks/useGetNetworkMetrics';
 import { Card } from '~/ui/Card';
 import { Heading } from '~/ui/Heading';

diff --git a/apps/explorer/src/components/HomeMetrics/OnTheNetwork.tsx b/apps/explorer/src/components/HomeMetrics/OnTheNetwork.tsx
@@ -4,7 +4,6 @@
 import { useGetTotalTransactionBlocks } from '@mysten/core';
 
 import { FormattedStatsAmount } from './FormattedStatsAmount';
-
 import { useGetAddressMetrics } from '~/hooks/useGetAddressMetrics';
 import { useGetNetworkMetrics } from '~/hooks/useGetNetworkMetrics';
 import { Card } from '~/ui/Card';

diff --git a/apps/explorer/src/components/Layout/index.tsx b/apps/explorer/src/components/Layout/index.tsx
@@ -12,7 +12,6 @@ import { Outlet, ScrollRestoration } from 'react-router-dom';
 import { useInitialPageView } from '../../hooks/useInitialPageView';
 import Footer from '../footer/Footer';
 import Header from '../header/Header';
-
 import { NetworkContext, useNetwork } from '~/context';
 import { Banner, type BannerProps } from '~/ui/Banner';
 import { persistableStorage } from '~/utils/analytics/amplitude';

diff --git a/apps/explorer/src/components/Object/DynamicFieldsCard.tsx b/apps/explorer/src/components/Object/DynamicFieldsCard.tsx
@@ -5,7 +5,6 @@ import { useGetDynamicFields, useOnScreen } from '@mysten/core';
 import { useRef, useEffect } from 'react';
 
 import { UnderlyingObjectCard } from './UnderlyingObjectCard';
-
 import { DisclosureBox } from '~/ui/DisclosureBox';
 import { ObjectLink } from '~/ui/InternalLink';
 import { LoadingSpinner } from '~/ui/LoadingSpinner';

diff --git a/apps/explorer/src/components/Object/FieldItem.tsx b/apps/explorer/src/components/Object/FieldItem.tsx
@@ -4,7 +4,6 @@
 import { type SuiMoveNormalizedType } from '@mysten/sui.js';
 
 import { getFieldTypeValue } from './utils';
-
 import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
 import { AddressLink, ObjectLink } from '~/ui/InternalLink';
 import { Link } from '~/ui/Link';

diff --git a/apps/explorer/src/components/Object/ObjectFieldsCard.tsx b/apps/explorer/src/components/Object/ObjectFieldsCard.tsx
@@ -11,7 +11,6 @@ import { useState } from 'react';
 import { FieldItem } from './FieldItem';
 import { ScrollToViewCard } from './ScrollToViewCard';
 import { getFieldTypeValue } from './utils';
-
 import { Banner } from '~/ui/Banner';
 import { DisclosureBox } from '~/ui/DisclosureBox';
 import { LoadingSpinner } from '~/ui/LoadingSpinner';

diff --git a/apps/explorer/src/components/Object/UnderlyingObjectCard.tsx b/apps/explorer/src/components/Object/UnderlyingObjectCard.tsx
@@ -5,7 +5,6 @@ import { useGetDynamicFieldObject, useGetNormalizedMoveStruct } from '@mysten/co
 import { getObjectFields, getObjectType } from '@mysten/sui.js';
 
 import { FieldItem } from './FieldItem';
-
 import { Banner } from '~/ui/Banner';
 import { LoadingSpinner } from '~/ui/LoadingSpinner';
 

diff --git a/apps/explorer/src/components/OwnedCoins/OwnedCoinView.tsx b/apps/explorer/src/components/OwnedCoins/OwnedCoinView.tsx
@@ -9,7 +9,6 @@ import clsx from 'clsx';
 import { useState } from 'react';
 
 import CoinsPanel from './OwnedCoinsPanel';
-
 import { Text } from '~/ui/Text';
 
 type OwnedCoinViewProps = {

diff --git a/apps/explorer/src/components/OwnedCoins/OwnedCoinsPanel.tsx b/apps/explorer/src/components/OwnedCoins/OwnedCoinsPanel.tsx
@@ -5,7 +5,6 @@ import { useOnScreen, useGetCoins } from '@mysten/core';
 import { useEffect, useRef } from 'react';
 
 import CoinItem from './CoinItem';
-
 import { LoadingSpinner } from '~/ui/LoadingSpinner';
 
 type CoinsPanelProps = {

diff --git a/apps/explorer/src/components/OwnedCoins/index.tsx b/apps/explorer/src/components/OwnedCoins/index.tsx
@@ -5,7 +5,6 @@ import { useGetAllBalances } from '@mysten/core';
 import { useState } from 'react';
 
 import OwnedCoinView from './OwnedCoinView';
-
 import { Heading } from '~/ui/Heading';
 import { LoadingSpinner } from '~/ui/LoadingSpinner';
 import { Pagination } from '~/ui/Pagination';

diff --git a/apps/explorer/src/components/OwnedObjects/index.tsx b/apps/explorer/src/components/OwnedObjects/index.tsx
@@ -5,7 +5,6 @@ import { useGetKioskContents, useGetOwnedObjects } from '@mysten/core';
 import { useMemo, useState } from 'react';
 
 import OwnedObject from './OwnedObject';
-
 import { LoadingSpinner } from '~/ui/LoadingSpinner';
 import { Pagination, useCursorPagination } from '~/ui/Pagination';
 import { RadioGroup, RadioOption } from '~/ui/Radio';

diff --git a/apps/explorer/src/components/SuiTokenCard.tsx b/apps/explorer/src/components/SuiTokenCard.tsx
@@ -5,7 +5,6 @@ import { formatAmount } from '@mysten/core';
 import { Sui } from '@mysten/icons';
 
 import { StatsWrapper } from './HomeMetrics/FormattedStatsAmount';
-
 import { useSuiCoinData } from '~/hooks/useSuiCoinData';
 import { Card } from '~/ui/Card';
 import { Heading } from '~/ui/Heading';

diff --git a/apps/explorer/src/components/TransactionBlocksForAddress/TransactionBlocksForAddress.tsx b/apps/explorer/src/components/TransactionBlocksForAddress/TransactionBlocksForAddress.tsx
@@ -5,7 +5,6 @@ import { type TransactionFilter } from '@mysten/sui.js';
 import { useReducer, useState } from 'react';
 
 import { genTableDataFromTxData } from '../transactions/TxCardUtils';
-
 import {
 	DEFAULT_TRANSACTIONS_LIMIT,
 	useGetTransactionBlocks,

diff --git a/apps/explorer/src/components/checkpoints/CheckpointsTable.tsx b/apps/explorer/src/components/checkpoints/CheckpointsTable.tsx
@@ -7,7 +7,6 @@ import { useQuery } from '@tanstack/react-query';
 import { useMemo, useState } from 'react';
 
 import { genTableDataFromCheckpointsData } from './utils';
-
 import { useGetCheckpoints } from '~/hooks/useGetCheckpoints';
 import { Link } from '~/ui/Link';
 import { Pagination, useCursorPagination } from '~/ui/Pagination';

diff --git a/apps/explorer/src/components/checkpoints/utils.tsx b/apps/explorer/src/components/checkpoints/utils.tsx
@@ -4,7 +4,6 @@
 import { type CheckpointPage } from '@mysten/sui.js/src/types/checkpoints';
 
 import { TxTimeType } from '../tx-time/TxTimeType';
-
 import { HighlightedTableCol } from '~/components/Table/HighlightedTableCol';
 import { CheckpointLink, CheckpointSequenceLink } from '~/ui/InternalLink';
 import { Text } from '~/ui/Text';

diff --git a/apps/explorer/src/components/error-boundary/ErrorBoundary.tsx b/apps/explorer/src/components/error-boundary/ErrorBoundary.tsx
@@ -4,11 +4,11 @@
 import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
 import { useLocation } from 'react-router-dom';
 
+import { Banner } from '~/ui/Banner';
+
 import type { ReactNode } from 'react';
 import type { FallbackProps } from 'react-error-boundary';
 
-import { Banner } from '~/ui/Banner';
-
 function Fallback({ error }: FallbackProps) {
 	return (
 		<Banner variant="error" fullWidth>

diff --git a/apps/explorer/src/components/footer/Footer.tsx b/apps/explorer/src/components/footer/Footer.tsx
@@ -1,10 +1,9 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { ReactComponent as MystenLabsRed } from '../../assets/MystenLabs_Red.svg';
 import { LegalLinks, LegalText } from './Legal';
 import { footerLinks, socialLinks } from './footerLinks';
-
+import { ReactComponent as MystenLabsRed } from '../../assets/MystenLabs_Red.svg';
 import { Link } from '~/ui/Link';
 import { Text } from '~/ui/Text';
 

diff --git a/apps/explorer/src/components/footer/Legal.tsx b/apps/explorer/src/components/footer/Legal.tsx
@@ -4,7 +4,6 @@
 import { useProductAnalyticsConfig } from '@mysten/core';
 
 import { legalLinks } from './footerLinks';
-
 import { Link } from '~/ui/Link';
 import { Text } from '~/ui/Text';
 

diff --git a/apps/explorer/src/components/header/Header.tsx b/apps/explorer/src/components/header/Header.tsx
@@ -5,7 +5,6 @@ import { Sui, SuiLogoTxt } from '@mysten/icons';
 
 import NetworkSelect from '../network/Network';
 import Search from '../search/Search';
-
 import { LinkWithQuery } from '~/ui/utils/LinkWithQuery';
 
 function Header() {

diff --git a/apps/explorer/src/components/module/ModuleView.tsx b/apps/explorer/src/components/module/ModuleView.tsx
@@ -7,13 +7,13 @@ import Highlight, { defaultProps, Prism } from 'prism-react-renderer';
 import 'prism-themes/themes/prism-one-light.css';
 import { useMemo } from 'react';
 
+import { useNormalizedMoveModule } from '~/hooks/useNormalizedMoveModule';
+import { LinkWithQuery } from '~/ui/utils/LinkWithQuery';
+
 import type { Language } from 'prism-react-renderer';
 
 import styles from './ModuleView.module.css';
 
-import { useNormalizedMoveModule } from '~/hooks/useNormalizedMoveModule';
-import { LinkWithQuery } from '~/ui/utils/LinkWithQuery';
-
 // Include Rust language support.
 // TODO: Write a custom prismjs syntax for Move Bytecode.
 // @ts-expect-error: Defining global prism object:

diff --git a/apps/explorer/src/components/module/PkgModulesWrapper.tsx b/apps/explorer/src/components/module/PkgModulesWrapper.tsx
@@ -9,7 +9,6 @@ import { type Direction } from 'react-resizable-panels';
 
 import ModuleView from './ModuleView';
 import { ModuleFunctionsInteraction } from './module-functions-interaction';
-
 import { useBreakpoint } from '~/hooks/useBreakpoint';
 import { SplitPanes } from '~/ui/SplitPanes';
 import { TabHeader } from '~/ui/Tabs';

diff --git a/apps/explorer/src/components/module/module-functions-interaction/FunctionExecutionResult.tsx b/apps/explorer/src/components/module/module-functions-interaction/FunctionExecutionResult.tsx
@@ -9,11 +9,10 @@ import {
 } from '@mysten/sui.js';
 
 import { LinkGroup } from './LinkGroup';
+import { Banner } from '~/ui/Banner';
 
 import type { SuiTransactionBlockResponse, OwnedObjectRef } from '@mysten/sui.js';
 
-import { Banner } from '~/ui/Banner';
-
 function toObjectLink(object: OwnedObjectRef) {
 	return {
 		text: getObjectId(object.reference),

diff --git a/apps/explorer/src/components/module/module-functions-interaction/ModuleFunction.tsx b/apps/explorer/src/components/module/module-functions-interaction/ModuleFunction.tsx
@@ -18,15 +18,14 @@ import { z } from 'zod';
 import { FunctionExecutionResult } from './FunctionExecutionResult';
 import { useFunctionParamsDetails } from './useFunctionParamsDetails';
 import { useFunctionTypeArguments } from './useFunctionTypeArguments';
-
-import type { SuiMoveNormalizedFunction, ObjectId } from '@mysten/sui.js';
-import type { TypeOf } from 'zod';
-
 import { useZodForm } from '~/hooks/useZodForm';
 import { Button } from '~/ui/Button';
 import { DisclosureBox } from '~/ui/DisclosureBox';
 import { Input } from '~/ui/Input';
 
+import type { SuiMoveNormalizedFunction, ObjectId } from '@mysten/sui.js';
+import type { TypeOf } from 'zod';
+
 const argsSchema = z.object({
 	params: z.optional(z.array(z.string().trim().min(1))),
 	types: z.optional(z.array(z.string().trim().min(1))),

diff --git a/apps/explorer/src/components/module/module-functions-interaction/index.tsx b/apps/explorer/src/components/module/module-functions-interaction/index.tsx
@@ -4,13 +4,12 @@
 import { useMemo } from 'react';
 
 import { ModuleFunction } from './ModuleFunction';
-
-import type { ObjectId } from '@mysten/sui.js';
-
 import { useNormalizedMoveModule } from '~/hooks/useNormalizedMoveModule';
 import { Banner } from '~/ui/Banner';
 import { LoadingSpinner } from '~/ui/LoadingSpinner';
 
+import type { ObjectId } from '@mysten/sui.js';
+
 export type ModuleFunctionsInteractionProps = {
 	packageId: ObjectId;
 	moduleName: string;

diff --git a/apps/explorer/src/components/network/Network.tsx b/apps/explorer/src/components/network/Network.tsx
@@ -6,7 +6,6 @@ import { useContext } from 'react';
 
 import { NetworkContext } from '../../context';
 import { Network } from '../../utils/api/DefaultRpcClient';
-
 import { NetworkSelect, type NetworkOption } from '~/ui/header/NetworkSelect';
 import { ampli } from '~/utils/analytics/ampli';
 

diff --git a/apps/explorer/src/components/top-packages/TopPackagesCard.tsx b/apps/explorer/src/components/top-packages/TopPackagesCard.tsx
@@ -4,9 +4,8 @@
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 
-import { ErrorBoundary } from '../error-boundary/ErrorBoundary';
 import { TopPackagesTable } from './TopPackagesTable';
-
+import { ErrorBoundary } from '../error-boundary/ErrorBoundary';
 import { useEnhancedRpcClient } from '~/hooks/useEnhancedRpc';
 import { FilterList } from '~/ui/FilterList';
 import { TabHeader } from '~/ui/Tabs';

diff --git a/apps/explorer/src/components/top-validators-card/TopValidatorsCard.tsx b/apps/explorer/src/components/top-validators-card/TopValidatorsCard.tsx
@@ -7,7 +7,6 @@ import { type SuiValidatorSummary } from '@mysten/sui.js';
 import { useMemo } from 'react';
 
 import { StakeColumn } from './StakeColumn';
-
 import { HighlightedTableCol } from '~/components/Table/HighlightedTableCol';
 import { Banner } from '~/ui/Banner';
 import { ImageIcon } from '~/ui/ImageIcon';

diff --git a/apps/explorer/src/components/transactions/TransactionsForAddress.tsx b/apps/explorer/src/components/transactions/TransactionsForAddress.tsx
@@ -6,7 +6,6 @@ import { type SuiTransactionBlockResponse } from '@mysten/sui.js';
 import { useQuery } from '@tanstack/react-query';
 
 import { genTableDataFromTxData } from './TxCardUtils';
-
 import { Banner } from '~/ui/Banner';
 import { LoadingSpinner } from '~/ui/LoadingSpinner';
 import { TableCard } from '~/ui/TableCard';