veloz
velozv0.1.1
Controle de fluxo

Controle de fluxo

Componentes para condições, listas e limites. Cada um atualiza só a própria parte da página e descarta o que remove.

Show

Renderiza os filhos enquanto when for verdadeiro, e fallback caso contrário.

tsx
<Show when={() => user()} fallback={<SignIn />}>
  {(u) => <p>Logado como {u.name}</p>}
</Show>
  • when aceita um valor ou um accessor.
  • Com uma função como filho, ela recebe o valor verdadeiro e é chamada de novo quando esse valor muda.
  • Com filhos comuns, só troca quando a condição alterna entre verdadeiro e falso.
  • Os effects criados pelo ramo escondido são descartados.

For

Renderiza uma lista, identificando as linhas pela identidade do item.

tsx
<ul>
  <For each={() => todos()} fallback={<li>Nada a fazer</li>}>
    {(todo, index) => (
      <li>
        {() => index() + 1}. {todo.title}
      </li>
    )}
  </For>
</ul>

Quando o array muda, as linhas dos itens que continuam lá mantêm os nós do DOM, o foco e o estado, e são movidas se preciso. Itens novos ganham linhas novas; linhas removidas são descartadas. index é um accessor atualizado quando a linha se move.

As linhas são associadas pela identidade. Se você troca um item por um objeto novo ({ ...todo, done: true }), a linha dele é recriada. Mantenha o mesmo objeto e use signals dentro dele quando quiser que a linha fique.

Switch e Match

O primeiro Match cujo when for verdadeiro vence.

tsx
<Switch fallback={<NotFound />}>
  <Match when={() => route() === '/'}>
    <Home />
  </Match>
  <Match when={() => route().startsWith('/docs')}>
    <Docs />
  </Match>
</Switch>

ErrorBoundary

Captura erros lançados ao renderizar os filhos e nos effects que eles criarem depois, e mostra o fallback. reset renderiza os filhos de novo.

tsx
<ErrorBoundary fallback={(error, reset) => (
  <div class="alert">
    {error.message} <button onClick={reset}>Tentar de novo</button>
  </div>
)}>
  {() => <Dashboard />}
</ErrorBoundary>

Passe os filhos como função para que renderizem dentro do limite. Recursos que falham também caem aqui.

Suspense

Mostra o fallback enquanto um recurso lido dentro dele carrega pela primeira vez. Veja Dados assíncronos.

tsx
<Suspense fallback={<Spinner />}>{() => <Profile />}</Suspense>

Portal

Renderiza os filhos em outro elemento, como o document.body para modais e toasts. Os eventos chegam aos handlers normalmente, e o conteúdo é removido quando o Portal é descartado.

tsx
<Show when={open}>
  <Portal mount={document.body}>
    {() => <div class="dialog-backdrop">…</div>}
  </Portal>
</Show>

No servidor, o Portal não renderiza nada; o conteúdo é criado no cliente.

Dynamic

Renderiza uma tag ou um componente escolhido em tempo de execução. Para trocar de forma reativa, envolva numa função.

tsx
<Dynamic component={level === 1 ? 'h1' : 'h2'} class="title">Título</Dynamic>

{() => <Dynamic component={views[current()]} />}