discusshelp wanted
Repository metrics
- Stars
- (3,793 stars)
- PR merge metrics
- (PR metrics pending)
Description
问题
因为我在使用 dumi 搭建团队的组件库文档，组件库内有一部分组件是包裹式组件，利用 React.cloneElement 去克隆子节点，然后完成功能，所以导致父组件，需要继承 HTMLElement 的属性。而自动生成会携带大量的属性，这对于使用者来说是不可接受的。
interface A extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
a: string;
}
尝试的方案
我尝试对这种场景进行修改，一开始我想给 API 增加一个 ignoreattrs 属性，但 md 文件似乎不支持数组属性。会直接解析成文本。
所以我只能将这个属性改成字符串属性，用,分割，因为我要忽略大量的属性，所以不想在 md 中直接写入属性名，那样会导致md文件可读性变差，所以我声明了一个替换符号，名为 HTMLATTRS，整体效果如下
<API id="Foo" ignoreattrs="HTMLATTRS"></API>
然后我增加了一个 rehypeIngoreAttrs.ts 的插件，插件传入 extraRehypePlugins 配置中，作用是替换 md 文件中的简写字符串
实现如下：
然后我修改了 builtins/API 的代码，在表格渲染中对忽略的属性进行了过滤
疑惑
- 我不太清楚
transform/markdown的执行时机，从目前的情况来看，他只在我变动 md 文件的时候才会执行，所以我不能确保上述方案能否正常使用。而且启动时会出现属性解析中请稍后的提示，等待属性解析完成后，页面会惹更新，也没有触发markdown的解析。 - 在写
rehypeIngoreAttrs插件时，我注意到node.properties是一个Record<string, string | number | (string | number)[] ......>属性的，但是设置数组的值会被自动转换为空格分割的字符串，导致builtins/API的实现不够优雅，忽略属性名需要split(',')