Skip to content

rewrite class components to functional components#8165

Closed
sujalgoel wants to merge 8 commits intowebpack:mainfrom
sujalgoel:rewrite-class-to-functional-components
Closed

rewrite class components to functional components#8165
sujalgoel wants to merge 8 commits intowebpack:mainfrom
sujalgoel:rewrite-class-to-functional-components

Conversation

@sujalgoel
Copy link
Copy Markdown
Contributor

Converts all 7 class components to functional components, closes #8161.

Also fixes a bug in SidebarMobile where touchmove listeners were attached via React's JSX event system, which defaults to passive, so preventDefault() was being silently blocked during swipe gestures. Moved those handlers to native addEventListener with { passive: false }.

Adds tests for Dropdown, SidebarMobile, and Support per the discussion in the issue. Also updates jest.config.mjs to handle .mjs transforms and adds a file mock for png/jpg assets.

components changed

  • SidebarMobile - touchmove passive listener fix + conversion
  • Cube - continuous animation and hover spin
  • Dropdown - keyboard navigation, Escape to close, click outside to close
  • TextRotater - rotation with setTimeout/requestAnimationFrame
  • Support - IntersectionObserver for lazy avatar loading
  • SplashViz - render-only, straightforward conversion
  • Configuration/components (Details) - popover open/close

test plan

  • home page: rotating text, spinning cube, sponsors section
  • mobile viewport: sidebar open/close and swipe gestures
  • header: language dropdown hover, click, arrow keys, Escape
  • npm test passes (83 tests)

Converts all 7 class components to functional components, closes webpack#8161.

Also fixes a bug in SidebarMobile where touchmove listeners were attached
via React's JSX event system which defaults to passive, blocking
preventDefault() during swipe gestures. Moved those handlers to native
addEventListener with { passive: false }.

Adds tests for Dropdown, SidebarMobile, and Support per issue discussion.
Also updates jest.config.mjs to handle .mjs transforms and adds a file
mock for png/jpg assets.
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 4, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
webpack-js-org Ready Ready Preview, Comment Apr 4, 2026 9:26am

Request Review

Copy link
Copy Markdown
Member

@alexander-akait alexander-akait left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Look good and your work is good, but let's split these changes in multiple PRs (one pr - one comonent) to better history and easy review

Copy link
Copy Markdown
Contributor Author

@sujalgoel sujalgoel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, split into separate PRs:

SplashViz was already covered by #8164. Closing this one.

@sujalgoel sujalgoel closed this Apr 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

rewrite class components to functional components

2 participants