我有一个与 Sapper 的路由和 Svelte 的转换相关的问题。
我创建了一个只有 2 个页面的小型 Sapper 网站。在主页上我有一个轮播组件。每张幻灯片都有一个in:fade={{duration: 2000}}和一个out:fade={{duration: 2000, delay: 1000}}。
当页面首次加载时，没有过渡，这是完美的。
当我导航到 /contacts 时，问题就出现了，在我开始看到“联系人”页面之前，我必须等待 3 秒的淡出。转换完成后我就可以看到该页面。
这种行为正常吗？我能以某种方式避免它吗？我最终只使用了 CSS 过渡，但我更喜欢使用 svelte-transition :)
我似乎找不到有关通过 https 运行 Svelte 应用程序的任何信息。我想在 https 上为 dev 和 prod 运行。我可以--port在 package.json 中的脚本中使用参数更改端口，但显然这不会将协议从 http 更改为 https。
在 Svelte 中，您可以将props传递给 slot 中的内容。
<Component let:message="Hello!">
<div>
{message}
</div>
</Component>
当 Sapper 使用布局渲染路由时，路由内容也会渲染在一个槽中。问题是，由于 Sapper 控制了这个过程，似乎不可能将 slot prop 传递给路由。
这不起作用：
// _layout.svelte
<slot message="Hello!"></slot>
那么将数据从布局传递到渲染路由的合适方法是什么？例如segment。
我们遇到了一个问题，点击是将一个类添加到 div，但类 CSS 没有添加到 div。它只是添加了类。
<script>
function handleClick() {
document.getElementById('text').classList.add('blueText')
}
</script>
<style>
.blueText{
color:blue;
}
</style>
<button on:click={handleClick}>
Click me
</button>
<div id="text">
Text
</div>
创建了一个 REPL 来查看它。任何解释或解决方案表示赞赏
https://svelte.dev/repl/85554a5f15134a5694c36fc4f4782029?version=3.23.2
聪明的人！
\n我\xe2\x80\x99m 是一个捆绑器初学者，有一个捆绑器斜杠依赖问题。
\nyarn dev run错误：“找不到模块 \'@sveltejs/svelte-scroller\'...”该插件默认在 rollup.config.js 中作为外部加载：
\n{ ..., server: { ..., external: <**package.json-dependencies-arr**> } ... }\n当我在 .svelte-component 中使用它时：
\nimport Scroller from \'@sveltejs/svelte-scroller\';\n\n//...\n\n<Scroller />\n...这个错误打了我的脸。
\nrollup.config.js 与模板克隆相比没有变化
\n如果我从在 rollup.config.js 中作为外部加载的依赖项 arr 中删除插件，错误就会消失。
\n...这告诉我汇总不应将依赖项作为外部加载（假设唯一的目标是使指定的错误消失）。
\n由于 svelte-scroller 的用途与客户端交互相关，因此我认为无论如何它都不应该成为捆绑包的一部分。
\n当然，网络空间也有相关的问题，但我似乎找不到关于如何处理这个问题的明确的最佳实践示例。
\n因此，我当前的解决方法是：
\n // …我有一个名为 [symbol].svelte 的 svelte 组件，我想在其中启动与流服务的连接以接收服务器发送的事件。我还没有找到成功做到这一点的方法。
由于 EventSource 仅在浏览器中运行，因此我在onMount函数中对其进行了初始化，如下所示：
<script>
export let quote;
let sse = {};
onMount(async () => {
sse = new EventSource(`https://myurl.com?symbol=${quote.symbol}`);
sse.onmessage = (event) => {
let response = JSON.parse(event.data);
if(!response.length) return;
quote = response[0];
}
});
onDestroy(() => {
if(sse.readyState && sse.readyState === 1) {
sse.close();
}
})
</script>
<div>{quote.symbol}</div>
这工作正常，除非我导航到使用相同组件的另一条路由 - 因为该组件不会卸载和重新安装，onMount()不会触发，因此不会实例化新的 SSE 请求。我不知道有什么方法可以轻松地强制组件重新安装，这将是最简单的（相关的github问题在这里）
另一种尝试是使用反应式语句，如下所示：
<script>
export let quote;
let sse = {};
$: {
if(process.browser === true) { …我是 Svelte 的新手，我试图将一些信息设置到 sessionStorage 中，但它抛出“sessionStorage 未定义”。我意识到我收到此错误是因为它在服务器端运行。
我在/src/components/nav.svelte创建了一个使用/src/domain/auth/service.js的组件，错误发生在最后一个。
在网上搜索我发现在这种情况下我必须在onMount函数中使用sessionStorage。这是正确的方法吗？
我怎样才能避免我的代码变得有点乱？
事情是，我有两个途径
/istifta和/istifta/edit
该/istifta路线显示istiftas（问题），而/istifta/edit路线开辟了编辑在同一页上，由于同样的问题面板_layout.svelte文件。
唯一的问题是，当我/istifta/edit从/istifta. 它不仅会打开编辑面板，还会滚动到页面顶部。我怎样才能阻止这种行为？我想在此导航时保持在相同的滚动位置。istiftas 是一个很长的清单。对于编辑，它应该保持在相同的滚动位置。一次又一次地滚动到底部并找到 id 对用户来说过于复杂。
请解决这个问题。特别是Rich Harris，如果您正在阅读本文。
我试图通过自定义属性将附加类传递给组件，但编译器检测到该类未在使用中并且不包含它。给定这个组件：
<script>
import {createEventDispatcher} from 'svelte';
const dispatch = createEventDispatcher();
export let imageUrl = null;
export let cssClass = '';
export let data = null;
function handleImageClick(e){
dispatch('press', {element:this, event: e, props: $$props });
}
</script>
<style>
.image-button{
width:100px;
height: 72px;
}
</style>
<div class="image-button {cssClass}" on:click={handleImageClick} style="background:url({imageUrl});background-size: cover;"></div>
我创建一个像这样的实例，并通过 cssClass 属性将我的附加类传递给它：
<script>
import ImageButton from './components/ImageButton.svelte';
let imgUrl = "/images/test.png";
</script>
<style>
.my-image-button{
border: 1px solid white;
}
</style>
<ImageButton imageUrl={imgUrl} cssClass="my-image-button" />
ImageButton 实例已创建，它具有附加的“my-image-button”类，但不包括我在 .my-image-button 中声明的样式规则。有没有办法强制编译器包含样式规则或其他工作流程来启用此功能？
我如何使用 Sapper 定期获取数据？
这是正确的方法吗？
//src/routes/fetch_on_this_page.svelte
<script>
setInterval(async () => {
//fetch here
}, 3000);
</script>