问题[svelte](coding)

我正在使用MY_VAR来自$env/static/public

import { MY_VAR } from '$env/static/public';

export const myVar = MY_VAR === 'true';

我想在一些测试中模拟它，以支持这两种场景：MY_VARbuild true/ false。但我做不到。我正在使用 vitest。

__mock__/env/static/public.ts我尝试使用以下命令设置模拟文件：

export const MY_VAR = 'false';

和vitest.config.ts：

export default defineConfig(({ mode }) => ({
    // ...
    resolve: {
        alias: {
            '$env/static/public': path.resolve(__dirname, '__mocks__/env/static/public')
        }
    }
}));

vi.mock我也尝试了、的一些组合vi.hoisted，vi.spyOn但无法使其发挥作用。

我怎样才能$env/static/public用 vitest 进行模拟？

因此我一直致力于在我的 sveltekit webapp 中实现面包屑功能。

1. 我们的想法是，面包屑将在最顶部的layout.svelte中呈现。
2. 然后，后续的后代会以某种方式将其自身的面包屑数据传递给父代。
3. 当我在某处有 [...] 休息] 路线时这很有用。
4. 我设法让它工作了。但我觉得可能有更好的方法来解决这个问题。
5. 工作示例 -> [https://stackblitz.com/edit/sveltejs-kit-template-default-2o46jwja?file=src%2Froutes%2Ffolders%2F%5B...rest%5D%2F%2Bpage.svelte][1]
6. 如你所见，我使用的是原生 JS，所以这个 store 不是响应式的，因为我是在 layout.ts 中初始化的。这意味着它以后在存储响应式数据时不会派上用场。

如果有人遇到过类似的事情，可以分享他们的经验，那就太好了。

Svelte 教程演示了如何声明表行片段：

<tbody>
    {#snippet monkey()}...{/snippet}

    {@render monkey()}
</tbody>

到目前为止一切都很好。将代码片段放在靠近使用位置的位置是有意义的——表格行代码片段确实应该放在 中tbody。

我也想重用表格行的代码片段。不过我使用的是 Flowbite Svelte 组件库。代码如下：

<Table>
    ...
    <TableBody>
        {#snippet row(row: UserProductListEntry)}
            {row.product.title}
        {/snippet}

这在运行时有效，但由于代码片段隐式地成为 TableBody 的 prop，因此存在问题：

1. 我收到这个类型错误： 这是 IDEA Svelte 插件的错误吗？它没有任何引用，例如 ESLint。它应该是一个警告还是可抑制的？我在 JetBrains 的问题跟踪器上没有找到类似的信息。
2. （不太重要）在这种情况下，我不打算将代码片段作为 prop 传递给 TableBody。如果它恰好需要同名的代码片段怎么办？

那么问题是，有没有办法让这段代码不成为隐式 prop？或者至少能以某种方式处理问题 1，而无需将代码片段移出 TableBody 和 Table ？

我有一个简单的+page.ts显示data字符串并提供“更新”按钮：

<script lang="ts">
    import { invalidateAll } from '$app/navigation';

    const { data } = $props();
</script>

<p>Data: {data.data}</p>
<button onclick={() => invalidateAll()}>Update</button>

我有一个通用load的+page.ts，它更喜欢使用某种缓存 - 这里它只是一个类中的静态字段：

export async function load() {
    let data = Cache.getData();
    if (data) {
        console.log('Found cached data');
    } else {
        console.log('No cached data - fetching');
        data = 'Fresh new data';
        Cache.setData(data);
    }

    return {
        data
    };
}

class Cache {
    static data?: string;

    static getData() {
        return this.data;
    }

    static setData(data: string) {
        this.data = data;
    }

    static clear() {
        this.data = undefined;
    }
}

console.log('Initializing cache');
Cache.setData('Old cached data');

根据设计，绕过此缓存的唯一方法是用户通过按下“更新”按钮明确请求它。但是，我该如何判断是load由失效引起的，而不是由初始页面加载引起的，以便清除缓存？或者更具体地说，是通过按下“更新”按钮？换句话说，我可以在这里输入什么if：

export async function load() {
    if (/* what goes here? */) {
        Cache.clear();
    }

    ...

理想情况下，我正在寻找一种通用的方法，而不是像window为 CSR 设置字段或为 SSR 设置请求标头那样一些 hack 的方法。可能是路由相关的，比如查询参数？但是如何为invalidate或invalidateAll调用设置这些呢？

我想知道 Svelte 的内部结构，以便正确设计我的应用程序以实现最高效率（我可能会处理（数万？）成千上万个要更新的元素，因此效率很重要），尤其是如何实现反应性。因此，使用这个小示例（在链接上，您可以在右侧选项卡上检查 JS 代码），我实现了这个基本代码：

<script>
    let foo = $state(42);
    let bar = $state(52);
</script>

<div onclick={() => foo = foo + 2}>
    Hello {foo}
</div>
<span onclick={() => bar = bar + 1}>
    Hello {bar}
</span>

我得到了以下编译后的 JavaScript：

import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';

var on_click = (_, foo) => $.set(foo, $.get(foo) + 2);
var on_click_1 = (__1, bar) => $.set(bar, $.get(bar) + 1);
var root = $.template(`<div> </div> <span> </span>`, 1);

export default function App($$anchor) {
    let foo = $.state(42);
    let bar = $.state(52);
    var fragment = root();
    var div = $.first_child(fragment);

    div.__click = [on_click, foo];

    var text = $.child(div);

    $.reset(div);

    var span = $.sibling(div, 2);

    span.__click = [on_click_1, bar];

    var text_1 = $.child(span);

    $.reset(span);

    $.template_effect(() => {
        $.set_text(text, `Hello ${$.get(foo) ?? ''}`);
        $.set_text(text_1, `Hello ${$.get(bar) ?? ''}`);
    });

    $.append($$anchor, fragment);
}

$.delegate(['click']);

看起来重要的是代码：

    $.template_effect(() => {
        $.set_text(text, `Hello ${$.get(foo) ?? ''}`);
        $.set_text(text_1, `Hello ${$.get(bar) ?? ''}`);
    });

如果我对信号的理解是正确的（我遵循了这篇很棒的文章来了解信号是如何实现的），那么每次内部信号发生变化时，都会运行回调函数……但问题是，如果bar发生变化，代码$.set_text(text, `Hello ${$.get(foo) ?? ''}`);也会发生变化，即改变一个信号会触发 O（n）操作，其中 n 是信号的数量……对于 2 个元素来说这并不多，但如果我有数万个元素，恐怕更新时间就不可忽略了。

我有两个问题：

1. 为什么 Svelte 不为每个信号实现一个​​回调，以实现与信号数量无关的 O（1）复杂度？
2. 另外，可观察对象是否遵循相同的想法？我的最终目标是了解 Dexie.jsliveQuery可观察对象中更新的复杂性。

我正在按照 Svelte 文档构建一个简单的表单组件，其中说我可以使用页面状态从外部组件访问表单操作数据。

当我form从页面状态解构时，它是未定义的。

但是，如果我page.form直接这样做，我就可以访问它。

这是为什么？我忽略了什么？

<script lang="ts">
    import { enhance } from "$app/forms";
    import { page } from "$app/state";

  let pageDate = page; // pageDate.form is defined
  // let { form } = page; -> form is undefined
</script>

<h3>Login</h3>

{#if pageDate.form?.error}
  <p class="error">{pageDate.form?.error}</p>
{/if}

<form method="POST" action="?/login" use:enhance>
    <label>
        Email
        <input name="email" type="email">
    </label>
    <label>
        Password
        <input name="password" type="password">
    </label>
    <button>Log in</button>
</form>

我正在将我的代码库从 Svelte 4 迁移到 Svelte 5。

我有以下代码：

import MarkdownLinkRenderer from '$lib/MarkdownLinkRenderer.svelte';

export function createMarkdownLinkRenderer(styles: string) {
  return class extends MarkdownLinkRenderer {
    constructor(options: { target: Element; props: { href: string; text: string } }) {
      super(options);
      this.$set({ className: styles });
    }
  };
}

它被用作svelte-markdown软件包的渲染器（@humanspeak/svelte-markdown为了与 Svelte 5 兼容而被替换）：

<script lang="ts">
  const renderers = {
    link: createMarkdownLinkRenderer('text-blue-56 hover:underline')
  };
</script>

<Markdown source={notification.message} options={{ gfm: true, breaks: true }} {renderers} />

createMarkdownLinkRenderer由于组件不再是类，我该如何转换它以与 Svelte 5 配合使用？

我有一个正确绑定到其父级的变量：其值在单击时会发生变化，并且该值在父级和绑定子级中均正确显示。您可以在 svelte 游乐场中 测试它： https://svelte.dev/playground/c2fea05c50394c1199d31aa525df5418 ?version=5.19.10

+页面.svelte

<script lang='ts'>
    import Foo from './Foo.svelte'
    
    let page = $state({value:12});  
    
    $effect(() => {
    console.log("Updating page: ", $inspect(page));
  });
</script>

<div>
  <Foo bind:page={page} />
    App page is {page.value}
</div>

Foo.svelte（子）

<script>    
    let {page =$bindable()} = $props();

</script>

<button onclick={()=>page.value = page.value+1}>
    Value in Foo is {page.value}: click me
</button>
<br/>

尽管正在重新渲染，但使用相同变化变量的 $effect() 不会被调用。我如何才能检测到我的页面发生了变化（我的想法是，我开发了一个 ts 文件，可以在更改时自动保存数据，但我找不到获取更改通知的方法。

附言：在商店中保存页面也需要我检测到发生了更改，并且由于我的对象有几十个字段，我不想在更改时手动触发事件。关于如何做到这一点有什么想法吗？

根据 brunnerh 答案的解决方案：

“仅仅引用对象不会触发任何事情（除非重新分配变量）。”

并说，让我们尝试一些愚蠢的事情（因为，如果该方法没有被调用，那么这永远不会发生，对吧？）。但它实际上解决了这个问题，因为效果现在被认为值得调用：

$effect(() => {
    console.log("Updating page: ", $inspect(page));
    autoSave.update(page = {...page})
});

不过这仍然非常违反直觉，我觉得这还不够明确。我想用句柄来表示“即使没有写入也会强制生效”会更好理解

这是我的代码（Svelte 5、sveltekit、tailwind）：

<script lang="ts">
    import MarkdownIt from 'markdown-it';
    import markdownItKatex from 'markdown-it-katex';
    import 'katex/dist/katex.min.css';

    const md = new MarkdownIt({ html: false, linkify: true, typographer: true });
    md.use(markdownItKatex, { throwOnError: false, errorColor: ' #cc0000' });

    function renderMarkdown(content: string) {
        return md.render(content);
    }

    let content: string = '$a^2+b^2=c^2$';
</script>

<h1>markdown-it-katex</h1>
<div>{@html renderMarkdown(content)}</div>

<style>
</style>

我的输出是：

a​2+b​2=c​2

但是数字 (2) 被降低了（下标）。我怎样才能使数字变成上标？

我有这个 svelte 组件，它目前正在使用use:来自 svelte runes 的指令：

<script>
    import {route} from "@mateothegreat/svelte5-router";

    let {children, className, ...rest} = $props();
</script>

<a
        use:route
        class={`btn ${className}`}
        {...rest}
>
    {@render children()}
</a>

当尝试将其作为 prop 传递时，我收到渲染错误：“Svelte：此类指令在组件上无效”。以下是我尝试将指令用作 prop 的方式：

<ButtonLink
       onclick={() => $currentRoute = window.location.pathname}
       href={href}
       class:active={isActive}
    >

抛出class:active={isActive}了错误。有没有办法将指令的使用传递给 svelte runes 中的组件？如果可以，我该怎么做，我做错了什么？