Skip to content

Commit 35d0e48

Browse files
danielbariondanielbarion
authored
Merge pull request #959 from ReactTooltip/feat/esbuild
feat: add esbuild as bundler
2 parents cb05513 + d0863fc commit 35d0e48

19 files changed

+1112
-664
lines changed

‎.github/workflows/lint.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ jobs:
2020
needs: lint
2121
strategy:
2222
matrix:
23-
version: [14, 16, 18]
23+
version: [16, 18]
2424
runs-on: ubuntu-latest
2525
steps:
2626
- uses: actions/checkout@v2

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,7 @@ yarn-error.log
3535
!.babelrc
3636
!.gitignore
3737
!.npmignore
38+
39+
# yalc
40+
/.yalc
41+

‎README.md

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,19 @@ Documentation for V4 - [Github Page](https://reacttooltip.github.io/react-toolti
2727

2828
Documentation for V5 - [ReactTooltip](https://react-tooltip.com/docs/getting-started).
2929

30-
[Bundle size timeline comparation from V4 -> V5](https://bundlephobia.com/package/[email protected])
31-
32-
[![Bundlephobia comparison](https://user-images.githubusercontent.com/9615850/211835641-f6373084-ad73-4902-9855-246d34952345.png)](https://bundlephobia.com/package/[email protected])
30+
## [Bundle size comparison V4 -> V5](https://bundlephobia.com/package/react-tooltip)
3331

32+
<p align="center">
33+
<a href="https://bundlephobia.com/package/[email protected]">
34+
<img alt="Bundlephobia v4.5.1" style="height: 250px" src="https://user-images.githubusercontent.com/21102974/222977995-a5ae7c12-e945-454e-ad96-5c73b76a88a0.png" />
35+
</a>
36+
<a href="https://bundlephobia.com/package/[email protected]">
37+
<img alt="Bundlephobia v5.8.4" style="height: 250px" src="https://user-images.githubusercontent.com/21102974/222977970-8574434d-77de-4aa3-b8ad-a2b8924d75a4.png" />
38+
</a>
39+
<a href="https://bundlephobia.com/package/[email protected]">
40+
<img alt="Bundlezise timeline" style="height: 250px" src="https://user-images.githubusercontent.com/21102974/222978188-f6db8679-da69-4da7-9c0d-b6fde8bd9517.png" />
41+
</a>
42+
</p>
3443

3544
## Installation
3645

‎bundlesize.config.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
"files": [
33
{
44
"path": "./dist/react-tooltip.cjs.min.js",
5-
"maxSize": "13.5 kB"
5+
"maxSize": "10 kB"
66
},
77
{
88
"path": "./dist/react-tooltip.esm.min.js",
9-
"maxSize": "13.5 kB"
9+
"maxSize": "10 kB"
1010
},
1111
{
12-
"path": "./dist/react-tooltip.umd.min.js",
13-
"maxSize": "13.5 kB"
12+
"path": "./dist/react-tooltip.iife.min.js",
13+
"maxSize": "10 kB"
1414
}
1515
]
1616
}

‎docs/.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,8 @@
1818
npm-debug.log*
1919
yarn-debug.log*
2020
yarn-error.log*
21+
22+
23+
# yalc
24+
/.yalc
25+
yalc.lock

‎docs/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@
2121
"clsx": "^1.2.1",
2222
"prism-react-renderer": "^1.3.5",
2323
"raw-loader": "^4.0.2",
24-
"react": "18.2.0",
25-
"react-dom": "18.2.0",
26-
"react-tooltip": "5.8.3"
24+
"react": "^18.2.0",
25+
"react-dom": "^18.2.0",
26+
"react-tooltip": "5.8.4-beta.2"
2727
},
2828
"devDependencies": {
2929
"@docusaurus/module-type-aliases": "2.3.0",

‎docs/yarn.lock

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6025,7 +6025,7 @@ react-dev-utils@^12.0.1:
60256025
strip-ansi "^6.0.1"
60266026
text-table "^0.2.0"
60276027

6028-
[email protected]:
6028+
react-dom@^18.2.0:
60296029
version "18.2.0"
60306030
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
60316031
integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -6125,15 +6125,15 @@ react-textarea-autosize@^8.3.2:
61256125
use-composed-ref "^1.3.0"
61266126
use-latest "^1.2.1"
61276127

6128-
[email protected].3:
6129-
version "5.8.3"
6130-
resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.8.3.tgz#d9c94eafb6c3d4d7be43b4acfe6f3cbde82df9ab"
6131-
integrity sha512-h7maAlm2Xeymc14gWKhhrzsENeB83N65EzZ+AcQIGrOpNE0yefVRJIHhNcWHEJ0FEtf7VZXxtsj5glVXKxEtvA==
6128+
[email protected].4-beta.2:
6129+
version "5.8.4-beta.2"
6130+
resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.8.4-beta.2.tgz#5a553ea1101e492f60ea0075df37cb7326d7f4aa"
6131+
integrity sha512-GVdpVwbbm+fMIQKiWYJBWpRJ3kYSvzWr/A9j8JUQuEmxSW/JJ+Lj+6jJcF7oVU9iA9tgkbzd+tg52f5GukxfNg==
61326132
dependencies:
61336133
"@floating-ui/dom" "1.1.1"
61346134
classnames "^2.3.2"
61356135

6136-
[email protected]:
6136+
react@^18.2.0:
61376137
version "18.2.0"
61386138
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
61396139
integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==

‎esbuild.config.dev.mjs

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import * as esbuild from 'esbuild'
2+
import cssModulesPlugin from 'esbuild-css-modules-plugin'
3+
import fs from 'fs'
4+
5+
const ctx = await esbuild.context({
6+
entryPoints: ['./src/index-dev.tsx'],
7+
bundle: true,
8+
outdir: 'build',
9+
treeShaking: true,
10+
logLevel: 'info',
11+
plugins: [
12+
cssModulesPlugin({
13+
v2: true,
14+
v2CssModulesOption: {
15+
pattern: `react-tooltip__[local]_[hash]`,
16+
},
17+
}),
18+
],
19+
})
20+
21+
fs.copyFile('./public/index.html', './build/index.html', (err) => {
22+
if (err) throw err
23+
})
24+
25+
await ctx.watch()
26+
await ctx.serve({
27+
servedir: 'build',
28+
port: 3000,
29+
host: 'localhost',
30+
})

‎esbuild.config.prod.mjs

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import * as esbuild from 'esbuild'
2+
import cssModulesPlugin from 'esbuild-css-modules-plugin'
3+
import fs from 'fs'
4+
5+
const buildsConfig = [
6+
{
7+
format: 'esm',
8+
outfile: 'dist/react-tooltip.esm.js',
9+
minify: false,
10+
},
11+
{
12+
format: 'cjs',
13+
outfile: 'dist/react-tooltip.cjs.js',
14+
minify: false,
15+
},
16+
{
17+
format: 'iife',
18+
outfile: 'dist/react-tooltip.iife.js',
19+
minify: false,
20+
},
21+
{
22+
format: 'esm',
23+
outfile: 'dist/react-tooltip.js', // for styles be exported as `react-tooltip.css`
24+
minify: false,
25+
},
26+
{
27+
format: 'esm',
28+
outfile: 'dist/react-tooltip.esm.min.js',
29+
minify: true,
30+
},
31+
{
32+
format: 'cjs',
33+
outfile: 'dist/react-tooltip.cjs.min.js',
34+
minify: true,
35+
},
36+
{
37+
format: 'iife',
38+
outfile: 'dist/react-tooltip.iife.min.js',
39+
minify: true,
40+
},
41+
{
42+
format: 'esm',
43+
outfile: 'dist/react-tooltip.min.js',
44+
minify: true,
45+
},
46+
]
47+
48+
const builds = await Promise.all(
49+
buildsConfig.map(({ format, outfile, minify }) =>
50+
esbuild.build({
51+
entryPoints: ['./src/index.tsx'],
52+
bundle: true,
53+
outfile,
54+
format,
55+
treeShaking: true,
56+
minify,
57+
sourcemap: true,
58+
external: ['react', 'react-dom', 'prop-types'],
59+
plugins: [
60+
cssModulesPlugin({
61+
// inject: true,
62+
v2: true,
63+
v2CssModulesOption: {
64+
pattern: `react-tooltip__[local]_[hash]`,
65+
},
66+
}),
67+
],
68+
}),
69+
),
70+
)
71+
72+
const toDelete = new Set()
73+
builds.forEach((build) => {
74+
const outputs = Object.keys(build.metafile.outputs)
75+
outputs.forEach((output) => {
76+
/**
77+
* delete all redundant `.css` and `.css.map` files
78+
* except the ones we actually want to keep
79+
*/
80+
if (/react-tooltip\.css(\.map)?$/.test(output)) {
81+
return
82+
}
83+
if (/\.css(\.map)?$/.test(output)) {
84+
toDelete.add(output)
85+
}
86+
})
87+
})
88+
89+
/**
90+
* delete the extra build files from the CSS build
91+
*/
92+
toDelete.add('dist/react-tooltip.js')
93+
toDelete.add('dist/react-tooltip.js.map')
94+
95+
toDelete.forEach((file) => {
96+
fs.unlink(file, () => null)
97+
})

‎package.json

Lines changed: 30 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,25 @@
11
{
22
"name": "react-tooltip",
3-
"version": "5.8.3",
3+
"version": "5.8.4-beta.2",
44
"description": "react tooltip component",
55
"scripts": {
6-
"dev": "node ./cli.js --env=development && node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.dev.js --watch",
7-
"build": "node ./cli.js --env=production && npm run types && node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.prod.js && npm run bundlesize",
6+
"dev-rollup": "node ./prebuild.js --env=development && node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.dev.js --watch",
7+
"build-rollup": "node ./prebuild.js --env=production && npm run types && node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.prod.js",
8+
"dev": "node ./prebuild.js --env=development && node ./esbuild.config.dev.mjs",
9+
"build": "node ./prebuild.js --env=production && node ./esbuild.config.prod.mjs",
810
"types": "node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.types.js",
911
"eslint": "eslint --ext=js --ext=jsx --ext=ts --ext=tsx --fix ./src",
1012
"stylelint": "stylelint \"src/**/*.css\"",
1113
"prettier": "prettier --config ./.prettierrc.json --write \"src/**/*{.js,.jsx,.ts,.tsx,.css}\"",
1214
"prepare": "husky install",
1315
"bundlesize": "bundlesize",
14-
"test": "jest"
16+
"esbuild": "esbuild",
17+
"test": "jest",
18+
"postbuild": "npm run types && npm run bundlesize",
19+
"prepublishOnly": "npm run build"
1520
},
1621
"main": "dist/react-tooltip.cjs.min.js",
1722
"module": "dist/react-tooltip.esm.min.js",
18-
"buildFormats": [
19-
{
20-
"file": "dist/react-tooltip.umd.js",
21-
"format": "umd"
22-
},
23-
{
24-
"file": "dist/react-tooltip.cjs.js",
25-
"format": "cjs"
26-
},
27-
{
28-
"file": "dist/react-tooltip.esm.js",
29-
"format": "es"
30-
}
31-
],
3223
"types": "dist/react-tooltip.d.ts",
3324
"license": "MIT",
3425
"private": false,
@@ -55,28 +46,30 @@
5546
"@types/css": "^0.0.33",
5647
"@types/css-modules": "^1.0.2",
5748
"@types/jest": "29.4.0",
58-
"@types/react": "^18.0.21",
59-
"@types/react-dom": "^18.0.6",
49+
"@types/react": "18.0.28",
50+
"@types/react-dom": "18.0.11",
6051
"@types/react-test-renderer": "^18.0.0",
61-
"@typescript-eslint/eslint-plugin": "^5.42.1",
62-
"@typescript-eslint/parser": "^5.42.1",
52+
"@typescript-eslint/eslint-plugin": "5.54.0",
53+
"@typescript-eslint/parser": "5.54.0",
6354
"bundlesize": "^0.18.1",
64-
"css-loader": "6.7.2",
65-
"eslint": "8.28.0",
55+
"css-loader": "6.7.3",
56+
"esbuild": "0.17.11",
57+
"esbuild-css-modules-plugin": "^2.7.1",
58+
"eslint": "8.35.0",
6659
"eslint-config-airbnb": "19.0.4",
67-
"eslint-config-prettier": "^8.3.0",
68-
"eslint-plugin-import": "^2.24.2",
69-
"eslint-plugin-jsx-a11y": "^6.4.1",
60+
"eslint-config-prettier": "8.6.0",
61+
"eslint-plugin-import": "2.27.5",
62+
"eslint-plugin-jsx-a11y": "6.7.1",
7063
"eslint-plugin-prettier": "^4.0.0",
71-
"eslint-plugin-react": "7.31.11",
64+
"eslint-plugin-react": "7.32.2",
7265
"eslint-plugin-react-hooks": "^4.2.0",
73-
"husky": "^8.0.1",
74-
"jest": "29.4.2",
75-
"jest-environment-jsdom": "29.4.2",
66+
"husky": "8.0.3",
67+
"jest": "29.4.3",
68+
"jest-environment-jsdom": "29.4.3",
7669
"jest-transform-css": "6.0.1",
77-
"lint-staged": "13.0.3",
78-
"postcss": "8.4.19",
79-
"prettier": "^2.4.1",
70+
"lint-staged": "13.1.2",
71+
"postcss": "8.4.21",
72+
"prettier": "2.8.4",
8073
"process": "^0.11.10",
8174
"prop-types": "^15.7.2",
8275
"react": "16.14.0",
@@ -86,14 +79,14 @@
8679
"rollup-plugin-analyzer": "^4.0.0",
8780
"rollup-plugin-browsersync": "^1.3.3",
8881
"rollup-plugin-copy": "^3.4.0",
89-
"rollup-plugin-dts": "^5.0.0",
82+
"rollup-plugin-dts": "5.2.0",
9083
"rollup-plugin-filesize": "^9.1.1",
9184
"rollup-plugin-html-scaffold": "^0.2.0",
9285
"rollup-plugin-postcss": "^4.0.1",
9386
"rollup-plugin-progress": "^1.1.2",
9487
"rollup-plugin-string": "^3.0.0",
9588
"rollup-plugin-terser": "^7.0.2",
96-
"rollup-plugin-visualizer": "^5.5.2",
89+
"rollup-plugin-visualizer": "5.9.0",
9790
"style-loader": "^3.3.0",
9891
"stylelint": "^13.13.1",
9992
"stylelint-config-prettier": "^8.0.2",
@@ -119,7 +112,7 @@
119112
]
120113
},
121114
"dependencies": {
122-
"@floating-ui/dom": "1.1.1",
115+
"@floating-ui/dom": "1.2.3",
123116
"classnames": "^2.3.2"
124117
}
125118
}

‎cli.js renamed to ‎prebuild.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,16 @@ const bundleFolder = {
1616
// Build folder
1717
const dir = bundleFolder[parameters.env]
1818

19-
const log = (message) => console.log(`### ${message} ###`)
19+
const log = (message) => {
20+
// eslint-disable-next-line no-console
21+
console.log(`### ${message} ###`)
22+
}
2023

2124
log(`Building for env: ${parameters.env}`)
2225

2326
// check if directory exists
2427
if (fs.existsSync(dir)) {
25-
rimraf(dir, function () {
28+
rimraf(dir, () => {
2629
fs.mkdirSync(dir)
2730
})
2831
} else {

‎public/index-rollup.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="theme-color" content="#009ee2" />
7+
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
9+
<title>Dev - React Tooltip</title>
10+
<link rel="stylesheet" href="index.css" />
11+
</head>
12+
<body>
13+
<noscript>You need to enable JavaScript to run this app. Please enable JavaScript 😭</noscript>
14+
15+
<div id="app"></div>
16+
17+
<script type="module" src="<%= appBundle %>"></script>
18+
</body>
19+
</html>

0 commit comments

Comments
 (0)