很长一段时间以来，我们的示例都是建立在 Sandpack  之上的。这对我们来说是一个强大的工具，可以在文档中提供交互式示例，但这也带来了一定的代价。

🌐 For a long time now our examples have been built on top of Sandpack . This has been a powerful tool for us to provide interactive examples in our docs but it’s also come at a cost.

这些问题

🌐 The problems

我们喜欢 Sandpack，但我们不断遇到一些痛点，最终决定我们无法忽视这些问题。

🌐 We liked Sandpack, but we kept brushing up against some pain points that ultimately we decided we couldn’t ignore.

• 我们的示例加载很慢。 Sandpack 是一个令人印象深刻的工具，但它也是一个比较重的工具。Sandpack 客户端本身需要一些时间来加载，然后如果示例包含依赖，这些依赖也需要被获取。对于一次性的示例页面来说，这还不算太糟，但对于像我们的指南或教程这样较长的文档页面，这可能会真正打断用户的使用节奏。
• Sandpack 在我们首次发布 Svelte Flow 时并不完全支持 Svelte。最终，我们开发了一个单独的 SvelteKit 应用来托管我们的 Svelte 示例，并调整了我们的示例查看器，以便在 Sandpack 示例和简单的 iframe 嵌入之间切换。
• 最后，开发新的示例非常麻烦。 我们的 React 示例的源代码存放在示例查看器组件深处的文件夹中，并且对某些文件或格式有特殊处理，这使得编写示例变得相当困难：每次对示例的更改都会触发文档的热重载，这意味着要等待 Sandpack 重新加载并一次又一次地重新渲染示例。

而且除此之外，我们还有一个完全独立的应用，用于生成我们示例概览页面的截图！

🌐 And on top of all that we had an entirely separate app we used to generate the screenshots for our examples overview page!

解决方案

🌐 The solution

我们对我们的 Svelte 示例的工作方式感到非常满意（谢谢 Peter），并且决定我们想要探索一个统一的解决方案，可以同时适用于我们的 Svelte 和 React 示例。最终，我们得到了一个比我们的 SvelteKit 应用甚至更简单的方案，完全不需要服务器，而是从一个静态网站提供所有内容。

🌐 We were quite happy with how our Svelte examples worked (thank you Peter), and decided we wanted to explore a unified solution that would work for both our Svelte and React examples. In the end, we landed up with something even simpler than our SvelteKit app, dropping the need for a server entirely and instead serving everything from a static site.

我们在我们的 monorepo 中创建了一个单一的 example-apps  应用，该应用使用 vite  在开发期间提供我们的示例，并将它们构建为用于生产的静态文件。如果你感兴趣，你可以在 examples-apps.xyflow.com 找到我们所有示例的一个纯目录。

🌐 We’ve created a single example-apps  app in our monorepo that uses vite  to serve our examples during development and build them into static files for production. If you’re curious, you can find a plain directory of all our examples over at examples-apps.xyflow.com.

我们也使编写示例变得更容易。现在开发示例更类似于开发独立应用，我们还编写了一个简单的脚手架脚本，帮助我们快速创建新示例：

🌐 We also made authoring examples easier. Developing examples now more closely resembles developing a standalone app, and we put together a simple scaffold script to help us quickly create new examples:

The scaffold script helps you quickly put together a new example for either
reactflow.dev or svelteflow.dev by copying over the boilerplate. All arguments
are _required_.
 
USAGE:
 
pnpm scaffold <FRAMEWORK> <ROUTE>
 
EXAMPLES:
 
pnpm scaffold react blog/web-audio/demo
 
pnpm scaffold svelte guides/getting-started
 
ARGUMENTS:
 
FRAMEWORK 'react' | 'svelte'
 
              The framework the example will be written in. This affects where
              the generated files are placed in conjunction with the ROUTE
              argument.
 
ROUTE string
 
              The route fragment the example app will be served at when combined
              with the FRAMEWORK argument. For example, calling the script as
              `pnpm scaffold react examples/nodes/custom-node` will scaffold
              the example and make it accessible at
              '/react/examples/nodes/custom-node/index.html'.

有没有什么缺点？

🌐 Are there any downsides?

在过渡期间，我们失去了一个重要功能：直接在文档网站上编辑示例的能力。对于一些用户来说，这可能是一个大问题，但作为补偿，我们现在除了支持 CodeSandbox 之外，还支持在 StackBlitz 中打开示例！

🌐 We’ve lost one big feature in the transition: the ability to edit examples directly on the docs site. For some users this might be a big deal, but to compensate we now support opening the examples in StackBlitz in addition to CodeSandbox!

结束

🌐 Wrap up

就这些了，大家 ✌️。对于大多数人来说，这次更改应该是无缝的，还能顺便提升性能。如果我们在迁移过程中弄坏了什么，请通过提交问题 告诉我们，如果你对这些更改感到兴奋，我们很希望你在推特上分享并标记我们@xyflowdev ！