Я использую надстройку Preview в Storybook for React, чтобы показать использование компонентов в Документах.

<Preview withToolbar>
  <Story name="primary">
  <PrimaryButton  disabled={boolean("Disabled",false)} modifiers={["small"]} onClick={action('button-click')} > {text("Label", "Hello Storybook")}</PrimaryButton>
  </Story>
</Preview>

Это сгенерирует документ, как показано ниже: введите описание изображения здесь Есть переключатель показать код / ​​скрыть код, который показывает код реакции для компонента, можно ли также показать обычную разметку HTML.

Мне нужно использовать один обозреватель компонентов сборника рассказов для проектов React и не React, поэтому я хотел проверить, создается ли также исходный код простой разметки.

Благодарность

1
Bhupendra 1 Дек 2020 в 22:12

1 ответ

Лучший ответ

Я нахожусь в аналогичной ситуации, когда я просто хочу использовать реакцию для разработки историй и отображать только HTML в документах, чтобы его можно было использовать с другими фреймворками.

Это то, что я придумал до сих пор.

В .storybook/preview.js я использую специальную функцию для рендеринга исходного кода, чтобы файл выглядел примерно так:

import renderToHTML from './renderToHTML'

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  docs: {
    transformSource: (src, storyContext) => renderToHTML(storyContext.storyFn),
  },
}

Это задокументировано здесь .

Моя функция renderToHTML определяется следующим образом:

import { renderToStaticMarkup } from 'react-dom/server'
import { AllHtmlEntities } from 'html-entities'
import prettier from 'prettier'
import HTMLParser from 'prettier/parser-html'
const entities = new AllHtmlEntities()

export default (story) =>
  prettier.format(entities.decode(renderToStaticMarkup(story())), {
    parser: 'html',
    plugins: [HTMLParser],
  })

Я использую renderToStaticMarkup для компиляции истории, затем html-entities для отключите его, а затем используйте prettier для его форматирования.

Я все еще экспериментирую с этим, поэтому могу обновить ответ, если обнаружу проблемы или лучший способ сделать что-то

0
TedMeftah 3 Дек 2020 в 09:40