Storybook Addon 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 的控件，只需省略该字段即可。