标签: sveltekit

我正在使用 Cypress 测试我的 SvelteKit 网站。我有时会遇到不稳定的测试，类似于此处描述的内容： https: //www.cypress.io/blog/2019/01/22/when-can-the-test-click/。简而言之，Cypress 有时会在附加事件侦听器之前找到并单击按钮 - 结果，单击无处可去。建议的解决方案是简单地重新尝试单击，直到附加了适当的侦听器。这也适用于我的情况。然而，尽管我确实理解为什么这可能是博客文章中给出的示例中的一个问题（它是一个大型日历模式），但我发现很难证明在使用简单的 Svelte 按钮时会出现此问题。

这是一个简单的按钮示例，单击时会显示一些内容：

<script>
  let hide = true;
</script>

<button
  on:click={() => {
    console.log('clicked');
    hide = false;
  }}>
  Show
</button>

<span class:hide>Content</span>

<style>
  .hide {
    visibility: hidden;
  }
</style>

相应的测试有时会通过，有时会失败：

it('reveals content on click', () => {
  cy.contains('Show').click();
  cy.contains('Content').should('be.visible');
});

同样，我知道可以通过重新尝试单击该按钮来解决此问题。如果这就是让 Cypress 与 Svelte/SvelteKit 一起工作所需的条件，那么我就同意了。但我想知道：为什么这会成为一个问题？

最小复制仓库：https://github.com/sophiamersmann/test-svelte-kit-cypress

我正在尝试将 svelte SPA 迁移到 Sveltekit 中。

在我的 SPA 中，通信模式就是我所说的“控制器组件”，它负责显示一些组件、监听它们的事件并相应地更新应用程序。总的来说，它看起来像这样的 REPL：

https://svelte.dev/repl/47bd3f8004624a3c95653b1f1aefd8ee?version=3.46.4

正如您在此示例中所看到的，该序列相当简单： 应用程序状态 1) 应用程序显示 CompA 和 CommonComp 应用程序状态 2) CompA 在安装后立即触发 doSomething 函数 应用程序状态 3) 应用程序然后调用 commonComp.setTitle 并在中显示 CompB CompA所在地

在 SvelteKit 中，我很难做类似的事情，因为我不明白如何将数据从带槽的子组件传递到包含槽的组件，反之亦然。无论如何，这导致我进行了这次尝试：

1. 我需要2条路线：

   • 当显示 CompA 和 CommonComp 时的 PageA.svelte
   • 当显示 CompB 和 CommonComp 时的 PageB.svelte

2. 因为 CommonComp 在每个状态下始终可见，所以我认为它应该驻留在 __layout.svelte 文件中。

...这让我看到了下面的草稿，其中的评论解释了我遇到的访问问题。

/src/routes/__layout.svelte

<slot />
<CommonComp />

/src/routes/PageA.svelte

<script>
  import { goto } from "$app/navigation";
  import CompA from "$lib/CompA.svelte";

  function handleDoSomethingFinished() {
    goto("/test/pageB");
  }
</script>

<CompA on:do_something_finished={handleDoSomethingFinished} />

/src/lib/CompA.svelte …

我有两个变量a，b加起来为 100。如何设置反应式声明，以便 whena更改b为 be ，100 - a反之亦然？当我尝试类似的事情时

let total = 100;
$: a = total - b;
$: b = total - a;

我收到“检测到循环依赖性”错误。有什么办法可以完成这件事吗？

我有一个独立的 sveltekit 端点，但我没有获得该端点的打字稿类型。

// src/routes/login.ts
export async function post(request) {
  request.body; // shows as 'any' type

  return { status: 200, body: "ok" };
}

参数request有一个any类型，而函数本身有一个返回类型，Promise<any>这不是我想要的。

我从 sveltekit 定义的类型中找到了，但我不确定如何实现它们。
import type {RequestHandler} from '@sveltejs/kit'

我如何告诉打字稿该post()函数是类型RequestHandler？

另外，tsconfig.json我的项目根目录中有一个自定义文件，但即使删除它，我仍然无法获得端点函数的正确类型。

// tsconfig.json
{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "$src/": ["src/"],
            "$src/*": ["src/*"]
        },
        "typeRoots": ["node_modules/@types", "src/types"]
    }
}

我正在使用 SvelteKit 和 Tailwind 构建一个应用程序。我知道，当使用 Tailwind 进行样式设置时，建议利用组件来减少必须使用 Tailwinds 实用程序类编写的重复代码量。我的问题是，当制作基于 HTML 标签（例如<input>标签）的组件时，处理该组件中的 props（通常只是该标签的属性）会变得令人不知所措。MDN 显示该<input>标签有 31 个可能的属性。我知道我不会使用所有它们，但来回将它们作为道具添加到组件中会变得很烦人。

export let attribute解决这个问题的最佳方法是什么，而不需要向组件添加最多 31 行并将它们添加到组件内部的真实HTML 标记中？

例子：

<script>
    export let name;
    export let id;
    export let type;
    export let disabled;
    export let required;
    export let minLength;
    export let maxLength;
    export let min;
    export let max;
    export let pattern;

    let value;
    let borderColor = '#D1D5DB';

    const inputHandler = (e) => {
        if (e.target.value === '') {
            borderColor = '#D1D5DB';
        } …

我想构建 URL 模式，如下所示[lang]/category/[name]-[suffix]，其中：

• suffix是几个字符串之一，例如：['super-product', 'great-gadget', 'ta-ta-ta']
• name是一个多词slug，比如a-bb-ccc

为了实现它，我决定使用Matching：

export function match(param) {
  let result = /^(super-product|great-gadget|ta-ta-ta)/.test(param); 
  return a;
}

对于 URL 来说/en/category/a-bb-ccc-super-product/，param是bb-ccc-super-product。问：如何让 Svelte 将 URL 拆分为所有可能的选项中的 slugs，例如：a+ bb-ccc-super-product、a-bb+ ccc-super-product、 ...、a-bb-ccc-super+ product，而不仅仅是一个a+bb-ccc-super-product？

另外，我尝试使用处理程序来解决此问题，但失败了，因为我无法更改 URL。

• “@sveltejs/kit”：“1.0.0-next.310”
• “苗条”：“3.47.0”

我有一个启动 SvelteKit 项目。我正在尝试在多个地方重用一个接口。

该文件放置在/src/lib/choice.ts.

export interface Choice {
    id: number;
    value: string;
}

但是，当我尝试在 Svelte 组件中引用此接口时，如下所示：

<script lang="ts">
    import {Choice} from "$lib/choice";
</script>

我收到此错误：

500
The requested module '/src/lib/choice.ts' does not provide an export named 'Choice'
SyntaxError: The requested module '/src/lib/choice.ts' does not provide an export named 'Choice'

然而，我的 IDE 认为这是完全有效的，包括允许单击导航到 Choice 声明。

但是，如果我将声明更改为：

export class Choice {
    id!: number;
    value!: string;
}

一切正常，我的 IDE 很满意。

这里发生了什么？我不明白为什么接口不起作用，但类声明却起作用。

我对 Svelte 还很陌生，我正在尝试在浏览器中渲染我的数据对象。我不确定发生了什么，因为后端似乎没问题，并且我能够在控制台中打印数据对象。

我有一个后端 Flask api，它读取以下 url

https://api.le-systeme-solaire.net/rest/bodies/

就这样并且工作正常。如果你查一下，你可以看到 json 是什么样子的

这是我的 index.svelte 文件的上半部分：

<script>

let data = []

async function initFetchSolarSystemData() {
 let response = await fetch("http://127.0.0.1:5000/solar-system/gravity");
 data = await response.json();

console.log("data", data)
console.log(["id", data.bodies[0].id])
console.log(["gravity", data.bodies[0].gravity])
console.log(["bodies", data.bodies.length])
}

initFetchSolarSystemData()

</script>

因此，当它运行时，我可以在控制台中看到如下值：

['id', 'lune']
['gravity', 1.62]
'bodies', 287]

所以这似乎也运作良好。这是文件的底部部分，我认为错误源于此：

<section>

    {#if data.length}
        {#each data.bodies as item}

            <div class="gravity">
              <h1 id="item">
                {item.gravity}
              </h1>
            </div>

        {/each}
    {/if}

</section>

当我运行脚本时，控制台中没有出现任何错误。没有任何渲染。如果我替换这一行：

 {#if data.length}

和

{#if data.bodies.length}

我得到：

Cannot read properties of undefined …

svelte.config.js我在里面用的是这个

const dev = process.env.NODE_ENV === 'development';

@sveltejs/kit@1.0.0-next.350 有条件地设置一个基本路径，该路径在具有和 的项目中运行良好*.357

现在安装最新的 SvelteKit 版本后，@sveltejs/kit@1.0.0-next.386只会导致undefined

我注意到的差异是新项目列为"vite": "^3.0.0"devDependency 并且脚本从更改"dev": "svelte-kit dev",为"dev": "vite dev"

@sveltejs/kit@1.0.0-next.366更新：带有, vite@2.9.14, -的项目也是如此，"dev": "vite dev"所以切换是在 vite 3.0 之前

浏览我找到的 vite 文档import.meta.env，但这也在undefined里面svelte.config.js

从 Node v16 切换到 17 也没有什么区别

发生了什么变化以及我现在如何区分dev和build模式？

仅在 SSR期间，SSR 期间对 Strapi 的请求因未知原因而失败。SSR 请求到达 Strapi 端点，我可以看到即将返回的数据。但发生了一些事情，请求失败了。

err :>>  AxiosError: connect ECONNREFUSED ::1:1337
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1161:16) {
  port: 1337,
  address: '::1',
  syscall: 'connect',
  code: 'ECONNREFUSED',
  errno: -4078,
  config: {
    transitional: {
      silentJSONParsing: true,
      forcedJSONParsing: true,
      clarifyTimeoutError: false
    },
    adapter: [Function: httpAdapter],
    transformRequest: [ [Function: transformRequest] ],
    transformResponse: [ [Function: transformResponse] ],
    timeout: 0,
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    maxContentLength: -1,
    maxBodyLength: -1,
    env: { FormData: [Function] },
    validateStatus: [Function: validateStatus],
    headers: {
      Accept: 'application/json, text/plain, */*',
      'User-Agent': …