Perguntas[svelte](coding)

Estou usando uma variável env MY_VARque uso de$env/static/public

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

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

Gostaria de simular isso em alguns testes, para suportar os dois cenários: MY_VARbuild true/ false. Mas não consigo. Estou usando o vitest.

Tentei configurar um arquivo simulado __mock__/env/static/public.tscom:

export const MY_VAR = 'false';

com vitest.config.ts:

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

Também tentei algumas combinações de vi.mock, vi.hoisted, vi.spyOnmas não consegui fazer funcionar.

Como posso simular $env/static/publiccom vitest?

Então, tenho trabalhado na implementação do recurso de trilhas de navegação no meu webapp sveltekit.

1. A ideia é que o breadcrumb seja renderizado no topo do layout.svelte.
2. E então os descendentes subsequentes, de alguma forma, passarão seus dados de navegação para o pai.
3. Isso é útil quando tenho uma rota de descanso em algum lugar.
4. Consegui fazer funcionar. Mas acho que pode haver uma maneira melhor de lidar com isso.
5. exemplo prático -> [https://stackblitz.com/edit/sveltejs-kit-template-default-2o46jwja?file=src%2Froutes%2Ffolders%2F%5B...rest%5D%2F%2Bpage.svelte][1]
6. Como você pode ver, estou fazendo isso usando vanilla js, então o armazenamento não é reativo, já que o inicializei em layout.ts. Isso significa que não será útil para armazenar dados reativos posteriormente.

Seria bom se alguém pudesse compartilhar suas experiências caso tenha encontrado algo parecido com isso.

O tutorial do Svelte demonstra como declarar um trecho de linha de tabela:

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

    {@render monkey()}
</tbody>

Até aqui, tudo bem. Faz sentido colocar um trecho perto de onde ele está sendo usado — um trecho de linha de tabela realmente pertence a tbody.

Também quero reutilizar um trecho de linha de tabela. Só que eu uso a biblioteca de componentes Flowbite Svelte. Então o código fica assim:

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

Isso funciona em tempo de execução, mas tem problemas porque o snippet se torna implicitamente a prop do TableBody:

1. Estou recebendo este erro do tipo: Este é um erro do plugin IDEA Svelte? Não há nenhuma referência, por exemplo, ao ESLint. Deveria ser um aviso e/ou algo passível de supressão? Não encontrei nada parecido no rastreador de problemas da JetBrains.
2. (Menos importante) Neste caso, não pretendo passar o snippet para TableBody como uma propriedade. E se por acaso esperar um snippet com o mesmo nome?

Então a questão é: existe uma maneira de impedir que esse trecho se torne uma propriedade implícita? Ou pelo menos lidar com o problema 1 de alguma forma, sem mover o trecho para fora do TableBody e da Table?

Tenho um simples +page.tsmostrando a datastring e fornecendo o botão "Atualizar":

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

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

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

Tenho um universal loadque +page.tsprefere usar algum tipo de Cache - aqui é apenas um campo estático em uma classe:

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

Por padrão, a única maneira de contornar esse cache é o usuário solicitá-lo explicitamente pressionando o botão "Atualizar". Mas como posso saber quando o erro loadé causado por invalidação e não pelo carregamento inicial da página para limpar o cache? Ou talvez, mais especificamente, pressionando o botão "Atualizar"? Em outras palavras, o que posso inserir ifaqui:

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

    ...

O ideal é que eu procure uma maneira universal, não algo complicado como definir um windowcampo para CSR ou um cabeçalho de solicitação para SSR. Poderia ser algo relacionado à rota, um parâmetro de consulta? Mas como definir isso para a chamada invalidateor invalidateAll?

Estou pensando sobre os internos do Svelte para projetar adequadamente meu aplicativo para ter eficiência máxima (posso lidar com (dezenas?) de milhares de elementos para atualizar, então eficiência importa), notavelmente com como a reatividade é implementada. Então, usando este pequeno exemplo (no link você pode inspecionar o código JS na aba direita), implementei este código básico:

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

e obtenho o seguinte JavaScript compilado:

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']);

O que parece importante é o código:

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

Se meu entendimento de sinais estiver correto (eu segui esta ótima postagem para entender como os sinais são implementados), isso executará a função de retorno de chamada toda vez que um sinal mudar internamente... mas o problema é que se barmudar, o código $.set_text(text, `Hello ${$.get(foo) ?? ''}`);também mudará, ou seja, mudar um sinal aciona operações O(n) onde n é o número de sinais... Com 2 elementos isso não é muito, mas se eu tiver dezenas de milhares de elementos, temo ter um tempo de atualização não desprezível.

Então eu tenho duas perguntas:

1. Por que o Svelte não implementa um retorno de chamada por sinal para ter uma complexidade O(1) independente do número de sinais?
2. Além disso, a mesma ideia é seguida por observable? Meu objetivo final é entender a complexidade das atualizações no liveQueryobservable do Dexie.js.

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?