🔨 docgen parsing

[unicornware]

Proposed work

integrating react-docgen-typescript into the project to implement docgen parsing.

the vite dev server creates a plugin container that invokes rollup build hooks just as rollup does. build hook transform is called on each module request and can be used to augment individual modules. the hook receives two arguments: the code to transform (which may already include transformations applied by other plugins), code, and the path to the module, id.

parsing will be performed in the plugin's transform function. id will be parsed for docgen info; code will be updated to include logic that adds a __docgenInfo property (ComponentDoc object) to all components exported from id.

the docgen parser will be created during plugin setup using withCustomConfig.

Success criteria

• transform

Related documents

• vite plugin api
  • universal hooks
  • filtering, include/exclude pattern

[unicornware]

Vite exposes @rollup/pluginutils's createFilter function to encourage Vite specific plugins and integrations to use the
standard include/exclude filtering pattern, which is also used in Vite core itself.

- Filtering, include/exclude pattern

createFilter uses picomatch under the hood. unlike micromatch, picomatch does not support brace expansion.

[unicornware]

update: brace expansion is not needed, so createFilter will be used.

the goal is to support the following use case:

/**
 * @file Storybook Main
 * @module storybook/main
 * @see https://storybook.js.org/docs/react/configure/overview
 */

import docgen from '@flex-development/vite-plugin-react-docgen-typescript'
import type { StorybookViteConfig } from '@storybook/builder-vite'
import * as vite from 'vite'

/**
 * Storybook configuration options.
 * 
 * @const {StorybookViteConfig} config
 */
const config: StorybookViteConfig = {
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
        sourceLoaderOptions: null,
        transcludeMarkdown: true
      }
    },
    '@storybook/addon-controls'
  ],
  core: {
    builder: '@storybook/builder-vite',
    disableTelemetry: true
  },
  framework: {
    name: '@storybook/react'
  },
  stories: [
    '../src/index.stories.mdx',
    '../src/blocks/*.stories.mdx',
    '../src/components/**/**/*.stories.@(mdx|tsx)'
  ],
  typescript: {
    reactDocgen: false
  },
  /**
   * Alters the default Vite configuration.
   *
   * @param {vite.InlineConfig} config - Default Vite configuration
   * @return {vite.InlineConfig} Vite configuration options
   */
  viteFinal(config: vite.InlineConfig): vite.InlineConfig {
    config = vite.mergeConfig(config, {
      plugins: [
        docgen({
          exclude: ['**/*.attrs.{ts,tsx}', '**/*.stories.tsx'],
          include: ['src/**/*.{ts,tsx}'],
        })
      ]
    } as vite.InlineConfig)

    return config
  }
}

export default config

after doing some more research, i realized i may have been a tad confused about the definition of brace expansion 😅

even so, although picomatch doesn't have support for brace expansion, it does have basic support for braces, which is actually enough to support the use case above. this can be seen in the picomatch playground: