From 26fe15848dac555db0ae08bbe5a3bcec34f552cf Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sun, 28 Sep 2025 02:08:34 +0800 Subject: [PATCH 1/2] perf: uninstall classnames, install clsx --- .gitignore | 1 + package.json | 3 +-- src/Popup/Arrow.tsx | 4 ++-- src/Popup/Mask.tsx | 4 ++-- src/Popup/index.tsx | 4 ++-- src/index.tsx | 9 +++------ 6 files changed, 11 insertions(+), 14 deletions(-) diff --git a/.gitignore b/.gitignore index 7256eba7..437ad791 100644 --- a/.gitignore +++ b/.gitignore @@ -27,6 +27,7 @@ es coverage yarn.lock package-lock.json +pnpm-lock.yaml bun.lockb .vscode diff --git a/package.json b/package.json index 527d035d..05f653e1 100644 --- a/package.json +++ b/package.json @@ -45,14 +45,13 @@ "@rc-component/portal": "^2.0.0", "@rc-component/resize-observer": "^1.0.0", "@rc-component/util": "^1.2.1", - "classnames": "^2.3.2" + "clsx": "^2.1.1" }, "devDependencies": { "@rc-component/father-plugin": "^2.0.0", "@rc-component/np": "^1.0.3", "@testing-library/jest-dom": "^6.1.4", "@testing-library/react": "^16.0.0", - "@types/classnames": "^2.2.10", "@types/jest": "^29.5.2", "@types/node": "^24.0.3", "@types/react": "^19.1.2", diff --git a/src/Popup/Arrow.tsx b/src/Popup/Arrow.tsx index a48a16b0..1ab8239e 100644 --- a/src/Popup/Arrow.tsx +++ b/src/Popup/Arrow.tsx @@ -1,4 +1,4 @@ -import classNames from 'classnames'; +import { clsx } from 'clsx'; import * as React from 'react'; import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface'; @@ -57,7 +57,7 @@ export default function Arrow(props: ArrowProps) { return (
{content} diff --git a/src/Popup/Mask.tsx b/src/Popup/Mask.tsx index 4c376da4..62238754 100644 --- a/src/Popup/Mask.tsx +++ b/src/Popup/Mask.tsx @@ -1,4 +1,4 @@ -import classNames from 'classnames'; +import { clsx } from 'clsx'; import type { CSSMotionProps } from '@rc-component/motion'; import CSSMotion from '@rc-component/motion'; import * as React from 'react'; @@ -36,7 +36,7 @@ export default function Mask(props: MaskProps) { {({ className }) => (
((props, ref) => { { className: motionClassName, style: motionStyle }, motionRef, ) => { - const cls = classNames(prefixCls, motionClassName, className, { + const cls = clsx(prefixCls, motionClassName, className, { [`${prefixCls}-mobile`]: isMobile, }); diff --git a/src/index.tsx b/src/index.tsx index 16238f50..68bced35 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,5 @@ import Portal from '@rc-component/portal'; -import classNames from 'classnames'; +import { clsx } from 'clsx'; import type { CSSMotionProps } from '@rc-component/motion'; import ResizeObserver from '@rc-component/resize-observer'; import { isDOM } from '@rc-component/util/lib/Dom/findDOMNode'; @@ -511,7 +511,7 @@ export function generateTrigger( alignPoint, ); - return classNames(baseClassName, getPopupClassNameFromAlign?.(alignInfo)); + return clsx(baseClassName, getPopupClassNameFromAlign?.(alignInfo)); }, [ alignInfo, getPopupClassNameFromAlign, @@ -804,10 +804,7 @@ export function generateTrigger( ref={setPopupRef} prefixCls={prefixCls} popup={popup} - className={classNames( - popupClassName, - !isMobile && alignedClassName, - )} + className={clsx(popupClassName, !isMobile && alignedClassName)} style={popupStyle} target={targetEle} onMouseEnter={onPopupMouseEnter} From e9fa1e785923b22abc723dd87b078bc63cdf4d7a Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sun, 28 Sep 2025 02:15:41 +0800 Subject: [PATCH 2/2] perf: uninstall classnames, install clsx --- src/UniqueProvider/UniqueContainer.tsx | 11 ++++--- src/UniqueProvider/index.tsx | 8 ++--- tests/unique.test.tsx | 42 ++++++++++++++++---------- 3 files changed, 37 insertions(+), 24 deletions(-) diff --git a/src/UniqueProvider/UniqueContainer.tsx b/src/UniqueProvider/UniqueContainer.tsx index df6db8fc..18e5084a 100644 --- a/src/UniqueProvider/UniqueContainer.tsx +++ b/src/UniqueProvider/UniqueContainer.tsx @@ -1,6 +1,6 @@ import React from 'react'; import useOffsetStyle from '../hooks/useOffsetStyle'; -import classNames from 'classnames'; +import { clsx } from 'clsx'; import CSSMotion from '@rc-component/motion'; import type { CSSMotionProps } from '@rc-component/motion'; import type { AlignType, ArrowPos } from '../interface'; @@ -86,9 +86,12 @@ const UniqueContainer = (props: UniqueContainerProps) => { }} > {({ className: motionClassName, style: motionStyle }) => { - const cls = classNames(containerCls, motionClassName, uniqueContainerClassName, { - [`${containerCls}-visible`]: motionVisible, - }); + const cls = clsx( + containerCls, + motionClassName, + uniqueContainerClassName, + { [`${containerCls}-visible`]: motionVisible }, + ); return (
{ }); it('should apply uniqueContainerClassName to UniqueContainer component', async () => { - await setupAndOpenPopup({ uniqueContainerClassName: 'custom-container-class' }); + await setupAndOpenPopup({ + uniqueContainerClassName: 'custom-container-class', + }); // Check that UniqueContainer has the custom container className - const uniqueContainer = document.querySelector('.rc-trigger-popup-unique-container'); + const uniqueContainer = document.querySelector( + '.rc-trigger-popup-unique-container', + ); expect(uniqueContainer).toBeTruthy(); expect(uniqueContainer.className).toContain('custom-container-class'); }); it('should apply uniqueContainerStyle to UniqueContainer component', async () => { await setupAndOpenPopup({ - uniqueContainerStyle: { backgroundColor: 'red', border: '1px solid blue' }, + uniqueContainerStyle: { + backgroundColor: 'red', + border: '1px solid blue', + }, }); // Check that UniqueContainer has the custom container style - const uniqueContainer = document.querySelector('.rc-trigger-popup-unique-container'); + const uniqueContainer = document.querySelector( + '.rc-trigger-popup-unique-container', + ); expect(uniqueContainer).toBeTruthy(); expect(uniqueContainer).toHaveStyle({ backgroundColor: 'red', @@ -211,7 +220,9 @@ describe('Trigger.Unique', () => { await setupAndOpenPopup(); // Check that UniqueContainer exists but does not have custom container className - const uniqueContainer = document.querySelector('.rc-trigger-popup-unique-container'); + const uniqueContainer = document.querySelector( + '.rc-trigger-popup-unique-container', + ); expect(uniqueContainer).toBeTruthy(); expect(uniqueContainer.className).not.toContain('undefined'); }); @@ -246,12 +257,14 @@ describe('Trigger.Unique', () => { ); expect(document.querySelector('.rc-trigger-popup')).toHaveClass('bamboo'); - expect(document.querySelector('.rc-trigger-popup-unique-container')).toHaveClass( - 'bamboo', - ); + expect( + document.querySelector('.rc-trigger-popup-unique-container'), + ).toHaveClass('bamboo'); // Check that arrow position CSS variables are set - const uniqueContainer = document.querySelector('.rc-trigger-popup-unique-container'); + const uniqueContainer = document.querySelector( + '.rc-trigger-popup-unique-container', + ); const computedStyle = getComputedStyle(uniqueContainer); expect(computedStyle.getPropertyValue('--arrow-x')).not.toBe(''); expect(computedStyle.getPropertyValue('--arrow-y')).not.toBe(''); @@ -262,10 +275,7 @@ describe('Trigger.Unique', () => { options, ) => ({ ...options, - popupClassName: classNames( - options.popupClassName, - 'custom-post-options-class', - ), + popupClassName: clsx(options.popupClassName, 'custom-post-options-class'), }); render( @@ -293,7 +303,7 @@ describe('Trigger.Unique', () => { // Mock useAlign to return our mock onAlign function const useAlignModule = require('../src/hooks/useAlign'); const originalUseAlign = useAlignModule.default; - + jest.spyOn(useAlignModule, 'default').mockImplementation((...args) => { const originalResult = originalUseAlign(...args); // Replace onAlign with our mock @@ -319,7 +329,7 @@ describe('Trigger.Unique', () => { return (
-