Что эквивалентно Meteor.startup в сборнике рассказов

Question

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

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

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

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

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

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

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

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

Answer 1

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

Так что должно быть легко скопировать, слушая событие

Answer 2

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

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

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

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

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

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