问题[svelte](coding)

我有一个正确绑定到其父级的变量：其值在单击时会发生变化，并且该值在父级和绑定子级中均正确显示。您可以在 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 中的组件？如果可以，我该怎么做，我做错了什么？

// states.svelte.js
export let name = $state("John"); // a state to be shared by multiple components

<!-- Component.svelte -->
<script>
  import { name } from "./states.svelte.js";
</script>

<p>Hello, my name is <input type="text" bind:value={name} /></p>

重新编译

当迁移到 svelte5 时，我尝试用$state替换可写存储，但出现错误。Cannot bind to import (https://svelte.dev/e/constant_binding)

正确的做法是什么？

我想管理状态的值a（进行自定义验证，所以我不会使用bind:value）以传递到我的输入中，但是输入中显示的值不是我在状态中的值a，为什么会发生这种情况？

<script lang="ts">
  let a = "";
  const onChange = (e: any) => {
    const nv = e.target.value;
    if (nv.length <= 4) {
      a = nv;
    }
  };
</script>

<div>value:{a}</div>

<input type="text" value={a} on:input={onChange} />

我正在尝试使用 Svelte 5 和符文创建一个全局状态：

// store.svelte.ts
export const person = ({
    name: '',
});

export const mrName = $derived('Mr. ' + person.name); // <-- problem!

我无法$derived工作：

Cannot export derived state from a module.

6 |  export const mrName = $derived("Mr. " + person.name);
                                                           ^
7 |

对全球的正确方法是什么$derived？

在 Svelte 5 中，我如何用标签包裹每个子项，如下例所示？

{#if children}
  {#each children as child}
    <button
      onclick={() => {
        handleClick();
      }}
    >
      {@render child?.()}
    </button>
  {/each}
{/if}

在我的 Svelte 4 应用中，我动态加载了组件，所有组件都有不同的 props。非常简单的复制（也可在Svelte Playground上使用）：

// App.svelte
<script lang="ts">
  import One from "./One.svelte";
  import Two from "./Two.svelte";

  import type { ComponentType } from "svelte";

  type Item = {
    component: ComponentType;
  };

  const items: Item[] = [
    { component: One, one: "World" },
    { component: Two, two: "Svelte" },
  ];
</script>

<div class="container py-20 text-white">
  {#each items as item}
    <div>
      <svelte:component this={item.component} {...item} />
    </div>
  {/each}
</div>

// One.svelte
<script lang="ts">
    export let one;
</script>

Hello {one}

// Two.svelte
<script lang="ts">
    export let two;
</script>

Goodbye {two}

运行良好，没有任何警告或错误，到目前为止没有任何投诉。但是我想迁移到 Svelte 5，现在我收到一堆 TypeScript 错误。例如ComponentType已弃用，以及类似以下内容：

Type '__sveltets_2_IsomorphicComponent<{ one: any; }, { [evt: string]: CustomEvent<any>; }, {}, {}, string>' is not assignable to type 'ComponentType'.
  Type '__sveltets_2_IsomorphicComponent<{ one: any; }, { [evt: string]: CustomEvent<any>; }, {}, {}, string>' is not assignable to type 'new (options: ComponentConstructorOptions<Record<string, any>>) => SvelteComponent<Record<string, any>, any, any>'.
    Types of parameters 'options' and 'options' are incompatible.
      Type 'ComponentConstructorOptions<Record<string, any>>' is not assignable to type 'ComponentConstructorOptions<{ one: any; }>'.
        Property 'one' is missing in type 'Record<string, any>' but required in type '{ one: any; }'.

我该如何重构代码，使其继续工作，而不会出现 TypeScript 错误，并且不必对每个组件进行强类型化？在我的实际应用中，涉及许多组件，每个组件都有一大堆不同的 props。我不想为每个组件创建类型别名。

只需更改ComponentType为Component即可消除弃用警告，但其他警告基本仍然相同：

Type '__sveltets_2_IsomorphicComponent<{ one: any; }, { [evt: string]: CustomEvent<any>; }, {}, {}, string>' is not assignable to type 'Component<{}, {}, string>'.
  Types of parameters 'props' and 'props' are incompatible.
    Type '{}' is not assignable to type '{ one: any; } & { $$events?: { [evt: string]: CustomEvent<any>; } | undefined; $$slots?: {} | undefined; }'.
      Property 'one' is missing in type '{}' but required in type '{ one: any; }'.ts(2322)

更改ComponentType为SvelteComponent也不会让事情变得更好。当我使用该unknown类型时，我收到此警告：

Argument of type 'unknown' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent | Component<any, any, any> | null | undefined'.

至少那只是一个警告，而不是数组中的一大堆，所以更好，但这真的不能用更好的方法解决吗（无需输入每个组件）？

我正在尝试在 Svelte 5 中实现表单提交操作，但似乎遇到了一些反应性问题。

<script>
    const formData = $state({
        name: 'abc',
    })

    const saveData = (e) => {
        e.preventDefault()
        console.log(formData)
    }
</script>

<form onsubmit={saveData}>
    <input type="text" bind:value={formData.name}/>
    <button type="submit">
        Create
    </button>
</form>

<pre>
{formData.name}
</pre>

正如预期的那样，{formData.name}显示正确的值，但无论我在表单中输入什么，console.log(formData)始终都会输出。我如何在提交处理程序中检索最新的值？abc

我如何在 svelte 中添加这个 buymecoffee 脚本标签。

  type="text/javascript"
  src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js"
  data-name="bmc-button"
  data-slug="slug_name"
  data-color="#FFDD00"
  data-emoji="☕"
  data-font="Lato"
  data-text="Buy me a coffee"
  data-outline-color="#000000"
  data-font-color="#000000"
  data-coffee-color="#ffffff"
></script>;

我的页面中已经有另一个脚本标签，如下所示：

<script lang='ts'>
    import { onMount } from 'svelte';
  
    let sectionsVisible = [false, false, false, false];
  
    function handleScroll() {
      const sections = document.querySelectorAll('section');
      sections.forEach((section, index) => {
        const rect = section.getBoundingClientRect();
        if (rect.top < window.innerHeight * 0.75) {
          sectionsVisible[index] = true;
        }
      });
    }
  
    onMount(() => {
      handleScroll();
      window.addEventListener('scroll', handleScroll);
    });
  </script>

我如何才能将这两个脚本标签合并到一个页面中。是否可以将 buymecoffee 按钮放置在我想要的位置？