@stormid/storybook-html-addon-markup

这个 Storybook 插件添加了一个面板，显示 story 渲染后的静态 HTML 标记。

用法

安装

$ npm i @stormid/storybook-html-addon-markup --dev

将此行添加到你的 addons.js 文件中（如果需要，请在你的 storybook 配置目录中创建此文件）。

import '@stormid/storybook-html-addon-markup';

导入 withMarkup 装饰器，以将静态标记添加到你的 stories 中。

对于所有 stories

import React from 'react';
import { storiesOf, addDecorator } from '@storybook/html';
import { withMarkup } from '@storybook/addon-a11y';

// should only be added once
// best place is in config.js
addDecorator(withMarkup);
configure(require.context('../src', true, /\.stories\.js$/), module);

或者针对每个 story

import { h, Fragment } from 'preact';
import render from 'preact-render-to-string/jsx';
import MyComponent from '../../src/templates/components/my-component';
import { withMarkup } from '@storybook/addon-a11y';

export default { 
    title: 'My component',
    decorators: [withMarkup]
};

export const Default = () => render(<MyComponent />);