perf: uninstall classnames, install clsx

.gitignore

@@ -27,6 +27,7 @@ coverage
 yarn.lock
 /es/
 package-lock.json
+pnpm-lock.yaml
 .doc
 
 # umi

package.json

@@ -43,14 +43,16 @@
     "@rc-component/portal": "^2.0.0",
     "@rc-component/trigger": "^3.0.0",
     "@rc-component/util": "^1.3.0",
-    "classnames": "^2.3.2"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.3",
     "@rc-component/np": "^1.0.3",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^15.0.0",
     "@types/jest": "^29.0.0",
+    "@types/minimatch": "^5.1.2",
+    "@types/node": "^24.5.2",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@umijs/fabric": "^2.5.2",
@@ -63,8 +65,7 @@
     "rc-test": "^7.1.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^5.0.0",
-    "@types/minimatch": "^5.1.2"
+    "typescript": "^5.0.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

src/Mask.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import Portal from '@rc-component/portal';
 import type { PosInfo } from './hooks/useTarget';
 import useId from '@rc-component/util/lib/hooks/useId';
 import type { SemanticName, TourProps } from './interface';
 
-const COVER_PROPS = {
+const COVER_PROPS: React.SVGAttributes<SVGRectElement> = {
   fill: 'transparent',
   pointerEvents: 'auto',
 };
@@ -27,7 +27,7 @@ export interface MaskProps {
   getPopupContainer?: TourProps['getPopupContainer'];
 }
 
-const Mask = (props: MaskProps) => {
+const Mask: React.FC<MaskProps> = props => {
   const {
     prefixCls,
     rootClassName,
@@ -65,7 +65,7 @@ const Mask = (props: MaskProps) => {
       getContainer={getPopupContainer as any}
     >
       <div
-        className={classNames(
+        className={clsx(
           `${prefixCls}-mask`,
           rootClassName,
           tourClassNames?.mask,
@@ -83,12 +83,7 @@ const Mask = (props: MaskProps) => {
         }}
       >
         {showMask ? (
-          <svg
-            style={{
-              width: '100%',
-              height: '100%',
-            }}
-          >
+          <svg style={{ width: '100%', height: '100%' }}>
             <defs>
               <mask id={maskId}>
                 <rect x="0" y="0" {...maskRectSize} fill="white" />

src/Tour.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 
-import Portal from '@rc-component/portal';
 import type { TriggerRef } from '@rc-component/trigger';
 import Trigger from '@rc-component/trigger';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
 import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
@@ -231,7 +230,7 @@ const Tour: React.FC<TourProps> = props => {
         popupStyle={stepStyle}
         popupPlacement={mergedPlacement}
         popupVisible={mergedOpen}
-        popupClassName={classNames(rootClassName, stepClassName)}
+        popupClassName={clsx(rootClassName, stepClassName)}
         prefixCls={prefixCls}
         popup={getPopupElement}
         forceRender={false}
@@ -245,7 +244,7 @@ const Tour: React.FC<TourProps> = props => {
           getContainer={getPopupContainer as any}
           domRef={placeholderRef}
           fallbackDOM={fallbackDOM}
-          className={classNames(
+          className={clsx(
             className,
             rootClassName,
             `${prefixCls}-target-placeholder`,

src/TourStep/DefaultPanel.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { TourStepProps } from '../interface';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
 
 export type DefaultPanelProps = Exclude<TourStepProps, 'closable'> & {
@@ -28,11 +28,10 @@ export default function DefaultPanel(props: DefaultPanelProps) {
     <span className={`${prefixCls}-close-x`}>&times;</span>
   );
   const mergedClosable = !!closable;
-
   return (
-    <div className={classNames(`${prefixCls}-panel`, className)}>
+    <div className={clsx(`${prefixCls}-panel`, className)}>
       <div
-        className={classNames(`${prefixCls}-section`, tourClassNames?.section)}
+        className={clsx(`${prefixCls}-section`, tourClassNames?.section)}
         style={styles?.section}
       >
         {mergedClosable && (
@@ -47,18 +46,18 @@ export default function DefaultPanel(props: DefaultPanelProps) {
           </button>
         )}
         <div
-          className={classNames(`${prefixCls}-header`, tourClassNames?.header)}
+          className={clsx(`${prefixCls}-header`, tourClassNames?.header)}
           style={styles?.header}
         >
           <div
-            className={classNames(`${prefixCls}-title`, tourClassNames?.title)}
+            className={clsx(`${prefixCls}-title`, tourClassNames?.title)}
             style={styles?.title}
           >
             {title}
           </div>
         </div>
         <div
-          className={classNames(
+          className={clsx(
             `${prefixCls}-description`,
             tourClassNames?.description,
           )}
@@ -67,7 +66,7 @@ export default function DefaultPanel(props: DefaultPanelProps) {
           {description}
         </div>
         <div
-          className={classNames(`${prefixCls}-footer`, tourClassNames?.footer)}
+          className={clsx(`${prefixCls}-footer`, tourClassNames?.footer)}
           style={styles?.footer}
         >
           <div className={`${prefixCls}-sliders`}>
@@ -83,10 +82,7 @@ export default function DefaultPanel(props: DefaultPanelProps) {
               : null}
           </div>
           <div
-            className={classNames(
-              `${prefixCls}-actions`,
-              tourClassNames?.actions,
-            )}
+            className={clsx(`${prefixCls}-actions`, tourClassNames?.actions)}
             style={styles?.actions}
           >
             {current !== 0 ? (