此分支的目标是获取故事生成的原始 HTML。如果您组件是纯粹的“HTML、CSS 和 JS”，则可能很有意义。在某些情况下，您的 JS 会修改原始组件并注入额外的节点，并且您希望将此插件用作模板工具。

所有功劳归原作者“Whitespace [email protected]”所有。仅在部署和使用时更改了必要的某些部分。

Storybook 插件 HTML

此 Storybook 插件添加了一个选项卡，用于显示每个故事的编译后的 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, "");
  };
}