Components, JSX, and DOM API
Component contracts, JSX output, roots, refs, directives, focus, observers, and transitions from the root package.
Components, JSX, and DOM exports
51 public exports, grouped under their canonical import boundary.
@tavojs/core
Canonical import boundary for every symbol in this section.
autoFocus#
autoFocus<T extends HTMLElement = HTMLElement>(options?: FocusOptions | undefined): ElementDirective<T>Creates a directive that focuses the element after it is mounted.
Related guidecaptureFocusRestore#
captureFocusRestore(documentRef?: Document | undefined): () => voidCaptures current focus and returns a function that restores it later.
Related guideCheckedRoot#
type CheckedRoot = Root & {
/** Commits a tree and reports failure after releasing any partial root state. */
renderChecked(node: Child): RootRenderOutcome;
/** Hydrates a tree and reports failure after releasing any partial root state. */
hydrateChecked(node: Child): RootRenderOutcome;
};A root created by `createRoot`, with observable commit outcomes.
Related guideChild#
type Child = Primitive | VNode | Child[];Describes renderable component output, including elements, text, child arrays, and empty values.
Related guideClassName#
type ClassName = string | string[];Defines the class name contract used by the application runtime.
Related guideComponent#
type Component<P extends Record<string, unknown> = Record<string, unknown>> = (props: PropsWithChildren<P>) => Child;Types a function that receives props and returns renderable Tavo.js output.
Related guidecreateDirective#
createDirective<T extends HTMLElement = HTMLElement>(directive: ElementDirective<T>): ElementDirective<T>Creates a reusable element directive from a function.
Related guidecreateListRefs#
createListRefs<K extends string | number, T extends Element = Element>(): { get(key: K): DomRefObject<T>; delete(key: K): boolean; clear(): void; entries(): IterableIterator<[K, DomRefObject<T>]>; }Creates a keyed collection of refs for dynamic lists.
Related guidecreateRef#
createRef<T extends Element = Element>(): DomRefObject<T>Creates a mutable DOM ref object for controller-owned element access.
Related guidecreateRoot#
createRoot(container: Element | DocumentFragment, options?: Readonly<{ onError?: ((error: unknown) => void) | undefined; }> | undefined): CheckedRootCreates a browser root with observable checked render and hydration commits.
Related guideDomRef#
type DomRef<T extends Element = Element> = DomRefObject<T> | DomRefCallback<T> | null | undefined;Public DOM ref value accepted by intrinsic JSX elements.
Related guideDomRefCallback#
type DomRefCallback<T extends Element = Element> = (node: T | null) => void;Callback ref shape for one-off DOM element access.
Related guideDomRefObject#
type DomRefObject<T extends Element = Element> = {
current: T | null;
};Object ref shape used by MVC controllers to keep direct DOM handles.
Related guideElementCleanup#
type ElementCleanup = () => void;Defines the element cleanup contract used by the application runtime.
Related guideElementDirective#
type ElementDirective<T extends HTMLElement = HTMLElement> = (element: T) => void | ElementCleanup;Defines the element directive contract used by the application runtime.
Related guideElementDirectiveInput#
type ElementDirectiveInput<T extends HTMLElement = HTMLElement> = ElementDirective<T> | Array<ElementDirective<T> | null | undefined | false> | null | undefined | false;Defines the element directive input contract used by the application runtime.
Related guideElementTarget#
type ElementTarget<T extends Element = Element> = T | DomRefObject<T>;Defines the element target contract used by the application runtime.
Related guidefocusFirst#
focusFirst(root: ParentNode, options?: FocusOptions | undefined): HTMLElement | nullFocuses the first focusable descendant inside a root node.
Related guidefocusFirstInvalid#
focusFirstInvalid(root: ParentNode, options?: FocusOptions | undefined): HTMLElement | nullFocuses the first invalid form control inside a root node.
Related guideFragment#
Fragment: typeof FragmentGroups sibling children without adding a wrapper element to the DOM.
Related guidegetFocusableElements#
getFocusableElements(root: ParentNode): HTMLElement[]Finds focusable descendants in DOM order.
Related guideh#
h(type: NodeType, props: (Record<string, unknown> & { children?: Child }) | null, ...children: Child[]): VNodeCreates a virtual element from a component or tag, props, and children without JSX syntax.
Related guidemergeRefs#
mergeRefs<T extends Element>(...refs: DomRef<T>[]): DomRefCallback<T>Combines several refs into one callback ref.
Related guideobserveIntersection#
observeIntersection<T extends Element>(target: ElementTarget<T>, listener: IntersectionObserverCallback, options?: IntersectionObserverInit | undefined): UnsubscribeObserves element viewport intersection changes and returns an unsubscribe function.
Related guideobserveMutation#
observeMutation<T extends Node>(target: T | { current: T | null; }, listener: MutationCallback, options?: MutationObserverInit | undefined): UnsubscribeObserves DOM mutations and returns an unsubscribe function.
Related guideobserveResize#
observeResize<T extends Element>(target: ElementTarget<T>, listener: ResizeObserverCallback, options?: ResizeObserverOptions | undefined): UnsubscribeObserves element size changes and returns an unsubscribe function.
Related guidePropsWithChildren#
type PropsWithChildren<P extends Record<string, unknown> = Record<string, unknown>> = P & {
children?: Child;
};Adds optional renderable children to an existing component props type.
Related guiderender#
render(node: Child, container: Element | DocumentFragment): voidRenders Tavo.js output into a browser container through the convenience root API.
Related guiderenderToString#
renderToString(node: Child): stringConverts a component tree to escaped HTML without creating a complete document or starting client lifecycle hooks.
Related guideRoot#
type Root = {
render(node: Child): void;
hydrate(node: Child): void;
unmount(): void;
};Source-compatible root lifecycle API. Roots returned by `createRoot` are `CheckedRoot`s.
Related guideRootOptions#
type RootOptions = Readonly<{
/** Receives uncaught root-scoped render failures without replacing the checked outcome. */
onError?: (error: unknown) => void;
}>;Configures root in the application runtime.
Related guideRootRenderFailure#
type RootRenderFailure = Readonly<{
ok: false;
error: unknown;
}>;Failed checked root commit with the original render error.
Related guideRootRenderOutcome#
type RootRenderOutcome = RootRenderSuccess | RootRenderFailure;Defines the root render outcome contract used by the application runtime.
Related guideRootRenderSuccess#
type RootRenderSuccess = Readonly<{
ok: true;
}>;Successful checked root commit.
Related guidesetRef#
setRef<T extends Element>(ref: DomRef<T>, node: T | null): voidSets a ref to a DOM node or null. Useful when writing framework adapters.
Related guidetransition#
transition<T extends HTMLElement = HTMLElement>(options?: TransitionOptions<T> | undefined): ElementDirective<T>Creates a small class/callback transition directive for mounted elements.
Related guideTransitionClassNames#
type TransitionClassNames = {
enter?: string;
enterActive?: string;
leave?: string;
leaveActive?: string;
};Defines the transition class names contract used by the application runtime.
Related guideTransitionOptions#
type TransitionOptions<T extends HTMLElement = HTMLElement> = {
classes?: TransitionClassNames;
onEnter?: (element: T) => void;
onLeave?: (element: T) => void;
};Configures transition in the application runtime.
Related guidetrapFocus#
trapFocus(root: HTMLElement): () => voidKeeps Tab navigation inside a container until the returned cleanup runs.
Related guideVNode#
type VNode = {
type: NodeType;
props: {
children: Child[];
[key: string]: unknown;
};
};Describes a virtual element's type, props, and children before the runtime renders it.
Related guide@tavojs/core/runtime
Canonical import boundary for every symbol in this section.
CheckedRoot#
type CheckedRoot = Root & {
/** Commits a tree and reports failure after releasing any partial root state. */
renderChecked(node: Child): RootRenderOutcome;
/** Hydrates a tree and reports failure after releasing any partial root state. */
hydrateChecked(node: Child): RootRenderOutcome;
};A root created by `createRoot`, with observable commit outcomes.
Related guideChild#
type Child = Primitive | VNode | Child[];Describes renderable component output, including elements, text, child arrays, and empty values.
Related guideComponent#
type Component<P extends Record<string, unknown> = Record<string, unknown>> = (props: PropsWithChildren<P>) => Child;Types a function that receives props and returns renderable Tavo.js output.
Related guidecreateDirective#
createDirective<T extends HTMLElement = HTMLElement>(directive: ElementDirective<T>): ElementDirective<T>Creates a reusable element directive from a function.
Related guidecreateRoot#
createRoot(container: Element | DocumentFragment, options?: Readonly<{ onError?: ((error: unknown) => void) | undefined; }> | undefined): CheckedRootCreates a browser root with observable checked render and hydration commits.
Related guideElementDirective#
type ElementDirective<T extends HTMLElement = HTMLElement> = (element: T) => void | ElementCleanup;Defines the element directive contract used by the application bootstrap.
Related guideElementDirectiveInput#
type ElementDirectiveInput<T extends HTMLElement = HTMLElement> = ElementDirective<T> | Array<ElementDirective<T> | null | undefined | false> | null | undefined | false;Defines the element directive input contract used by the application bootstrap.
Related guideFragment#
Fragment: typeof FragmentGroups sibling children without adding a wrapper element to the DOM.
Related guideh#
h(type: NodeType, props: (Record<string, unknown> & { children?: Child }) | null, ...children: Child[]): VNodeCreates a virtual element from a component or tag, props, and children without JSX syntax.
Related guideRootRenderOutcome#
type RootRenderOutcome = RootRenderSuccess | RootRenderFailure;Defines the root render outcome contract used by the application bootstrap.
Related guideVNode#
type VNode = {
type: NodeType;
props: {
children: Child[];
[key: string]: unknown;
};
};Describes a virtual element's type, props, and children before the runtime renders it.
Related guide