fix: npm ignore and update benchmark docs

Author: danielbarion

.npmignore

@@ -8,13 +8,15 @@ node_modules/
 example/
 example-v5/
 build/
+benchmarks/
 test/
 bin/
 CHANGELOG.md
 src/
 docs/
 public/
 coverage/
+scripts/
 
 // setting files
 .babelrc
@@ -31,11 +33,16 @@ rollup-plugins/
 bundlesize.config.json
 prebuild.js
 jest.config.mjs
+global.d.ts
+tsconfig.jest.json
 
 // bundler - rollup
 rollup.config.dev.js
 rollup.config.prod.js
 rollup.config.types.js
+rollup.config.dev.mjs
+rollup.config.prod.mjs
+rollup.config.types.mjs
 
 // bundler - esbuild
 esbuild.config.dev.mjs

CONTRIBUTION.md CONTRIBUTING.mdCONTRIBUTION.md renamed to CONTRIBUTING.md

@@ -35,4 +35,3 @@ To this:
 
 OBS: do not commit this change or the docs will broken the deployment and will not be updated.
 
-

README.md

@@ -181,7 +181,7 @@ We would gladly accept a new maintainer to help out!
 
 ## Contributing
 
-We welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our [contributing](CONTRIBUTION.md) doc has some details.
+We welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our [contributing](CONTRIBUTING.md) doc has some details.
 
 ## License
 

docs/src/pages/benchmark.module.css

@@ -172,8 +172,6 @@
 }
 
 .tableWrap {
-  border: 1px solid rgba(15, 23, 42, 0.08);
-  border-radius: 18px;
   display: block;
   overflow-x: auto;
   overflow-y: hidden;
@@ -187,6 +185,11 @@
   width: max-content;
 }
 
+.compactTable {
+  min-width: 100%;
+  width: 100%;
+}
+
 .table thead th {
   background: #f8fafc;
   border-bottom: 1px solid rgba(15, 23, 42, 0.08);

docs/src/pages/benchmark.tsx

@@ -8,6 +8,14 @@ function formatDeltaMs(value: number) {
   return `${sign}${value.toFixed(2)} ms`
 }
 
+function formatBytes(value: number) {
+  if (value >= 1024) {
+    return `${(value / 1024).toFixed(2)} KB`
+  }
+
+  return `${value} B`
+}
+
 function formatMemory(value: number) {
   const sign = value > 0 ? '+' : ''
   const absolute = Math.abs(value)
@@ -23,6 +31,11 @@ function formatPercent(value: number) {
   return `${value.toFixed(1)}%`
 }
 
+function formatByteDelta(value: number) {
+  const sign = value > 0 ? '+' : ''
+  return `${sign}${formatBytes(value)}`
+}
+
 function getDeltaClass(value: number) {
   if (value < 0) {
     return styles.positive
@@ -33,6 +46,64 @@ function getDeltaClass(value: number) {
   return styles.muted
 }
 
+const bundleSizeRows = [
+  {
+    artifact: 'react-tooltip.min.mjs',
+    v5Raw: 22704,
+    v6Raw: 20749,
+    rawDelta: -1955,
+    rawDeltaPercent: -8.6,
+    v5Gzip: 7670,
+    v6Gzip: 7192,
+    gzipDelta: -478,
+    gzipDeltaPercent: -6.2,
+  },
+  {
+    artifact: 'react-tooltip.min.cjs',
+    v5Raw: 23414,
+    v6Raw: 21067,
+    rawDelta: -2347,
+    rawDeltaPercent: -10.0,
+    v5Gzip: 7733,
+    v6Gzip: 7167,
+    gzipDelta: -566,
+    gzipDeltaPercent: -7.3,
+  },
+  {
+    artifact: 'react-tooltip.umd.min.js',
+    v5Raw: 23691,
+    v6Raw: 21357,
+    rawDelta: -2334,
+    rawDeltaPercent: -9.9,
+    v5Gzip: 7824,
+    v6Gzip: 7259,
+    gzipDelta: -565,
+    gzipDeltaPercent: -7.2,
+  },
+  {
+    artifact: 'react-tooltip.min.css',
+    v5Raw: 2129,
+    v6Raw: 2129,
+    rawDelta: 0,
+    rawDeltaPercent: 0,
+    v5Gzip: 706,
+    v6Gzip: 706,
+    gzipDelta: 0,
+    gzipDeltaPercent: 0,
+  },
+]
+
+const packageSizeSnapshot = {
+  v5Tarball: 212464,
+  v6Tarball: 114179,
+  tarballDelta: -98285,
+  tarballDeltaPercent: -46.3,
+  v5Unpacked: 894316,
+  v6Unpacked: 483478,
+  unpackedDelta: -410838,
+  unpackedDeltaPercent: -45.9,
+}
+
 export default function BenchmarkPage(): React.JSX.Element {
   const largestRow = benchmarkSnapshot.rows[benchmarkSnapshot.rows.length - 1]
   const strongestMountWin = benchmarkSnapshot.rows.reduce((best, row) =>
@@ -282,6 +353,54 @@ export default function BenchmarkPage(): React.JSX.Element {
                   consequential.
                 </p>
               </div>
+              <div className={styles.cardBody}>
+                <h3 className={styles.cardTitle}>Shipped Size</h3>
+                <p className={styles.cardText} style={{ marginBottom: '1rem' }}>
+                  Runtime bundle size was also reduced. The minified JavaScript artifacts shipped by
+                  v6 are smaller than their v5 equivalents across ESM, CJS, and UMD, while the
+                  published CSS stays unchanged.
+                </p>
+                <div className={styles.tableWrap}>
+                  <table className={`${styles.table} ${styles.compactTable}`}>
+                    <thead>
+                      <tr>
+                        <th className={styles.countColumn}>Artifact</th>
+                        <th className={styles.mountGroup}>V5 Raw</th>
+                        <th className={styles.mountGroup}>V6 Raw</th>
+                        <th className={styles.mountGroup}>Raw Delta</th>
+                        <th className={styles.mountGroup}>V5 Gzip</th>
+                        <th className={styles.mountGroup}>V6 Gzip</th>
+                        <th className={styles.mountGroup}>Gzip Delta</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {bundleSizeRows.map((row) => (
+                        <tr key={row.artifact}>
+                          <td className={styles.countCell}>{row.artifact}</td>
+                          <td className={styles.metricCell}>{formatBytes(row.v5Raw)}</td>
+                          <td className={styles.metricCell}>{formatBytes(row.v6Raw)}</td>
+                          <td className={`${styles.metricCell} ${getDeltaClass(row.rawDelta)}`}>
+                            {formatByteDelta(row.rawDelta)} ({formatPercent(row.rawDeltaPercent)})
+                          </td>
+                          <td className={styles.metricCell}>{formatBytes(row.v5Gzip)}</td>
+                          <td className={styles.metricCell}>{formatBytes(row.v6Gzip)}</td>
+                          <td className={`${styles.metricCell} ${getDeltaClass(row.gzipDelta)}`}>
+                            {formatByteDelta(row.gzipDelta)} ({formatPercent(row.gzipDeltaPercent)})
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+                <p className={styles.cardText}>
+                  These numbers were measured from the built <b>dist/</b> artifacts and the packed
+                  npm package for each version, so they reflect shipped output rather than source
+                  size.
+                </p>
+                <p className={styles.cardText}>
+                  If you like the project, please give the project a GitHub 🌟
+                </p>
+              </div>
             </section>
           </div>
         </div>