Remove findDOMNode from rc-mutate-observer

src/MutateObserver.tsx

@@ -1,9 +1,12 @@
-import React from 'react';
-import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
-import { supportRef, useComposeRef } from '@rc-component/util/lib/ref';
-import findDOMNode from '@rc-component/util/lib/Dom/findDOMNode';
+import { getDOM } from '@rc-component/util/lib/Dom/findDOMNode';
 import useEvent from '@rc-component/util/lib/hooks/useEvent';
-import DomWrapper from './wrapper';
+import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
+import {
+  getNodeRef,
+  supportNodeRef,
+  useComposeRef,
+} from '@rc-component/util/lib/ref';
+import React from 'react';
 import type { MutationObserverProps } from './interface';
 import useMutateObserver from './useMutateObserver';
 
@@ -12,28 +15,23 @@ const MutateObserver: React.FC<MutationObserverProps> = props => {
 
   const callback = useEvent(onMutate);
 
-  const wrapperRef = React.useRef<DomWrapper>(null);
-
-  const elementRef = React.useRef<HTMLElement>(null);
+  const elementRef = React.useRef<HTMLElement | SVGElement>(null);
 
-  const canRef = React.isValidElement(children) && supportRef(children);
+  const canRef = supportNodeRef(children);
 
-  const mergedRef = useComposeRef(
-    elementRef,
-    canRef ? (children as any).ref : null,
-  );
+  const mergedRef = useComposeRef(elementRef, getNodeRef(children));
 
-  const [target, setTarget] = React.useState<HTMLElement>(null);
+  const [target, setTarget] = React.useState<HTMLElement | SVGElement>(null);
 
   useMutateObserver(target, callback, options);
 
   // =========================== Effect ===========================
-  // Bind target
   useLayoutEffect(() => {
-    setTarget(
-      findDOMNode(elementRef.current) || findDOMNode(wrapperRef.current),
-    );
-  });
+    // Set target based on the refs
+    if (canRef && elementRef.current) {
+      setTarget(getDOM(elementRef.current));
+    }
+  }, [canRef]);
 
   // =========================== Render ===========================
   if (!children) {
@@ -43,13 +41,9 @@ const MutateObserver: React.FC<MutationObserverProps> = props => {
     return null;
   }
 
-  return (
-    <DomWrapper ref={wrapperRef}>
-      {canRef
-        ? React.cloneElement<any>(children, { ref: mergedRef })
-        : children}
-    </DomWrapper>
-  );
+  return canRef
+    ? React.cloneElement<any>(children, { ref: mergedRef })
+    : children;
 };
 
 export default MutateObserver;

src/useMutateObserver.tsx

@@ -8,7 +8,7 @@ const defaultOptions: MutationObserverInit = {
 };
 
 const useMutateObserver = (
-  nodeOrList: HTMLElement | HTMLElement[],
+  nodeOrList: HTMLElement | HTMLElement[] | SVGElement | SVGElement[],
   callback: MutationCallback,
   options: MutationObserverInit = defaultOptions,
 ) => {

tests/index.test.tsx

@@ -1,8 +1,20 @@
-import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
 import MutateObserver from '../src';
 
+jest.mock('../src/useMutateObserver', () => {
+  const origin = jest.requireActual('../src/useMutateObserver').default;
+  return (...args) => {
+    global.mutateTargetElement = args[0];
+    return origin(...args);
+  };
+});
+
 describe('MutateObserver', () => {
+  beforeEach(() => {
+    global.mutateTargetElement = null;
+  });
+
   it('MutateObserver should support onMutate', () => {
     const fn = jest.fn();
     const Demo: React.FC = () => {
@@ -19,7 +31,11 @@ describe('MutateObserver', () => {
       );
     };
     const { container, unmount } = render(<Demo />);
+
+    // Simulate a click event
     fireEvent.click(container.querySelector('button')!);
+
+    // Check if the callback was triggered
     if ('MutationObserver' in window) {
       expect(fn).toHaveBeenCalled();
     } else {
@@ -28,10 +44,13 @@ describe('MutateObserver', () => {
     unmount();
   });
 
-  it('findDOMNode should not error in React.StrictMode', () => {
+  it('MutateObserver should work without errors in React.StrictMode', () => {
     const fn = jest.fn();
     const buttonRef = React.createRef<HTMLButtonElement>();
+
+    // Mock console.error to ensure no warnings are logged
     const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
     const Demo = React.forwardRef<
       HTMLButtonElement,
       React.HTMLAttributes<HTMLButtonElement>
@@ -52,9 +71,41 @@ describe('MutateObserver', () => {
         </React.StrictMode>
       );
     });
+
     const { container } = render(<Demo ref={buttonRef} />);
+
+    // Simulate a click event
     fireEvent.click(container.querySelector('button')!);
+
+    // Ensure no warnings were logged
     expect(warnSpy).not.toHaveBeenCalled();
+
+    // Restore original console.error
     warnSpy.mockRestore();
   });
+
+  it('should support nativeElement', () => {
+    const Demo = React.forwardRef<
+      {
+        nativeElement: HTMLElement;
+      },
+      object
+    >((props, ref) => {
+      const eleRef = React.useRef<HTMLDivElement>(null);
+      React.useImperativeHandle(ref, () => ({
+        nativeElement: eleRef.current,
+      }));
+      return <div ref={eleRef} className="bamboo" />;
+    });
+
+    const onMutate = jest.fn();
+
+    const { container } = render(
+      <MutateObserver onMutate={onMutate}>
+        <Demo />
+      </MutateObserver>,
+    );
+
+    expect(global.mutateTargetElement).toBe(container.querySelector('.bamboo'));
+  });
 });