storybook Codemod to transform CSF JS to TS

wgx48brx  于 6个月前  发布在  其他
关注(0)|答案(3)|浏览(44)

这将允许.stories.mdx生成TS CSF。此外,它还将有助于后续任务,即自动升级到TS4.9 #20836

zpgglvta

zpgglvta1#

请注意,如果我们在TS项目中生成.stories.js文件,main.js stories glob可能无法识别它。同样地,如果我们实现这个功能并生成.stories.ts(x)文件,glob也可能无法识别它。我们应该注意这一点,要么以某种方式将其构建到代码修改中,要么至少添加一些文档:

  • 添加到迁移指南
  • 在代码修改执行后向用户发出警告
iibxawm4

iibxawm42#

我很想将我们所有的故事迁移到TypeScript,甚至开始进行代码修改(而不仅仅是使用vim宏或sed :-D),但我有点犹豫,因为对于TypeScript的最佳实践还不是完全清楚。
我想使用satisfies是个好主意。
假设我们还想支持actions和play函数,这是我目前为Vue3的代码:

import type { ComponentPropsAndSlots, Meta, StoryObj } from "@storybook/vue3";
import { expect } from "@storybook/jest";

import Button from "./Button.vue";

type Args = ComponentPropsAndSlots<typeof Button> & {
  onClick: (...params: Array<unknown>) => unknown;
};

const meta = {
  title: "My Button Component",
  component: Button,
  argTypes: {
    onClick: { action: "click" },
  },
} satisfies Meta<Args>;
export default meta;

type Story = StoryObj<Args>;

export const Default = {
  play: async ({ args }) => {
    await expect(args.onClick).toHaveBeenCalledTimes(0);
  },
} satisfies Story;

文档还说我们应该将"typeof meta传递给StoryObj泛型"(https://storybook.js.org/docs/react/writing-stories/typescript#using-satisfies-for-better-type-safety)
所以我尝试在上面定义type Story = StoryObj<typeof meta>,但这只是导致了故事导出中的类型不匹配。具体来说,args需要在Default上,而args.onClick在play函数中不再存在。

vs3odd8k

vs3odd8k3#

看起来目前TypeScript为故事带来了更多的问题,这是不可接受的,我们应该等待Storybook 8和#23649
现在代码修改要么在更复杂的情况下产生破坏性的TypeScript代码,要么使用很快就会过时的解决方法。

相关问题