Skip to content

rewrite class components to functional components#8165

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

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

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

1 participant