Svelte 的 Storybook

Storybook，最受歡迎的組件工作坊，即將迎來有史以來最大的 Svelte 升級。Svelte 的 Storybook 已經完全重新設計，從您編寫 story 的方式到底層實作，都改善了各個方面的使用體驗。

新版本（Storybook 6.2 中提供）包含

• 🎁 零配置設定，內建 TypeScript 支援
• 📝 原生 Svelte story 格式，用於捕捉組件狀態
• 🎛 自動產生的控制項和文件
• 📚 更新的教學和文件

除了 Svelte 使用者已經可以使用的龐大開發、測試和文件擴充套件生態系統之外，這一切都是額外提供的。請繼續閱讀以全面了解新功能！

押注 Svelte

Svelte 的 Storybook (SB Svelte) 最初於 2018 年發布，並於 2019 年針對 Svelte 3 進行更新。它穩步成長，但直到最近才在 Storybook 中獲得基本支援。

一切都在改變。首先，Ernie Francis 在 SB6.1 中新增了自動文件支援。然後 Jérémie Brébec 全面修改了整個套件、編寫了文件，並發布了用於組件範例的原生 Svelte 語法。

現在 Storybook 中的 Svelte 支援真正成為一流，採用率也因此提高。@storybook/svelte 的 NPM 下載量現在佔 Svelte 總用量的 10% 以上。Svelte 非常棒，我們很自豪能押注它持續成功。

零配置設定

若要開始使用，請在現有 Svelte 專案的根目錄中執行以下命令

npx sb init

這會偵測專案類型、安裝 @storybook/svelte，並新增一些範例檔案來示範 Storybook 的基本知識。執行 yarn storybook 會為您提供以下零配置設定

當您在本機導覽至 Storybook 時，您會看到如何編寫 Svelte story 的範例、常用配置的連結，以及 Storybook 隨附的「基本」擴充套件。內建 TypeScript 支援。在官方文件中了解更多資訊。

原生 Svelte 格式

在 Storybook 中，story 是一個程式碼片段，用於呈現處於特定狀態的組件範例。Storybook 現在為 Svelte 使用者提供原生 story 格式，這表示您可以使用您慣用的相同風格化的 Svelte SFC 語法來編寫 story。

<script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
  import Button from './Button.svelte';
</script>

<Meta title="Button" component={Button}/>

<Template let:args>
  <Button {...args}/>
</Template>

<Story name="Primary" args={{primary: true}}/>

<Story name="Secondary" args={{primary: false}}/>

在底層，這些原生格式 story 會編譯為組件 Story 格式 (CSF)，這是一種基於 ESM 的標準，用於可攜式、可重複使用的組件範例。這表示新的 story 與 Storybook 生態系統的其餘部分 100% 相容。

自動產生的控制項和文件

Storybook 從 Svelte 編譯器讀取 docgen 資訊，以根據您的 story 和組件自動產生控制項和文件。

前一節的範例可能會產生以下 UI，用於互動式探索您的組件狀態

它還會在沒有額外工作的情況下產生組件文件，其中包括使用從組件來源擷取的 props 佈局的所有主要狀態

您的組件的控制項和文件始終是最新的，因為它們是從原始碼自動產生的。每當組件的 API 變更時，您都不需要追蹤您的 UI 文件，Storybook 會為您執行此操作。

非常適合 UI 測試

當您在 Storybook 中建置 UI 時，您可以免費獲得測試。Storybook 圍繞 story 的概念，這些 story 捕捉您的 UI 組件的支援狀態。

在開發中，您可以手動確認您的 story「看起來正確」，並使用一組擴充套件來測試您的 story 的其他維度，例如可訪問性和行動裝置友善性。

在持續整合中，您可以使用快照和視覺化測試分別自動偵測您的 story 中的結構和視覺化變更。

測試您的 story 非常有用，以至於多種商業服務都與 Storybook 整合，以便在雲端和跨瀏覽器執行測試。值得注意的是，由 Storybook 維護者建立的 Chromatic 與 Storybook 緊密整合，並提供免費的自動發布和視覺化差異。

更重要的是，您的 story 可在各種工具之間移植。Storybook 開創了組件 Story 格式，這是一種基於 JavaScript ES6 模組的組件範例開放標準。這可讓您重複使用 story 進行單元測試和端對端測試，而不會被鎖定。

200 多個擴充套件可供選擇

多年來，Storybook 一直在改進其跨框架相容性。這表示幾乎所有 Storybook 的數百個擴充套件都適用於 Svelte 使用者。擴充套件解鎖了超級功能，例如可訪問性測試、設計交付整合、樣式實用程式和網路請求的模擬。

後續步驟

Svelte 的 Storybook 現在在 6.2 版本中提供。透過在專案根目錄中執行以下命令來安裝它。然後查看更新的教學和參考文件。

npx sb init

若要升級現有專案

npx sb upgrade

Svelte 原生格式會自動包含在全新安裝中，但對於升級，您需要手動安裝它。

我們計劃對 Svelte 進行重大改進，包括

• 使用可插拔建構器與 Svelte 建置工具更緊密地整合
• 一旦 MDX v2 發布，即可支援原生 Svelte MDX

參與其中

Storybook 由 1,250 多名開放原始碼貢獻者維護，並由頂級維護者的指導委員會指導。

Svelte 的 Storybook 由 Jérémie Brébec 維護，他負責此文章中描述的大部分升級。Svelte 原生語法最初由 rixo 提出。Storybook 文件支援由 Ernie Francis 新增。Svelte 支援最初由 Gavin King 貢獻，並由 Cameron Stitt 升級到 Svelte 3。

如需深入了解 Svelte，請查看 Mark Volkmann 的指南以及他的篇幅較長的書籍，其中介紹了 Storybook。

如果您有興趣貢獻，請在 GitHub 上查看 Storybook、建立 issue 或提交 pull request。在 Open Collective 上捐款。在 Discord 中與我們聊天 — 維護者通常在線上。在 Twitter 上以及透過註冊我們的郵寄清單來隨時掌握 Storybook 的最新消息。