Perguntas[svelte](coding)

Estou criando um componente de formulário simples seguindo a documentação do Svelte, que diz que posso acessar os dados de ação do formulário de um componente externo usando o estado da página.

Quando eu desestruturo formo estado da página, ela fica indefinida.

No entanto, posso acessá-lo se o fizer page.formdiretamente.

Por que isso? O que estou perdendo?

<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>

Estou migrando minha base de código do Svelte 4 para o Svelte 5.

Eu tinha o seguinte código:

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 });
    }
  };
}

Que foi usado como renderizador com o svelte-markdownpacote (substituído por @humanspeak/svelte-markdownpara compatibilidade com 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} />

Como posso converter meu createMarkdownLinkRendererpara funcionar com o Svelte 5, já que componentes não são mais classes?

Tenho uma variável que está corretamente vinculada ao seu pai: seu valor muda ao clicar, e esse valor é exibido corretamente tanto no pai quanto no filho vinculado. Você pode testar isso no playground svelte: https://svelte.dev/playground/c2fea05c50394c1199d31aa525df5418?version=5.19.10

+página.esbelto

<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 (criança)

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

</script>

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

Apesar da rerenderização estar acontecendo, meu $effect() que usa a mesma variável de mudança não é chamado. Como posso detectar que uma mudança aconteceu na minha página (a ideia é que eu desenvolvi um arquivo ts que salva automaticamente os dados na mudança, e não consigo encontrar uma maneira de ser notificado sobre as mudanças.

ps: salvar uma página em uma loja também precisaria que eu detectasse que uma mudança aconteceu, e como meu objeto tem dezenas de campos, não quero disparar manualmente um evento na mudança. Alguma ideia de como fazer isso?

Solução baseada na resposta de Brunnerh:

"apenas referenciar o objeto não acionará nada (a menos que ocorra uma reatribuição da variável)."

E disse, vamos tentar algo estúpido (porque, se o método não for chamado, então isso nunca deveria acontecer, certo?). Mas na verdade resolveu o problema, pois o efeito é considerado digno de ser chamado agora:

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

Ainda é muito contraintuitivo, não acho isso explícito o suficiente. Um identificador para dizer "forçar efeito mesmo se não houver gravações acontecendo" seria melhor compreendido, eu acho

Este é meu código (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>

Minha saída é:

a2+b2=c2

Mas os números (2) estão rebaixados (subscrito). Como posso deixar os números em sobrescrito?

Tenho este componente svelte que atualmente está usando a use:diretiva de 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>

Ao tentar passá-lo como prop, recebo um erro de renderização: "Svelte: Este tipo de diretiva não é válido em componentes". Aqui está como estou tentando usar a diretiva como prop:

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

O class:active={isActive}está dando o erro. Existe uma maneira de passar o uso de diretivas para um componente em runas svelte? Se sim, como e o que estou fazendo errado?

// 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>

REPL

Ao migrar para o svelte5, tento substituir um armazenamento gravável por um $state , mas recebo erro Cannot bind to import (https://svelte.dev/e/constant_binding).

Qual é a maneira correta de fazer isso?

Quero gerenciar o valor do aestado (para fazer validações personalizadas, então não usarei bind:value) para passar para minha entrada, mas o valor exibido na entrada não é o valor que tenho no aestado, por que isso aconteceu?

<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} />

Estou tentando criar um estado global com Svelte 5 e runas :

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

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

Não consigo $derivedir trabalhar:

Cannot export derived state from a module.

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

Qual é a abordagem correta para um global $derived?

No Svelte 5, como posso envolver cada filho com uma tag como no exemplo abaixo?

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

No meu aplicativo Svelte 4, carrego dinamicamente componentes, todos com props diferentes. Reprodução muito simples (também disponível no 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}

Isso funciona bem sem nenhum aviso ou erro, sem reclamações até agora. No entanto, quero migrar para o Svelte 5 e agora estou recebendo um monte de erros do TypeScript. Por exemplo, ComponentTypeestá obsoleto, e coisas assim:

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; }'.

Como posso refatorar meu código para que ele continue funcionando, sem erros de TypeScript e sem ter que tipar fortemente cada componente? No meu aplicativo do mundo real, há muitos componentes envolvidos, cada um com um monte de props diferentes. Não quero ter que criar aliases de tipo para cada um deles.

A simples alteração ComponentTypepara Componentelimina o aviso de descontinuação, mas o outro aviso ainda é basicamente o mesmo:

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)

Mudar ComponentTypepara SvelteComponenttambém não melhora as coisas. Quando uso o unknowntipo, recebo este aviso:

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

Pelo menos é apenas um aviso em vez de vários no array, então é melhor, mas isso não pode ser resolvido de uma maneira melhor (sem digitar cada componente)?