Я пытался интегрировать Vulcan.js фреймворк Meteor с сборником рассказов. Сложность возникает из-за различий в системе сборки. В настоящее время мы можем загружать некоторые конкретные пакеты Meteor в Storybook с помощью Webpack.

Итак, теперь нам нужно имитировать некоторые дополнительные функции Meteor в Storybook. Мы полагаемся на Meteor.startup() обратный вызов для инициализации определенного компонента React, который является реестром других компонентов. Однако я не могу найти какой-либо эквивалентный шаблон в сборнике рассказов.

Характеристика обратного вызова, зарегистрированного в Meteor.startup() , заключается в следующем:

• он запущен after , приложение построено. Таким образом, невозможно просто записать файл «startup» и импортировать его, потому что он запустится слишком рано, реестр все равно будет пустым
• он запущен before истории фактически визуализируются или загружаются. В основном Meteor.startup обратные вызовы гарантированно будут первой функцией, которая будет запущена. Поэтому вызов соответствующей функции в декораторе может быть слишком поздним.
• он вызывается только один раз. Это не является строгим требованием, поскольку мы можем обойти его, написав обратные вызовы как чистую функцию, но лучше избегать нескольких вызовов.

Я пытался написать аддон, но он не работает, поскольку аддоны имеют свою собственную систему сборки. Поэтому они не могут получить доступ к нашим пакетам Meteor, и все же им нужно, чтобы они работали правильно.

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

Последнее решение — запустить код в верхней части соответствующих историй. Он работает, но подвержен ошибкам и влияет на работу разработчика

Итак, вот вопрос: как бы вы определили обратный вызов в сборнике рассказов, чтобы он выполнялся во время запуска, как это делают Meteor.startup обратные вызовы?

Если вы покопаетесь в этом, на клиенте Meteor.startup это просто оболочка вокруг document.addEventListener('DOMContentLoaded', func)

Поэтому его должно быть легко воспроизвести, прослушав событие

В идеале любые компоненты React, для которых вы пишете истории, должны быть чистыми компонентами рендеринга и не должны ссылаться ни на что, относящееся к Meteor, например Meteor... .

Обычный подход заключается в написании компонента контейнера, который выполняет такие действия, как загрузка данных (например, с помощью withTracker() ) и вызов любых необходимых функций Meteor. Он должен передавать служебные функции в качестве реквизита компоненту.

Сборнику рассказов просто нужно предоставить эти функции в качестве реквизита — вы можете использовать дополнение actions:https://www.npmjs.com/package/@storybook/addon-actions

Действия дополнения сборника рассказов

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

Сначала это покажется сложным, но на самом деле хорошей практикой в любой среде является сохранение компонентов в чистоте. Их задача — обеспечивать рендеринг и передавать события в логику и API (которые находятся в другом месте). Это также означает, что компоненты могут быть повторно использованы (даже в проектах, не связанных с meteor), и их легче тестировать, потому что вам не нужно макетировать свою среду meteor)