Storybook 附加组件 Stencil

用于 Stencil 的 Storybook (v8) 集成。为 ArgTypes 和 Controls 提供正确的自定义元素定义，并处理 HMR。

使用

安装附加组件

npm install storybook-addon-stencil -D

yarn add storybook-addon-stencil -D

pnpm add storybook-addon-stencil -D

在 Storybook 配置中注册附加组件

.storybook/main.js

/** @type { import('@storybook/web-components-vite').StorybookConfig } */
const config = {
    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
    framework: "@storybook/web-components-vite",
    addons: [
        ...,
        {
            name: "storybook-addon-stencil",
            options: {
                stencilOptions: {},
            },
        },
    ],
};
export default config;

如果您需要更改 Stencil 的 transpile 函数的设置，请设置 stencilOptions。

在您的故事中导入组件

my-component.stories.js

import "./my-component";

附加组件将处理 Stencil 组件的转译，在故事文件中添加所有必要的代码（依赖项、样式、自定义元素定义）。这样，您无需在 Storybook 的 preview.js 文件中调用 defineCustomElements，因此您必须将其删除。

注意：您必须导入要在故事中使用的所有组件，除了已导入组件的依赖项之外。

您可以在 demo 文件夹中看到一个故事示例。

Storybook 的自动文档

Storybook 的自动文档仍然显示了关于组件的不完整信息，因此您必须在 mdx 文件中手动使用 ArgTypes 文档块。

Meta 对象中的 component 字段会自动推断出组件的 argTypes，还会用组件的所有属性填充 Controls 表。如果您只想显示 Meta 中定义的 argTypes 的控件，只需省略该字段即可。