diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml index 46aedf614..d33640303 100644 --- a/.github/workflows/lint.yaml +++ b/.github/workflows/lint.yaml @@ -20,7 +20,7 @@ jobs: needs: lint strategy: matrix: - version: [14, 16, 18] + version: [16, 18] runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 diff --git a/.gitignore b/.gitignore index 1c9a5580e..d25d1a3f0 100644 --- a/.gitignore +++ b/.gitignore @@ -35,3 +35,7 @@ yarn-error.log !.babelrc !.gitignore !.npmignore + +# yalc +/.yalc + diff --git a/README.md b/README.md index 00bf22ab2..398e639c3 100755 --- a/README.md +++ b/README.md @@ -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/react-tooltip@5.0.0) - -[![Bundlephobia comparison](https://user-images.githubusercontent.com/9615850/211835641-f6373084-ad73-4902-9855-246d34952345.png)](https://bundlephobia.com/package/react-tooltip@5.0.0) +## [Bundle size comparison V4 -> V5](https://bundlephobia.com/package/react-tooltip) +

+ + Bundlephobia v4.5.1 + + + Bundlephobia v5.8.4 + + + Bundlezise timeline + +

## Installation diff --git a/bundlesize.config.json b/bundlesize.config.json index 8d1c142dd..2880c41ae 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -2,15 +2,15 @@ "files": [ { "path": "./dist/react-tooltip.cjs.min.js", - "maxSize": "13.5 kB" + "maxSize": "10 kB" }, { "path": "./dist/react-tooltip.esm.min.js", - "maxSize": "13.5 kB" + "maxSize": "10 kB" }, { - "path": "./dist/react-tooltip.umd.min.js", - "maxSize": "13.5 kB" + "path": "./dist/react-tooltip.iife.min.js", + "maxSize": "10 kB" } ] } diff --git a/docs/.gitignore b/docs/.gitignore index b2d6de306..9a74dccab 100644 --- a/docs/.gitignore +++ b/docs/.gitignore @@ -18,3 +18,8 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + + +# yalc +/.yalc +yalc.lock diff --git a/docs/package.json b/docs/package.json index a96b84a08..2e9bce835 100644 --- a/docs/package.json +++ b/docs/package.json @@ -21,9 +21,9 @@ "clsx": "^1.2.1", "prism-react-renderer": "^1.3.5", "raw-loader": "^4.0.2", - "react": "18.2.0", - "react-dom": "18.2.0", - "react-tooltip": "5.8.3" + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-tooltip": "5.8.4-beta.2" }, "devDependencies": { "@docusaurus/module-type-aliases": "2.3.0", diff --git a/docs/yarn.lock b/docs/yarn.lock index 9ab36b9dd..b697acc23 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -6025,7 +6025,7 @@ react-dev-utils@^12.0.1: strip-ansi "^6.0.1" text-table "^0.2.0" -react-dom@18.2.0: +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" -react-tooltip@5.8.3: - version "5.8.3" - resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.8.3.tgz#d9c94eafb6c3d4d7be43b4acfe6f3cbde82df9ab" - integrity sha512-h7maAlm2Xeymc14gWKhhrzsENeB83N65EzZ+AcQIGrOpNE0yefVRJIHhNcWHEJ0FEtf7VZXxtsj5glVXKxEtvA== +react-tooltip@5.8.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" -react@18.2.0: +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== diff --git a/esbuild.config.dev.mjs b/esbuild.config.dev.mjs new file mode 100644 index 000000000..8d2cc2783 --- /dev/null +++ b/esbuild.config.dev.mjs @@ -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', +}) diff --git a/esbuild.config.prod.mjs b/esbuild.config.prod.mjs new file mode 100644 index 000000000..695dabfdf --- /dev/null +++ b/esbuild.config.prod.mjs @@ -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'], + 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) +}) diff --git a/package.json b/package.json index 305db265a..bf7f4a9ae 100644 --- a/package.json +++ b/package.json @@ -1,34 +1,25 @@ { "name": "react-tooltip", - "version": "5.8.3", + "version": "5.8.4-beta.2", "description": "react tooltip component", "scripts": { - "dev": "node ./cli.js --env=development && node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.dev.js --watch", - "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", + "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", + "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", + "dev": "node ./prebuild.js --env=development && node ./esbuild.config.dev.mjs", + "build": "node ./prebuild.js --env=production && node ./esbuild.config.prod.mjs", "types": "node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.types.js", "eslint": "eslint --ext=js --ext=jsx --ext=ts --ext=tsx --fix ./src", "stylelint": "stylelint \"src/**/*.css\"", "prettier": "prettier --config ./.prettierrc.json --write \"src/**/*{.js,.jsx,.ts,.tsx,.css}\"", "prepare": "husky install", "bundlesize": "bundlesize", - "test": "jest" + "esbuild": "esbuild", + "test": "jest", + "postbuild": "npm run types && npm run bundlesize", + "prepublishOnly": "npm run build" }, "main": "dist/react-tooltip.cjs.min.js", "module": "dist/react-tooltip.esm.min.js", - "buildFormats": [ - { - "file": "dist/react-tooltip.umd.js", - "format": "umd" - }, - { - "file": "dist/react-tooltip.cjs.js", - "format": "cjs" - }, - { - "file": "dist/react-tooltip.esm.js", - "format": "es" - } - ], "types": "dist/react-tooltip.d.ts", "license": "MIT", "private": false, @@ -55,28 +46,30 @@ "@types/css": "^0.0.33", "@types/css-modules": "^1.0.2", "@types/jest": "29.4.0", - "@types/react": "^18.0.21", - "@types/react-dom": "^18.0.6", + "@types/react": "18.0.28", + "@types/react-dom": "18.0.11", "@types/react-test-renderer": "^18.0.0", - "@typescript-eslint/eslint-plugin": "^5.42.1", - "@typescript-eslint/parser": "^5.42.1", + "@typescript-eslint/eslint-plugin": "5.54.0", + "@typescript-eslint/parser": "5.54.0", "bundlesize": "^0.18.1", - "css-loader": "6.7.2", - "eslint": "8.28.0", + "css-loader": "6.7.3", + "esbuild": "0.17.11", + "esbuild-css-modules-plugin": "^2.7.1", + "eslint": "8.35.0", "eslint-config-airbnb": "19.0.4", - "eslint-config-prettier": "^8.3.0", - "eslint-plugin-import": "^2.24.2", - "eslint-plugin-jsx-a11y": "^6.4.1", + "eslint-config-prettier": "8.6.0", + "eslint-plugin-import": "2.27.5", + "eslint-plugin-jsx-a11y": "6.7.1", "eslint-plugin-prettier": "^4.0.0", - "eslint-plugin-react": "7.31.11", + "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "^4.2.0", - "husky": "^8.0.1", - "jest": "29.4.2", - "jest-environment-jsdom": "29.4.2", + "husky": "8.0.3", + "jest": "29.4.3", + "jest-environment-jsdom": "29.4.3", "jest-transform-css": "6.0.1", - "lint-staged": "13.0.3", - "postcss": "8.4.19", - "prettier": "^2.4.1", + "lint-staged": "13.1.2", + "postcss": "8.4.21", + "prettier": "2.8.4", "process": "^0.11.10", "prop-types": "^15.7.2", "react": "16.14.0", @@ -86,14 +79,14 @@ "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-browsersync": "^1.3.3", "rollup-plugin-copy": "^3.4.0", - "rollup-plugin-dts": "^5.0.0", + "rollup-plugin-dts": "5.2.0", "rollup-plugin-filesize": "^9.1.1", "rollup-plugin-html-scaffold": "^0.2.0", "rollup-plugin-postcss": "^4.0.1", "rollup-plugin-progress": "^1.1.2", "rollup-plugin-string": "^3.0.0", "rollup-plugin-terser": "^7.0.2", - "rollup-plugin-visualizer": "^5.5.2", + "rollup-plugin-visualizer": "5.9.0", "style-loader": "^3.3.0", "stylelint": "^13.13.1", "stylelint-config-prettier": "^8.0.2", @@ -119,7 +112,7 @@ ] }, "dependencies": { - "@floating-ui/dom": "1.1.1", + "@floating-ui/dom": "1.2.3", "classnames": "^2.3.2" } } diff --git a/cli.js b/prebuild.js similarity index 83% rename from cli.js rename to prebuild.js index 98173002b..c6804c59a 100755 --- a/cli.js +++ b/prebuild.js @@ -16,13 +16,16 @@ const bundleFolder = { // Build folder const dir = bundleFolder[parameters.env] -const log = (message) => console.log(`### ${message} ###`) +const log = (message) => { + // eslint-disable-next-line no-console + console.log(`### ${message} ###`) +} log(`Building for env: ${parameters.env}`) // check if directory exists if (fs.existsSync(dir)) { - rimraf(dir, function () { + rimraf(dir, () => { fs.mkdirSync(dir) }) } else { diff --git a/public/index-rollup.html b/public/index-rollup.html new file mode 100644 index 000000000..4079e8f93 --- /dev/null +++ b/public/index-rollup.html @@ -0,0 +1,19 @@ + + + + + + + + + Dev - React Tooltip + + + + + +
+ + + + diff --git a/public/index.html b/public/index.html index 4079e8f93..aa2c78fd8 100644 --- a/public/index.html +++ b/public/index.html @@ -7,13 +7,16 @@ Dev - React Tooltip - + +
- + diff --git a/rollup.config.dev.js b/rollup.config.dev.js index d6d58f506..2d9c0e6b9 100644 --- a/rollup.config.dev.js +++ b/rollup.config.dev.js @@ -25,7 +25,7 @@ const globals = { const plugins = [ progress(), html({ - input: './public/index.html', + input: './public/index-rollup.html', output: './build/index.html', template: { appBundle: 'index.js' }, }), diff --git a/rollup.config.prod.js b/rollup.config.prod.js index cc05e5f90..8794ab458 100644 --- a/rollup.config.prod.js +++ b/rollup.config.prod.js @@ -7,7 +7,6 @@ import { nodeResolve } from '@rollup/plugin-node-resolve' import ts from '@rollup/plugin-typescript' import { terser } from 'rollup-plugin-terser' import typescript from 'typescript' -import pkg from './package.json' const input = ['src/index.tsx'] @@ -22,6 +21,21 @@ const globals = { 'prop-types': 'PropTypes', } +const buildFormats = [ + { + file: 'dist/react-tooltip.umd.js', + format: 'umd', + }, + { + file: 'dist/react-tooltip.cjs.js', + format: 'cjs', + }, + { + file: 'dist/react-tooltip.esm.js', + format: 'es', + }, +] + // splitted to be reusable by minified css build and unminified css const pluginsBeforePostCSS = [ progress(), @@ -74,14 +88,14 @@ const pluginsForCSSMinification = [ ...pluginsAfterPostCSS, ] -const defaultOutputData = pkg.buildFormats.map(({ file, format }) => ({ +const defaultOutputData = buildFormats.map(({ file, format }) => ({ file, format, plugins: [...plugins, filesize()], })) // this step is just to build the minified css and es modules javascript -const minifiedOutputData = pkg.buildFormats.map(({ file, format }) => ({ +const minifiedOutputData = buildFormats.map(({ file, format }) => ({ file: file.replace('.js', '.min.js'), format, plugins: [...pluginsForCSSMinification, terser(), filesize()], diff --git a/src/App.tsx b/src/App.tsx index 504b495a5..56c2e8190 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -97,7 +97,11 @@ function App() {
{ setToggle((t) => !t) }} @@ -117,7 +121,11 @@ function App() {
{ handlePositionClick(event) }} diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 587710259..5f5680407 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -531,7 +531,11 @@ const Tooltip = ({ {(html && ) || content || children}