这个 fork 的目标是获取由 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, "");
};
}