umijs/dumi

API增加忽略属性功能的实现方案

Open

#1.644 geöffnet am 6. Mai 2023

Auf GitHub ansehen
 (8 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)JavaScript (1.170 Forks)github user discovery
discusshelp wanted

Repository-Metriken

Stars
 (3.793 Stars)
PR-Merge-Metriken
 (Durchschn. Merge 4h 27m) (21 gemergte PRs in 30 T)

Beschreibung

问题

因为我在使用 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 文件中的简写字符串 实现如下:

image

然后我修改了 builtins/API 的代码,在表格渲染中对忽略的属性进行了过滤

image

疑惑

  1. 我不太清楚 transform/markdown 的执行时机,从目前的情况来看,他只在我变动 md 文件的时候才会执行,所以我不能确保上述方案能否正常使用。而且启动时会出现属性解析中请稍后的提示,等待属性解析完成后,页面会惹更新,也没有触发 markdown 的解析。
  2. 在写 rehypeIngoreAttrs 插件时,我注意到 node.properties 是一个 Record<string, string | number | (string | number)[] ......> 属性的,但是设置数组的值会被自动转换为空格分割的字符串,导致 builtins/API 的实现不够优雅,忽略属性名需要 split(',')

Contributor Guide