Início / user-1341535

Seva Golovanov's questions

Martin Hope
Seva Golovanov
Asked: 2025-04-22 05:31:32 +0800 CST
  • 5

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: Erro IDE 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?

svelte
Martin Hope
Seva Golovanov
Asked: 2025-04-21 04:24:51 +0800 CST
  • 6

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?

svelte