reactjs / reactjs/react-docgen

Support for compound components

オープン
#775 コメント 2 件 リアクション 4 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

主要言語
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 PolymorphicComponent utility). related: #590
  • detecting that these multiple components are exported through a single Object.assign declaration and reading jsdoc from there

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

まず、TypeScript で推論された props と Object.assign 宣言がどのように処理されるかを確認し、エントリポイントとして PolymorphicComponent の例と関連する issue #590 を使用します。複合エクスポートが検出され、親と子の JSDoc 説明が正しく読み取られれば完了とします。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react, typescript
領域
documentation, tooling
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。