update react to 19

.gitignore

@@ -26,6 +26,7 @@ lib
 es
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 coverage/
 .doc
 # dumi

package.json

@@ -41,16 +41,19 @@
     "now-build": "npm run build"
   },
   "dependencies": {
-    "classnames": "^2.2.1",
-    "@rc-component/util": "^1.2.0"
+    "@rc-component/util": "^1.2.0",
+    "classnames": "^2.2.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.2",
-    "@testing-library/react": "^12.1.5",
+    "@rc-component/np": "^1.0.0",
+    "@testing-library/react": "^16.3.5",
     "@types/jest": "^29.5.10",
-    "@types/react-dom": "^18.0.11",
-    "@types/react": "^18.0.28",
+    "@types/node": "^22.15.19",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
     "@umijs/fabric": "^2.0.9",
+    "cheerio": "1.0.0-rc.12",
     "coveralls": "^3.0.6",
     "cross-env": "^7.0.2",
     "dumi": "^2.0.0",
@@ -61,18 +64,16 @@
     "gh-pages": "^6.1.0",
     "glob": "^7.1.6",
     "less": "^4.1.3",
-    "@rc-component/np": "^1.0.0",
     "prettier": "^3.2.5",
     "pretty-quick": "^4.0.0",
     "rc-test": "^7.0.15",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "cheerio": "1.0.0-rc.12",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "regenerator-runtime": "^0.14.0"
   },
   "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "cnpm": {
     "mode": "npm"

src/Collection.tsx

@@ -14,13 +14,15 @@ export interface ResizeInfo {
 export interface CollectionProps {
   /** Trigger when some children ResizeObserver changed. Collect by frame render level */
   onBatchResize?: (resizeInfo: ResizeInfo[]) => void;
-  children?: React.ReactNode;
 }
 
 /**
  * Collect all the resize event from children ResizeObserver
  */
-export function Collection({ children, onBatchResize }: CollectionProps) {
+export const Collection: React.FC<React.PropsWithChildren<CollectionProps>> = ({
+  children,
+  onBatchResize,
+}) => {
   const resizeIdRef = React.useRef(0);
   const resizeInfosRef = React.useRef<ResizeInfo[]>([]);
 
@@ -51,4 +53,4 @@ export function Collection({ children, onBatchResize }: CollectionProps) {
   );
 
   return <CollectionContext.Provider value={onResize}>{children}</CollectionContext.Provider>;
-}
+};

src/SingleObserver/index.tsx

@@ -6,11 +6,15 @@ import { CollectionContext } from '../Collection';
 import { observe, unobserve } from '../utils/observerUtil';
 
 export interface SingleObserverProps extends ResizeObserverProps {
-  children: React.ReactElement | ((ref: React.RefObject<Element>) => React.ReactElement);
+  //
 }
 
-function SingleObserver(props: SingleObserverProps, ref: React.Ref<HTMLElement>) {
+const SingleObserver: React.ForwardRefRenderFunction<HTMLElement, SingleObserverProps> = (
+  props,
+  ref,
+) => {
   const { children, disabled } = props;
+
   const elementRef = React.useRef<Element>(null);
 
   const onCollectionResize = React.useContext(CollectionContext);
@@ -29,15 +33,15 @@ function SingleObserver(props: SingleObserverProps, ref: React.Ref<HTMLElement>)
 
   // ============================= Ref ==============================
   const canRef =
-    !isRenderProps && React.isValidElement(mergedChildren) && supportRef(mergedChildren);
-  const originRef: React.Ref<Element> = canRef ? getNodeRef(mergedChildren) : null;
+    !isRenderProps && React.isValidElement<any>(mergedChildren) && supportRef(mergedChildren);
+
+  const originRef = canRef ? getNodeRef(mergedChildren as any) : null;
 
   const mergedRef = useComposeRef(originRef, elementRef);
 
   const getDomElement = () => {
-    return getDOM( elementRef.current ) as HTMLElement
-  }
-
+    return getDOM(elementRef.current) as HTMLElement;
+  };
 
   React.useImperativeHandle(ref, () => getDomElement());
 
@@ -93,7 +97,7 @@ function SingleObserver(props: SingleObserverProps, ref: React.Ref<HTMLElement>)
 
   // Dynamic observe
   React.useEffect(() => {
-    const currentElement: HTMLElement = getDomElement();
+    const currentElement = getDomElement();
 
     if (currentElement && !disabled) {
       observe(currentElement, onInternalResize);
@@ -103,14 +107,8 @@ function SingleObserver(props: SingleObserverProps, ref: React.Ref<HTMLElement>)
   }, [elementRef.current, disabled]);
 
   // ============================ Render ============================
-  return (
-      canRef
-        ? React.cloneElement(mergedChildren as any, {
-            ref: mergedRef,
-          })
-        : mergedChildren
-  );
-}
+  return canRef ? React.cloneElement<any>(mergedChildren, { ref: mergedRef }) : mergedChildren;
+};
 
 const RefSingleObserver = React.forwardRef(SingleObserver);
 

src/index.tsx

@@ -24,15 +24,18 @@ export type OnResize = (size: SizeInfo, element: HTMLElement) => void;
 export interface ResizeObserverProps {
   /** Pass to ResizeObserver.Collection with additional data */
   data?: any;
-  children: React.ReactNode | ((ref: React.RefObject<any>) => React.ReactElement);
+  children: React.ReactNode | ((ref: React.RefObject<any>) => React.ReactElement<any>);
   disabled?: boolean;
   /** Trigger if element resized. Will always trigger when first time render. */
   onResize?: OnResize;
 }
 
-function ResizeObserver(props: ResizeObserverProps, ref: React.Ref<HTMLElement>) {
+const ResizeObserver: React.ForwardRefRenderFunction<HTMLElement, ResizeObserverProps> = (
+  props,
+  ref,
+) => {
   const { children } = props;
-  const childNodes = typeof children === 'function' ? [children] : toArray(children);
+  const childNodes = typeof children === 'function' ? [children] : toArray(children as any);
 
   if (process.env.NODE_ENV !== 'production') {
     if (childNodes.length > 1) {
@@ -45,15 +48,15 @@ function ResizeObserver(props: ResizeObserverProps, ref: React.Ref<HTMLElement>)
     }
   }
 
-  return childNodes.map((child, index) => {
+  return childNodes.map<React.ReactElement<any>>((child, index) => {
     const key = child?.key || `${INTERNAL_PREFIX_KEY}-${index}`;
     return (
       <SingleObserver {...props} key={key} ref={index === 0 ? ref : undefined}>
         {child}
       </SingleObserver>
     );
-  }) as any as React.ReactElement;
-}
+  });
+};
 
 const RefResizeObserver = React.forwardRef(ResizeObserver) as React.ForwardRefExoticComponent<
   React.PropsWithoutRef<ResizeObserverProps> & React.RefAttributes<any>