perf: uninstall classnames, install clsx (#763)

Author: li-jia-nan

.gitignore

@@ -6,6 +6,7 @@
 /yarn-error.log
 /yarn.lock
 /package-lock.json
+pnpm-lock.yaml
 
 # production
 /dist
@@ -29,4 +30,4 @@
 .dumi/
 package-lock.json
 
-bun.lockb
+bun.lockb

package.json

@@ -50,7 +50,8 @@
   },
   "dependencies": {
     "@rc-component/async-validator": "^5.0.3",
-    "@rc-component/util": "^1.1.0"
+    "@rc-component/util": "^1.3.0",
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.1",

src/Form.tsx

@@ -14,7 +14,8 @@ import type { FormContextProps } from './FormContext';
 import FormContext from './FormContext';
 import { isSimilar } from './utils/valueUtil';
 import ListContext from './ListContext';
-import BatchUpdate, { BatchTask, type BatchUpdateRef } from './BatchUpdate';
+import type { BatchTask, BatchUpdateRef } from './BatchUpdate';
+import BatchUpdate from './BatchUpdate';
 
 type BaseFormProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'children'>;
 
@@ -185,7 +186,7 @@ const Form: React.ForwardRefRenderFunction<FormRef, FormProps> = (
   }, [fields, formInstance]);
 
   // =========================== Render ===========================
-  const formContextValue = React.useMemo(
+  const formContextValue = React.useMemo<InternalFormInstance>(
     () => ({
       ...(formInstance as InternalFormInstance),
       validateTrigger,

src/List.tsx

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import warning from '@rc-component/util/lib/warning';
-import type { InternalNamePath, NamePath, StoreValue, ValidatorRule, Meta } from './interface';
+import type {
+  InternalNamePath,
+  NamePath,
+  StoreValue,
+  ValidatorRule,
+  Meta,
+  InternalFormInstance,
+} from './interface';
 import FieldContext from './FieldContext';
 import Field from './Field';
 import { move, getNamePath } from './utils/valueUtil';
@@ -40,18 +47,19 @@ function List<Values = any>({
 }: ListProps<Values>) {
   const context = React.useContext(FieldContext);
   const wrapperListContext = React.useContext(ListContext);
-  const keyRef = React.useRef({
-    keys: [],
-    id: 0,
-  });
+  const keyRef = React.useRef({ keys: [], id: 0 });
+
   const keyManager = keyRef.current;
 
-  const prefixName: InternalNamePath = React.useMemo(() => {
+  const prefixName = React.useMemo<InternalNamePath>(() => {
     const parentPrefixName = getNamePath(context.prefixName) || [];
     return [...parentPrefixName, ...getNamePath(name)];
   }, [context.prefixName, name]);
 
-  const fieldContext = React.useMemo(() => ({ ...context, prefixName }), [context, prefixName]);
+  const fieldContext = React.useMemo<InternalFormInstance>(
+    () => ({ ...context, prefixName }),
+    [context, prefixName],
+  );
 
   // List context
   const listContext = React.useMemo<ListContextProps>(
@@ -62,7 +70,7 @@ function List<Values = any>({
         return [keyManager.keys[pathName], namePath.slice(len + 1)];
       },
     }),
-    [prefixName],
+    [keyManager, prefixName],
   );
 
   // User should not pass `children` as other type.

src/useWatch.ts

@@ -18,7 +18,7 @@ type GetGeneric<TForm extends FormInstance> = ReturnPromise<ReturnType<TForm['va
 export function stringify(value: any) {
   try {
     return JSON.stringify(value);
-  } catch (err) {
+  } catch {
     return Math.random();
   }
 }
@@ -119,8 +119,8 @@ function useWatch(
   // ============================= Update =============================
   const triggerUpdate = useEvent((values?: any, allValues?: any) => {
     const watchValue = options.preserve
-      ? allValues ?? getFieldsValue(true)
-      : values ?? getFieldsValue();
+      ? (allValues ?? getFieldsValue(true))
+      : (values ?? getFieldsValue());
 
     const nextValue =
       typeof dependencies === 'function'

tests/common/InfoField.tsx

@@ -17,18 +17,17 @@ const InfoField: React.FC<InfoFieldProps> = ({ children, ...props }) => (
   <Field {...props}>
     {(control, info) => {
       const { errors, warnings, validating } = info;
-
       return (
-        <div className='field'>
+        <div className="field">
           {children ? React.cloneElement(children, control) : <Input {...control} />}
           <ul className="errors">
             {errors.map((error, index) => (
-              <li key={index}>{error}</li>
+              <li key={`error-${index}`}>{error}</li>
             ))}
           </ul>
           <ul className="warnings">
             {warnings.map((warning, index) => (
-              <li key={index}>{warning}</li>
+              <li key={`warning-${index}`}>{warning}</li>
             ))}
           </ul>
           {validating && <span className="validating" />}