storybook [功能请求]:在html-vite框架上支持TS 4.9 < typeof meta>语法

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

你的功能请求是否与问题相关?请描述

html 框架上的 MetaStoryObj 类型不支持这种语法:

// ./Button.story.ts
import type { Meta, StoryObj } from '@storybook/html';
import { createButton, type ButtonProps } from './Button';

const meta = {
  title: 'Component',
  render: args => createButton(args),
  //                           ^- Argument of type '({ variant }: ButtonProps) => HTMLButtonElement' is not assignable to parameter of type 'ButtonProps'.ts(2345)
} satisfies Meta<typeof createButton>;

type Story = StoryObj<typeof meta>;

export default meta;

export const Default: Story = {
  args: {
    variant: 'primary',
//  ^- Type '{ variant: string; }' is not assignable to type 'Partial<{ title: string; render: (args: ({ variant }: ButtonProps) => HTMLButtonElement) => HTMLButtonElement; }>'.
  }
}
// ./Button.ts
export type ButtonProps = {
  variant: 'primary' | 'secondary';
}

export function createButton({ variant }: ButtonProps) {
  return `<button class="${variant}">...</button>`;
}

可行的实现方法是使用 ButtonProps 类型,而不是 typeof createButton 注解。

// ./Button.story.ts
import type { Meta, StoryObj } from '@storybook/html';
import { createButton, type ButtonProps } from './Button';

const meta = {
  title: 'Component',
  render: args => createButton(args),
} satisfies Meta<ButtonProps>;

type Story = StoryObj<ButtonProps>;

export default meta;

export const Default: Story = {
  args: {
    variant: 'primary',
  }
}

描述你希望的解决方案

我希望 html 框架中的 MetaStoryObj 类型能从 createButton 函数中推断出类型,以便它能符合 React 和其他框架的实现文档。

描述你考虑过的替代方案

  • 无响应*

你是否能协助将这个功能变为现实?

irlmq6kh

irlmq6kh1#

@shilman@vanessayuenn to prioritize

fsi0uk1n

fsi0uk1n2#

我们没有为Lit和Angular提供这种语法,原因如下:
#20988
然而,除了时间限制(笑),我们支持html渲染器(如preact)使用这种语法。

7lrncoxx

7lrncoxx3#

我们已经在7.0版本中实现了功能冻结,所以我们可以在7.1版本中尽早考虑优先处理这个问题。

相关问题