什么相当于 Storybook 中的 Meteor.startup

Posted 2023-02-19

【中文标题】什么相当于 Storybook 中的 Meteor.startup

【英文标题】：What's an equivalent to Meteor.startup in Storybook

【发布时间】：2019-09-12 18:59:27

【问题描述】：

我一直在尝试将流星框架 Vulcan.js 与 Storybook 集成。困难来自构建系统的差异。目前，我们可以使用 Webpack 在 Storybook 中加载一些特定的 Meteor 包。

所以，现在我们需要模仿 Storybook 中的一些额外 Meteor 功能。我们依靠 Meteor.startup() 回调来初始化特定的 React 组件，该组件是其他组件的注册表。但是我在 Storybook 中找不到任何等效的模式。

Meteor.startup()注册的回调的特征如下：

它正在运行after 应用程序正在构建。所以不可能只写一个“启动”文件并导入，因为它会运行得太快，注册表仍然是空的 它运行before 故事实际上被渲染或加载。基本上Meteor.startup 回调保证是第一个运行的函数。所以在装饰器中调用相关函数可能为时已晚。 它只被调用一次。这不是一个很强的要求，因为我们可以通过将回调编写为纯函数来绕过它，但最好避免多次调用。

我试过写一个插件，但它不起作用，因为插件有自己的构建系统。因此他们无法访问我们的 Meteor 包，但他们需要它们才能正常工作。

我试过写一个装饰器。这是一个不错的解决方案，但我有奇怪的行为，因为它在每个组件安装上运行启动功能（这是在导入之后但在渲染之前运行它们的唯一方法）。这是我目前最好的选择，但似乎并不理想。

最后一个解决方案是在相关故事的顶部运行代码。它可以工作，但容易出错并影响开发者体验

那么，问题来了：您将如何在 Storybook 中定义回调，以便它在启动期间运行，就像 Meteor.startup 回调一样？

【参考方案1】：

如果你深入研究它，在客户端上 Meteor.startup 只是 document.addEventListener('DOMContentLoaded', func) 的包装器

所以通过监听事件应该很容易复制

【讨论】：

好主意，我确实应该检查一下。那么问题是把这段代码放在哪里，如果我弄清楚了，我会更新。

这很好，我在这里写了一个基于 Meteor.startup 实现的启动函数，并在配置文件中调用它：github.com/meteor/meteor/blob/…

【参考方案2】：

理想情况下，您为其编写故事的任何 React 组件都应该是纯渲染组件，并且不应引用任何特定于 Meteor 的内容，例如 Meteor...。

通常的方法是编写一个容器组件，它执行诸如加载数据（例如使用withTracker()）和调用所需的任何 Meteor 函数之类的事情。它应该将实用函数作为道具传递给组件。

Storybook 只需将这些功能作为道具提供 - 您可以使用操作插件：https://www.npmjs.com/package/@storybook/addon-actions

Storybook 插件操作

Storybook Addon Actions 可用于显示Storybook 中的事件处理程序接收到的数据。

起初这似乎很困难，但在任何环境中保持组件纯净实际上都是一种很好的做法。他们的工作是提供渲染，并将事件传递给逻辑和 api（它们存在于其他地方）。这也意味着组件可以重复使用（即使在非流星项目中），并且更容易测试，因为您不需要模拟流星环境）

【讨论】：

抱歉，这超出了范围。这里我们想要的不是模拟/删除 Meteor，而是创建一个与 Meteor.startup 或 jQuery 的 $() 具有相同规范的函数，但对于 Storybook ：在导入之后运行，但在渲染之前运行。在可视化组件之外使用 Meteor 确实是一种很好的做法，但您不能保证这种模式在现实生活中的应用程序中得到 100% 的尊重。在 Vulcan 中，我们在应用程序本身中非常依赖 Meteor 包系统，这使得这种细分成为可能，但非常冗长，至少目前是这样。

是的，当然，我理解你的立场，在理想的世界中，我们可以编写在 Meteor 之外也可用的 React 组件。这样做需要付出一些努力，而且很难执行，尤其是如果您的代码库没有这样做的话。