Babel 插件: 注释反应
这是一个 Babel 插件, 用于注释具有稳定属性的组件, 用于搜索和选择 完整的故事。这在使用生成组件或重排元素动态名称的反应系统时最为有用.
开始
以 npm 为单位
npm i @fullstory/babel-plugin-annotate-react --save
用纱线
yarn add @fullstory/babel-plugin-annotate-react
Babel 配置
添加数据 @fullstory/babel-plugin-annotate-react 插件到您的 babel 插件配置( 例如 ), (原始内容存档于2013-10-12). bayl.config.js) (中文(简体) ).
module.exports = {
/* ... */
plugins: [
/* ... */
"@fullstory/babel-plugin-annotate-react"
]
};
说明
对于网络上的响应, 属性 data-component, (中文(简体) ), data-element,以及 data-source-file 在每个元素中添加。 对于反应原生,添加的属性是 dataComponent, (中文(简体) ), dataElement,以及 dataSourceFile。 。 。 .
请注意,对于网络和本地,这些属性将显示为 弹匣 在Fullstory应用程序中,由于后端处理。 Fullstory 的终端用户应使用 弹匣。 。 。 .
组件属性名称 React.Component 和元素属性名称 View 或者说 Image 或诸如DOM元素的发射器 Fragment。 。 。 .
示例输入 :
class HelloComponent extends Component {
render() {
return <div>
<h1>Hello world</h1>
</div>;
}
}
联合来文产出实例:
class HelloComponent extends Component {
render() {
return React.createElement("div", {
"data-component": "HelloComponent",
"data-file-source": "hello-component.js"
}, React.createElement("h1", {
null
}, "Hello world"));
}
}
最后意见:
<div data-component="HelloComponent" data-file-source="hello-component.js">
<h1>Hello world</h1>
</div>
配置选项
原生反应
要激活原始支持, 您必须在 native 类似插件选项 :
plugins: [
["@fullstory/babel-plugin-annotate-react", { native: true }]
]
见 以 FullStory 反应本地捕获开始 需要更多信息.
setFSTagName 设置
当使用此库时 移动应用程序的完整故事我们建议设定 setFSTagName: true 生成更好的隐私选择器。 此设置将自动设定 fsTagName 值为 dataElement 或者说 dataComponent,它将缩短隐私选择器,并避免重复命名.
示例
- 在此之前
RCTSafeAreaView[data-source-file="App.tsx"][data-element="SafeAreaView"][data-component="App"] - 之后
App[data-source-file="App.tsx"]
plugins: [
'@fullstory/react-native',
["@fullstory/annotate-react", {
native: true,
setFSTagName: true,
}]
]
QQ 重要: 现有全史隐私选择器和被定义的元素如果应用程序之前没有发布,可能需要更新 setFSTagName: true。 。 。 .
碎片
默认情况下, 插件没有注释 React.Fragments 因为它们可能包含也可能不包含一个最终成为HTML元素的孩子.
一个没有儿童因素的例子:
const componentName = () => (
<Fragment>Hello, there.</Fragment>
);
儿童因素的例子:
const componentName = () => (
<Fragment>
Some text
<h1>Hello, there.</h1> /* This one could be annotated */
<a href="#foo">Click me</a>
</Fragment>
);
如果您希望插件尝试对由碎片( 如果存在) 创建的第一个 HTML 元素进行注释, 请设置 annotate-fragments 旗帜 :
plugins: [
["@fullstory/babel-plugin-annotate-react", { "annotate-fragments": true }]
]
React 编译器
如果您的项目使用 React 编译器,启用 reactCompiler 选项 :
plugins: [
["@fullstory/babel-plugin-annotate-react", { reactCompiler: true }]
]
React 编译器通过取出 JSX 子树来优化功能组件 return 声明为中间缓存变量。 这意味着编译的组件可能看起来像:
// Before React Compiler
function MyComponent() {
return <div className="foo">Hello</div>;
}
// After React Compiler (simplified)
function MyComponent() {
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = <div className="foo">Hello</div>;
$[0] = t0;
}
return t0;
}
无 reactCompiler: true,插件将看到一个非JSX return 语句并全部跳过组件,不产生注释。 启用此选项后, 插件会穿过整个函数机构找到并注释所有 JSX 节点, 不管它们在哪里出现 .
⚠️ 重要内容: 因为反应编译器会调整JSX的发射方式,从而能够 reactCompiler: true 可能改变JSX节点的注释。 在启用此选项后, 选择器和先前在 Fullstory 中定义的已命名元素不保证匹配 。 启用此设置后审查您已有的片段、 度量和定义的元素 .
忽略组件
如果您希望插件跳过某些组件的注释, 请使用 ignoreComponents 选项 :
plugins: [
[
"@fullstory/annotate-react",
{
ignoreComponents:[
// each item must be a string array containing three items: file name, component name, element name
// corresponding to the values for data-source-file, data-component, data-element
// use wild card (*) to match anything
["myBoxComponent.jsx","MyBox","Box"],
["App.jsx", "*", "ThemeProvider"], // use wild-card to match anything
["App.jsx", "App", "*"],
]
}
],
]
应用程序样本
我们有一些样本可以演示这个插件:
添加属性的许多逻辑来源于 变换反应- qa 类 插件 .
获取帮助
请参看我们 知识基础文章 或联系人 移动支持@ fullstory.com 需要额外的帮助.
原生反应
请看我们的 以 FullStory 反应本地捕获开始 指南或电子邮件 移动支持@ fullstory.com 需要额外的帮助.