feat: support react-docgen-typescript (#223)

Author: fi3ework

.github/workflows/ci.yaml

@@ -32,7 +32,9 @@ jobs:
           fetch-depth: 10
 
       - name: Install Pnpm
-        run: corepack enable
+        run: |
+          npm install -g corepack@latest --force
+          corepack enable
 
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4

packages/builder-rsbuild/src/index.ts

@@ -226,7 +226,9 @@ export const build: ({ options }: BuilderStartOptions) => Promise<Stats> =
       stats = params.stats as Stats
     })
 
-    await Promise.all([rsbuildBuild.build(), previewFiles])
+    const [{ close }] = await Promise.all([rsbuildBuild.build(), previewFiles])
+
+    await close()
     return stats!
   }
 

packages/framework-react/package.json

@@ -52,13 +52,15 @@
     "find-up": "^5.0.0",
     "magic-string": "^0.30.17",
     "react-docgen": "^7.1.0",
+    "react-docgen-typescript": "^2.2.2",
     "resolve": "^1.22.10",
     "storybook-builder-rsbuild": "workspace:*",
     "tsconfig-paths": "^4.2.0"
   },
   "devDependencies": {
     "@rsbuild/core": "^1.1.13",
     "@storybook/types": "8.5.0-beta.8",
+    "@types/react": "^18.3.18",
     "@types/resolve": "^1.20.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",

packages/framework-react/src/plugins/docgen-handlers/actualNameHandler.ts

@@ -0,0 +1,20 @@
+# The code in this directory is copied and modified from [@joshwooding/vite-plugin-react-docgen-typescript](https://github.com/joshwooding/vite-plugin-react-docgen-typescript/tree/bf0ea3a603fb388bc28104c65aea49beb236aa6c) under MIT license.
+
+# @joshwooding/vite-plugin-react-docgen-typescript
+
+[![npm](https://img.shields.io/npm/v/@joshwooding/vite-plugin-react-docgen-typescript.svg)](https://www.npmjs.com/package/@joshwooding/vite-plugin-react-docgen-typescript)
+[![Code style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+
+> A vite plugin to inject react typescript docgen information
+
+ 
+
+### Usage
+
+```ts
+import reactDocgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript'
+
+export default {
+  plugins: [reactDocgenTypescript()],
+}
+```

packages/framework-react/src/plugins/docgen-resolver.ts

@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+interface DefaultExportComponentProps {
+  /** Button color. */
+  color: 'blue' | 'green'
+}
+
+/**
+ * A simple component.
+ */
+const DefaultExportComponent: React.FC<DefaultExportComponentProps> = (
+  props,
+) => <button style={{ backgroundColor: props.color }}>{props.children}</button>
+
+export default DefaultExportComponent

packages/framework-react/src/plugins/react-docgen-typescript/README.md

@@ -0,0 +1,17 @@
+import * as React from 'react'
+
+interface DefaultExportComponentProps {
+  /** Button color. */
+  color: 'blue' | 'green'
+}
+
+/**
+ * A simple component.
+ */
+const DefaultExportComponent: React.FC<DefaultExportComponentProps> = (
+  props,
+) => <button style={{ backgroundColor: props.color }}>{props.children}</button>
+
+DefaultExportComponent.displayName = 'DefaultExportComponentWithDisplayName'
+
+export default DefaultExportComponent

packages/framework-react/src/plugins/react-docgen-typescript/__tests__/__fixtures__/DefaultExport.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+
+interface DefaultPropValueComponentProps {
+  /**
+   * Button color.
+   *
+   * @default blue
+   **/
+  color: 'blue' | 'green'
+
+  /**
+   * Button counter.
+   */
+  counter: number
+
+  /**
+   * Button disabled.
+   */
+  disabled: boolean
+}
+
+/**
+ * Component with a prop with a default value.
+ */
+export const DefaultPropValueComponent: React.FC<
+  DefaultPropValueComponentProps
+> = (props) => (
+  <button disabled={props.disabled} style={{ backgroundColor: props.color }}>
+    {props.counter}
+    {props.children}
+  </button>
+)
+
+DefaultPropValueComponent.defaultProps = {
+  counter: 123,
+  disabled: false,
+}

packages/framework-react/src/plugins/react-docgen-typescript/__tests__/__fixtures__/DefaultExportWithDisplayName.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+
+interface HyphenatedPropNameProps {
+  /** Button color. */
+  'button-color': 'blue' | 'green'
+}
+
+/**
+ * A component with a hyphenated prop name.
+ */
+export const HyphenatedPropNameComponent: React.FC<HyphenatedPropNameProps> = (
+  props,
+) => (
+  <button style={{ backgroundColor: props['button-color'] }}>
+    {props.children}
+  </button>
+)

packages/framework-react/src/plugins/react-docgen-typescript/__tests__/__fixtures__/DefaultPropValue.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+interface MultiPropsComponentProps {
+  /** Button color. */
+  color: 'blue' | 'green'
+
+  /** Button size. */
+  size: 'small' | 'large'
+}
+
+/**
+ * This is a component with multiple props.
+ */
+export const MultiPropsComponent: React.FC<MultiPropsComponentProps> = (
+  props,
+) => <button style={{ backgroundColor: props.color }}>{props.children}</button>

packages/framework-react/src/plugins/react-docgen-typescript/__tests__/__fixtures__/HyphenatedPropName.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+
+interface MultilineDescriptionProps {
+  /** Button color. */
+  color: 'blue' | 'green'
+}
+
+/**
+ * A component with a multiline description.
+ *
+ * Second line.
+ */
+export const MultilineDescriptionComponent: React.FC<
+  MultilineDescriptionProps
+> = (props) => (
+  <button style={{ backgroundColor: props.color }}>{props.children}</button>
+)

packages/framework-react/src/plugins/react-docgen-typescript/__tests__/__fixtures__/MultiProps.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+interface MultilinePropDescriptionComponentProps {
+  /**
+   * This is a multiline prop description.
+   *
+   * Second line.
+   */
+  color: 'blue' | 'green'
+}
+
+/**
+ * A component with multiline prop description.
+ */
+export const MultilinePropDescriptionComponent: React.FC<
+  MultilinePropDescriptionComponentProps
+> = (props) => (
+  <button style={{ backgroundColor: props.color }}>{props.children}</button>
+)

packages/framework-react/src/plugins/react-docgen-typescript/__tests__/__fixtures__/MultilineDescription.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+
+interface SimpleComponentProps {
+  /** Button color. */
+  color: 'blue' | 'green'
+}
+
+/**
+ * A simple component.
+ */
+export const SimpleComponent: React.FC<SimpleComponentProps> = (props) => (
+  <button style={{ backgroundColor: props.color }}>{props.children}</button>
+)

packages/framework-react/src/plugins/react-docgen-typescript/__tests__/__fixtures__/MultilinePropDescription.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+interface SimpleComponentProps {
+  /** Button color. */
+  color: 'blue' | 'green'
+}
+
+/**
+ * A simple component.
+ */
+export const SimpleComponent: React.FC<SimpleComponentProps> = (props) => (
+  <button style={{ backgroundColor: props.color }}>{props.children}</button>
+)
+
+SimpleComponent.displayName = 'SimpleComponentWithDisplayName'

packages/framework-react/src/plugins/react-docgen-typescript/__tests__/__fixtures__/Simple.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+
+/**
+ * A component with only text content wrapped in a div.
+ *
+ * Ref: https://github.com/strothj/react-docgen-typescript-loader/issues/7
+ */
+export const SimpleComponent: React.FC<Record<string, never>> = () => (
+  <div>Test only component</div>
+)