进击之路 - Alan的个人博客

title: “Automatically Append Prefix/Suffix to Storybook Titles” tags:

Build Tools slug: c01acfe4 date: 2022-04-23 11:26:18 summary: “How to auto-append component names to Storybook titles via a custom webpack loader, plus implementation details and usage.”

Storybook is convenient for building component library docs. In one business component library, we use Chinese titles for clarity, but component names are in English. We wanted the component name to appear in the sidebar title too, so English search works. Hence the requirement: automatically append the component name to the title.

Solution

Manual editing — too repetitive for N components, and renames require manual maintenance. Pass.
Built-in options — Storybook offers titlePrefix, which adds a unified prefix per folder, but doesn’t meet our needs. Pass.
Build our own — Storybook builds with webpack and the title definition syntax is predictable, so we wrote a webpack loader to process story files uniformly.

Implementation Outline

@babel supports bidirectional conversion between TSX/JSX and AST. So we can read the file, locate and modify the title, then generate code and continue the build.

Tools used:

@babel/parser — parser to produce AST
@babel/traverse — AST traversal utilities
@babel/generator — generate code from AST
webpack loader — transform target files and emit new code

For customization, the loader exposes appendTitle as a callback, providing the current title and componentName, so consumers can define their own logic. For example:

 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;
  }