加入直播:美国东部时间周四上午 11 点,Storybook 9 版本发布及 AMA

源代码

显示当前 story 的源代码示例

在 Github 上查看

@mihkeleidast/storybook-addon-source

注意:此插件已弃用。Storybook 自带的文档插件现在已原生支持此功能:https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#added-source-code-panel-to-docs

安装

首先,安装软件包。

npm install --save-dev @mihkeleidast/storybook-addon-source

然后,在 .storybook/main.js 中将其注册为插件。

// .storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  // ...rest of config
  addons: [
    '@storybook/addon-essentials'
    '@mihkeleidast/storybook-addon-source', // 👈 register the addon here
  ],
};

export default config;

然后,在 .storybook/preview.js 中添加装饰器。

// .storybook/preview.ts
import { Preview } from "@storybook/react";

import { withJsx } from '../dist/index.js'

const preview: Preview = {
  decorators: [
    withJsx, // 👈 add the decorator as the first one
    // ... rest of decorators
  ],
};

export default preview;
由...制作
  • mihkeleidast
    mihkeleidast
支持
    React
标签