each()

Render a reactive list with optional keyed DOM reconciliation.

Signature

function each<T>(
  items: () => T[],
  render: (item: T, index: number) => WhisqNode,
  options?: { key: (item: T) => unknown },
): (() => Child[]) | WhisqNode

Parameters

Param	Type	Description
`items`	`() => T[]`	Reactive array of items
`render`	`(item: T, index: number) => WhisqNode`	Render function per item
`options.key`	`(item: T) => unknown`	Key function for reconciliation (optional)

Examples

import { signal, each, ul, li } from "@whisq/core";

const todos = signal([
  { id: 1, text: "Learn Whisq" },
  { id: 2, text: "Build an app" },
]);

ul(
  each(() => todos.value, (todo) =>
    li(todo.text),
    { key: (todo) => todo.id },
  ),
)