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

Question

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

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

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

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

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

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

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

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

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 (которые живут в другом месте). Это также означает, что компоненты могут быть повторно использованы (даже в неметеорных проектах), и их легче тестировать, потому что вам не нужно макетировать вашу метеорную среду)