veloz
velozv0.1.1
Control flow

Control flow

Components for conditions, lists and boundaries. Each one updates only its own part of the page and disposes what it removes.

Show

Renders its children while when is truthy, fallback otherwise.

tsx
<Show when={() => user()} fallback={<SignIn />}>
  {(u) => <p>Signed in as {u.name}</p>}
</Show>
  • when takes a value or an accessor.
  • With a function child, it receives the truthy value and is called again when that value changes.
  • With plain children, it only switches when the condition flips between truthy and falsy.
  • Effects created by the hidden branch are disposed.

For

Renders a list, keyed by item identity.

tsx
<ul>
  <For each={() => todos()} fallback={<li>Nothing to do</li>}>
    {(todo, index) => (
      <li>
        {() => index() + 1}. {todo.title}
      </li>
    )}
  </For>
</ul>

When the array changes, rows for items that are still there keep their DOM nodes, focus and state, and are moved if needed. New items get new rows; removed rows are disposed. index is an accessor that updates when the row moves.

Rows are matched by identity. If you replace an item with a new object ({ ...todo, done: true }), its row is recreated. Keep the same object and use signals inside it when you want the row to stay.

Switch and Match

The first Match whose when is truthy wins.

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

ErrorBoundary

Catches errors thrown while rendering its children and in effects they create later, and shows fallback. reset renders the children again.

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

Pass the children as a function so they render inside the boundary. Failed resources land here too.

Suspense

Shows fallback while a resource read inside is loading for the first time. See Async data.

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

Portal

Renders children into another element, such as document.body for modals and toasts. Events reach the handlers normally and the content is removed when the Portal is disposed.

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

On the server, Portal renders nothing; the content is created on the client.

Dynamic

Renders a tag name or a component chosen at runtime. To switch reactively, wrap it in a function.

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

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