Kevin Renskers's questions

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

Eu uso o shell Fish, usando a configuração deste repositório dotfiles: https://github.com/kevinrenskers/dotfiles/tree/main/fish .

O problema é que sempre que abro uma nova aba no meu terminal, ela começa do caminho anterior, em vez da pasta home do meu usuário. Como posso mudar esse comportamento para que todo terminal sempre abra de ~?

O estranho é que eu uso esses dotfiles há muito tempo e nunca tive esse problema até formatar meu computador e configurá-lo do zero. Não faço ideia do porquê agora ele se comporta assim, mas eu realmente não gosto.

No meu site SvelteKit eu faço uma solicitação ao meu backend dentro da LayoutServerLoadfunção, em formato +layout.server.ts. Ou seja, quando o site é aberto com um ?affiliate_id=blaparâmetro de consulta, quero enviar isso para o backend:

import type { LayoutServerLoad } from "./$types";
import { keyBy } from "$lib/utils";
import { backendUrl } from "$lib/config";

export const trailingSlash = "always";

export const load: LayoutServerLoad = async ({ locals, url, fetch }) => {
  const affiliate_id = url.searchParams.get("affiliate_id");
  if (affiliate_id) {
    const headers = {
      "Content-Type": "application/json",
      "X-CSRFToken": locals.csrfToken,
    };

    fetch(`${backendUrl}/shop/basket/`, { method: "POST", credentials: "include", headers, body: JSON.stringify({ affiliate_id }) })
      .catch(error => {
        console.error("Error storing affiliate_id: ", error);
      });
  }

  return {
    // I'm returning a bunch of data here
  };
};

O problema é que a resposta do backend contém um set-cookiecabeçalho e o cookie não está sendo armazenado no navegador.

Quando mudo minha loadfunção para apenas retornar affiliate_id:

export const load: LayoutServerLoad = async ({ locals, url }) => {
  return {
    affiliateId: url.searchParams.get("affiliate_id"),
    // and more data
  };
};

E então faça a solicitação dentro de +layout.svelte, então tudo funcionará bem.

<script lang="ts">
  import type { PageData } from "./$types";
  import { onMount } from "svelte";

  export let data: PageData;
  const { affiliateId } = data;

  onMount(async () => {
    if (affiliateId) {
      // Do the request here
    }
  });
</script>

<slot />

Agora o cookie da resposta está armazenado perfeitamente no navegador.

Por que o cookie não é armazenado ao fazer a mesma solicitação na loadfunção?

Estou trabalhando em uma API Django para uma loja virtual e organizei os modelos e visualizações em diferentes aplicativos: um para pedidos, um para cestas, um para produtos e um para ofertas. Agora quero adicionar esses modelos ao site de administração, mas não quero que apareçam como quatro seções diferentes, cada uma com um modelo para gerenciar. Em vez disso, quero uma nova seção "Loja", onde mostro os modelos de todos esses aplicativos.

Então, em vez disso:

Quero os dois modelos em uma seção comum. Isso é possível?

Tentei definir o mesmo nome detalhado no apps.pyarquivo de ambos os aplicativos, mas isso resultou apenas em duas seções com o mesmo nome: