Storybook 擴充套件 Stencil

適用於 Storybook (v8) 的 Stencil 整合。為 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。

在您的 story 中匯入元件

my-component.stories.js

import "./my-component";

擴充套件將處理 Stencil 元件的轉譯，在 stories 檔案中新增所有需要的程式碼（相依性、樣式、自訂元素定義）。這樣一來，**您不需要在 Storybook 的 preview.js 檔案中呼叫 defineCustomElements**，因此您必須將其移除。

注意：您必須匯入所有您想在 stories 中使用的元件，除了已匯入元件的相依性之外。

您可以在 demo 資料夾中看到 story 的範例。

來自 Storybook 的自動化文件

來自 Storybook 的自動化文件仍然顯示元件的不完整資訊，因此您必須在 mdx 檔案中手動使用 ArgTypes 文件區塊。

Meta 物件中的 component 欄位會自動推斷元件的 argTypes，並以元件的**所有**屬性填寫 Controls 表格。如果您只想顯示在 Meta 中定義的 argTypes 的控制項，只需省略該欄位即可。