@tempots/dom/renderable/repeat.d.ts

Fully-typed frontend framework alternative to React and Angular

import { ElementPosition } from '../std/element-position';
import { Value } from '../std/value';
import { TNode, Renderable } from '../types/domain';
/**
 * Renders content a specified number of times, with each iteration receiving position information.
 *
 * This function is useful for generating repeated UI elements based on a count rather than an array.
 * Each iteration receives an `ElementPosition` object that provides the current index and position
 * information relative to the total count.
 *
 * @example
 * ```typescript
 * // Create a simple numbered list
 * const count = prop(5)
 *
 * Repeat(count,
 *   (position) => html.div(
 *     `Item ${position.index + 1} of ${position.total.value}`,
 *     position.isFirst ? ' (first)' : '',
 *     position.isLast ? ' (last)' : ''
 *   )
 * )
 * ```
 *
 * @example
 * ```typescript
 * // Create a star rating component
 * const rating = prop(3)
 * const maxStars = 5
 *
 * Repeat(maxStars,
 *   (position) => html.span(
 *     attr.class(position.index < rating.value ? 'star-filled' : 'star-empty'),
 *     '★'
 *   )
 * )
 * ```
 *
 * @example
 * ```typescript
 * // With separators between items
 * Repeat(3,
 *   (position) => html.span(`Item ${position.index}`),
 *   () => html.span(' | ') // Separator
 * )
 * // Renders: Item 0 | Item 1 | Item 2
 * ```
 *
 * @example
 * ```typescript
 * // Dynamic count that updates the UI
 * const itemCount = prop(2)
 *
 * html.div(
 *   html.button(
 *     on.click(() => itemCount.value++),
 *     'Add Item'
 *   ),
 *   Repeat(itemCount,
 *     (position) => html.div(`Dynamic item ${position.index + 1}`)
 *   )
 * )
 * ```
 *
 * @param times - A signal or number representing how many times to repeat the content
 * @param element - Function that returns content for each iteration, receives position information
 * @param separator - Optional function that returns content to place between iterations
 * @returns A renderable that displays the repeated content
 * @public
 */
export declare const Repeat: (times: Value<number>, element: (index: ElementPosition) => TNode, separator?: (pos: ElementPosition) => TNode) => Renderable;