component()

Define a component with a setup function.

Signature

function component<P extends Record<string, any>>(
  setup: (props: P) => WhisqNode
): ComponentDef<P>

Parameters

Param	Type	Description
setup	(props: P) => WhisqNode	Setup function — runs once, returns UI

Caution

setup runs once and props are captured at that moment — they are not reactive by default. Pass getter functions (() => signal.value) when a parent needs to update a child’s value over time. See Components → Props and reactivity.

Returns

ComponentDef<P> — a callable that accepts props and returns a WhisqNode.

Examples

import { signal, component, div, button, span, mount } from "@whisq/core";

const Counter = component((props: { initial?: number }) => {
  const count = signal(props.initial ?? 0);

  return div(
    button({ onclick: () => count.value-- }, "-"),
    span(() => ` ${count.value} `),
    button({ onclick: () => count.value++ }, "+"),
  );
});

mount(Counter({ initial: 10 }), document.getElementById("app")!);