nusmodifications / nusmodifications/nusmods
Bump @tippy.js/react to @tippyjs/react
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 689
- Forks
- 364
- Avg merge
- 7h 5m
- Merged PRs (30d)
- 14
Description
This package was renamed, and so will not be automatically upgraded by Renovate bot.
See: https://github.com/atomiks/tippyjs-react/releases/tag/v4.0.0
This new package also comes with breaking changes. The biggest one seems to be the removal of the TippySingleton component, which has been replaced with the useSingleton hook. This complicates matters somewhat as we defer the loading of our tooltip components, and it's illegal to call hooks conditionally, which the TooltipGroup component currently does in src/views/components/Tooltip/index.tsx.
Possible solutions
- Suspend instead of using our DIY
useEffect. This can be done now withReact.lazyor in the future after more mature Suspense infra has been added to our codebase (e.g. #2922). - Implement our own
TooltipGroupcomponent somehow so that we can render it conditionally. This can potentially be done by creating a new React context containing the singleton stuff, which can then be consumed by ourTooltipcomponents.
Once upgraded, we'll also want to ensure that our CSS isn't broken during the upgrade.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with src/views/components/Tooltip/index.tsx and the @tippyjs/react v4.0.0 release notes, focusing on TooltipGroup, deferred tooltip loading, and the removal of TippySingleton in favor of useSingleton. Compare the possible Suspense or context-based approaches described in the issue. Done means the package is upgraded, the tooltip behavior works with the new API, and the existing CSS is not broken.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100