我是 Svelte 的新手，我犯了一个菜鸟错误。我有一个到服务器的 websocket 连接，我正在记录数百条消息并将它们添加到商店，但页面根本没有更新。

App.svelte

套接字.svelte

socket.js

在浏览器中，我得到了0items 数组的初始长度，但它永远不会更新，即使消息正在流动。

我正在尝试在 Svelte 商店中维护实时股票报价，以便实时更新屏幕上的出价和要价。我不确定如何构建存储以保持数据的反应性和效率。数据来自 websocket，如下所示：

{'symbol':'AAPL', 'bid':305.52, 'ask':305.55}

我最初的尝试如下所示：

我想要做的是在整个 SPA 中提供一个单一的报价地图，但每次更改时，每个单独的报价仅更新其自己的符号，而不是整个页面。

这显然是错误的，但我不确定该怎么做。（这是我第一次使用 Svelte。）

我想为 golang + svelte 设置下一个简单的开发设置

前端部分

所以我在http://localhost:5000上有一个正在运行的前端

后端部分

• 使用 https on :443 go net/http 路由器，使用 mkcert 创建自签名证书
• https://localhost/hello -> go handlers for show normal go handlers
• https://localhost/ -> 反向代理http://localhost:5000

按下 F5 会重新加载，但热重新加载不会通过 ws 代理。

它如何包含在代理中？

我正在尝试使用来自 svelte 的 DataTables jQuery 插件，并且我想避免将它们包含在我的 index.html 中。我想从 npm 引用它。

我试过这个：

这些是我的 package.json 中的运行时依赖

jQuery 工作正常，DataTable 也工作正常，但我不知道如何告诉汇总包含 DataTable css 文件（在 node_modules/datatables.net-dt/css 中）

我最初在这里发布了这个问题，因为我认为这是一个错误，但我没有得到任何回应。

基本上，onMount在我的工兵路线中没有被调用。在服务器最初渲染它之后，也许 sapper 没有为我的组件补水......

src/routes/test.svelte

我没有FOO在控制台中看到......知道问题是什么吗？

请注意，此代码在此 svelte repl上运行良好（没有工兵）。

不幸的是，我在汇总文档中找不到任何内容。我正在使用 Svelte 和 rollup 构建一个网站，并且需要不同的环境变量来进行生产、测试​​和开发。

这是我的 package.json 的脚本部分：

我不知道如何将 start:dev 命令与 autobuild 或 testbuild 命令之一一起使用。不知何故，环境变量始终是 devbuild 脚本中的一个，即使我删除了所有脚本。这些变量是否也在其他地方指定？我试过这个：

还有这个：

但似乎没有任何效果。我在这里看不到什么？是否有一些关于 sirv 的实际文档？我只能通过 -h 标志抓取一些信息。

我喜欢 Svelte，但我坚持一些基本的东西（尽管只是装饰性的）。下面的代码应该在两个元素之间平滑过渡，但它会“跳跃”——显然是在传入元素到达之前为它腾出空间。

这个问题类似于Rich Harris 几年前指出的问题，但我没有看到解决方案已实施。Svelte 教程站点上的所有示例仅转换一个元素。

这是基本的标记/代码：

Vue 中的等效工作是：

这是一个代码沙箱示例。您可以看到按钮向下跳来为新元素腾出空间。我添加了一个等于 400 持续时间的“in”转换延迟（我知道这是默认设置，但为了清楚起见，我想明确设置它）。延迟应该允许第一个元素在转换下一个元素之前转换出来，如第一个链接中所述（Harris 称之为“延迟的骇人使用”）并在此处建议。

我还尝试将被淘汰的元素显式设置为 position: absolute ，这样它就不会占用空间。这是一个（仍然无法正常工作）示例。似乎有点不雅，即使它正在工作。出于某种原因，转换覆盖了设置位置的类：绝对。

任何帮助是极大的赞赏！

更新：我用这段代码得到了想要的效果。我在这里所做的是复制和修改 Svelte 的飞行过渡以获取一个额外的参数——“位置”，它可以设置为“绝对”或“相对”或任何你想要的。对 CSS 进行了一些调整以确保没有奇怪的副作用（将容器设置为 position: relative，并将每个元素的宽度设置为 100% 以确保它们不会改变大小）。这行得通，但我仍然觉得应该有一种不那么劳动密集型的方法，而无需修改 Svelte 的过渡。

我很难制作一个跑掉的工具提示use:action。我的要求是：

1. 创建以 HTML 或组件为内容的工具提示
2. 无需将组件包装在<Tooltip><element></Tooltip>
3. 连接到预制库以获得灵活性

请参阅下面的示例代码。由于 Tippy.js 的依赖，它在 REPL 中不起作用，但我确实让它在我的应用程序中使用简单的 HTML。这就是为什么我的想法是我应该寻求渲染一个组件，它像其他任何东西一样承认 props，然后以某种方式获取它的 HTML 并将其投入使用：action 调用。（请参阅“内容：'嘿，我工作！ '”）它应该像在 jQuery 工具提示时代一样简单易用。

REPL 链接： https ://svelte.dev/repl/e8fdf98eb42445e3b791d7c908581a71?version=3.17.3

本质上，我正在制作一个幻灯片项目，其中每个“幻灯片”都是使用 <svelte:component this={currentSelection.component} />. 每张幻灯片都需要逐个组件的自定义输入和输出转换。我希望下一张幻灯片在当前幻灯片完成转换时“等待”，但是，如 svelte 文档中所述：

与 transition: 不同，使用 in: 和 out: 应用的转换不是双向的——如果在转换进行时块被淘汰，则in 转换将继续与 out 转换一起“播放”，而不是反转。如果退出转换被中止，转换将从头开始。

有没有一种明智的方法可以让下一张幻灯片“等待”直到当前幻灯片完成其结尾过渡？

REPL的玩具示例

为后代发布的玩具代码：

编辑：我应该添加一个复杂性——我正在通过 sapper 锚标记驱动组件遍历，这些锚标记负责组件的创建/销毁。换句话说：

我不确定这是否有区别？

你知道一个组件可以让你在 Svelte JS 中做到这一点吗？

例如，像 ReactToPrint，一个打印 React 组件。