適用於 XState 的 Storybook 擴充套件

靈感來自 storybook-xstate-addon，只是不需要 xstate/react 來支援 Web Component Storybook

開發腳本

• yarn start 在監看模式下執行 babel 並啟動 Storybook
• yarn build 建置並打包您的擴充套件程式碼

從 TypeScript 切換到 JavaScript

不想使用 TypeScript？我們提供一個方便的彈射命令：yarn eject-ts

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

發布管理

設定

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

• NPM_TOKEN 建立具有讀取和發布權限的令牌。
• GH_TOKEN 建立具有 repo 範圍的令牌。

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

• 名稱
• 作者
• 儲存庫

本機

若要在本機使用 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 Actions

此範本已預先設定 GitHub Actions，以便在有人推送至您的儲存庫時隨時發布您的擴充套件。

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

建立發布

若要在本機建立發布，您可以執行以下命令，否則 GitHub action 會為您執行發布。

yarn release

這將會

• 建置並打包擴充套件程式碼
• 提升版本
• 將發布推送至 GitHub 和 npm
• 將變更日誌推送至 GitHub