storybook [Bug]: 8.0.alpha版本的reactDocgen生成的输出与7.x版本不同,

dced5bon  于 5个月前  发布在  React
关注(0)|答案(4)|浏览(70)

react-docgen 生成的文档与 react-docgen-typescript 不同且不完整;一旦 #24165 落地,Storybook 生成的默认文档对于使用 TypeScript 路径别名和枚举的 TypeScript 用户将显著地“糟糕”。
编辑(@valentinpalkovic):

  • Storybook 在与 react-docgen 一起使用时添加了 TypeScript 路径别名支持。
  • 最初由 @csantos1113 在 #24165(评论)中发布。

要重现

  1. 转到 https://stackblitz.com/edit/github-aca5uv-867pnb (注意:路径别名现已支持)
  • 备注:
  • 此示例使用了相当常见的 typescript 路径别名。
  • 它还使用 vite-tsconfig-paths 在 vite 中解析这些路径。
  • 它使用 react-docgen(一旦 React: Set react-docgen to default TS docgen #24165 合并,8.0 版本中将成为默认值)
  • ⚠️ 注意:
  • 文档显示为“未知”
  • “控件”损坏
  • 属性文档丢失
  • 必需的属性丢失
  1. 转到 https://stackblitz.com/edit/github-aca5uv-867pnb
  • 备注:
  • 此示例 使用 typescript 路径别名。它只是相对导入。
  • 它使用 react-docgen(一旦 React: Set react-docgen to default TS docgen #24165 合并,8.0 版本中将成为默认值)
  • ⚠️ 注意:
  • 文档出现
  • 必需的属性出现
  • “控件”对于枚举值仍然损坏
  1. 转到 https://stackblitz.com/edit/github-aca5uv-xws82c
  • 备注:
  • 此示例与 第 1 个示例 具有路径别名和 vite-tsconfig-paths,但它使用 react-docgen-typescript 而不是。
  • 😍 注意:
  • 文档出现
  • 必需的属性出现
  • “控件”对于所有类型甚至枚举值都正常工作
ki1q1bka

ki1q1bka1#

如果我们能在react-docgen解析器中支持webpack和vite的tsconfig路径,那将是非常棒的。WDYT?

gev0vcfq

gev0vcfq2#

reactjs/react-docgen#456相关。
@shilman 我们确实可以尝试提供一个自定义导入器,它处理路径别名,或者有人/我们直接为react-docgen做出贡献。

w46czmvw

w46czmvw3#

至少在Storybook中,通过调整react-docgen的默认解析器,将reactjs/react-docgen#456设置为fixed。它将成为下一个8.0.0-rc.2预发布版本的一部分!

d6kp6zgx

d6kp6zgx4#

react-docgen似乎在我的环境中也无法正常工作:

  • 我有一个monorepo设置,其中包含"ui"(故事书所在的包)和一个"theme"包
  • "theme"包仅包含来自gluestack的组件,它基本上只是一个包含ejected gluestack library的包
  • "ui"包声明了由"theme"组件组成的自己的组件,例如一个按钮
"use client";
import {
  Button as ButtonBase,
  ButtonText,
  ButtonIcon,
  ButtonSpinner,
} from "theme";
import type { ComponentProps } from "react";

export type ButtonProps = { title: string } & Pick<
  ComponentProps<typeof ButtonBase>,
  "onPress" | "variant" | "action" | "size"
> & {
    Icon?: ComponentProps<typeof ButtonIcon>["as"];
    processing?: boolean;
  };
export const Button = ({ title, Icon, processing, ...rest }: ButtonProps) => {
  return (
    <ButtonBase {...rest}>
      <ButtonText>{title}</ButtonText>

      {Icon ? <ButtonIcon as={Icon} /> : null}
      {processing ? <ButtonSpinner /> : null}
    </ButtonBase>
  );
};
  • 故事:
import type { Meta, StoryObj } from "@storybook/react";

import { Button } from "./Button";

export default {
  title: "primitives/Button",
  component: Button,

  parameters: {
 layout
    layout: "centered",
  },

docs/autodocs
  tags: ["autodocs"],
 };

type Story = StoryObj<typeof Button>;

export const Default: Story = {
  args: {
    title: "Button",
  },
};
  • 当我使用"react-docgen"时,我只能看到从TypeScript类型中明确设置的属性:

  • 当我使用"react-docgen-typescript"时,我看到了所有属性:

我不确定这是否类似于reactjs/react-docgen#456的问题或其他问题。

相关问题