Alex's questions

Estou tentando usar o SvelteMap: https://svelte.dev/docs/svelte/svelte-reactivity#SvelteMap

mas por algum motivo não é reativo.

Estou exportando de um arquivo .svelte:

export const items = new SvelteMap<number, Item>();

Itemé um objeto.

Então dentro de uma função eu altero o conteúdo, como:

const item = items.get(num);
item.someProp = newValue;

O mapa é atualizado, mas a reatividade não funciona nos componentes.

Eu também tentei reatribuir o item naquela função

const item = items.get(num);
item.someProp = newValue;
items.set(num, item);

ainda não deu certo..

O token web json parece ser uma boa maneira de proteger apis de servidor de acesso não autorizado, mas um jwt requer uma chave secreta. E geralmente quem faz uma solicitação a um servidor é um navegador. E um navegador não pode armazenar uma chave secreta, porque ela seria visível no HTML.

Então a única opção que resta é usar a senha inserida pelo usuário, armazená-la em uma variável e usá-la como uma chave secreta para solicitações subsequentes. O problema é que no servidor as chaves secretas precisam corresponder, então eu tenho que:

• armazenar o pw em texto limpo. Não é bom por razões óbvias.
• armazene o pw como hash, e faça o hash no cliente antes de passá-lo como chave secreta para criar o token. Não é tão bom também, porque agora qualquer um conhece o método de hash

Ou estou esquecendo de algo? Existe uma maneira melhor de fazer isso?

Como tornar o sectionelemento abaixo rolável e ocupar 100% da altura do elemento pai?

*{ margin: 0 }
main{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: black;
}

header, footer{
  flex: 0 0 auto;
  background: red;
}

content{
  flex: 1 1 auto;
  display: flex:
  flex-direction: column;
}

content nav{
  background: green;
  flex: 0 0 auto;
}

content section{
  flex: 1 1 auto;
  background: blue;
  overflow-y: auto;
  max-height: 100%; /* <- problem */
  
  p{
    flex: 0 0 auto;
  }
}

ul{
  flex: 1 1 auto;
  
  li{
     height: 200px;
  }
}

<main>
  <header>header</header>
  <content>
    <nav>nav</nav>
    <section>
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
      <p>after list</p>
    </section>
  </content>
  <footer>footer</footer>
</main>

Se eu colocar uma altura de pixel fixa nele, max-height: 200pxfunciona como esperado (rola), mas como tornar essa altura variável/preencher a altura restante do pai?

Estou tendo alguns problemas para gravar arquivos no Deno

Os arquivos resultantes estão danificados

O código é muito simples, ele apenas lê de um arquivo e grava em outro:

  let bytesRead: number | null = -1;
  while(bytesRead !== null){
    const buf = new Uint8Array(5 * 1_000_000);
    bytesRead = await infh.read(buf)
    if(bytesRead !== null){
      await outfh.write(buf);
    }
  }

Componente no Svelte 4:

<script>
  let x = 1
  let y = "less than 10"

  function check(){
    if(x > 10){
      y = "more than 10"
    }
  }

  $: {
    check()
  }
</script>

<div>
not runes
<button onclick={() => x++ }>{x}</button>
{y}
</div>

Observe como a instrução reativa chama uma função de verificação, portanto, a instrução reativa nunca é acionada porque "x" não é chamado diretamente.

Mas no modo runas o $effecté acionado mesmo que "x" não apareça diretamente no corpo do efeito:

<script>
  let x = $state(1);
  let y = $state("less than 10");

  function check(){
    if(x > 10){
      y = "more than 10"
    }
  }

  $effect(() => {
    check()
  })
</script>
<div>
runes
<button onclick={() => x++ }>{x}</button>
{y}
</div>

Acho que essa é uma mudança em como os efeitos do svelte funcionam de 4 para 5, mas eu estava pensando como o svelte sabe quando executar o efeito, quando no modo runas? Ele olha para o código da função e verifica as variáveis ​​reativas? E se eu tiver uma chamada de função profundamente aninhada, com uma variável reativa na função mais profunda, o efeito ainda a detectará?

Existe alguma maneira de ter tipos para argumentos de retorno de chamada, em vez de any's?

type Listener = {
  callback: (...data: any[]) => void,
  once: boolean;
}

class EventEmitter{

  eventMap: Map<string, Listener[]> = new Map();


  on(event: string, callback: Listener["callback"], once: boolean = false) {
    const listeners = this.eventMap.get(event) ?? [];
    listeners.push({ callback, once });
    this.eventMap.set(event, listeners);
    return this;
  }

  once(event: string, callback: Listener['callback']): this {
    this.on(event, callback, true);
    return this;
  }

  emit(event: string, ...data: any[]) {
    const listeners = this.eventMap.get(event) ?? [];

    for (let i = 0; i < listeners.length; i++) {
      const { callback, once } = listeners[i];

      callback(...data);
      if (once) {
        listeners.splice(i, 1);
        this.eventMap.set(event, listeners);
      }
    }
  }
}

Emit tem que aceitar qualquer, porque é o ponto de entrada. Digamos que eu chamo isso de:

events.emit("x", 1, true); 
events.emit("y", "test"); 

Quero que os retornos de chamada sejam conectados xpara ver os tipos reais, como:

events.on("x", (arg1, arg2) => { // <= args should have types number and bool

e

events.on("y", (arg1) => { // <= args should have type string

Tenho uma propriedade que deve permitir apenas certos números:

{
   ...
   x: 1 | -1
}

Como definir isso no esquema de validação de entrada?

Se a entrada for JSON, é fácil:

x: z.union([z.literal(-1), z.literal(1)])

mas se a entrada vier na consulta de pesquisa, então os valores serão strings, então preciso ser capaz de forçar o número, mas ainda limitar a -1 e 1 para tornar o tipo inferido do esquema compatível com o tipo TypeScript.

Estou tentando usar Web Workers e percebi que para melhorar o desempenho você pode usar objetos "transferíveis" empostMessage

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

No Deno, objeto transferível significa ArrayBuffer, mas como transformar uma variável de array em ArrayBuffer?

meu caso de uso é enviar uma matriz de cerca de 10 mil elementos para o web worker, então eu gostaria de não copiá-lo, se possível.

Componente pai:

<script>
    import Child from "./Child.svelte"
    import { onMount } from "svelte";
    import apireq from "./api.js";
    
    let items = $state.raw([]);

    let splitItems = $derived(items.splice(0, 5));

    onMount(() => {
        apireq().then(v => items = v)
    })
</script>
<h1>item count in parent {items.length}</h1>
<Child items={splitItems} />

Componente filho

<script>
  let props = $props();
  let { items} = props;
</script>

item count in child:
<div>{items.length}</div>

O componente filho não é atualizado após a solicitação da API. Ainda mostra contagem 0. O componente pai é atualizado.

Eu tentei com ambos $statee $state.raw. Mas eu não quero reatividade total porque é uma matriz grande, e a reatividade na atribuição deve ser suficiente

Isso costumava ser muito simples no Svelte 4, mas no 5 nada funciona como esperado :(

Como posso fazer um loop em um array muito grande e ainda conseguir mover elementos para o final do array sem quebrar o loop?

No loop estou consumindo os elementos, mas alguns deles dependem de outros, e esses eu quero mover no final. Eventualmente todos os elementos serão consumidos, então o loop não será infinito.

Eu sei que a maneira mais fácil é usar apenas uma matriz secundária e não alterar a matriz original no loop, mas os dados são muito grandes e seria muito lento

Como tornar dataarg opcional somente se cato argumento não for 1?

export class MyClass<T extends 1 | 2 | 3>{
  constructor(
    public cat: T,
    public data?: T extends 1 ? string[] : undefined,
  ) {
    ...
  }
}