V6 by danielbarion · Pull Request #1179 · ReactTooltip/react-tooltip

danielbarion · 2024-03-14T18:54:31Z

cleanup of the deprecated options of the Tooltip
explore new bundler options (bun.sh?)
Rollup upgraded v2 -> v4

Note: we need to consider the custom rollup plugin we did to inject the CSS into the build file (/rollup-plugins/replace-before-save-file.js)

dismiss and/or fix dependabot security alerts
improve tooltip bundle size

check global average browser version and reduce the range on the build that includes polyfills ✅
we have different ways to use the tooltip. Check code splitting to reduce the loaded code related to the way the project wants to use react-tooltip

improve tooltip performance - how to benchmark it to compare with v5?
improve internal state handling (internal state should be updated in the least render cycles possible)
review all useMemo()/useCallback()/useEffect() dependencies (the react-hooks/exhaustive-deps rule should only be ignore if strictly necessary, i.e. an specific dependency breaks functionality)
break down large effects and functions into more concise (and properly named) functions
review docs to make sure it's up to date with V6 changes after PR gets ready to be reviewed
write the tests to cover the library code and his utils

Fixes #1163
Fixes #1212
Fixes #1074
Fixes #1010

Related discussion: #1253

Summary by CodeRabbit

New Features
- Added a Benchmark page and CLI/browser benchmark tools with snapshot results.
Breaking Changes
- Removed raw-HTML tooltip APIs (data-tooltip-html, html prop); use children or render for rich content.
- Removed legacy provider/wrapper and several deprecated props/events; simplified tooltip API surface.
Documentation
- Major docs refresh: versioned v5 docs, V5→V6 upgrade guide, expanded examples and troubleshooting.
Chores
- Package bumped to v6.0.0 with modernized build/test tooling.

danielbarion · 2024-03-20T20:58:56Z

Bun is amazing but unfortunately not an option at the moment because of:

Also, note added:

Note: we need to consider the custom rollup plugin we did to inject the CSS into the build file (/rollup-plugins/replace-before-save-file.js)

coderabbitai · 2024-05-08T14:56:37Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

Bumps package to v6.0.0; removes raw-HTML tooltip APIs; refactors anchor discovery and event wiring into a registry + hooks; deletes TooltipProvider/Wrapper and TooltipContent; migrates tooling/config to ESM; adds Playwright benchmarks, aggregation, many docs/versioned pages, and extensive tests.

Changes

Cohort / File(s)	Summary
Benchmark infrastructure `benchmarks/run-benchmark.mjs`, `benchmarks/run-scaling-series.mjs`, `benchmarks/aggregate-benchmarks.mjs`, `benchmarks/fixture/app.tsx`, `benchmarks/fixture/index.html`	Add Playwright + esbuild runner, series orchestrator, aggregator (JSON/MD output + MD report), and a DOM fixture harness/HTML entry.
Docs & site/versioning `docs/docusaurus.config.js`, `docs/package.json`, `docs/scripts/generate-tooltip-style-sources.mjs`, `docs/src/...`, `docs/versioned_/`, `docs/docs/*`	Upgrade to Docusaurus v3, add generated CSS sources, add benchmark page and snapshot data, introduce versioned v5 docs, and update examples to remove raw-HTML APIs with migration guidance.
Core tooltip refactor `src/components/Tooltip/*`, `src/components/Tooltip/anchor-registry.ts`, `src/components/Tooltip/use-tooltip-anchors.tsx`, `src/components/Tooltip/use-tooltip-events.tsx`, `src/components/Tooltip/TooltipTypes.d.ts`	Move anchor discovery to an anchor registry and new hooks; centralize event handling; remove `html`, `anchorId`, `events` data/props; adjust types; memoize exports; replace classNames→clsx; refactor timing/position logic.
Provider/Wrapper & content removal `src/components/TooltipProvider/`, `src/components/TooltipContent/`, `src/index.tsx`	Remove TooltipProvider, TooltipWrapper, TooltipContent and their types/re-exports; update top-level exports accordingly.
Controller & types `src/components/TooltipController/*`	Controller now derives config from anchor data attributes; widen content/render to ReactNode; remove deprecated props/types; memoize exported controller.
Utilities & exports `src/utils/*`	Remove `cssSupports`; export `isScrollable`; make `injectStyle` accept external state and export `injected`; clone middleware in positioning util; tweak time regex and DOM detection; update utils exports.
Tests & test utils `src/test/`, `src/test/.spec.js`, `src/test/test-utils.js`, `src/test/mutation-observer-test-utils.js`	Add many test utilities and comprehensive test suites covering anchor registry, delays, imperative API, observers, interactions, styling, edge cases, and utils.
Build, tooling & ESM migration `package.json`, `esbuild.config.prod.mjs`, `rollup.config..mjs`, `beta-release.js`, `prebuild.js`, `jest.config.ts`→`jest.config.mjs`, `tsconfig.json`, `tsconfig.jest.json`, `.github/workflows/`	Switch package to ESM, update scripts/configs to .mjs, change package.json (type/module/s deps), migrate runtime package.json reads, update CI matrices and GitHub Action versions, and replace CJS Jest config with ESM variant.
App / index changes `src/App.tsx`, `src/index-dev.tsx`, `src/index-dev-react-18.tsx`	Switch to anchorSelect/openOnClick, tighten useEffect deps, adopt createRoot in dev entry, and remove obsolete React18 dev entry.
Lint / git / metadata / ignore `.eslintrc.json`, `.husky/pre-commit`, `.gitignore`, `.github/FUNDING.yml`, `README.md`, `global.d.ts`, `.npmignore`	Enable react-hooks ESLint rules, simplify husky pre-commit, add benchmark ignore patterns, change FUNDING.yml order + ko_fi, add README notes, add CSS ambient types, and update npmignore to prefer jest.config.mjs.

Sequence Diagram(s)

sequenceDiagram
    participant Anchor as Anchor Element
    participant Registry as Anchor Registry
    participant Events as useTooltipEvents
    participant Tooltip as Tooltip Component
    participant DOM as Browser

    rect rgba(100,150,200,0.5)
    Anchor->>Registry: subscribeAnchorSelector(selector)
    Registry->>DOM: querySelectorAll(selector)
    DOM-->>Registry: MutationObserver notifications
    Registry->>Registry: refresh entries & notify subscribers
    end

    rect rgba(150,100,200,0.5)
    Anchor->>Events: pointerenter / focus / click
    Events->>Events: schedule show (delayShow)
    Events->>Tooltip: set activeAnchor & trigger show
    Tooltip->>DOM: render & compute position (autoUpdate)
    end

    rect rgba(100,200,150,0.5)
    Anchor->>Events: pointerleave / blur / outside click
    Events->>Events: schedule hide (delayHide)
    Events->>Tooltip: trigger hide
    Tooltip->>DOM: add closing class → remove on transitionend
    end

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120 minutes

Possibly related PRs

Add aria-describedby automatically #1257 — Overlaps in anchor-management and aria-describedby handling; strongly related to anchor tracking and accessibility changes.

Suggested reviewers

gabrieljablonski

Poem

🐇 I hopped through code by moonlit beams,

V6 now hums in tidy streams,
HTML strings—gone, replaced with JSX cheer;
Registry listens, events steer,
Benchmarks drum and tests appear. 🎉

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch v6

github-actions · 2024-05-08T18:52:57Z