@ docritics/ react (英语)
多姆文斯的回放适配器——纤维行走,道具/状态取出,和捆绑插件.
安装
npm install -D @domscribe/react
维特
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { domscribe } from '@domscribe/react/vite';
export default defineConfig({
plugins: [react(), domscribe()],
});
网络软件包
const { DomscribeWebpackPlugin } = require('@domscribe/react/webpack');
// Add to plugins array + add webpack loader rule
// (see @domscribe/transform README for full webpack config)
插件选项
React 插件扩展了基础变换插件选项 runtime 财务报告和审定财务报表 capture 命名空间 :
interface DomscribeReactPluginOptions {
// Base transform options
include?: RegExp;
exclude?: RegExp;
debug?: boolean;
relay?: { autoStart?: boolean; port?: number; host?: string };
overlay?:
| boolean
| { initialMode?: 'collapsed' | 'expanded'; debug?: boolean };
captureStyles?: boolean;
// React-specific
runtime?: DomscribeRuntimeOptions;
capture?: DomscribeReactCaptureOptions;
}
样式抓取( RFC 0001)
captureStyles: true 启用带有一面旗的样式- 抓取级: 构建时间
styleSource 列表和运行时间中的归属 componentStyles
快照(computed-style limit + CSS自定义属性). 这个权力
造型意识代理工作流程—— domscribe.query.bySource 返回时
元素的解析样式,以及 domscribe.verify.* MCP 工具可以计算
编辑后,每个财产三角洲。 默认关闭于v.x.
runtime.captureStyles 独立覆盖运行时间级 .
运行时间选项
| 选项 | 类型 | 默认 | 说明 |
|---|---|---|---|
phase | 1 | 2 | 1 | 地物相门(第1阶段:道具/状态,第2阶段:事件/perf) |
redactPII | boolean | true | 在捕获的数据中修改敏感值 |
blockSelectors | string[] | [] | 将 CSS 选择者排除在捕获之外 |
serialization | SerializationConstraints | undefined | 串行界限(最大深度、最大箭头、最大TotalBytes等) — 见 @domscribe/runtime 读取 |
captureStyles | boolean | false | 运行时级别样式抓取( 设置时覆盖顶级旗帜) |
styleOptions | StyleCaptureOptions | undefined | 样式抓取器调制( allowlist, maxCustomPropertys, maxBytes) |
抓取选项
| 选项 | 类型 | 默认 | 说明 |
|---|---|---|---|
strategy | 'devtools' | 'fiber' | 'best-effort' | 'best-effort' | 捕捉策略. devtools 使用 React DevTools 钩(最可靠), fiber 直接进入纤维树(快), best-effort 尝试多种策略 |
maxTreeDepth | number | 50 | 最大成份树深到穿行 |
includeWrappers | boolean | true | 包含 HOC/memo/forward 组件 |
hookNameResolvers | Record<string, Record<number, string>> | undefined | 将组件名称映射为钩索引为语义名称映射. 键是组件名称,值映射钩索引为名称. 已转换为 Map<string, Map<number, string>> 在运行时间. |
胡克州采掘业
反应适配器通过检查每个钩的结构来分类钩子 memoizedState 并应用智能提取:
- 效果钩 (单位:千美元)
useEffect, (中文(简体) ),useLayoutEffect已经 不包括 从捕获状态——它们只包含内部调度数据({tag, create, destroy, deps}),而不是应用程序状态. - 备忘录/召回钩 (单位:千美元)
useMemo, (中文(简体) ),useCallback仅返回 缓存值 ——依赖数组被丢弃. - 参考钩 (单位:千美元)
useRef)作为{current: value}。 。 。 . - 国家/减少的钩子 (单位:千美元)
useState, (中文(简体) ),useReducer)被俘虏为-s.
Hooks根据推断类型使用语义名称: state_0, (中文(简体) ), ref_0, (中文(简体) ), memo_0, (中文(简体) ), unknown_0。 。 。 .
子路径导出
@domscribe/react/vite——带有回放适配器的Vite插件@domscribe/react/webpack——带回放适配器的Webpack插件@domscribe/react/auto-init自动启动模块
部分 多写 单相机 驾照:麻省理工.