nusmodifications / nusmodifications/nusmods

Bump @tippy.js/react to @tippyjs/react

Open
#3,069 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

good first issue
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 with React.lazy or in the future after more mature Suspense infra has been added to our codebase (e.g. #2922).
  • Implement our own TooltipGroup component 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 our Tooltip components.

Once upgraded, we'll also want to ensure that our CSS isn't broken during the upgrade.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.