Skip to content

Commit b0fd9c2

Browse files
jmrossyjmrossy
committedApr 3, 2024·
Convert package to purely ESM
·
v4.1.0v3.11.0
1 parent ddb4d8c commit b0fd9c2

24 files changed

+122
-195
lines changed
 

‎package.json

+9-20
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"version": "3.8.0",
55
"author": "J M Rossy",
66
"peerDependencies": {
7-
"@hyperlane-xyz/sdk": "^3.1",
7+
"@hyperlane-xyz/sdk": "^3.8",
88
"react": "^18",
99
"react-dom": "^18"
1010
},
@@ -43,22 +43,12 @@
4343
"files": [
4444
"/dist"
4545
],
46-
"main": "./dist/cjs/index.js",
47-
"module": "./dist/esm/index.js",
48-
"browser": "./dist/esm/index.js",
49-
"types": "./dist/esm/index.d.ts",
46+
"type": "module",
5047
"exports": {
51-
".": {
52-
"import": "./dist/esm/index.js",
53-
"require": "./dist/cjs/index.js",
54-
"default": "./dist/esm/index.js"
55-
},
56-
"./styles.css": {
57-
"import": "./dist/styles.css",
58-
"style": "./dist/styles.css",
59-
"default": "./dist/styles.css"
60-
}
48+
".": "./dist/index.js",
49+
"./styles.css": "./dist/styles.css"
6150
},
51+
"types": "./dist/index.d.ts",
6252
"homepage": "https://www.hyperlane.xyz",
6353
"keywords": [
6454
"Hyperlane",
@@ -74,11 +64,10 @@
7464
"url": "https://github.com/hyperlane-xyz/hyperlane-widgets"
7565
},
7666
"scripts": {
77-
"build": "yarn build:svg && yarn build:cjs && yarn build:esm && yarn build:css",
78-
"build:cjs": "tsc --project ./tsconfig.json",
79-
"build:esm": "tsc --project ./tsconfig.esm.json",
80-
"build:css": "tailwindcss -c ./tailwind.config.js -i ./src/styles.css -o ./dist/styles.css --minify",
81-
"build:svg": "svgr --typescript --out-dir src/logos -- node_modules/@hyperlane-xyz/sdk/logos",
67+
"build": "yarn build:svg && yarn build:ts && yarn build:css",
68+
"build:ts": "tsc",
69+
"build:css": "tailwindcss -c ./tailwind.config.cjs -i ./src/styles.css -o ./dist/styles.css --minify",
70+
"build:svg": "svgr --typescript --no-index --out-dir src/logos -- node_modules/@hyperlane-xyz/sdk/logos",
8271
"clean": "rm -rf dist cache",
8372
"lint": "eslint . --ext .ts",
8473
"prettier": "prettier --write ./src",

‎src/icons/Airplane.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { memo } from 'react';
22

3-
import { ColorPalette } from '../color';
3+
import { ColorPalette } from '../color.js';
44

55
interface Props {
66
width?: string | number;

‎src/icons/ChainLogo.tsx

+42-42
Original file line numberDiff line numberDiff line change
@@ -3,49 +3,49 @@ import React, { ReactElement, memo } from 'react';
33
import { Chains, chainMetadata } from '@hyperlane-xyz/sdk';
44
import { isNumeric } from '@hyperlane-xyz/utils';
55

6-
import ArbitrumBlack from '../logos/black/Arbitrum';
7-
import AvalancheBlack from '../logos/black/Avalanche';
8-
import BaseBlack from '../logos/black/Base';
9-
import BscBlack from '../logos/black/Bsc';
10-
import CeloBlack from '../logos/black/Celo';
11-
import EthereumBlack from '../logos/black/Ethereum';
12-
import GnosisBlack from '../logos/black/Gnosis';
13-
import InevmBlack from '../logos/black/Inevm';
14-
import InjectiveBlack from '../logos/black/Injective';
15-
import MantaBlack from '../logos/black/Manta';
16-
import MoonbeamBlack from '../logos/black/Moonbeam';
17-
import NautilusBlack from '../logos/black/Nautilus';
18-
import NeutronBlack from '../logos/black/Neutron';
19-
import OptimismBlack from '../logos/black/Optimism';
20-
import PlumeBlack from '../logos/black/Plume';
21-
import PolygonBlack from '../logos/black/Polygon';
22-
import PolygonzkevmBlack from '../logos/black/Polygonzkevm';
23-
import ScrollBlack from '../logos/black/Scroll';
24-
import SolanaBlack from '../logos/black/Solana';
25-
import VictionBlack from '../logos/black/Viction';
26-
import ArbitrumColor from '../logos/color/Arbitrum';
27-
import AvalancheColor from '../logos/color/Avalanche';
28-
import BaseColor from '../logos/color/Base';
29-
import BscColor from '../logos/color/Bsc';
30-
import CeloColor from '../logos/color/Celo';
31-
import EthereumColor from '../logos/color/Ethereum';
32-
import GnosisColor from '../logos/color/Gnosis';
33-
import InevmColor from '../logos/color/Inevm';
34-
import InjectiveColor from '../logos/color/Injective';
35-
import MantaColor from '../logos/color/Manta';
36-
import MoonbeamColor from '../logos/color/Moonbeam';
37-
import NautilusColor from '../logos/color/Nautilus';
38-
import NeutronColor from '../logos/color/Neutron';
39-
import OptimismColor from '../logos/color/Optimism';
40-
import PlumeColor from '../logos/color/Plume';
41-
import PolygonColor from '../logos/color/Polygon';
42-
import PolygonzkevmColor from '../logos/color/Polygonzkevm';
43-
import ScrollColor from '../logos/color/Scroll';
44-
import SolanaColor from '../logos/color/Solana';
45-
import VictionColor from '../logos/color/Viction';
6+
import ArbitrumBlack from '../logos/black/Arbitrum.js';
7+
import AvalancheBlack from '../logos/black/Avalanche.js';
8+
import BaseBlack from '../logos/black/Base.js';
9+
import BscBlack from '../logos/black/Bsc.js';
10+
import CeloBlack from '../logos/black/Celo.js';
11+
import EthereumBlack from '../logos/black/Ethereum.js';
12+
import GnosisBlack from '../logos/black/Gnosis.js';
13+
import InevmBlack from '../logos/black/Inevm.js';
14+
import InjectiveBlack from '../logos/black/Injective.js';
15+
import MantaBlack from '../logos/black/Manta.js';
16+
import MoonbeamBlack from '../logos/black/Moonbeam.js';
17+
import NautilusBlack from '../logos/black/Nautilus.js';
18+
import NeutronBlack from '../logos/black/Neutron.js';
19+
import OptimismBlack from '../logos/black/Optimism.js';
20+
import PlumeBlack from '../logos/black/Plume.js';
21+
import PolygonBlack from '../logos/black/Polygon.js';
22+
import PolygonzkevmBlack from '../logos/black/Polygonzkevm.js';
23+
import ScrollBlack from '../logos/black/Scroll.js';
24+
import SolanaBlack from '../logos/black/Solana.js';
25+
import VictionBlack from '../logos/black/Viction.js';
26+
import ArbitrumColor from '../logos/color/Arbitrum.js';
27+
import AvalancheColor from '../logos/color/Avalanche.js';
28+
import BaseColor from '../logos/color/Base.js';
29+
import BscColor from '../logos/color/Bsc.js';
30+
import CeloColor from '../logos/color/Celo.js';
31+
import EthereumColor from '../logos/color/Ethereum.js';
32+
import GnosisColor from '../logos/color/Gnosis.js';
33+
import InevmColor from '../logos/color/Inevm.js';
34+
import InjectiveColor from '../logos/color/Injective.js';
35+
import MantaColor from '../logos/color/Manta.js';
36+
import MoonbeamColor from '../logos/color/Moonbeam.js';
37+
import NautilusColor from '../logos/color/Nautilus.js';
38+
import NeutronColor from '../logos/color/Neutron.js';
39+
import OptimismColor from '../logos/color/Optimism.js';
40+
import PlumeColor from '../logos/color/Plume.js';
41+
import PolygonColor from '../logos/color/Polygon.js';
42+
import PolygonzkevmColor from '../logos/color/Polygonzkevm.js';
43+
import ScrollColor from '../logos/color/Scroll.js';
44+
import SolanaColor from '../logos/color/Solana.js';
45+
import VictionColor from '../logos/color/Viction.js';
4646

47-
import { Circle } from './Circle';
48-
import { QuestionMarkIcon } from './QuestionMark';
47+
import { Circle } from './Circle.js';
48+
import { QuestionMarkIcon } from './QuestionMark.js';
4949

5050
type SvgIcon = (props: { width: number; height: number; title?: string }) => ReactElement;
5151

‎src/icons/Circle.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { PropsWithChildren } from 'react';
22

3-
import { seedToBgColor } from '../color';
3+
import { seedToBgColor } from '../color.js';
44

55
export function Circle({
66
size,

‎src/icons/Envelope.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { memo } from 'react';
22

3-
import { ColorPalette } from '../color';
3+
import { ColorPalette } from '../color.js';
44

55
interface Props {
66
width?: string | number;

‎src/icons/Lock.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { memo } from 'react';
22

3-
import { ColorPalette } from '../color';
3+
import { ColorPalette } from '../color.js';
44

55
interface Props {
66
width?: string | number;

‎src/icons/QuestionMark.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { memo } from 'react';
22

3-
import { ColorPalette } from '../color';
3+
import { ColorPalette } from '../color.js';
44

55
interface Props {
66
width?: string | number;

‎src/icons/Shield.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { memo } from 'react';
22

3-
import { ColorPalette } from '../color';
3+
import { ColorPalette } from '../color.js';
44

55
interface Props {
66
width?: string | number;

‎src/icons/WideChevron.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { memo } from 'react';
22

3-
import { ColorPalette } from '../color';
3+
import { ColorPalette } from '../color.js';
44

55
export interface WideChevronProps {
66
width?: string | number;

‎src/index.ts

+15-12
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1-
export { ColorPalette, seedToBgColor } from './color';
2-
export * from './consts';
3-
export { ChainLogo } from './icons/ChainLogo';
4-
export { Circle } from './icons/Circle';
5-
export { WideChevron } from './icons/WideChevron';
6-
export * as BlackLogos from './logos/black';
7-
export * as ColorLogos from './logos/color';
8-
export { MessageTimeline } from './messages/MessageTimeline';
9-
export { MessageStage, MessageStatus, type ApiMessage, type StageTimings } from './messages/types';
10-
export { useMessage } from './messages/useMessage';
11-
export { useMessageStage } from './messages/useMessageStage';
12-
export { useMessageTimeline } from './messages/useMessageTimeline';
1+
export { ColorPalette, seedToBgColor } from './color.js';
2+
export * from './consts.js';
3+
export { ChainLogo } from './icons/ChainLogo.js';
4+
export { Circle } from './icons/Circle.js';
5+
export { WideChevron } from './icons/WideChevron.js';
6+
export { MessageTimeline } from './messages/MessageTimeline.js';
7+
export {
8+
MessageStage,
9+
MessageStatus,
10+
type ApiMessage,
11+
type StageTimings,
12+
} from './messages/types.js';
13+
export { useMessage } from './messages/useMessage.js';
14+
export { useMessageStage } from './messages/useMessageStage.js';
15+
export { useMessageTimeline } from './messages/useMessageTimeline.js';

‎src/logos/black/index.ts

-25
This file was deleted.

‎src/logos/color/index.ts

-24
This file was deleted.

‎src/messages/MessageTimeline.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React from 'react';
22

3-
import { ColorPalette } from '../color';
4-
import { AirplaneIcon } from '../icons/Airplane';
5-
import { EnvelopeIcon } from '../icons/Envelope';
6-
import { LockIcon } from '../icons/Lock';
7-
import { ShieldIcon } from '../icons/Shield';
8-
import { WideChevron } from '../icons/WideChevron';
3+
import { ColorPalette } from '../color.js';
4+
import { AirplaneIcon } from '../icons/Airplane.js';
5+
import { EnvelopeIcon } from '../icons/Envelope.js';
6+
import { LockIcon } from '../icons/Lock.js';
7+
import { ShieldIcon } from '../icons/Shield.js';
8+
import { WideChevron } from '../icons/WideChevron.js';
99

10-
import { MessageStatus, MessageStage as Stage, StageTimings } from './types';
10+
import { MessageStatus, MessageStage as Stage, StageTimings } from './types.js';
1111

1212
interface Props {
1313
status: MessageStatus;

‎src/messages/useMessage.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { useCallback, useState } from 'react';
22

3-
import { HYPERLANE_EXPLORER_API_URL } from '../consts';
4-
import { executeExplorerQuery } from '../utils/explorers';
5-
import { useInterval } from '../utils/useInterval';
3+
import { HYPERLANE_EXPLORER_API_URL } from '../consts.js';
4+
import { executeExplorerQuery } from '../utils/explorers.js';
5+
import { useInterval } from '../utils/useInterval.js';
66

7-
import { ApiMessage, MessageStatus } from './types';
7+
import { ApiMessage, MessageStatus } from './types.js';
88

99
interface Params {
1010
messageId?: string;

‎src/messages/useMessageStage.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import { useCallback, useState } from 'react';
22

33
import { chainIdToMetadata } from '@hyperlane-xyz/sdk';
44

5-
import { HYPERLANE_EXPLORER_API_URL } from '../consts';
6-
import { queryExplorerForBlock } from '../utils/explorers';
7-
import { fetchWithTimeout } from '../utils/timeout';
8-
import { useInterval } from '../utils/useInterval';
5+
import { HYPERLANE_EXPLORER_API_URL } from '../consts.js';
6+
import { queryExplorerForBlock } from '../utils/explorers.js';
7+
import { fetchWithTimeout } from '../utils/timeout.js';
8+
import { useInterval } from '../utils/useInterval.js';
99

10-
import { MessageStatus, PartialMessage, MessageStage as Stage, StageTimings } from './types';
10+
import { MessageStatus, PartialMessage, MessageStage as Stage, StageTimings } from './types.js';
1111

1212
const VALIDATION_TIME_EST = 5;
1313

‎src/messages/useMessageTimeline.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { useMessage } from './useMessage';
2-
import { useMessageStage } from './useMessageStage';
1+
import { useMessage } from './useMessage.js';
2+
import { useMessageStage } from './useMessageStage.js';
33

44
interface Params {
55
messageId?: string;

‎src/stories/ChainLogo.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ComponentMeta, ComponentStory } from '@storybook/react';
22
import React from 'react';
33

4-
import { ChainLogo } from '../icons/ChainLogo';
4+
import { ChainLogo } from '../icons/ChainLogo.js';
55

66
export default {
77
title: 'ChainLogo',

‎src/stories/MessageTimeline.stories.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { ComponentMeta, ComponentStory } from '@storybook/react';
22
import React from 'react';
33

4-
import { MessageTimeline } from '../messages/MessageTimeline';
5-
import { MessageStage, MessageStatus } from '../messages/types';
4+
import { MessageTimeline } from '../messages/MessageTimeline.js';
5+
import { MessageStage, MessageStatus } from '../messages/types.js';
66

77
export default {
88
title: 'MessageTimeline',

‎src/stories/WideChevron.stories.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { ComponentMeta, ComponentStory } from '@storybook/react';
22
import React from 'react';
33

4-
import { ColorPalette } from '../color';
5-
import { WideChevron } from '../icons/WideChevron';
4+
import { ColorPalette } from '../color.js';
5+
import { WideChevron } from '../icons/WideChevron.js';
66

77
export default {
88
title: 'WideChevron',

‎src/utils/explorers.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { chainIdToMetadata } from '@hyperlane-xyz/sdk';
22

3-
import { fetchWithTimeout } from './timeout';
3+
import { fetchWithTimeout } from './timeout.js';
44

55
export interface ExplorerQueryResponse<R> {
66
status: string;

‎tailwind.config.js ‎tailwind.config.cjs

File renamed without changes.

‎tsconfig.base.json

-24
This file was deleted.

‎tsconfig.esm.json

-11
This file was deleted.

‎tsconfig.json

+25-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,30 @@
11
{
2-
"extends": "./tsconfig.base.json",
32
"compilerOptions": {
4-
"esModuleInterop": true,
5-
"module": "commonjs",
6-
"moduleResolution": "node",
7-
"outDir": "./dist/cjs",
3+
"allowSyntheticDefaultImports": true,
4+
"declaration": true,
5+
"declarationMap": true,
6+
"forceConsistentCasingInFileNames": true,
7+
"incremental": false,
8+
"isolatedModules": true,
9+
"jsx": "react",
10+
"lib": ["es2020", "dom"],
11+
"module": "nodenext",
12+
"moduleResolution": "nodenext",
13+
"noEmitOnError": true,
14+
"noFallthroughCasesInSwitch": true,
15+
"noImplicitAny": false,
16+
"noImplicitReturns": true,
17+
"noUnusedLocals": true,
18+
"preserveSymlinks": true,
19+
"preserveWatchOutput": true,
20+
"pretty": false,
21+
"resolveJsonModule": true,
22+
"rootDir": "./src",
23+
"sourceMap": true,
24+
"outDir": "./dist",
25+
"strict": true,
26+
"target": "es2020"
827
},
928
"include": ["./src/**/*"],
10-
"exclude": ["node_modules", "dist", "**/*.stories.tsx"]
29+
"exclude": ["node_modules", "dist", "**/*.stories.tsx"],
1130
}

0 commit comments

Comments
 (0)
Please sign in to comment.