在 Svelte 中使用 Storybook 文档

Question

似乎为 Storybook Docs 插件编写自定义文档内容的唯一正确方法是通过 MDX，这意味着它主要用于 React。插件页面明确将 Svelte 列为兼容框架，但似乎没有部署说明。

假设我有一个简单的组件： button.svelte:

<script>
  export let text;
</script>

<button on:click>{text}</button>

以及各自的故事，button.stories.js：

import Button from './button.svelte';

export default {
  title: 'Button',
};

export const button = () => ({
  Component: Button,
  props: {
    text: 'press me!',
  },
});

我将如何使用 Storybook Docs 添加任意降价文档？

Answer 1

首先，确保您的 Storybook Docs 插件设置为通过安装 all required dependencies 来解析 MDX。

yarn add -D react react-is babel-loader

然后您可以将 MDX 文档写在一个单独的文件中，扩展名为 .mdx，embedding your stories 而不是显式地写出来。

在与 button.stories.js 相同的目录中创建一个 ./docs.mdx 文件，其中包含您想要的文档：

import { Story, Preview } from '@storybook/addon-docs/blocks';

# Button

One can write __proper Markdown__ here, as well as embed stories:

<!-- the IDs can be retrieved from the URL when opening a story -->
<Preview>
  <Story id="button--button" />
  <Story id="button--other" />
</Preview>

<!-- or an individual story -->
<Story id="button--flat" />

然后，修改你的button.stories.js如下：

import Button from './button.svelte';
import docs from './docs.mdx';  // add this import

export default {
  title: 'Button',
  parameters: {  // and this parameters section
    docs: {
      page: docs,
    },
  },
};

export const button = () => ({
  Component: Button,
  props: {
    text: 'press me!',
  },
});

// Another story just for demonstration
export const other = () => ({
  Component: Button,
  props: {
    text: 'me too!',
  },
});

Answer 2

要添加到@illright 答案，我只使用 mdx 文件就可以使用它。按照设置更新故事书配置中的正则表达式以匹配 mdx 文件以及 js/ts 文件（如果使用 /\.stories\.([jt]s|mdx)$

）

然后您可以像这样在 mdx 文件中使用 jsx 样式语法定义故事。

import { Story, Preview } from '@storybook/addon-docs/blocks';
import {text, withKnobs} from "@storybook/addon-knobs";
import Avatar from "@common/avatar/Avatar.svelte";

# Button

One can write __proper Markdown__ here, as well as embed stories:

<Meta title="Components/Avatar" decorators={[withKnobs]} />

<Preview>
    <Story name="Normal">
        {{
             Component: Avatar,
             props: {
                 imageUrl: text('Image Url', '/default-profile-image.png'),
                 size: text('Size', '2.35rem'),
             },
         }}
    </Story>    
</Preview>

将来可能会使用精巧的语法，希望您可以将其定义为

<Preview>
    <Story name="Normal">
        <Avatar imageUrl="/default-profile-image.png" size="2.35rem"/>
    </Story>    
</Preview>

在 Svelte 中使用 Storybook 文档

Use Storybook docs with Svelte

javascript

svelte

storybook