refactor: Update rc-util ref func to resolve React 19 warning (#24)

* chore: init

* test: test driven

* fix: ref warning

Author: zombieJ

README.md

@@ -32,7 +32,7 @@ open http://localhost:8000
 ## Usage
 
 ```js | pure
-import Portal from 'rc-portal';
+import Portal from '@rc-component/portal';
 
 const Demo = () => {
   return <Portal open>Hello World</Portal>;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/portal",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "description": "React Portal Component",
   "keywords": [
     "react",
@@ -27,29 +27,29 @@
   ],
   "scripts": {
     "compile": "father build",
-    "prepare": "dumi setup",
     "deploy": "npm run docs:build && npm run docs:deploy",
     "docs:build": "dumi build",
     "docs:deploy": "gh-pages -d docs-dist",
     "lint": "eslint src/ --ext .tsx,.ts",
     "lint:tsc": "tsc -p tsconfig.json --noEmit",
     "now-build": "npm run docs:build",
-    "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
+    "prepare": "dumi setup",
+    "prepublishOnly": "npm run compile && rc-np",
     "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
     "start": "dumi dev",
     "test": "npm run test:server && npm run test:coverage",
-    "test:client": "umi-test --testPathIgnorePatterns=ssr.test.tsx --testPathIgnorePatterns=ssr.test.tsx",
+    "test:client": "rc-test --testPathIgnorePatterns=ssr.test.tsx --testPathIgnorePatterns=ssr.test.tsx",
     "test:coverage": "npm run test:client -- --coverage",
-    "test:server": "umi-test --env=node -- tests/ssr.test.tsx",
+    "test:server": "rc-test --env=node -- tests/ssr.test.tsx",
     "watch": "father dev"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.0",
-    "classnames": "^2.3.2",
-    "rc-util": "^5.24.4"
+    "@rc-component/util": "^1.2.1",
+    "classnames": "^2.3.2"
   },
   "devDependencies": {
-    "@rc-component/father-plugin": "^1.0.0",
+    "@rc-component/father-plugin": "^2.0.2",
+    "@rc-component/np": "^1.0.3",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.0",
     "@types/jest": "^26.0.20",
@@ -62,19 +62,17 @@
     "father": "^4.0.0",
     "gh-pages": "^6.1.1",
     "glob": "^10.0.0",
-    "np": "^5.0.3",
     "prettier": "^2.1.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "typescript": "^5.0.0",
-    "cheerio": "1.0.0-rc.12",
-    "umi-test": "^1.9.7"
+    "rc-test": "^7.1.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.0.0"
   },
   "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "engines": {
-    "node": ">=8.x"
+    "node": ">=12.x"
   }
 }

src/Portal.tsx

@@ -1,12 +1,16 @@
+import canUseDom from '@rc-component/util/lib/Dom/canUseDom';
+import {
+  getNodeRef,
+  supportRef,
+  useComposeRef,
+} from '@rc-component/util/lib/ref';
+import warning from '@rc-component/util/lib/warning';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import canUseDom from 'rc-util/lib/Dom/canUseDom';
-import warning from 'rc-util/lib/warning';
-import { supportRef, useComposeRef } from 'rc-util/lib/ref';
 import OrderContext from './Context';
+import { inlineMock } from './mock';
 import useDom from './useDom';
 import useScrollLocker from './useScrollLocker';
-import { inlineMock } from './mock';
 
 export type ContainerType = Element | DocumentFragment;
 
@@ -109,7 +113,7 @@ const Portal = React.forwardRef<any, PortalProps>((props, ref) => {
   let childRef: React.Ref<any> = null;
 
   if (children && supportRef(children) && ref) {
-    ({ ref: childRef } = children as any);
+    childRef = getNodeRef(children);
   }
 
   const mergedRef = useComposeRef(childRef, ref);

src/useDom.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
-import canUseDom from 'rc-util/lib/Dom/canUseDom';
+import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
+import canUseDom from '@rc-component/util/lib/Dom/canUseDom';
 import OrderContext from './Context';
 import type { QueueCreate } from './Context';
 

src/useScrollLocker.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { updateCSS, removeCSS } from 'rc-util/lib/Dom/dynamicCSS';
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
-import { getTargetScrollBarSize } from 'rc-util/lib/getScrollBarSize';
+import { updateCSS, removeCSS } from '@rc-component/util/lib/Dom/dynamicCSS';
+import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
+import { getTargetScrollBarSize } from '@rc-component/util/lib/getScrollBarSize';
 import { isBodyOverflowing } from './util';
 
 const UNIQUE_ID = `rc-util-locker-${Date.now()}`;

tests/index.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { render } from '@testing-library/react';
+import React from 'react';
 import Portal from '../src';
 
 global.isOverflow = true;
@@ -13,7 +13,7 @@ jest.mock('../src/util', () => {
 });
 
 // Revert `useLayoutEffect` back to real one since we should keep order for test
-jest.mock('rc-util/lib/hooks/useLayoutEffect', () => {
+jest.mock('@rc-component/util/lib/hooks/useLayoutEffect', () => {
   const origin = jest.requireActual('react');
   return origin.useLayoutEffect;
 });
@@ -210,7 +210,8 @@ describe('Portal', () => {
       expect(portalRef.current).toBeFalsy();
     });
 
-    it('not support FC', () => {
+    it('no warning for React 19 ref', () => {
+      const errSpy = jest.spyOn(console, 'error');
       const elementRef = React.createRef<HTMLParagraphElement>();
       const portalRef = React.createRef();
 
@@ -222,8 +223,9 @@ describe('Portal', () => {
         </Portal>,
       );
 
-      expect(elementRef.current).toBeFalsy();
-      expect(portalRef.current).toBeFalsy();
+      expect(errSpy).not.toHaveBeenCalled();
+
+      errSpy.mockRestore();
     });
   });
 

tests/webkit.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Portal from '../src';
-import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
 
 jest.mock('../src/util', () => {
   const origin = jest.requireActual('../src/util');
@@ -12,14 +11,14 @@ jest.mock('../src/util', () => {
 });
 
 // Revert `useLayoutEffect` back to real one since we should keep order for test
-jest.mock('rc-util/lib/hooks/useLayoutEffect', () => {
+jest.mock('@rc-component/util/lib/hooks/useLayoutEffect', () => {
   const origin = jest.requireActual('react');
   return origin.useLayoutEffect;
 });
 
 // Revert `useLayoutEffect` back to real one since we should keep order for test
-jest.mock('rc-util/lib/getScrollBarSize', () => {
-  const origin = jest.requireActual('rc-util/lib/getScrollBarSize');
+jest.mock('@rc-component/util/lib/getScrollBarSize', () => {
+  const origin = jest.requireActual('@rc-component/util/lib/getScrollBarSize');
   return {
     ...origin,