這個分支的目標是取得 story 所產生的原始 HTML。如果您的元件是純粹的「HTML、CSS 和 JS」，這可能會很有意義。在某些情況下，您的 JS 會修改原始元件並注入額外的節點，而您希望使用此外掛程式作為樣板工具。

所有功勞歸於原作者 "Whitespace code@whitespace.se"。僅在部署和使用必要時才變更部分內容。

Storybook 外掛程式 HTML

這個 Storybook 的外掛程式會新增一個頁籤，顯示每個 story 的已編譯 HTML。它使用 highlight.js 進行語法高亮。

開始使用

安裝外掛程式及其依賴項目。

使用 NPM

npm i --save-dev @un-known/storybook-addon-html prettier react-syntax-highlighter

使用 Yarn

yarn add -D @un-known/storybook-addon-html prettier react-syntax-highlighter

註冊外掛程式

// .storybook/main.js

module.exports = {
  // ...
  addons: [
    "@un-known/storybook-addon-html",
    // ...
  ],
};

用法

HTML 使用 Prettier 格式化。您可以透過在 html 參數中提供一個遵循 Prettier API 覆寫格式的物件來覆寫 Prettier 設定（除了 parser 和 plugins）。

// .storybook/preview.js

export const parameters = {
  // ...
  html: {
    prettier: {
      tabWidth: 4,
      useTabs: false,
      htmlWhitespaceSensitivity: "strict",
    },
  },
};

您可以覆寫用於抓取元件 HTML 的包裝元素選取器。

export const parameters = {
  html: {
    root: "#my-custom-wrapper", // default: #root
  },
};

有些框架會在 HTML 內放入註解。如果您想要移除這些註解，可以使用 removeComments 參數。將其設定為 true 可移除所有註解，或將其設定為與您想要移除的註解內容相符的正規表示式。

export const parameters = {
  html: {
    removeComments: /^\s*remove me\s*$/, // default: false
  },
};

您也可以使用 removeEmptyComments 參數，僅移除空白註解，例如 <!----> 和 <!-- -->。

export const parameters = {
  html: {
    removeEmptyComments: true, // default: false
  },
};

您可以使用 highlighter 參數，覆寫語法高亮顯示器的 showLineNumbers 和 wrapLines 設定。

export const parameters = {
  html: {
    highlighter: {
      showLineNumbers: true, // default: false
      wrapLines: false, // default: true
    },
  },
};

隱藏不需要的程式碼的另一種方法是定義 transform 選項。它允許您對輸出程式碼執行任何變更，例如移除框架注入的屬性。

html: {
  transform: (code) => {
    // Remove attributes `_nghost` and `ng-reflect` injected by Angular:
    return code.replace(/(?:_nghost|ng-reflect).*?="[\S\s]*?"/g, "");
  };
}