0%

storybook title自动追加前后缀

sb搭建组件库文档还是挺方便的。当前的一个组件库,是业务组件库,title我们使用中文描述,因为中文表达更为准确,但组件名称毕竟是英文,因此希望在组件文档树上能够体现出来,这样也可以英文检索。于是需求出现了,如何自动将组件名称追加到title上呢。

解决方案

  1. 手动写,N个组件需要手动编写N次,另外如果rename组件,title需要手动维护,pass

  2. sb是否本身提供了口子,sb提供了titlePrefix,但只是解决了,某个文件夹下的title可以增加统一前缀,并不满足当前需求,pass

  3. 以上两个方案不行那就只能自行解决了,因为sb文档采用的webpack构建,且title定义语法很确定,所以决定开发webpack-loader针对stories文件统一处理解决

大致实现

@babel支持针对TSX/JSX的语法树-代码的双向转换,因此只需要读取文件,找到title修改后,再转化为代码继续执行编译打包即可

相关工具如下

  1. @babel/parser- 解析器,生成AST
  2. @babel/traverse-AST节点遍历工具
  3. @babel/generator-根据AST生成代码
  4. webpack-loader-指定文件进行转换,导出新文件

为了方便定制化title实现,loader将appendTitle设计成callback,暴露出当前title和组件name,这样使用方可以自定义实现logic。

比如这样

1
2
3
4
5
6
7
8
9
10
webpackFinal: async (config, {configType}) => {
config.module.rules.push({
test: /\.stories\.(jsx?$|tsx?$)/, use: [{
loader: '@stacker/storybook-webpack-auto-title-loader', options: {
appendTitle: ({title, componentName}) => `${title}-${componentName}`
}
}], include: path.resolve(__dirname, '../src'),
});
return config;
}

插件下载地址:戳这里

写在最后

有了该插件,title就可以自定义控制了。