feat: add esbuild as bundler

.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

.gitignore

@@ -35,3 +35,7 @@ yarn-error.log
 !.babelrc
 !.gitignore
 !.npmignore
+
+# yalc
+/.yalc
+

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/[email protected])
-
-[![Bundlephobia comparison](https://user-images.githubusercontent.com/9615850/211835641-f6373084-ad73-4902-9855-246d34952345.png)](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
 

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"
     }
   ]
 }

docs/.gitignore

@@ -18,3 +18,8 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+
+# yalc
+/.yalc
+yalc.lock

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",

docs/yarn.lock

@@ -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==

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',
+})

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)
+})

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"
   }
 }

cli.js → 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 {

public/index-rollup.html

@@ -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>