show

Conditionally render templates based on a value or expression.

/**
 * Conditionally render a template.
 * @param when Boolean or function returning boolean.
 * @param is Template to render if true.
 * @param not Template to render if false (optional).
 * @returns Rendered Node.
 */
export function show(
  when: boolean | (() => boolean),
  is: VNodeValue | (() => VNodeValue),
  not?: VNodeValue | (() => VNodeValue)
): Node;

/**
 * Render the first matching case.
 * @param cases Array of [condition, template] or [template] for default.
 * @returns Rendered Node.
 */
export function show(
  ...cases: Array<[() => boolean, VNodeValue | (() => VNodeValue)] | [VNodeValue | (() => VNodeValue)]>
): Node;

Usage

Render a template based on a condition or a list of cases. Use with signal for reactivity.

If/Else

import { signal } from '@hellajs/core';
import { html, show } from '@hellajs/dom';

const { div, button } = html;

const isVisible = signal(false);

const toggleVisibility = () => {
  isVisible.set(!isVisible());
};

const App = div(
  button({ onClick: toggleVisibility }, 'Toggle Visibility'),
  show(
    isVisible, // condition (signal or function)
    div('Hello World!'), // shown if true
    div('Goodbye World!') // shown if false
  )
);

Switch/Case

const App2 = div(
  button({ onClick: toggleVisibility }, 'Toggle Visibility'),
  show(
    [() => isVisible(), div('Hello World!')], // first matching case
    [() => !isVisible(), div('Goodbye World!')], // next case
    [div('Default')] // default if no case matches
  )
);