标签: sveltekit

在 Nuxt 中，我使用Style Resources 包使 SCSS 全局可用，并且我可以访问任何组件中的变量和 mixin。如何在 SvelteKit 中做同样的事情？

<script>
    const socket = new WebSocket("ws://localhost:8000/chat")
    socket.addEventListener("open", ()=> {
        console.log("Opened")
    })


</script>

我正在尝试将 svelte 连接到 fastapi 后端，但使用 svelte 套件时出现此错误。我明白了

WebSocket is not defined
ReferenceError: WebSocket is not defined

错误。

我该如何解决它？

我有一个表单，它使用在 - 中定义的表单use:enhance和操作来更新产品信息+page.server.ts- 但是，每当我提交表单时，都会重置表单元素，并且它们全部变为空白，这是意外的，因为这些元素的值由和use:enhance指定$page.data.product文档指出use:enhance运行invalidateAll.

尽管如此，有没有办法阻止函数内发生这种重置use:enhance？

我的 SvelteKit 应用程序中有一个端点，用于处理来自 Stripe 的 Webhook 请求。每个请求都经过签名，以便可以验证它是否来自 Stripe。

我必须验证该事件是否来自 Stripe 的代码如下所示：

import Stripe from "stripe";

const WEBHOOK_SECRET = process.env["STRIPE_WH_SECRET"];

const stripe = new Stripe(process.env["STRIPE_SECRET"], {
  apiVersion: "2020-08-27",
});

export async function post({ headers, body }) {
  let event: Stripe.Event;
  try {
    event = stripe.webhooks.constructEvent(
      body,
      headers["stripe-signature"],
      WEBHOOK_SECRET
    );
  } catch (err) {
    return {
      status: 400,
      body: err,
    };
  }

  // Do stuff with the event
}

但是当它收到来自 Stripe 的事件时，我收到此错误：

No signatures found matching the expected signature for payload. Are …

我已经使用 svelte 和 sapper 编写了一些应用程序，并且想尝试一下 sveltekit。总而言之，它有效，但我现在遇到了在服务器上注册工作人员的问题。

基本上我试图将 socket.io 添加到我的应用程序中，因为我希望能够从服务器发送和接收数据。对于 sapper，这并不是真正的问题，因为您有server.js可以将 socket.io 连接到 polka/express 服务器的文件。但我在 sveltekit 和 vite 中找不到任何等效项。

我进行了一些实验，我可以在路由中创建一个新的 socket.io 服务器，但这会导致一堆新问题，例如它位于单独的端口上并导致 cors 问题。

所以我想知道 sveltekit 是否可以实现这一点，以及如何访问底层服务器？

如果必须启用服务器端渲染，哪种日志记录解决方案最适合 SvelteKit？

• 可配置的日志记录级别

• 使用 Node.js 适配器运行服务器端渲染时记录到文件/标准输出

• 如果在客户端处理中遇到任何日志语句，则记录到控制台

• 日志级别过滤器、时间戳、着色以及对诊断有用的功能（否则 console.log 就足够了）

我知道有多种 JavaScript 日志记录解决方案，例如 Winston，但我不确定它们是否非常适合 SvelteKit 模型。

在 SvelteKit 导航goto中允许传递state第二个参数，例如：

import { goto } from '$app/navigation';

// ...

goto('/login', { state: { foo: 'bar' } });

这些文档没有明确说明state在发生导航后如何使用/检索。state似乎不存在于$page上，也不似乎在 上可用$navigating。

你如何消费state传递给第二个参数的goto()？目前是否丢失并且您必须创建自己的可写存储来管理此状态？

这是一个适配器静态SvelteKit 应用程序。

我/static使用默认的 SvelteKit 应用程序模板提供字体和 CSS 文件。我正在使用 SvelteKit Node.js 适配器。

文件的默认缓存生存时间 (TTL) 似乎为 4 小时/static。我不确定这是否是由 SvelteKit/Vite 本身设置的，或者像 CloudFlare 这样的中间件是否会做出这样的假设。

我如何在 SvelteKit 中覆盖它？我认为这需要在 Vite 中以某种方式进行配置，以便/static文件是具有正确 HTTP 缓存标头的服务器。由于字体文件不会更改，我想将它们设置为不可变，并避免用户网络浏览器再次重新下载文件。

SvelteKit v1.0.0-next.324

我有一个 SvelteKit 组件，在我的应用程序的多个位置使用，它需要从我的端点之一获取自己的数据。

我读到这个问题load，指出除非它是页面，否则我无法拥有函数。假设我无法将其作为一个页面并将其导入另一个页面，我需要能够自行将数据提取到该组件中。

<script lang="ts">
import { onMount } from 'svelte'
import type { Aircraft } from '$lib/models'
  
let aircrafts: Aircraft[]

onMount(async() => {
  aircrafts = await (await fetch('/aircrafts')).json()
  console.log(aircrafts) //<-- This works
})
</script>
  
<p>{aircrafts.length} Aircraft</p> //<-- undefined Aircraft

我的/aircrafts端点返回数据很好，并且console.log显示了数据。但在我的 HTML 中，aircrafts.length显示undefined Aircraft.

我认为这是因为onMount在设置道具之后发生并且数据实际上没有更新。

如何将数据提取到独立组件中？

使用最新的 SvelteKit (1.0.0-next.401) 我在使用语法从 lib 导入组件时遇到问题$lib。我收到错误和红色波浪线（即使导入和网络应用程序工作正常）。

错误信息如下：

找不到模块“$lib/components/shared/header.svelte”或其相应的类型声明。js(2307)

如果使用相对路径，错误就会消失。