Storybook 擴充功能故事覆蓋率面板

一個 Storybook 擴充功能，與 @storybook/addon-coverage 協同工作，以在 Storybook UI 面板中顯示覆蓋率指標

開發腳本

• npm run start 在監看模式下執行 babel 並啟動 Storybook
• npm run build 建置並打包您的擴充功能程式碼

從 TypeScript 切換到 JavaScript

不想使用 TypeScript 嗎？我們提供了一個方便的 eject 命令：npm run eject-ts

這會將所有程式碼轉換為 JS。這是一個破壞性的過程，因此我們建議您在開始編寫任何程式碼之前執行此操作。

包含哪些內容？

擴充功能程式碼位於 src 中。它示範了所有核心擴充功能相關概念。三個 基於 UI 的擴充功能

• src/Tool.tsx
• src/Panel.tsx
• src/Tab.tsx

它們與擴充功能本身一起在 src/manager.ts 中註冊。

管理狀態並與故事互動

• src/withGlobals.ts & src/Tool.tsx 示範如何使用 useGlobals 來管理全域狀態並修改故事的內容。
• src/withRoundTrip.ts & src/Panel.tsx 示範使用通道的雙向通訊。
• src/Tab.tsx 示範如何使用 useParameter 來存取目前故事的參數。

您的擴充功能可能會使用這些模式中的一個或多個。您可以隨意刪除未使用的程式碼。相應地更新 src/manager.ts 和 src/preview.ts。

最後，在 src/constants.ts 中設定您的擴充功能名稱。

打包

擴充功能可以透過多種方式與 Storybook 專案互動。建議您在開始之前熟悉 基本概念。

• Manager 條目用於將 UI 或行為新增至 Storybook 管理 UI。
• Preview 條目用於將 UI 或行為新增至渲染故事的預覽 iframe。
• Presets 用於修改 Storybook 設定，類似於 使用者如何設定其 main.ts 設定。

由於這些地方中的每一個都代表具有不同功能和模組的不同環境，因此也建議您相應地分割和建置您的模組。此擴充功能套件帶有預先設定的 打包設定，支援此分割，您可以隨意修改和擴充它。

您可以在 package.json#bundler 屬性中定義哪些模組與哪些環境匹配

• exportEntries 是使用者可以從他們需要的任何地方手動匯入的模組條目清單。例如，您可能需要讓使用者匯入到其 preview.ts 檔案中的裝飾器，或可用於其 main.ts 檔案中的公用程式函式。
• managerEntries 是僅適用於管理 UI 的模組條目清單。這些模組將被打包為 ESM，並且不包含類型，因為它們大多由 Storybook 直接載入。
• previewEntries 是僅適用於預覽 UI 的模組條目清單。這些模組將被打包為 ESM，並且不包含類型，因為它們大多由 Storybook 直接載入。

Manager 和 preview 條目僅在瀏覽器中使用，因此它們僅輸出 ESM 模組。Export 條目可以在瀏覽器和 Node 中使用，具體取決於它們的使用案例，因此它們同時輸出 ESM 和 CJS 模組。

全域化套件

Storybook 提供了一組預定義的套件，這些套件在管理 UI 和預覽 UI 中可用。在您擴充功能的最終套件中，不應包含這些套件。相反，匯入應保持不變，允許 Storybook 在 Storybook 建置過程中將這些匯入替換為實際套件。

管理員和預覽之間可用的套件清單不同，這就是為什麼 managerEntries 和 previewEntries 之間略有不同的原因。最值得注意的是，react 和 react-dom 會預先綁定在管理員中，但不會在預覽中預先綁定。這表示您的管理條目可以使用 React 來建置 UI，而無需對其進行打包或直接引用它。因此，即使您在生產環境中使用 React，也可以安全地將 React 作為 devDependency。將 React 作為對等依賴項將不必要地強制您的使用者安裝 React。

此規則的一個例外是，如果您使用 React 將 UI 注入到未預先綁定 React 的預覽中。在這種情況下，您需要將 react 和 react-dom 移動到對等依賴項。但是，我們通常不建議使用此模式，因為它會將您的擴充功能的使用限制為基於 React 的 Storybook。

中繼資料

Storybook 擴充功能列在 目錄中，並透過 npm 分發。目錄是透過在 package.json 中查詢 npm 的登錄檔以取得 Storybook 特定的中繼資料來填寫的。此專案已設定範例資料。在 擴充功能中繼資料文件中瞭解更多可用的選項。

文件

為了幫助社群使用您的擴充功能並瞭解其功能，請徹底記錄它。

若要開始，請使用此範例範本中的內容取代此 README，該範本仿照基本擴充功能（例如 動作）的記錄方式。然後更新內容以描述您的擴充功能。

範例文件範本

# My Addon

## Installation

First, install the package.

```sh
npm install --save-dev my-addon
```

Then, register it as an addon in `.storybook/main.js`.

```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'
    'my-addon', // 👈 register the addon here
  ],
};

export default config;
```

## Usage

The primary way to use this addon is to define the `exampleParameter` parameter. You can do this the
component level, as below, to affect all stories in the file, or you can do it for a single story.

```js
// Button.stories.ts

// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';

import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
  parameters: {
    myAddon: {
      exampleParameter: true,
      // See API section below for available parameters
    }
  }
};

export default meta;
```

Another way to use the addon is...

## API

### Parameters

This addon contributes the following parameters to Storybook, under the `myAddon` namespace:

#### `disable`

Type: `boolean`

Disable this addon's behavior. This parameter is most useful to allow overriding at more specific
levels. For example, if this parameter is set to true at the project level, it could then be
re-enabled by setting it to false at the meta (component) or story level.

### Options

When registering this addon, you can configure it with the following options, which are passed when
registering the addon, like so:

```ts
// .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/essentials',
    {
      name: 'my-addon',
      options: {
        // 👈 options for my-addon go here
      },
    },
  ],
};

export default config;
```

#### `useExperimentalBehavior`

Type: `boolean`

Enable experimental behavior to...

發佈管理

設定

此專案已設定為使用 auto 進行發佈管理。它會產生變更日誌並將其推送至 GitHub 和 npm。因此，您需要設定對兩者的存取權

• NPM_TOKEN 建立具有 讀取和發佈 權限的權杖。
• GH_TOKEN 建立具有 repo 範圍的權杖。

然後開啟您的 package.json 並編輯以下欄位

• name
• author
• repository

本機

若要在本機使用 auto，請在專案的根目錄建立 .env 檔案，並將您的權杖新增至其中

GH_TOKEN=<value you just got from GitHub>
NPM_TOKEN=<value you just got from npm>

最後，在 GitHub 上建立標籤。您將在未來對套件進行變更時使用這些標籤。

npx auto create-labels

如果您在 GitHub 上檢查，您現在會看到一組 auto 希望您使用的標籤。使用這些標籤標記未來的提取請求。

GitHub 動作

此範本已預先設定 GitHub 動作，以便在有人推送到您的儲存庫時發佈您的擴充功能。

前往 Settings > Secrets，按一下 New repository secret，並新增您的 NPM_TOKEN。

建立發佈版本

若要在本機建立發佈版本，您可以執行以下命令，否則 GitHub 動作會為您建立發佈版本。

npm run release

這將會

• 建置並打包擴充功能程式碼
• 遞增版本
• 將發佈版本推送至 GitHub 和 npm
• 將變更日誌推送至 GitHub