@whitesev/utils 2.7.6 → 2.7.7

package/dist/types/src/Utils.d.ts

@@ -15,6 +15,7 @@ import { Vue } from "./Vue";
 import { type ArgsType, type JSTypeNames, type UtilsOwnObject } from "./types/global";
 import type { WindowApiOption } from "./types/WindowApi";
 import { ModuleRaid } from "./ModuleRaid";
+import type { ReactInstance } from "./types/React";
 declare class Utils {
     private windowApi;
     constructor(option?: WindowApiOption);
@@ -529,14 +530,7 @@ declare class Utils {
      * @example
      * Utils.getReactObj(document.querySelector("input"))?.reactProps?.onChange({target:{value:"123"}});
      */
-    getReactObj(element: HTMLElement | Element): {
-        reactFiber?: any;
-        reactProps?: any;
-        reactEvents?: any;
-        reactEventHandlers?: any;
-        reactInternalInstance?: any;
-        reactContainer?: any;
-    };
+    getReactObj(element: HTMLElement | Element): ReactInstance;
     /**
      * 获取对象上的Symbol属性，如果没设置keyName，那么返回一个对象，对象是所有遍历到的Symbol对象
      * @param target 目标对象

package/dist/types/src/types/React.d.ts

@@ -0,0 +1,119 @@
+export declare interface ReactFiberNode {
+	/**
+	 * 指向当前节点在上一次更新时的对应节点。
+	 */
+	alternate: ReactFiberNode;
+	/**
+	 * 指向该 FiberNode 的第一个子节点
+	 */
+	child: ReactFiberNode | null;
+	/**
+	 * 代表子节点上的更新优先级。
+	 */
+	childLanes: number;
+	/**
+	 * 存储节点的依赖信息，用于处理 useEffect 等情况。
+	 */
+	dependencies: any | null;
+	/**
+	 * 大部分情况与 type 相同，某些情况不同，比如 FunctionComponent 使用 React.memo 包裹，表示元素的类型
+	 */
+	elementType: string;
+	/**
+	 * 存储 FiberNode 的标记，表示节点上的各种状态和变化（删除、新增、替换等）。flags 的定义在 packages\react-reconciler\src\ReactFiberFlags.js 文件中，flags 为 number 类型。
+	 */
+	flags: number;
+	/**
+	 * 当前节点在父节点的子节点列表中的索引
+	 */
+	index: number;
+	/**
+	 * 节点的唯一标识符，用于进行节点的 diff 和更新
+	 */
+	key: any | null;
+	/**
+	 * 代表当前节点上的更新优先级。
+	 */
+	lanes: number;
+	/**
+	 * 表示节点上一次渲染的 props 。在完成本次更新之前，memoizedProps 中存储的是上一次渲染时的 props ，用于对比新旧 props 是否发生变化。
+	 */
+	memoizedProps: any;
+	/**
+	 * 类组件保存上次渲染后的 state ，函数组件保存的 hooks 信息。
+	 */
+	memoizedState: any | null;
+	/**
+	 * 表示节点的模式，如 ConcurrentMode 、StrictMode 等。
+	 */
+	mode: number;
+	/**
+	 * 表示即将被应用到节点的 props 。当父组件发生更新时，会将新的 props 存储在 pendingProps 中，之后会被应用到节点。
+	 */
+	pendingProps: any;
+	/**
+	 * 存储 FiberNode 的引用信息，与 React 的 Ref 有关。使用 ref 引用值
+	 */
+	ref: any | null;
+	/**
+	 * 指向该 FiberNode 的父节点
+	 */
+	return: ReactFiberNode | null;
+	/**
+	 * 指向右边第一个兄弟 Fiber 节点
+	 */
+	sibling: ReactFiberNode | null;
+	/**
+	 * FiberNode 对应的真实 DOM 节点
+	 */
+	stateNode: HTMLElement;
+	/**
+	 * 表示节点类型的标记，例如 FunctionComponent 、ClassComponent 等
+	 */
+	tag: number;
+	/**
+	 * 表示元素的类型， 对于 FunctionComponent，指函数本身，对于ClassComponent，指 class，对于 HostComponent，指 DOM 节点 tagName
+	 */
+	type: string;
+	/**
+	 * 用于存储组件的更新状态，比如新的状态、属性或者 context 的变化。通过 updateQueue ，React 可以跟踪组件的更新并在合适的时机执行更新。
+	 */
+	updateQueue: any;
+	[key: string | symbol]: any;
+}
+
+export declare interface ReactProps {
+	$$typeof: symbol;
+	children: (boolean | ReactProps)[] | ReactProps;
+	key: string | null;
+	ref: any;
+	props: ReactProps;
+	type: string;
+	_owner: any;
+	[key: string | symbol]: any;
+}
+
+export declare interface ReactEvents {
+	[key: string | symbol]: any;
+}
+
+export declare interface ReactEventHandlers {
+	[key: string | symbol]: any;
+}
+
+export declare interface ReactInternalInstance {
+	[key: string | symbol]: any;
+}
+
+export declare interface ReactContainer {
+	[key: string | symbol]: any;
+}
+
+export declare interface ReactInstance {
+	reactFiber?: ReactFiberNode;
+	reactProps?: ReactProps;
+	reactEvents?: ReactEvents;
+	reactEventHandlers?: ReactEventHandlers;
+	reactInternalInstance?: ReactInternalInstance;
+	reactContainer?: ReactContainer;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@whitesev/utils",
-  "version": "2.7.6",
+  "version": "2.7.7",
   "type": "module",
   "description": "一个常用的工具库",
   "main": "dist/index.cjs.js",

package/src/Utils.ts

@@ -28,6 +28,7 @@ import {
 import { ModuleRaid } from "./ModuleRaid";
 import { domUtils } from "./DOMUtils";
 import { CommonUtil } from "./CommonUtil";
+import type { ReactInstance } from "./types/React";
 
 class Utils {
 	private windowApi: typeof WindowApi.prototype;
@@ -1337,22 +1338,20 @@ class Utils {
 	 * @example
 	 * Utils.getReactObj(document.querySelector("input"))?.reactProps?.onChange({target:{value:"123"}});
 	 */
-	getReactObj(element: HTMLElement | Element): {
-		reactFiber?: any;
-		reactProps?: any;
-		reactEvents?: any;
-		reactEventHandlers?: any;
-		reactInternalInstance?: any;
-		reactContainer?: any;
-	} {
+	getReactObj(element: HTMLElement | Element): ReactInstance {
 		let result = {};
-		Object.keys(element).forEach((domPropsName) => {
+		if (element == null) {
+			return result;
+		}
+		const keys = Object.keys(element);
+		keys.forEach((domPropsName) => {
 			if (domPropsName.startsWith("__react")) {
-				let propsName = domPropsName.replace(/__(.+)\$.+/i, "$1");
+				const propsName = domPropsName.replace(/__(.+)\$.+/i, "$1");
+				const propsValue = Reflect.get(element, domPropsName);
 				if (propsName in result) {
 					new Error("重复属性 " + domPropsName);
 				} else {
-					(result as any)[propsName] = (element as any)[domPropsName];
+					Reflect.set(result, propsName, propsValue);
 				}
 			}
 		});

package/src/types/React.d.ts

@@ -0,0 +1,119 @@
+export declare interface ReactFiberNode {
+	/**
+	 * 指向当前节点在上一次更新时的对应节点。
+	 */
+	alternate: ReactFiberNode;
+	/**
+	 * 指向该 FiberNode 的第一个子节点
+	 */
+	child: ReactFiberNode | null;
+	/**
+	 * 代表子节点上的更新优先级。
+	 */
+	childLanes: number;
+	/**
+	 * 存储节点的依赖信息，用于处理 useEffect 等情况。
+	 */
+	dependencies: any | null;
+	/**
+	 * 大部分情况与 type 相同，某些情况不同，比如 FunctionComponent 使用 React.memo 包裹，表示元素的类型
+	 */
+	elementType: string;
+	/**
+	 * 存储 FiberNode 的标记，表示节点上的各种状态和变化（删除、新增、替换等）。flags 的定义在 packages\react-reconciler\src\ReactFiberFlags.js 文件中，flags 为 number 类型。
+	 */
+	flags: number;
+	/**
+	 * 当前节点在父节点的子节点列表中的索引
+	 */
+	index: number;
+	/**
+	 * 节点的唯一标识符，用于进行节点的 diff 和更新
+	 */
+	key: any | null;
+	/**
+	 * 代表当前节点上的更新优先级。
+	 */
+	lanes: number;
+	/**
+	 * 表示节点上一次渲染的 props 。在完成本次更新之前，memoizedProps 中存储的是上一次渲染时的 props ，用于对比新旧 props 是否发生变化。
+	 */
+	memoizedProps: any;
+	/**
+	 * 类组件保存上次渲染后的 state ，函数组件保存的 hooks 信息。
+	 */
+	memoizedState: any | null;
+	/**
+	 * 表示节点的模式，如 ConcurrentMode 、StrictMode 等。
+	 */
+	mode: number;
+	/**
+	 * 表示即将被应用到节点的 props 。当父组件发生更新时，会将新的 props 存储在 pendingProps 中，之后会被应用到节点。
+	 */
+	pendingProps: any;
+	/**
+	 * 存储 FiberNode 的引用信息，与 React 的 Ref 有关。使用 ref 引用值
+	 */
+	ref: any | null;
+	/**
+	 * 指向该 FiberNode 的父节点
+	 */
+	return: ReactFiberNode | null;
+	/**
+	 * 指向右边第一个兄弟 Fiber 节点
+	 */
+	sibling: ReactFiberNode | null;
+	/**
+	 * FiberNode 对应的真实 DOM 节点
+	 */
+	stateNode: HTMLElement;
+	/**
+	 * 表示节点类型的标记，例如 FunctionComponent 、ClassComponent 等
+	 */
+	tag: number;
+	/**
+	 * 表示元素的类型， 对于 FunctionComponent，指函数本身，对于ClassComponent，指 class，对于 HostComponent，指 DOM 节点 tagName
+	 */
+	type: string;
+	/**
+	 * 用于存储组件的更新状态，比如新的状态、属性或者 context 的变化。通过 updateQueue ，React 可以跟踪组件的更新并在合适的时机执行更新。
+	 */
+	updateQueue: any;
+	[key: string | symbol]: any;
+}
+
+export declare interface ReactProps {
+	$$typeof: symbol;
+	children: (boolean | ReactProps)[] | ReactProps;
+	key: string | null;
+	ref: any;
+	props: ReactProps;
+	type: string;
+	_owner: any;
+	[key: string | symbol]: any;
+}
+
+export declare interface ReactEvents {
+	[key: string | symbol]: any;
+}
+
+export declare interface ReactEventHandlers {
+	[key: string | symbol]: any;
+}
+
+export declare interface ReactInternalInstance {
+	[key: string | symbol]: any;
+}
+
+export declare interface ReactContainer {
+	[key: string | symbol]: any;
+}
+
+export declare interface ReactInstance {
+	reactFiber?: ReactFiberNode;
+	reactProps?: ReactProps;
+	reactEvents?: ReactEvents;
+	reactEventHandlers?: ReactEventHandlers;
+	reactInternalInstance?: ReactInternalInstance;
+	reactContainer?: ReactContainer;
+}