improve

Author: MrWangJustToDo

chrome/public/bundle/detector.js

@@ -1,3 +1,5 @@
+import { getElementName, isValidElement } from "./utils";
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const KnownType = {
   Object: true,
@@ -20,6 +22,7 @@ const KnownType = {
   RegExp: true,
   Element: true,
   ReadError: true,
+  ReactElement: true,
 };
 
 export type NodeValue = {
@@ -54,6 +57,10 @@ const valueToIdMap = new Map<any, number>();
 let cacheMap = new WeakMap<any, NodeValue>();
 
 const getType = (value: any): NodeValue["t"] => {
+  if (isValidElement(value)) {
+    return "ReactElement";
+  }
+
   if (isInBrowser && value && value instanceof Element) {
     return "Element";
   }
@@ -82,7 +89,8 @@ const isObject = (value: NodeValue["t"]) => {
     value === "Iterable" ||
     value === "Map" ||
     // value === "Promise" ||
-    value === "Set"
+    value === "Set" ||
+    value === "ReactElement"
   );
 };
 
@@ -91,6 +99,16 @@ const getTargetNode = (value: any, type: NodeValue["t"], deep = 3): NodeValue =>
 
   const currentId = existId || id++;
 
+  let n = undefined;
+
+  if (type === 'Object' && typeof value?.constructor === "function" && value.constructor !== emptyConstructor && value.constructor.name) {
+    n = value.constructor.name;
+  }
+
+  if (type === 'ReactElement') {
+    n = getElementName(value);
+  }
+
   idToValueMap.set(currentId, value);
 
   valueToIdMap.set(value, currentId);
@@ -99,6 +117,7 @@ const getTargetNode = (value: any, type: NodeValue["t"], deep = 3): NodeValue =>
     return {
       i: currentId,
       t: type,
+      n,
       v: undefined,
       e: true,
       l: false,
@@ -137,21 +156,21 @@ const getTargetNode = (value: any, type: NodeValue["t"], deep = 3): NodeValue =>
         e: true,
       };
     } else if (type === "Object") {
-      if (typeof value?.constructor === "function" && value.constructor !== emptyConstructor && value.constructor.name) {
-        return {
-          i: currentId,
-          t: type,
-          n: value.constructor.name,
-          v: Object.keys(value).reduce((acc, key) => {
-            acc[key] = getNode(value[key], deep - 1);
-            return acc;
-          }, {}),
-          e: true,
-        };
-      }
       return {
         i: currentId,
         t: type,
+        n,
+        v: Object.keys(value).reduce((acc, key) => {
+          acc[key] = getNode(value[key], deep - 1);
+          return acc;
+        }, {}),
+        e: true,
+      };
+    } else if (type === 'ReactElement') {
+      return {
+        i: currentId,
+        t: type,
+        n,
         v: Object.keys(value).reduce((acc, key) => {
           acc[key] = getNode(value[key], deep - 1);
           return acc;

chrome/public/bundle/hook.js

@@ -1,5 +1,28 @@
+/* eslint-disable max-lines */
 /* eslint-disable @typescript-eslint/no-unsafe-function-type */
-import { HOOK_TYPE } from "@my-react/react-shared";
+import { type MyReactFiberNode, type MyReactFiberNodeDev, type MyReactHookNode, type MyReactHookNodeDev } from "@my-react/react-reconciler";
+import {
+  Consumer,
+  Context,
+  ForwardRef,
+  Fragment,
+  HOOK_TYPE,
+  KeepLive,
+  Lazy,
+  Memo,
+  Element,
+  merge,
+  Portal,
+  Profiler,
+  Provider,
+  Scope,
+  ScopeLazy,
+  ScopeSuspense,
+  Strict,
+  Suspense,
+  TYPEKEY,
+  Comment,
+} from "@my-react/react-shared";
 
 import { getNode, getNodeForce } from "./data";
 import { inspectHooksOfFiber, type HooksTree } from "./hook";
@@ -14,10 +37,13 @@ import type {
   MixinMyReactFunctionComponent,
   MixinMyReactObjectComponent,
   MyReactElement,
+  MyReactElementNode,
+  MyReactObjectComponent,
   createContext,
+  forwardRef,
   lazy,
+  memo,
 } from "@my-react/react";
-import type { MyReactFiberNode, MyReactFiberNodeDev, MyReactHookNode, MyReactHookNodeDev } from "@my-react/react-reconciler";
 
 export const typeKeys: number[] = [];
 
@@ -183,6 +209,133 @@ export const getFiberName = (fiber: MyReactFiberNodeDev) => {
   return `unknown`;
 };
 
+export const isValidElement = (element?: MyReactElementNode | any): element is MyReactElement => {
+  return typeof element === "object" && !Array.isArray(element) && element !== null && element?.[TYPEKEY] === Element;
+};
+
+export const getMockFiberFromElement = (element: MyReactElement): MyReactFiberNodeDev => {
+  let nodeType = NODE_TYPE.__initial__;
+
+  let elementType = element.type;
+
+  const finalElement = element;
+
+  const pendingProps = element.props;
+
+  const ref: MyReactElement["ref"] | null = element.ref ?? undefined;
+
+  const key: MyReactElement["key"] | null = element.key ?? undefined;
+
+  if (typeof elementType === "object" && elementType !== null) {
+    const typedElementType = elementType as MyReactObjectComponent;
+    switch (typedElementType[TYPEKEY]) {
+      case Provider:
+        nodeType = merge(nodeType, NODE_TYPE.__provider__);
+        break;
+      // support react 19 context api
+      case Context:
+        nodeType = merge(nodeType, NODE_TYPE.__context__);
+        break;
+      case Consumer:
+        nodeType = merge(nodeType, NODE_TYPE.__consumer__);
+        break;
+      case Memo:
+        nodeType = merge(nodeType, NODE_TYPE.__memo__);
+        elementType = (typedElementType as ReturnType<typeof memo>).render;
+        break;
+      case ForwardRef:
+        nodeType = merge(nodeType, NODE_TYPE.__forwardRef__);
+        elementType = (typedElementType as ReturnType<typeof forwardRef>).render;
+        break;
+      case Lazy:
+        nodeType = merge(nodeType, NODE_TYPE.__lazy__);
+        break;
+      default:
+        throw new Error(`[@my-react/react] invalid object element type "${typedElementType[TYPEKEY]?.toString()}"`);
+    }
+    if (typeof elementType === "object") {
+      if (elementType[TYPEKEY] === ForwardRef) {
+        nodeType = merge(nodeType, NODE_TYPE.__forwardRef__);
+        elementType = (elementType as ReturnType<typeof forwardRef>).render;
+      }
+      if (elementType[TYPEKEY] === Provider) {
+        nodeType = merge(nodeType, NODE_TYPE.__provider__);
+      }
+      if (elementType[TYPEKEY] === Context) {
+        nodeType = merge(nodeType, NODE_TYPE.__context__);
+      }
+      if (elementType[TYPEKEY] === Consumer) {
+        nodeType = merge(nodeType, NODE_TYPE.__consumer__);
+      }
+    }
+    if (typeof elementType === "function") {
+      if (elementType.prototype?.isMyReactComponent) {
+        nodeType = merge(nodeType, NODE_TYPE.__class__);
+      } else {
+        nodeType = merge(nodeType, NODE_TYPE.__function__);
+      }
+    }
+  } else if (typeof elementType === "function") {
+    if (elementType.prototype?.isMyReactComponent) {
+      nodeType = merge(nodeType, NODE_TYPE.__class__);
+    } else {
+      nodeType = merge(nodeType, NODE_TYPE.__function__);
+    }
+  } else if (typeof elementType === "symbol") {
+    switch (elementType) {
+      case KeepLive:
+        nodeType = merge(nodeType, NODE_TYPE.__keepLive__);
+        break;
+      case Fragment:
+        nodeType = merge(nodeType, NODE_TYPE.__fragment__);
+        break;
+      case Strict:
+        nodeType = merge(nodeType, NODE_TYPE.__strict__);
+        break;
+      case Suspense:
+        nodeType = merge(nodeType, NODE_TYPE.__suspense__);
+        break;
+      case Scope:
+        nodeType = merge(nodeType, NODE_TYPE.__scope__);
+        break;
+      case ScopeLazy:
+        nodeType = merge(nodeType, NODE_TYPE.__scopeLazy__);
+        break;
+      case ScopeSuspense:
+        nodeType = merge(nodeType, NODE_TYPE.__scopeSuspense__);
+        break;
+      case Comment:
+        nodeType = merge(nodeType, NODE_TYPE.__comment__);
+        break;
+      case Portal:
+        nodeType = merge(nodeType, NODE_TYPE.__portal__);
+        break;
+      case Profiler:
+        nodeType = merge(nodeType, NODE_TYPE.__profiler__);
+        break;
+      default:
+        throw new Error(`[@my-react/react] invalid symbol element type "${elementType?.toString()}"`);
+    }
+  } else if (typeof elementType === "string") {
+    nodeType = merge(nodeType, NODE_TYPE.__plain__);
+  } else {
+    nodeType = merge(nodeType, NODE_TYPE.__empty__);
+  }
+
+  const mockFiber = {
+    type: nodeType,
+    elementType: elementType,
+    pendingProps: pendingProps,
+    key: key,
+    ref: ref,
+    _debugElement: finalElement,
+  };
+
+  return mockFiber as unknown as MyReactFiberNodeDev;
+};
+
+export const getElementName = (element: MyReactElement) => `<${getFiberName(getMockFiberFromElement(element))} />`;
+
 export const getHookName = (type: number) => {
   switch (type) {
     case HOOK_TYPE.useReducer:
@@ -276,7 +429,7 @@ const parseHooksTreeToHOOKTree = (node: HooksTree, d: number, force?: boolean):
     return {
       k: id?.toString(),
       i: id,
-      n: name || 'Anonymous',
+      n: name || "Anonymous",
       v: force ? getNodeForce(value) : getNode(value),
       d,
       h: !subHooks.length ? true : false,
@@ -324,9 +477,9 @@ export const getHook = (fiber: MyReactFiberNodeDev, force?: boolean) => {
   if (platform && platform.dispatcher) {
     try {
       return getHookStack(fiber, force);
-    } catch(e) {
+    } catch (e) {
       console.error(e);
-      return getHookNormal(fiber, force);      
+      return getHookNormal(fiber, force);
     }
   } else {
     return getHookNormal(fiber, force);