feat: compatible for nativeElement (#191)

* chore: update test

* test: add test case

* fix: lint

* test: add test case

Author: zombieJ

.fatherrc.js

@@ -1,9 +1,5 @@
-export default {
-  cjs: 'babel',
-  esm: { type: 'babel', importLibToEs: true },
-  preCommit: {
-    eslint: true,
-    prettier: true,
-  },
-  runtimeHelpers: true,
-};
+import { defineConfig } from 'father';
+
+export default defineConfig({
+  plugins: ['@rc-component/father-plugin'],
+});

.github/workflows/react-component-ci.yml

@@ -15,7 +15,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: '12'
+          node-version: '16'
 
       - name: cache package-lock.json
         uses: actions/cache@v2

package.json

@@ -36,17 +36,19 @@
     "postpublish": "npm run gh-pages",
     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
-    "test": "father test",
-    "coverage": "father test --coverage",
+    "test": "rc-test",
+    "coverage": "rc-test --coverage",
     "now-build": "npm run build"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.7",
     "classnames": "^2.2.1",
-    "rc-util": "^5.27.0",
+    "rc-util": "^5.38.0",
     "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
+    "@rc-component/father-plugin": "^1.0.0",
+    "@testing-library/react": "^12.1.5",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^26.0.6",
     "@types/react": "^16.9.2",
@@ -56,18 +58,18 @@
     "cross-env": "^7.0.2",
     "dumi": "^1.1.12",
     "enzyme": "^3.0.0",
-    "enzyme-adapter-react-16": "^1.0.1",
+    "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.4.0",
-    "father": "^2.13.4",
+    "father": "^4.0.0",
     "gh-pages": "^3.1.0",
     "glob": "^7.1.6",
     "less": "^3.10.3",
     "np": "^6.2.4",
     "prettier": "^2.1.1",
     "pretty-quick": "^3.0.1",
+    "rc-test": "^7.0.15",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "react-test-renderer": "^16.0.0",
     "regenerator-runtime": "^0.13.7"
   },
   "peerDependencies": {

src/SingleObserver/index.tsx

@@ -1,10 +1,10 @@
-import { composeRef, supportRef } from 'rc-util/lib/ref';
-import * as React from 'react';
 import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
-import { observe, unobserve } from '../utils/observerUtil';
+import { supportRef, useComposeRef } from 'rc-util/lib/ref';
+import * as React from 'react';
 import type { ResizeObserverProps } from '..';
-import DomWrapper from './DomWrapper';
 import { CollectionContext } from '../Collection';
+import { observe, unobserve } from '../utils/observerUtil';
+import DomWrapper from './DomWrapper';
 
 export interface SingleObserverProps extends ResizeObserverProps {
   children: React.ReactElement | ((ref: React.RefObject<Element>) => React.ReactElement);
@@ -34,13 +34,15 @@ function SingleObserver(props: SingleObserverProps, ref: React.Ref<HTMLElement>)
     !isRenderProps && React.isValidElement(mergedChildren) && supportRef(mergedChildren);
   const originRef: React.Ref<Element> = canRef ? (mergedChildren as any).ref : null;
 
-  const mergedRef = React.useMemo(
-    () => composeRef<Element>(originRef, elementRef),
-    [originRef, elementRef],
-  );
+  const mergedRef = useComposeRef(originRef, elementRef);
 
   const getDom = () =>
-    findDOMNode<HTMLElement>(elementRef.current) || findDOMNode<HTMLElement>(wrapperRef.current);
+    findDOMNode<HTMLElement>(elementRef.current) ||
+    // Support `nativeElement` format
+    (elementRef.current && typeof elementRef.current === 'object'
+      ? findDOMNode<HTMLElement>((elementRef.current as any)?.nativeElement)
+      : null) ||
+    findDOMNode<HTMLElement>(wrapperRef.current);
 
   React.useImperativeHandle(ref, () => getDom());
 

tests/ref.spec.tsx

@@ -0,0 +1,45 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import ResizeObserver from '../src';
+
+describe('ResizeObserver.ref', () => {
+  it('support nativeElement', () => {
+    const My = React.forwardRef((_, ref) => {
+      const divRef = React.useRef<HTMLDivElement>(null);
+
+      React.useImperativeHandle(ref, () => ({
+        nativeElement: divRef.current,
+      }));
+
+      return <div ref={divRef} className="little" />;
+    });
+
+    const resizeRef = React.createRef<HTMLDivElement>();
+
+    const { container } = render(
+      <ResizeObserver ref={resizeRef}>
+        <My />
+      </ResizeObserver>,
+    );
+
+    expect(resizeRef.current).toEqual(container.querySelector('.little'));
+  });
+
+  it('ignore invalidate forward', () => {
+    const My = React.forwardRef((_, ref) => {
+      React.useImperativeHandle(ref, () => 233);
+
+      return <div className="little" />;
+    });
+
+    const resizeRef = React.createRef<HTMLDivElement>();
+
+    const { container } = render(
+      <ResizeObserver ref={resizeRef}>
+        <My />
+      </ResizeObserver>,
+    );
+
+    expect(resizeRef.current).toEqual(container.querySelector('.little'));
+  });
+});

tsconfig.json

@@ -3,14 +3,20 @@
     "target": "esnext",
     "moduleResolution": "node",
     "baseUrl": "./",
-    "jsx": "preserve",
+    "jsx": "react",
     "declaration": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "paths": {
-      "@/*": ["src/*"],
-      "@@/*": ["src/.umi/*"],
-      "rc-resize-observer": ["src/index.tsx"]
+      "@/*": [
+        "src/*"
+      ],
+      "@@/*": [
+        "src/.umi/*"
+      ],
+      "rc-resize-observer": [
+        "src/index.tsx"
+      ]
     }
   }
-}
+}