From 686bfb0eb797498a83e70ab92ca782fd9e318335 Mon Sep 17 00:00:00 2001 From: Jianan Li Date: Mon, 19 May 2025 22:26:02 +0800 Subject: [PATCH 1/5] update react to 19 --- .gitignore | 1 + package.json | 23 ++++++++++++----------- src/Collection.tsx | 8 +++++--- src/SingleObserver/index.tsx | 30 ++++++++++++++---------------- src/index.tsx | 15 +++++++++------ 5 files changed, 41 insertions(+), 36 deletions(-) diff --git a/.gitignore b/.gitignore index 7b872ee..639a874 100644 --- a/.gitignore +++ b/.gitignore @@ -26,6 +26,7 @@ lib es yarn.lock package-lock.json +pnpm-lock.yaml coverage/ .doc # dumi diff --git a/package.json b/package.json index 34449a7..6afa0ab 100644 --- a/package.json +++ b/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" diff --git a/src/Collection.tsx b/src/Collection.tsx index df544a0..0569f44 100644 --- a/src/Collection.tsx +++ b/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> = ({ + children, + onBatchResize, +}) => { const resizeIdRef = React.useRef(0); const resizeInfosRef = React.useRef([]); @@ -51,4 +53,4 @@ export function Collection({ children, onBatchResize }: CollectionProps) { ); return {children}; -} +}; diff --git a/src/SingleObserver/index.tsx b/src/SingleObserver/index.tsx index 47d521a..171de3e 100644 --- a/src/SingleObserver/index.tsx +++ b/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) => React.ReactElement); + // } -function SingleObserver(props: SingleObserverProps, ref: React.Ref) { +const SingleObserver: React.ForwardRefRenderFunction = ( + props, + ref, +) => { const { children, disabled } = props; + const elementRef = React.useRef(null); const onCollectionResize = React.useContext(CollectionContext); @@ -29,15 +33,15 @@ function SingleObserver(props: SingleObserverProps, ref: React.Ref) // ============================= Ref ============================== const canRef = - !isRenderProps && React.isValidElement(mergedChildren) && supportRef(mergedChildren); - const originRef: React.Ref = canRef ? getNodeRef(mergedChildren) : null; + !isRenderProps && React.isValidElement(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) // 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) }, [elementRef.current, disabled]); // ============================ Render ============================ - return ( - canRef - ? React.cloneElement(mergedChildren as any, { - ref: mergedRef, - }) - : mergedChildren - ); -} + return canRef ? React.cloneElement(mergedChildren, { ref: mergedRef }) : mergedChildren; +}; const RefSingleObserver = React.forwardRef(SingleObserver); diff --git a/src/index.tsx b/src/index.tsx index ee252ca..ecbefc1 100644 --- a/src/index.tsx +++ b/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) => React.ReactElement); + children: React.ReactNode | ((ref: React.RefObject) => React.ReactElement); disabled?: boolean; /** Trigger if element resized. Will always trigger when first time render. */ onResize?: OnResize; } -function ResizeObserver(props: ResizeObserverProps, ref: React.Ref) { +const ResizeObserver: React.ForwardRefRenderFunction = ( + 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) } } - return childNodes.map((child, index) => { + return childNodes.map>((child, index) => { const key = child?.key || `${INTERNAL_PREFIX_KEY}-${index}`; return ( {child} ); - }) as any as React.ReactElement; -} + }); +}; const RefResizeObserver = React.forwardRef(ResizeObserver) as React.ForwardRefExoticComponent< React.PropsWithoutRef & React.RefAttributes From b268dd2613e2a5837b8e2653bc11530d6a6ec23b Mon Sep 17 00:00:00 2001 From: Jianan Li Date: Mon, 19 May 2025 22:28:06 +0800 Subject: [PATCH 2/5] update react to 19 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6afa0ab..12a0223 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "devDependencies": { "@rc-component/father-plugin": "^2.0.2", "@rc-component/np": "^1.0.0", - "@testing-library/react": "^16.3.5", + "@testing-library/react": "^16.3.0", "@types/jest": "^29.5.10", "@types/node": "^22.15.19", "@types/react": "^19.1.4", From b65fd4f7d126e3a6cccd1f5fa5e1ed77a6e0be51 Mon Sep 17 00:00:00 2001 From: Jianan Li Date: Mon, 19 May 2025 22:32:59 +0800 Subject: [PATCH 3/5] update react to 19 --- src/SingleObserver/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/SingleObserver/index.tsx b/src/SingleObserver/index.tsx index 171de3e..89352d9 100644 --- a/src/SingleObserver/index.tsx +++ b/src/SingleObserver/index.tsx @@ -107,7 +107,11 @@ const SingleObserver: React.ForwardRefRenderFunction(mergedChildren, { ref: mergedRef }) : mergedChildren; + return canRef ? ( + React.cloneElement(mergedChildren, { ref: mergedRef }) + ) : ( + <>{mergedChildren} + ); }; const RefSingleObserver = React.forwardRef(SingleObserver); From 8838f65700f9db035556c36c28557385b1342a14 Mon Sep 17 00:00:00 2001 From: Jianan Li Date: Mon, 19 May 2025 22:34:28 +0800 Subject: [PATCH 4/5] update react to 19 --- src/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index ecbefc1..238ec02 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -48,14 +48,14 @@ const ResizeObserver: React.ForwardRefRenderFunction>((child, index) => { + return childNodes.map((child, index) => { const key = child?.key || `${INTERNAL_PREFIX_KEY}-${index}`; return ( {child} ); - }); + }) as unknown as React.ReactElement; }; const RefResizeObserver = React.forwardRef(ResizeObserver) as React.ForwardRefExoticComponent< From 58cbf7b5389f42dd160a7e66b9fd99f897f1fe86 Mon Sep 17 00:00:00 2001 From: Jianan Li Date: Mon, 19 May 2025 22:36:47 +0800 Subject: [PATCH 5/5] update react to 19 --- package.json | 1 - tests/setup.js | 4 +--- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/package.json b/package.json index 12a0223..22601d1 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,6 @@ "cross-env": "^7.0.2", "dumi": "^2.0.0", "enzyme": "^3.0.0", - "enzyme-adapter-react-16": "^1.15.6", "enzyme-to-json": "^3.4.0", "father": "^4.0.0", "gh-pages": "^6.1.0", diff --git a/tests/setup.js b/tests/setup.js index a7a6bb2..3f1978b 100644 --- a/tests/setup.js +++ b/tests/setup.js @@ -1,8 +1,6 @@ const Enzyme = require('enzyme'); -const Adapter = require('enzyme-adapter-react-16'); -const { _rs: onResize } = require('../src/utils/observerUtil'); -Enzyme.configure({ adapter: new Adapter() }); +const { _rs: onResize } = require('../src/utils/observerUtil'); Object.assign(Enzyme.ReactWrapper.prototype, { findObserver(index = 0) {