Skip to content

Commit e5a1cb4

Browse files
zzmpzzmp
authored
chore: replace microbundle with rollup (Uniswap#3115)
* refactor: mv gas estimate chains out of component * chore: replace microbundle with rollup * chore: use ts rollup config * chore: rename lib to widgets * chore: add rollup doc comment * feat: rollup typings * fix: retain tsconfig decl dir
1 parent e68e1af commit e5a1cb4

18 files changed

Lines changed: 1179 additions & 1476 deletions

.github/workflows/depcheck.yaml renamed to .github/workflows/bundle.yaml

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: Bundle Dependency Check
1+
name: Widgets
22
on:
33
push:
44
branches:
@@ -8,8 +8,8 @@ on:
88
- main
99

1010
jobs:
11-
depcheck:
12-
name: Bundle depcheck
11+
build:
12+
name: Build
1313
runs-on: ubuntu-latest
1414
steps:
1515
- name: Checkout
@@ -36,8 +36,5 @@ jobs:
3636
- name: Install dependencies
3737
run: yarn install --frozen-lockfile
3838

39-
- name: Bundle
40-
run: yarn bundle
41-
42-
- name: Depcheck
43-
run: yarn bundle:depcheck
39+
- name: Build
40+
run: yarn widgets:build

‎.gitignore‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,6 @@
1111
/src/locales/**/pseudo.po
1212
/src/state/data/generated.ts
1313

14-
# generated assets
15-
/src/lib/assets/svg/*.tsx
16-
/src/lib/assets/fonts/*.css
17-
1814
# dependencies
1915
/node_modules
2016

@@ -24,7 +20,7 @@
2420
# production
2521
/build
2622

27-
# bundle
23+
# widgets
2824
/dist
2925

3026
# misc

‎depcheck.js‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎package.json‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,11 @@
2323
"@reach/portal": "^0.10.3",
2424
"@react-hook/window-scroll": "^1.3.0",
2525
"@reduxjs/toolkit": "^1.6.1",
26-
"@svgr/cli": "^5.5.0",
26+
"@rollup/plugin-eslint": "^8.0.1",
27+
"@rollup/plugin-json": "^4.1.0",
28+
"@rollup/plugin-replace": "^3.0.1",
29+
"@rollup/plugin-url": "^6.1.0",
30+
"@svgr/rollup": "^6.2.0",
2731
"@testing-library/jest-dom": "^5.14.1",
2832
"@testing-library/react": "^12.0.0",
2933
"@testing-library/react-hooks": "^7.0.2",
@@ -85,7 +89,6 @@
8589
"graphql-request": "^3.4.0",
8690
"inter-ui": "^3.13.1",
8791
"jest-styled-components": "^7.0.5",
88-
"microbundle": "^0.13.3",
8992
"ms.macro": "^2.0.0",
9093
"polyfill-object.fromentries": "^1.0.1",
9194
"prettier": "^2.2.1",
@@ -100,6 +103,10 @@
100103
"react-spring": "^8.0.27",
101104
"react-use-gesture": "^6.0.14",
102105
"redux-localstorage-simple": "^2.3.1",
106+
"rollup": "^2.63.0",
107+
"rollup-plugin-dts": "^4.1.0",
108+
"rollup-plugin-scss": "^3.0.0",
109+
"rollup-plugin-typescript2": "^0.31.1",
103110
"sass": "^1.45.1",
104111
"serve": "^11.3.2",
105112
"start-server-and-test": "^1.11.0",
@@ -126,17 +133,13 @@
126133
"i18n:extract": "lingui extract --locale en-US",
127134
"i18n:compile": "yarn i18n:extract && lingui compile",
128135
"i18n:pseudo": "lingui extract --locale pseudo && lingui compile",
129-
"postinstall": "yarn contracts:compile && yarn graphql:generate && yarn i18n:compile && yarn assets:generate",
136+
"postinstall": "yarn contracts:compile && yarn graphql:generate && yarn i18n:compile",
130137
"start": "react-scripts start",
131138
"build": "react-scripts build",
132139
"test": "react-scripts test --env=./custom-test-env.js",
133140
"test:e2e": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run --record'",
134-
"assets:generate": "yarn assets:svg:generate && yarn assets:font:generate",
135-
"assets:svg:generate": "svgr -d src/lib/assets/svg --ext tsx --typescript src/lib/assets/svg && rm src/lib/assets/svg/index.tsx",
136-
"assets:font:generate": "sass src/lib/assets/fonts/index.scss src/lib/assets/fonts/index.css --no-source-map -I node_modules",
137-
"bundle": "microbundle --define process.env.REACT_APP_IS_WIDGET=true --tsconfig tsconfig.lib.json src/lib/index.tsx --format esm,cjs",
138-
"bundle:depcheck": "node depcheck.js",
139-
"cosmos": "cross-env FAST_REFRESH=false REACT_APP_IS_WIDGET=true cosmos"
141+
"widgets:start": "cross-env FAST_REFRESH=false REACT_APP_IS_WIDGET=true cosmos",
142+
"widgets:build": "rollup --config --failAfterWarnings --configPlugin typescript2"
140143
},
141144
"browserslist": {
142145
"production": [

‎rollup.config.ts‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/**
2+
* Bundles the widgets library, which is released independently of the interface application.
3+
* This library lives in src/lib, but shares code with the interface application.
4+
*/
5+
6+
import eslint from '@rollup/plugin-eslint'
7+
import json from '@rollup/plugin-json'
8+
import replace from '@rollup/plugin-replace'
9+
import url from '@rollup/plugin-url'
10+
import svgr from '@svgr/rollup'
11+
import dts from 'rollup-plugin-dts'
12+
import sass from 'rollup-plugin-scss'
13+
import typescript from 'rollup-plugin-typescript2'
14+
15+
import { dependencies } from './package.json'
16+
17+
const deps = Object.keys(dependencies)
18+
19+
const replacements = {
20+
'process.env.REACT_APP_IS_WIDGET': true,
21+
}
22+
23+
const library = {
24+
input: 'src/lib/index.tsx',
25+
output: [
26+
{
27+
file: 'dist/widgets.js',
28+
format: 'cjs',
29+
inlineDynamicImports: true,
30+
sourcemap: true,
31+
},
32+
{
33+
file: 'dist/widgets.esm.js',
34+
format: 'esm',
35+
inlineDynamicImports: true,
36+
sourcemap: true,
37+
},
38+
],
39+
// necessary because some nested imports (eg jotai/*) would otherwise not resolve.
40+
external: (source: string) => Boolean(deps.find((dep) => source === dep || source.startsWith(dep + '/'))),
41+
plugins: [
42+
eslint({ include: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'] }),
43+
json(), // imports json
44+
replace({ ...replacements, preventAssignment: true }),
45+
url(), // imports files (including svgs) as data URIs
46+
svgr({ exportType: 'named', svgo: false }), // imports svgs as React components
47+
sass(), // imports sass styles
48+
typescript({ tsconfig: './tsconfig.lib.json', useTsconfigDeclarationDir: true }),
49+
],
50+
}
51+
52+
const typings = {
53+
input: 'dist/dts/lib/index.d.ts',
54+
output: {
55+
file: 'dist/widgets.d.ts',
56+
format: 'es',
57+
},
58+
external: (source: string) => source.endsWith('.scss'),
59+
plugins: [dts({ compilerOptions: { baseUrl: 'dist/dts' } })],
60+
}
61+
62+
const config = [library, typings]
63+
export default config

‎src/components/swap/AdvancedSwapDetails.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro'
22
import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
33
import Card from 'components/Card'
44
import { LoadingRows } from 'components/Loader/styled'
5+
import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
56
import useActiveWeb3React from 'hooks/useActiveWeb3React'
67
import { useContext, useMemo } from 'react'
78
import { InterfaceTrade } from 'state/routing/types'
@@ -12,7 +13,6 @@ import { computeRealizedLPFeePercent } from '../../utils/prices'
1213
import { AutoColumn } from '../Column'
1314
import { RowBetween, RowFixed } from '../Row'
1415
import FormattedPriceImpact from './FormattedPriceImpact'
15-
import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from './GasEstimateBadge'
1616

1717
const StyledCard = styled(Card)`
1818
padding: 0;

‎src/components/swap/GasEstimateBadge.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import styled from 'styled-components/macro'
1010
import { ThemedText } from 'theme'
1111

1212
import { ReactComponent as GasIcon } from '../../assets/images/gas-icon.svg'
13-
import { SupportedChainId } from '../../constants/chains'
1413
import { ResponsiveTooltipContainer } from './styleds'
1514
import SwapRoute from './SwapRoute'
1615

@@ -32,8 +31,6 @@ const StyledGasIcon = styled(GasIcon)`
3231
}
3332
`
3433

35-
export const SUPPORTED_GAS_ESTIMATE_CHAIN_IDS = [SupportedChainId.MAINNET, SupportedChainId.POLYGON]
36-
3734
export default function GasEstimateBadge({
3835
trade,
3936
loading,

‎src/components/swap/SwapDetailsDropdown.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { AutoColumn } from 'components/Column'
66
import { LoadingOpacityContainer } from 'components/Loader/styled'
77
import Row, { RowBetween, RowFixed } from 'components/Row'
88
import { MouseoverTooltipContent } from 'components/Tooltip'
9+
import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
910
import useActiveWeb3React from 'hooks/useActiveWeb3React'
1011
import { darken } from 'polished'
1112
import { useState } from 'react'
@@ -15,7 +16,7 @@ import styled, { keyframes, useTheme } from 'styled-components/macro'
1516
import { HideSmall, ThemedText } from 'theme'
1617

1718
import { AdvancedSwapDetails } from './AdvancedSwapDetails'
18-
import GasEstimateBadge, { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from './GasEstimateBadge'
19+
import GasEstimateBadge from './GasEstimateBadge'
1920
import { ResponsiveTooltipContainer } from './styleds'
2021
import SwapRoute from './SwapRoute'
2122
import TradePrice from './TradePrice'

‎src/components/swap/SwapRoute.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { AutoColumn } from 'components/Column'
77
import { LoadingRows } from 'components/Loader/styled'
88
import RoutingDiagram, { RoutingDiagramEntry } from 'components/RoutingDiagram/RoutingDiagram'
99
import { AutoRow, RowBetween } from 'components/Row'
10+
import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
1011
import useActiveWeb3React from 'hooks/useActiveWeb3React'
1112
import useAutoRouterSupported from 'hooks/useAutoRouterSupported'
1213
import { memo, useState } from 'react'
@@ -16,7 +17,6 @@ import { useDarkModeManager } from 'state/user/hooks'
1617
import styled from 'styled-components/macro'
1718
import { Separator, ThemedText } from 'theme'
1819

19-
import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from './GasEstimateBadge'
2020
import { AutoRouterLabel, AutoRouterLogo } from './RouterLabel'
2121

2222
const Wrapper = styled(AutoColumn)<{ darkMode?: boolean; fixedOpen?: boolean }>`

‎src/constants/chains.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ export const ALL_SUPPORTED_CHAIN_IDS: SupportedChainId[] = Object.values(Support
2525
(id) => typeof id === 'number'
2626
) as SupportedChainId[]
2727

28+
export const SUPPORTED_GAS_ESTIMATE_CHAIN_IDS = [SupportedChainId.MAINNET, SupportedChainId.POLYGON]
29+
2830
/**
2931
* All the chain IDs that are running the Ethereum protocol.
3032
*/

0 commit comments

Comments
 (0)