-
-
Notifications
You must be signed in to change notification settings - Fork 533
feat: add esbuild as bundler #959
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
21 commits
Select commit
Hold shift + click to select a range
1fcffbd
feat: add esbuild config for dev and production envs
danielbarion f280dfb
refactor: update classNames to camelcase because of esbuild
danielbarion 6322ba7
chore: add script to use esbuild as bundler
danielbarion f836503
chore: add a new html to rollup and update the existent one to work w…
danielbarion 6ac6621
chore: raise version of react to test docs with the package linked
danielbarion 2f2fcda
chore: add a create-react-app folder to test the new esbuild
danielbarion a82b5f9
chore: add postbuild to generate the types after esbuild script build
danielbarion a80a8c2
feat: add source map to generated files
danielbarion 171e138
chore: update esbuild and bundlesize
danielbarion 4c85f08
chore: remove cra-app and revert react version to v16
danielbarion 5749584
chore: upgrade packages of react-tooltip and docs
danielbarion 18e0314
fix: remove support to node 14 in github action due to dependencies
danielbarion cbf169d
refactor: cli.js -> prebuild.js
gabrieljablonski 9daa533
feat: live reload on dev environment
gabrieljablonski 9c3c9f0
build: umd -> iife on package.json
gabrieljablonski af53118
build: throw build error instead of silent fail
gabrieljablonski 5033845
refactor: `forEach`/`push` -> `map`
gabrieljablonski a57422e
build: improve postbuild cleanup
gabrieljablonski d434781
chore: refactor package.json to remove buildformats from it
danielbarion a6bd00b
docs: update bundlesize comparison
gabrieljablonski d0863fc
docs: link images to bundlephobia
gabrieljablonski File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -35,3 +35,7 @@ yarn-error.log | |
!.babelrc | ||
!.gitignore | ||
!.npmignore | ||
|
||
# yalc | ||
/.yalc | ||
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -27,10 +27,19 @@ Documentation for V4 - [Github Page](https://reacttooltip.github.io/react-toolti | |
|
||
Documentation for V5 - [ReactTooltip](https://react-tooltip.com/docs/getting-started). | ||
|
||
[Bundle size timeline comparation from V4 -> V5](https://bundlephobia.com/package/[email protected]) | ||
|
||
[](https://bundlephobia.com/package/[email protected]) | ||
## [Bundle size comparison V4 -> V5](https://bundlephobia.com/package/react-tooltip) | ||
|
||
<p align="center"> | ||
<a href="https://bundlephobia.com/package/[email protected]"> | ||
<img alt="Bundlephobia v4.5.1" style="height: 250px" src="https://user-images.githubusercontent.com/21102974/222977995-a5ae7c12-e945-454e-ad96-5c73b76a88a0.png" /> | ||
</a> | ||
<a href="https://bundlephobia.com/package/[email protected]"> | ||
<img alt="Bundlephobia v5.8.4" style="height: 250px" src="https://user-images.githubusercontent.com/21102974/222977970-8574434d-77de-4aa3-b8ad-a2b8924d75a4.png" /> | ||
</a> | ||
<a href="https://bundlephobia.com/package/[email protected]"> | ||
<img alt="Bundlezise timeline" style="height: 250px" src="https://user-images.githubusercontent.com/21102974/222978188-f6db8679-da69-4da7-9c0d-b6fde8bd9517.png" /> | ||
</a> | ||
</p> | ||
|
||
## Installation | ||
|
||
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6025,7 +6025,7 @@ react-dev-utils@^12.0.1: | |
strip-ansi "^6.0.1" | ||
text-table "^0.2.0" | ||
|
||
[email protected]: | ||
react-dom@^18.2.0: | ||
version "18.2.0" | ||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" | ||
integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== | ||
|
@@ -6125,15 +6125,15 @@ react-textarea-autosize@^8.3.2: | |
use-composed-ref "^1.3.0" | ||
use-latest "^1.2.1" | ||
|
||
[email protected].3: | ||
version "5.8.3" | ||
resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.8.3.tgz#d9c94eafb6c3d4d7be43b4acfe6f3cbde82df9ab" | ||
integrity sha512-h7maAlm2Xeymc14gWKhhrzsENeB83N65EzZ+AcQIGrOpNE0yefVRJIHhNcWHEJ0FEtf7VZXxtsj5glVXKxEtvA== | ||
[email protected].4-beta.2: | ||
version "5.8.4-beta.2" | ||
resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.8.4-beta.2.tgz#5a553ea1101e492f60ea0075df37cb7326d7f4aa" | ||
integrity sha512-GVdpVwbbm+fMIQKiWYJBWpRJ3kYSvzWr/A9j8JUQuEmxSW/JJ+Lj+6jJcF7oVU9iA9tgkbzd+tg52f5GukxfNg== | ||
dependencies: | ||
"@floating-ui/dom" "1.1.1" | ||
classnames "^2.3.2" | ||
|
||
[email protected]: | ||
react@^18.2.0: | ||
version "18.2.0" | ||
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" | ||
integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== | ||
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import * as esbuild from 'esbuild' | ||
import cssModulesPlugin from 'esbuild-css-modules-plugin' | ||
import fs from 'fs' | ||
|
||
const ctx = await esbuild.context({ | ||
entryPoints: ['./src/index-dev.tsx'], | ||
bundle: true, | ||
outdir: 'build', | ||
treeShaking: true, | ||
logLevel: 'info', | ||
plugins: [ | ||
cssModulesPlugin({ | ||
v2: true, | ||
v2CssModulesOption: { | ||
pattern: `react-tooltip__[local]_[hash]`, | ||
}, | ||
}), | ||
], | ||
}) | ||
|
||
fs.copyFile('./public/index.html', './build/index.html', (err) => { | ||
if (err) throw err | ||
}) | ||
|
||
await ctx.watch() | ||
await ctx.serve({ | ||
servedir: 'build', | ||
port: 3000, | ||
host: 'localhost', | ||
}) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,97 @@ | ||
import * as esbuild from 'esbuild' | ||
import cssModulesPlugin from 'esbuild-css-modules-plugin' | ||
import fs from 'fs' | ||
|
||
const buildsConfig = [ | ||
{ | ||
format: 'esm', | ||
outfile: 'dist/react-tooltip.esm.js', | ||
minify: false, | ||
}, | ||
{ | ||
format: 'cjs', | ||
outfile: 'dist/react-tooltip.cjs.js', | ||
minify: false, | ||
}, | ||
{ | ||
format: 'iife', | ||
outfile: 'dist/react-tooltip.iife.js', | ||
minify: false, | ||
}, | ||
{ | ||
format: 'esm', | ||
outfile: 'dist/react-tooltip.js', // for styles be exported as `react-tooltip.css` | ||
minify: false, | ||
}, | ||
{ | ||
format: 'esm', | ||
outfile: 'dist/react-tooltip.esm.min.js', | ||
minify: true, | ||
}, | ||
{ | ||
format: 'cjs', | ||
outfile: 'dist/react-tooltip.cjs.min.js', | ||
minify: true, | ||
}, | ||
{ | ||
format: 'iife', | ||
outfile: 'dist/react-tooltip.iife.min.js', | ||
minify: true, | ||
}, | ||
{ | ||
format: 'esm', | ||
outfile: 'dist/react-tooltip.min.js', | ||
minify: true, | ||
}, | ||
] | ||
|
||
const builds = await Promise.all( | ||
buildsConfig.map(({ format, outfile, minify }) => | ||
esbuild.build({ | ||
entryPoints: ['./src/index.tsx'], | ||
bundle: true, | ||
outfile, | ||
format, | ||
treeShaking: true, | ||
minify, | ||
sourcemap: true, | ||
external: ['react', 'react-dom', 'prop-types'], | ||
gabrieljablonski marked this conversation as resolved.
Show resolved
Hide resolved
|
||
plugins: [ | ||
cssModulesPlugin({ | ||
// inject: true, | ||
v2: true, | ||
v2CssModulesOption: { | ||
pattern: `react-tooltip__[local]_[hash]`, | ||
}, | ||
}), | ||
], | ||
}), | ||
), | ||
) | ||
|
||
const toDelete = new Set() | ||
builds.forEach((build) => { | ||
const outputs = Object.keys(build.metafile.outputs) | ||
outputs.forEach((output) => { | ||
/** | ||
* delete all redundant `.css` and `.css.map` files | ||
* except the ones we actually want to keep | ||
*/ | ||
if (/react-tooltip\.css(\.map)?$/.test(output)) { | ||
return | ||
} | ||
if (/\.css(\.map)?$/.test(output)) { | ||
toDelete.add(output) | ||
} | ||
}) | ||
}) | ||
|
||
/** | ||
* delete the extra build files from the CSS build | ||
*/ | ||
toDelete.add('dist/react-tooltip.js') | ||
toDelete.add('dist/react-tooltip.js.map') | ||
|
||
toDelete.forEach((file) => { | ||
fs.unlink(file, () => null) | ||
}) | ||
danielbarion marked this conversation as resolved.
Show resolved
Hide resolved
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<meta name="theme-color" content="#009ee2" /> | ||
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> | ||
<title>Dev - React Tooltip</title> | ||
<link rel="stylesheet" href="index.css" /> | ||
</head> | ||
<body> | ||
<noscript>You need to enable JavaScript to run this app. Please enable JavaScript 😭</noscript> | ||
|
||
<div id="app"></div> | ||
|
||
<script type="module" src="<%= appBundle %>"></script> | ||
</body> | ||
</html> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.