Skip to content

Commit 0749d4e

Browse files
li-jia-nanli-jia-nan
authored
perf: uninstall classnames, install clsx (#67)
* perf: uninstall classnames, install clsx * perf: uninstall classnames, install clsx
1 parent e9cb099 commit 0749d4e

File tree

11 files changed

+48
-86
lines changed

11 files changed

+48
-86
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ lib
2727
es
2828
yarn.lock
2929
package-lock.json
30+
pnpm-lock.yaml
3031
coverage/
3132
.doc
3233

‎docs/examples/basic.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import classNames from 'classnames';
1+
import { clsx } from 'clsx';
22
import CSSMotion from 'rc-motion';
33
import React from 'react';
44
import './basic.less';
@@ -164,7 +164,7 @@ class App extends React.Component<{}, DemoState> {
164164
{({ style, className }, ref) => (
165165
<Div
166166
ref={ref}
167-
className={classNames('demo-block', className)}
167+
className={clsx('demo-block', className)}
168168
style={style}
169169
/>
170170
)}
@@ -182,10 +182,7 @@ class App extends React.Component<{}, DemoState> {
182182
onLeaveActive={this.styleGreen}
183183
>
184184
{({ style, className }) => (
185-
<div
186-
className={classNames('demo-block', className)}
187-
style={style}
188-
/>
185+
<div className={clsx('demo-block', className)} style={style} />
189186
)}
190187
</CSSMotion>
191188
</div>
@@ -209,7 +206,7 @@ class App extends React.Component<{}, DemoState> {
209206
>
210207
{({ style, className }) => (
211208
<div
212-
className={classNames('demo-block', className)}
209+
className={clsx('demo-block', className)}
213210
style={style}
214211
/>
215212
)}

‎docs/examples/deadline.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import classNames from 'classnames';
1+
import { clsx } from 'clsx';
22
import CSSMotion from 'rc-motion';
33
import React from 'react';
44
import './basic.less';
@@ -52,7 +52,7 @@ class App extends React.Component<{}, DemoState> {
5252
{({ style, className }, ref) => (
5353
<div
5454
ref={ref}
55-
className={classNames('demo-block', className)}
55+
className={clsx('demo-block', className)}
5656
style={style}
5757
/>
5858
)}

‎docs/examples/list.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import classNames from 'classnames';
1+
import { clsx } from 'clsx';
22
import { CSSMotionList } from 'rc-motion';
33
import React from 'react';
44
import './list.less';
@@ -104,11 +104,8 @@ class App extends React.Component<{}, DemoState> {
104104
{({ key, background, className, style }) => {
105105
return (
106106
<div
107-
className={classNames('list-demo-block', className)}
108-
style={{
109-
...style,
110-
background,
111-
}}
107+
className={clsx('list-demo-block', className)}
108+
style={{ ...style, background }}
112109
>
113110
<span>{key}</span>
114111
</div>

‎docs/examples/provider.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import classNames from 'classnames';
1+
import { clsx } from 'clsx';
22
import CSSMotion, { Provider } from 'rc-motion';
33
import React from 'react';
44
import './basic.less';
@@ -38,7 +38,7 @@ export default () => {
3838
<>
3939
<div
4040
ref={ref}
41-
className={classNames('demo-block', className)}
41+
className={clsx('demo-block', className)}
4242
style={style}
4343
/>
4444
<ul>

‎docs/examples/ssr.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import classNames from 'classnames';
1+
import { clsx } from 'clsx';
22
import CSSMotion from 'rc-motion';
33
import { genCSSMotion } from 'rc-motion/es/CSSMotion';
44
import React from 'react';
@@ -27,7 +27,7 @@ const MotionAppear = ({ supportMotion }: MotionAppearProps) => {
2727
{({ style, className }, ref) => (
2828
<div
2929
ref={ref}
30-
className={classNames('demo-block', className)}
30+
className={clsx('demo-block', className)}
3131
style={style}
3232
/>
3333
)}

‎package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,15 @@
4848
},
4949
"dependencies": {
5050
"@rc-component/util": "^1.2.0",
51-
"classnames": "^2.2.1"
51+
"clsx": "^2.1.1"
5252
},
5353
"devDependencies": {
5454
"@rc-component/father-plugin": "^2.0.1",
5555
"@rc-component/np": "^1.0.3",
5656
"@testing-library/jest-dom": "^5.16.4",
5757
"@testing-library/react": "^15.0.7",
58-
"@types/classnames": "^2.2.9",
5958
"@types/jest": "^26.0.8",
59+
"@types/node": "^24.5.2",
6060
"@types/react": "^18.0.0",
6161
"@types/react-dom": "^18.0.0",
6262
"@umijs/fabric": "^2.0.8",
@@ -77,6 +77,9 @@
7777
"react": ">=16.9.0",
7878
"react-dom": ">=16.9.0"
7979
},
80+
"resolutions": {
81+
"@types/minimatch": "5.1.2"
82+
},
8083
"cnpm": {
8184
"mode": "npm"
8285
},

‎src/CSSMotion.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable react/default-props-match-prop-types, react/no-multi-comp, react/prop-types */
22
import { getDOM } from '@rc-component/util/lib/Dom/findDOMNode';
33
import { getNodeRef, supportRef } from '@rc-component/util/lib/ref';
4-
import classNames from 'classnames';
4+
import { clsx } from 'clsx';
55
import * as React from 'react';
66
import { useRef } from 'react';
77
import { Context } from './context';
@@ -228,7 +228,7 @@ export function genCSSMotion(config: CSSMotionConfig) {
228228
motionChildren = children(
229229
{
230230
...mergedProps,
231-
className: classNames(getTransitionName(motionName, status), {
231+
className: clsx(getTransitionName(motionName, status), {
232232
[motionCls]: motionCls && statusSuffix,
233233
[motionName as string]: typeof motionName === 'string',
234234
}),

‎tests/CSSMotion.spec.tsx‎

Lines changed: 21 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
react/prefer-stateless-function, react/no-multi-comp
44
*/
55
import { act, fireEvent, render } from '@testing-library/react';
6-
import classNames from 'classnames';
6+
import { clsx } from 'clsx';
77
import React from 'react';
88
import ReactDOM from 'react-dom';
99
import type { CSSMotionProps } from '../src';
@@ -94,7 +94,7 @@ describe('CSSMotion', () => {
9494
return (
9595
<div
9696
style={style}
97-
className={classNames('motion-box', className)}
97+
className={clsx('motion-box', className)}
9898
/>
9999
);
100100
}}
@@ -173,10 +173,7 @@ describe('CSSMotion', () => {
173173
>
174174
{({ style, className }) => {
175175
return (
176-
<div
177-
style={style}
178-
className={classNames('motion-box', className)}
179-
/>
176+
<div style={style} className={clsx('motion-box', className)} />
180177
);
181178
}}
182179
</CSSMotion>
@@ -219,10 +216,7 @@ describe('CSSMotion', () => {
219216
const genMotion = (props?: CSSMotionProps) => (
220217
<CSSMotion motionName="transition" visible {...props}>
221218
{({ style, className }) => (
222-
<div
223-
style={style}
224-
className={classNames('motion-box', className)}
225-
/>
219+
<div style={style} className={clsx('motion-box', className)} />
226220
)}
227221
</CSSMotion>
228222
);
@@ -248,10 +242,7 @@ describe('CSSMotion', () => {
248242
const genMotion = (props?: CSSMotionProps) => (
249243
<CSSMotion motionName="transition" {...props}>
250244
{({ style, className }) => (
251-
<div
252-
style={style}
253-
className={classNames('motion-box', className)}
254-
/>
245+
<div style={style} className={clsx('motion-box', className)} />
255246
)}
256247
</CSSMotion>
257248
);
@@ -307,7 +298,7 @@ describe('CSSMotion', () => {
307298
<Component
308299
ref={ref}
309300
style={style}
310-
className={classNames('motion-box', className)}
301+
className={clsx('motion-box', className)}
311302
/>
312303
)}
313304
</CSSMotion>,
@@ -362,10 +353,7 @@ describe('CSSMotion', () => {
362353
motionLeave={true}
363354
>
364355
{({ style, className }) => (
365-
<div
366-
style={style}
367-
className={classNames('motion-box', className)}
368-
/>
356+
<div style={style} className={clsx('motion-box', className)} />
369357
)}
370358
</CSSMotion>
371359
</React.StrictMode>
@@ -440,10 +428,7 @@ describe('CSSMotion', () => {
440428
{...props}
441429
>
442430
{({ style, className }) => (
443-
<div
444-
style={style}
445-
className={classNames('motion-box', className)}
446-
/>
431+
<div style={style} className={clsx('motion-box', className)} />
447432
)}
448433
</CSSMotion>
449434
);
@@ -481,7 +466,7 @@ describe('CSSMotion', () => {
481466
const genMotion = (props?: CSSMotionProps) => (
482467
<CSSMotion visible {...props}>
483468
{({ style, className }) => (
484-
<div style={style} className={classNames('motion-box', className)} />
469+
<div style={style} className={clsx('motion-box', className)} />
485470
)}
486471
</CSSMotion>
487472
);
@@ -513,10 +498,7 @@ describe('CSSMotion', () => {
513498
visible={false}
514499
>
515500
{({ style, className }) => (
516-
<div
517-
style={style}
518-
className={classNames('motion-box', className)}
519-
/>
501+
<div style={style} className={clsx('motion-box', className)} />
520502
)}
521503
</CSSMotion>,
522504
);
@@ -547,7 +529,7 @@ describe('CSSMotion', () => {
547529
onAppearPrepare={() => new Promise(() => {})}
548530
>
549531
{({ style, className }) => (
550-
<div style={style} className={classNames('motion-box', className)} />
532+
<div style={style} className={clsx('motion-box', className)} />
551533
)}
552534
</CSSMotion>,
553535
);
@@ -584,10 +566,7 @@ describe('CSSMotion', () => {
584566
onAppearStart={onAppearStart}
585567
>
586568
{({ style, className }) => (
587-
<div
588-
style={style}
589-
className={classNames('motion-box', className)}
590-
/>
569+
<div style={style} className={clsx('motion-box', className)} />
591570
)}
592571
</CSSMotion>
593572
</Provider>
@@ -617,7 +596,7 @@ describe('CSSMotion', () => {
617596
const { container } = render(
618597
<NoCSSTransition motionName="transition">
619598
{({ style, className }) => (
620-
<div style={style} className={classNames('motion-box', className)} />
599+
<div style={style} className={clsx('motion-box', className)} />
621600
)}
622601
</NoCSSTransition>,
623602
);
@@ -636,7 +615,7 @@ describe('CSSMotion', () => {
636615
<div
637616
ref={ref}
638617
style={style}
639-
className={classNames('motion-box', className)}
618+
className={clsx('motion-box', className)}
640619
/>
641620
)}
642621
</RefCSSMotion>,
@@ -704,10 +683,7 @@ describe('CSSMotion', () => {
704683
motionName="bamboo"
705684
>
706685
{({ style, className }) => (
707-
<Component
708-
style={style}
709-
className={classNames('motion-box', className)}
710-
/>
686+
<Component style={style} className={clsx('motion-box', className)} />
711687
)}
712688
</CSSMotion>
713689
);
@@ -747,7 +723,7 @@ describe('CSSMotion', () => {
747723
const { container } = render(
748724
<CSSMotion visible motionName="bamboo" onAppearPrepare={onAppearPrepare}>
749725
{({ style, className }) => (
750-
<div style={style} className={classNames('motion-box', className)} />
726+
<div style={style} className={clsx('motion-box', className)} />
751727
)}
752728
</CSSMotion>,
753729
);
@@ -780,7 +756,7 @@ describe('CSSMotion', () => {
780756
const genMotion = (props?: CSSMotionProps) => (
781757
<CSSMotion forceRender motionName="bamboo" visible={false} {...props}>
782758
{({ style, className }) => (
783-
<div style={style} className={classNames('motion-box', className)} />
759+
<div style={style} className={clsx('motion-box', className)} />
784760
)}
785761
</CSSMotion>
786762
);
@@ -806,7 +782,7 @@ describe('CSSMotion', () => {
806782
{...props}
807783
>
808784
{({ style, className }) => (
809-
<div style={style} className={classNames('motion-box', className)} />
785+
<div style={style} className={clsx('motion-box', className)} />
810786
)}
811787
</CSSMotion>
812788
);
@@ -938,10 +914,7 @@ describe('CSSMotion', () => {
938914
onVisibleChanged={onVisibleChanged}
939915
>
940916
{({ style, className }) => (
941-
<div
942-
style={style}
943-
className={classNames('motion-box', className)}
944-
/>
917+
<div style={style} className={clsx('motion-box', className)} />
945918
)}
946919
</CSSMotion>,
947920
);
@@ -964,10 +937,7 @@ describe('CSSMotion', () => {
964937
onVisibleChanged={onVisibleChanged}
965938
>
966939
{({ style, className }) => (
967-
<div
968-
style={style}
969-
className={classNames('motion-box', className)}
970-
/>
940+
<div style={style} className={clsx('motion-box', className)} />
971941
)}
972942
</CSSMotion>,
973943
);
@@ -990,10 +960,7 @@ describe('CSSMotion', () => {
990960
onVisibleChanged={onVisibleChanged}
991961
>
992962
{({ style, className }) => (
993-
<div
994-
style={style}
995-
className={classNames('motion-box', className)}
996-
/>
963+
<div style={style} className={clsx('motion-box', className)} />
997964
)}
998965
</CSSMotion>
999966
);

0 commit comments

Comments
 (0)