From 356a5477deeaa109ce82c32a1328e2a67ad64f68 Mon Sep 17 00:00:00 2001
From: robertpanvip <robertpanvip@163.com>
Date: Wed, 18 Dec 2024 17:41:50 +0800
Subject: [PATCH 1/7] Create Ref

---
 src/SingleObserver/Ref | 94 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 src/SingleObserver/Ref

diff --git a/src/SingleObserver/Ref b/src/SingleObserver/Ref
new file mode 100644
index 0000000..4d75a97
--- /dev/null
+++ b/src/SingleObserver/Ref
@@ -0,0 +1,94 @@
+import * as React from "react";
+import HTMLComment from "./HTMLComment";
+
+export interface RefProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+function updateRef(
+  node: Element | Text | null,
+  ref: React.ForwardedRef<Element | Text | null>
+) {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref) {
+    ref.current = node;
+  }
+}
+
+const RefRender: React.ForwardRefRenderFunction<
+  Element | null | Text,
+  RefProps
+> = (props, ref) => {
+  const commentRef = React.useRef<Comment | null>(null);
+  const commentEndRef = React.useRef<Comment | null>();
+  const contentsRef = React.useRef<Text | Element | null>();
+
+  // 根据注释节点获取目标内容节点
+  const resolveContent = (ele: Comment | null) => {
+    if (ele === null) {
+      return null;
+    }
+    const current = ele.nextSibling!;
+    if (current !== commentEndRef.current) {
+      return current as Text | Element | null;
+    }
+    return null;
+  };
+
+  // 重新分配内容节点的 ref
+  const assignRef = () => {
+    contentsRef.current = resolveContent(commentRef.current!);
+    updateRef(contentsRef.current, ref); // 当 DOM 变化时更新 ref
+  };
+
+  React.useLayoutEffect(() => {
+    const parent = commentRef.current!.parentNode;
+    if (!parent) return () => 0;
+
+    // 创建 `MutationObserver`，监听 DOM 子节点变化
+    const ob = new MutationObserver((mutations) => {
+      if (parent) {
+        mutations.forEach((m) => {
+          m.removedNodes.forEach((node) => {
+            if (node === contentsRef.current) {
+              updateRef(null, ref); // 当 DOM 变化时更新 ref
+              contentsRef.current = null;
+            }
+          });
+          m.addedNodes.forEach(() => {
+            assignRef();
+          });
+        });
+      }
+    });
+    // 监听子节点的变动（但不监听属性变化）
+    ob.observe(parent!, {
+      childList: true,
+      subtree: false,
+      attributes: false,
+    });
+
+    return () => {
+      ob.disconnect(); // 组件卸载时断开观察器
+    };
+  }, [ref]);
+  return (
+    <>
+      <HTMLComment ref={commentRef} data="Ref" />
+      {props.children}
+      <HTMLComment
+        ref={(ref) => {
+          commentEndRef.current = ref;
+          // 初次分配 ref 这时候commentRef 肯定已经有值了
+          assignRef();
+        }}
+        data="Ref"
+      />
+    </>
+  );
+};
+
+// 使用 `forwardRef` 将 RefRender 包装成带 ref 的组件
+const Ref = React.forwardRef(RefRender);
+
+Ref.displayName = "Ref"; // 设置组件的 displayName，方便调试
+export default Ref; // 导出组件

From 1080adbd8b7d3d123acc7e651087b6fdbea22d0f Mon Sep 17 00:00:00 2001
From: robertpanvip <robertpanvip@163.com>
Date: Wed, 18 Dec 2024 17:42:33 +0800
Subject: [PATCH 2/7] Create HTMLComment.tsx

---
 src/SingleObserver/HTMLComment.tsx | 58 ++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/SingleObserver/HTMLComment.tsx

diff --git a/src/SingleObserver/HTMLComment.tsx b/src/SingleObserver/HTMLComment.tsx
new file mode 100644
index 0000000..e59bf80
--- /dev/null
+++ b/src/SingleObserver/HTMLComment.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+
+export interface CommentProps {
+  data?: string;
+}
+
+type ElementLike = {
+  setAttribute: () => boolean;
+  style: object;
+};
+
+const createElement = document.createElement;
+const TagSymbol = `comment__`;
+
+//react 内部是用这个创建节点的 由于react本身不支持创建注释节点 这里hack一下
+document.createElement = function (
+  tagName: string,
+  options?: ElementCreationOptions
+) {
+  if (
+    tagName === "noscript" &&
+    options?.is &&
+    options.is.startsWith(TagSymbol)
+  ) {
+    const regex = new RegExp(`^${TagSymbol}(.*)$`);
+    const match = options?.is.match(regex);
+    if (match) {
+      const data = match[1].trim?.();
+      const comment = document.createComment(data) as unknown as ElementLike;
+      comment.setAttribute = () => true;
+      comment.style = {};
+      return comment as unknown as HTMLElement;
+    }
+  }
+  return createElement.call(this, tagName, options);
+};
+
+function CommentRender(
+  { data = "" }: CommentProps,
+  ref: React.ForwardedRef<null | Comment>
+) {
+  return (
+    <noscript
+      ref={ref as React.ForwardedRef<null | HTMLMetaElement>}
+      is={`${TagSymbol}${data}`}
+    />
+  );
+}
+
+/**支持在react中生成注释节点*/
+const HTMLComment = React.memo(
+  React.forwardRef(CommentRender),
+  (prevProps, next) => prevProps.data === next.data
+);
+
+HTMLComment.displayName = "Comment"; // 设置组件的 displayName，方便调试
+
+export default HTMLComment;

From e4eec9e9cb6272af5c21b95306343acbff53ef7e Mon Sep 17 00:00:00 2001
From: robertpanvip <robertpanvip@163.com>
Date: Wed, 18 Dec 2024 17:42:51 +0800
Subject: [PATCH 3/7] Rename Ref to Ref.tsx

---
 src/SingleObserver/{Ref => Ref.tsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/SingleObserver/{Ref => Ref.tsx} (100%)

diff --git a/src/SingleObserver/Ref b/src/SingleObserver/Ref.tsx
similarity index 100%
rename from src/SingleObserver/Ref
rename to src/SingleObserver/Ref.tsx

From b757319944cfa94662853e378200506005d3b0c0 Mon Sep 17 00:00:00 2001
From: robertpanvip <robertpanvip@163.com>
Date: Wed, 18 Dec 2024 17:50:39 +0800
Subject: [PATCH 4/7] Update index.tsx

---
 src/SingleObserver/index.tsx | 29 ++++++-----------------------
 1 file changed, 6 insertions(+), 23 deletions(-)

diff --git a/src/SingleObserver/index.tsx b/src/SingleObserver/index.tsx
index f7f166e..322c6fc 100644
--- a/src/SingleObserver/index.tsx
+++ b/src/SingleObserver/index.tsx
@@ -1,10 +1,8 @@
-import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
-import { supportRef, useComposeRef, getNodeRef } from 'rc-util/lib/ref';
 import * as React from 'react';
 import type { ResizeObserverProps } from '..';
 import { CollectionContext } from '../Collection';
 import { observe, unobserve } from '../utils/observerUtil';
-import DomWrapper from './DomWrapper';
+import DomRef from './Ref';
 
 export interface SingleObserverProps extends ResizeObserverProps {
   children: React.ReactElement | ((ref: React.RefObject<Element>) => React.ReactElement);
@@ -13,7 +11,7 @@ export interface SingleObserverProps extends ResizeObserverProps {
 function SingleObserver(props: SingleObserverProps, ref: React.Ref<HTMLElement>) {
   const { children, disabled } = props;
   const elementRef = React.useRef<Element>(null);
-  const wrapperRef = React.useRef<DomWrapper>(null);
+  const wrapperRef = React.useRef<Text|Element|null>(null);
 
   const onCollectionResize = React.useContext(CollectionContext);
 
@@ -30,19 +28,8 @@ 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;
 
-  const mergedRef = useComposeRef(originRef, elementRef);
-
-  const getDom = () =>
-    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);
+  const getDom = () => wrapperRef.current;
 
   React.useImperativeHandle(ref, () => getDom());
 
@@ -109,13 +96,9 @@ function SingleObserver(props: SingleObserverProps, ref: React.Ref<HTMLElement>)
 
   // ============================ Render ============================
   return (
-    <DomWrapper ref={wrapperRef}>
-      {canRef
-        ? React.cloneElement(mergedChildren as any, {
-            ref: mergedRef,
-          })
-        : mergedChildren}
-    </DomWrapper>
+    <DomRef ref={wrapperRef}>
+      {mergedChildren}
+    </DomRef>
   );
 }
 

From 2638094e1bfdb4f01741316de808aceff04a4059 Mon Sep 17 00:00:00 2001
From: robertpanvip <robertpanvip@163.com>
Date: Wed, 18 Dec 2024 17:59:59 +0800
Subject: [PATCH 5/7] Update index.tsx

---
 src/SingleObserver/index.tsx | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/SingleObserver/index.tsx b/src/SingleObserver/index.tsx
index 322c6fc..23b1535 100644
--- a/src/SingleObserver/index.tsx
+++ b/src/SingleObserver/index.tsx
@@ -1,3 +1,5 @@
+import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
+import { supportRef, useComposeRef, getNodeRef } from 'rc-util/lib/ref';
 import * as React from 'react';
 import type { ResizeObserverProps } from '..';
 import { CollectionContext } from '../Collection';
@@ -11,7 +13,7 @@ export interface SingleObserverProps extends ResizeObserverProps {
 function SingleObserver(props: SingleObserverProps, ref: React.Ref<HTMLElement>) {
   const { children, disabled } = props;
   const elementRef = React.useRef<Element>(null);
-  const wrapperRef = React.useRef<Text|Element|null>(null);
+  const wrapperRef = React.useRef<Element|Text|null>(null);
 
   const onCollectionResize = React.useContext(CollectionContext);
 
@@ -28,8 +30,19 @@ 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;
 
-  const getDom = () => wrapperRef.current;
+  const mergedRef = useComposeRef(originRef, elementRef);
+
+  const getDom = () =>
+    findDOMNode<HTMLElement>(elementRef.current) ||
+    // Support `nativeElement` format
+    (elementRef.current && typeof elementRef.current === 'object'
+      ? findDOMNode<HTMLElement>((elementRef.current as any)?.nativeElement)
+      : null) ||
+    wrapperRef.current;
 
   React.useImperativeHandle(ref, () => getDom());
 
@@ -95,9 +108,14 @@ function SingleObserver(props: SingleObserverProps, ref: React.Ref<HTMLElement>)
   }, [elementRef.current, disabled]);
 
   // ============================ Render ============================
+if(canRef){
+   return  React.cloneElement(mergedChildren as any, {
+            ref: mergedRef,
+          })
+}
   return (
     <DomRef ref={wrapperRef}>
-      {mergedChildren}
+      { mergedChildren}
     </DomRef>
   );
 }

From 126f66e171f50a62d280b5a0508f70ad3984d3f4 Mon Sep 17 00:00:00 2001
From: robertpanvip <robertpanvip@163.com>
Date: Fri, 20 Dec 2024 11:12:07 +0800
Subject: [PATCH 6/7] Update HTMLComment.tsx

---
 src/SingleObserver/HTMLComment.tsx | 65 ++++++++++++++++++++----------
 1 file changed, 44 insertions(+), 21 deletions(-)

diff --git a/src/SingleObserver/HTMLComment.tsx b/src/SingleObserver/HTMLComment.tsx
index e59bf80..b0712ef 100644
--- a/src/SingleObserver/HTMLComment.tsx
+++ b/src/SingleObserver/HTMLComment.tsx
@@ -9,36 +9,59 @@ type ElementLike = {
   style: object;
 };
 
-const createElement = document.createElement;
 const TagSymbol = `comment__`;
 
-//react 内部是用这个创建节点的 由于react本身不支持创建注释节点 这里hack一下
-document.createElement = function (
-  tagName: string,
-  options?: ElementCreationOptions
-) {
-  if (
-    tagName === "noscript" &&
-    options?.is &&
-    options.is.startsWith(TagSymbol)
+const canUseDom = () => {
+  return !!(
+    typeof window !== "undefined" &&
+    window.document &&
+    window.document.createElement
+  );
+};
+
+function intercept() {
+  const createElement = document.createElement;
+
+  const reset = () => {
+    document.createElement = createElement;
+  };
+
+  //react 内部是用这个创建文本节点的 由于react本身不支持创建注释节点 这里hack一下
+  document.createElement = function (
+    tagName: string,
+    options?: ElementCreationOptions
   ) {
-    const regex = new RegExp(`^${TagSymbol}(.*)$`);
-    const match = options?.is.match(regex);
-    if (match) {
-      const data = match[1].trim?.();
-      const comment = document.createComment(data) as unknown as ElementLike;
-      comment.setAttribute = () => true;
-      comment.style = {};
-      return comment as unknown as HTMLElement;
+    if (
+      tagName === "noscript" &&
+      options?.is &&
+      options.is.startsWith(TagSymbol)
+    ) {
+      const regex = new RegExp(`^${TagSymbol}(.*)$`);
+      const match = options?.is.match(regex);
+      if (match) {
+        const data = match[1].trim?.();
+        const comment = document.createComment(data) as unknown as ElementLike;
+        comment.setAttribute = () => true;
+        comment.style = {};
+        reset();
+        return comment as unknown as HTMLElement;
+      }
     }
-  }
-  return createElement.call(this, tagName, options);
-};
+    return createElement.call(this, tagName, options);
+  };
+}
 
 function CommentRender(
   { data = "" }: CommentProps,
   ref: React.ForwardedRef<null | Comment>
 ) {
+  const mounted = React.useRef(false);
+  if (!mounted.current) {
+    if (canUseDom()) {
+      intercept();
+    }
+    mounted.current = true;
+  }
   return (
     <noscript
       ref={ref as React.ForwardedRef<null | HTMLMetaElement>}

From 551e612bde9c966bec7ca1f33f06c7e10d912c0d Mon Sep 17 00:00:00 2001
From: robertpanvip <robertpanvip@163.com>
Date: Fri, 20 Dec 2024 11:14:19 +0800
Subject: [PATCH 7/7] feat:remove wrapper

---
 src/SingleObserver/DomWrapper.tsx | 14 --------------
 1 file changed, 14 deletions(-)
 delete mode 100644 src/SingleObserver/DomWrapper.tsx

diff --git a/src/SingleObserver/DomWrapper.tsx b/src/SingleObserver/DomWrapper.tsx
deleted file mode 100644
index 83c7646..0000000
--- a/src/SingleObserver/DomWrapper.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-export interface DomWrapperProps {
-  children: React.ReactElement;
-}
-
-/**
- * Fallback to findDOMNode if origin ref do not provide any dom element
- */
-export default class DomWrapper extends React.Component<DomWrapperProps> {
-  render() {
-    return this.props.children;
-  }
-}