Storybook 中 Meteor.startup 的等价物
What's an equivalent to Meteor.startup in Storybook
我一直在尝试将 Meteor 框架 Vulcan.js 与 Storybook 集成。困难来自构建系统的差异。目前，我们可以使用 Webpack 在 Storybook 中加载一些特定的 Meteor 包。
所以，现在我们需要在 Storybook 中模仿一些额外的 Meteor 功能。我们依靠 Meteor.startup() 回调来初始化特定的 React 组件，该组件是其他组件的注册表。但是我在 Storybook 中找不到任何等效的模式。
Meteor.startup()注册的回调的特点如下：
- 这是 运行
after 应用程序正在构建。所以不可能只写一个 "startup" 文件并导入它，因为它 运行 太快了，注册表仍然是空的
- 它是 运行
before 故事实际呈现或加载。基本上 Meteor.startup 回调保证是第一个函数 运行。所以在装饰器中调用相关函数可能为时已晚。
- 它只被调用一次。这不是一个强烈的要求，因为我们可以通过将回调编写为纯函数来绕过它，但最好避免多次调用。
我试过写一个插件，但它不起作用，因为插件有自己的构建系统。因此他们无法访问我们的 Meteor 包，但他们需要它们才能正常工作。
我试过写一个装饰器。这是一个不错的解决方案，但我有奇怪的行为，因为它 运行 是每个组件安装上的启动函数（这是在导入之后但在渲染之前 运行 它们的唯一方法）。这是我目前最好的选择，但似乎不是最佳选择。
最后一个解决方案是运行将代码放在相关故事的顶部。它有效，但容易出错并影响开发者体验
所以，问题来了：如何在 Storybook 中定义回调，使其在启动期间 运行，就像 Meteor.startup 回调一样？
如果你深入研究它，在客户端上 Meteor.startup 只是 document.addEventListener('DOMContentLoaded', func)
的包装
所以通过监听事件应该很容易复制
理想情况下，您为其编写故事的任何 React 组件都应该是纯渲染组件，并且不应引用任何特定于 Meteor 的内容，例如 Meteor....
通常的方法是编写一个容器组件，它执行加载数据（例如使用 withTracker()）和调用任何所需的 Meteor 函数等操作。它应该将实用函数作为 props 传递给组件。
Storybook 只需要提供这些功能作为道具 - 您可以使用动作插件：https://www.npmjs.com/package/@storybook/addon-actions
Storybook Addon Actions
Storybook Addon Actions can be used to display data received by event handlers in Storybook.
起初这似乎很难，但实际上在任何环境中保持组件纯净都是一种很好的做法。他们的工作是提供渲染，并将事件传递给逻辑和 api（位于其他地方）。这也意味着组件可以重复使用（即使在非 meteor 项目中），并且更容易测试，因为你不需要模拟你的 meteor 环境）
我一直在尝试将 Meteor 框架 Vulcan.js 与 Storybook 集成。困难来自构建系统的差异。目前，我们可以使用 Webpack 在 Storybook 中加载一些特定的 Meteor 包。
所以，现在我们需要在 Storybook 中模仿一些额外的 Meteor 功能。我们依靠 Meteor.startup() 回调来初始化特定的 React 组件，该组件是其他组件的注册表。但是我在 Storybook 中找不到任何等效的模式。
Meteor.startup()注册的回调的特点如下：
- 这是 运行
after应用程序正在构建。所以不可能只写一个 "startup" 文件并导入它，因为它 运行 太快了，注册表仍然是空的 - 它是 运行
before故事实际呈现或加载。基本上Meteor.startup回调保证是第一个函数 运行。所以在装饰器中调用相关函数可能为时已晚。 - 它只被调用一次。这不是一个强烈的要求，因为我们可以通过将回调编写为纯函数来绕过它，但最好避免多次调用。
我试过写一个插件，但它不起作用，因为插件有自己的构建系统。因此他们无法访问我们的 Meteor 包，但他们需要它们才能正常工作。
我试过写一个装饰器。这是一个不错的解决方案，但我有奇怪的行为，因为它 运行 是每个组件安装上的启动函数（这是在导入之后但在渲染之前 运行 它们的唯一方法）。这是我目前最好的选择，但似乎不是最佳选择。
最后一个解决方案是运行将代码放在相关故事的顶部。它有效，但容易出错并影响开发者体验
所以，问题来了：如何在 Storybook 中定义回调，使其在启动期间 运行，就像 Meteor.startup 回调一样？
如果你深入研究它，在客户端上 Meteor.startup 只是 document.addEventListener('DOMContentLoaded', func)
所以通过监听事件应该很容易复制
理想情况下，您为其编写故事的任何 React 组件都应该是纯渲染组件，并且不应引用任何特定于 Meteor 的内容，例如 Meteor....
通常的方法是编写一个容器组件，它执行加载数据（例如使用 withTracker()）和调用任何所需的 Meteor 函数等操作。它应该将实用函数作为 props 传递给组件。
Storybook 只需要提供这些功能作为道具 - 您可以使用动作插件：https://www.npmjs.com/package/@storybook/addon-actions
Storybook Addon Actions
Storybook Addon Actions can be used to display data received by event handlers in Storybook.
起初这似乎很难，但实际上在任何环境中保持组件纯净都是一种很好的做法。他们的工作是提供渲染，并将事件传递给逻辑和 api（位于其他地方）。这也意味着组件可以重复使用（即使在非 meteor 项目中），并且更容易测试，因为你不需要模拟你的 meteor 环境）