From 5f44c31718236a58ee4c664c1ae714a088c9ce3a Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 6 Mar 2020 22:15:34 +0800 Subject: [PATCH] Improve migration for react-typescript-docgen-loader to babel-plugin-react-docgen --- MIGRATION.md | 24 +++++++++++++++++++++++- addons/docs/docs/props-tables.md | 19 +++++++++++++++++++ 2 files changed, 42 insertions(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index e0d7d51e677e..576e5a89382a 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -97,7 +97,29 @@ In earlier versions, we recommended `react-docgen-typescript-loader` (`RDTL`) an As a consequence we've removed `RDTL` from the presets, which is a breaking change. We made this change because `react-docgen` now supports TypeScript natively, and fewer dependencies simplifies things for everybody. -We will be updating this section with migration information as we collect information from our users.In the meantime, if you need to manually configure your setup to add back `react-docgen-typescript-loader`, add the following to your `.storybook/main.js`: +We will be updating this section with migration information as we collect information from our users, and fixing issues as they come up throughout the 6.0 prerelease process. We are cataloging known issues [here](https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/props-tables.md#known-limitations). + +The biggest known issue is https://github.com/reactjs/react-docgen/issues/387, which means that the following common pattern **DOESN'T WORK**: + +```tsx +import React, { FC } from 'react'; +interface IProps { ... }; +const MyComponent: FC = ({ ... }) => ... +``` + +The following workaround is needed: + +```tsx +const MyComponent: FC = ({ ... }: IProps) => ... +``` + +Please upvote https://github.com/reactjs/react-docgen/issues/387 if this is affecting your productivity, or better yet, submit a fix! + +In the meantime, if you're not ready to make the move you have two options: + +1. Pin your to a specific preset version: `preset-create-react-app@1.5.2` or `preset-typescript@1.2.2` + +2. OR: Manually configure your setup to add back `react-docgen-typescript-loader`, add the following to your `.storybook/main.js`: ```js module.exports = { diff --git a/addons/docs/docs/props-tables.md b/addons/docs/docs/props-tables.md index 00ca8ca88e0e..6d72e1342e13 100644 --- a/addons/docs/docs/props-tables.md +++ b/addons/docs/docs/props-tables.md @@ -10,6 +10,7 @@ Storybook Docs automatically generates props tables for components in supported - [Reporting a bug](#reporting-a-bug) - [Known limitations](#known-limitations) - [React](#react) + - [Fully support React.FC](#fully-support-reactfc) - [Vue](#vue) - [Angular](#angular) - [Web components](#web-components) @@ -73,6 +74,24 @@ This package relies on a variety of sub-packages to extract property information SB Docs for React uses `babel-plugin-react-docgen`/`react-docgen` for both JS PropTypes prop tables and, as of 6.0, TypeScript-driven props tables. +#### Fully support React.FC + +The biggest known issue is https://github.com/reactjs/react-docgen/issues/387, which means that the following common pattern **DOESN'T WORK**: + +```tsx +import React, { FC } from 'react'; +interface IProps { ... }; +const MyComponent: FC = ({ ... }) => ... +``` + +The following workaround is needed: + +```tsx +const MyComponent: FC = ({ ... }: IProps) => ... +``` + +Please upvote https://github.com/reactjs/react-docgen/issues/387 if this is affecting your productivity, or better yet, submit a fix! + ### Vue SB Docs for Vue uses `vue-docgen-loader`/`vue-docgen-api` for SFC and JSX components.