reactjs / reactjs/react-docgen
Support for compound components
オープン
まだ誰も着手していません。
- 主要言語
- TypeScript
- スター
- 3.8k
- フォーク
- 316
- 平均マージ
- 5時間 7分
- マージ済み PR(30日)
- 4
説明
I've been playing around with the latest beta, and while it works well for many cases, I could not get it to work with compound components.
A compound component generally looks like this:
<Compound foo>
<Compound.Child />
</Compound>
I'm defining it as follows:
import React from 'react';
import type { PolymorphicComponent } from '~/utils';
const ParentComponent = React.forwardRef((props, ref) => {
return (/* ... */)
}) as PolymorphicComponent<'div', ParentOwnProps>;
type ParentOwnProps = {
/** foo prop */
foo?: boolean;
};
const ChildComponent = React.forwardRef((props, ref) => {
return (/* ... */)
}) as PolymorphicComponent<'div', ChildOwnProps>;
type ChildOwnProps = {
/** bar prop */
bar?: string;
};
/** description for main component */
export const Compound = Object.assign(ParentComponent, {
/** description for subcomponent */
Child: ChildComponent,
});
export default Compound;
I would guess that react-docgen would need to support a few different things here:
- using the types that are inferred by props (in this case through
PolymorphicComponentutility). related: #590 - detecting that these multiple components are exported through a single
Object.assigndeclaration and reading jsdoc from there
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
まず、TypeScript で推論された props と Object.assign 宣言がどのように処理されるかを確認し、エントリポイントとして PolymorphicComponent の例と関連する issue #590 を使用します。複合エクスポートが検出され、親と子の JSDoc 説明が正しく読み取られれば完了とします。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react, typescript
- 領域
- documentation, tooling
- issue の種類
- 機能追加
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 25/100