nexa-runtime

The runtime package provides the virtual DOM engine, component system, lifecycle hooks, directives, and SSR utilities.

h

Creates a virtual DOM node (VNode).

import { h, hText } from 'nexa-runtime'

function h(
  tag: string | Component,
  attrs?: Record<string, any> | null,
  ...children: (VNode | string | number | null | undefined | VNode[])[]
): VNode

Example:

h('div', { class: 'container' },
  h('h1', 'Title'),
  h('p', 'Paragraph text'),
)

hText

Creates a text VNode without wrapping in a tag:

function hText(text: string | number): VNode

Fragment

A special component that renders children without a wrapper element:

import { Fragment } from 'nexa-runtime'

h(Fragment, null,
  h('li', 'One'),
  h('li', 'Two'),
)

mount

Mounts a component into a DOM container.

import { mount } from 'nexa-runtime'

function mount(
  container: string | HTMLElement,
  component: Component
): void

• container — CSS selector string or DOM element
• component — A component created with defineComponent or a .nexa import

applyPatches

Applies VDOM patches to a DOM node (used internally by mount):

function applyPatches(
  parent: HTMLElement,
  oldNode: VNode | null,
  newNode: VNode
): void

defineComponent

Defines a component with setup and render functions.

import { defineComponent } from 'nexa-runtime'

interface ComponentOptions {
  props?: string[] | Record<string, PropType>
  setup?: (props: Record<string, any>) => Record<string, any>
  render: (ctx: Record<string, any>) => VNode
}

function defineComponent(options: ComponentOptions): Component

Option	Description
props	Declared prop names or a map of prop-to-type
setup	Called once on creation; returns reactive context
render	Called on every render; returns a VNode tree

Lifecycle Hooks

Six hooks available inside setup:

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdate,
  onBeforeUnmount,
  onUnmounted,
} from 'nexa-runtime'

function onBeforeMount(fn: () => void): void
function onMounted(fn: () => void): void
function onBeforeUpdate(fn: () => void): void
function onUpdate(fn: () => void): void
function onBeforeUnmount(fn: () => void): void
function onUnmounted(fn: () => void): void

Directives

Template directives available for programmatic use:

vShow

import { vShow } from 'nexa-runtime'

function vShow(vnode: VNode, condition: boolean): VNode

vModel

import { vModel } from 'nexa-runtime'

function vModel(
  vnode: VNode,
  signal: Signal<any>,
  options?: { lazy?: boolean; trim?: boolean }
): VNode

vIf

import { vIf } from 'nexa-runtime'

function vIf(condition: boolean, vnode: VNode, elseVNode?: VNode): VNode | null

vFor

import { vFor } from 'nexa-runtime'

function vFor<T>(
  items: T[],
  fn: (item: T, index: number) => VNode,
  keyFn?: (item: T) => string | number
): VNode[]

queueJob

Schedules a microtask for deferred execution:

import { queueJob } from 'nexa-runtime'

function queueJob(fn: () => void): void

renderToString

Renders a component to an HTML string (for SSR):

import { renderToString } from 'nexa-runtime'

function renderToString(component: Component): Promise<string>

hydrate

Hydrates server-rendered DOM with client-side interactivity:

import { hydrate } from 'nexa-runtime'

function hydrate(
  container: string | HTMLElement,
  component: Component
): void

defineAsyncComponent

Creates a component that loads lazily from a promise:

import { defineAsyncComponent } from 'nexa-runtime'

interface AsyncComponentOptions {
  loader: () => Promise<Component>
  loadingComponent?: Component
  errorComponent?: Component
  delay?: number
  timeout?: number
}

function defineAsyncComponent(options: AsyncComponentOptions): Component

Suspense

A built-in component that coordinates async components, showing fallback until all resolve:

import { Suspense } from 'nexa-runtime'

// Use with h():
h(Suspense, {
  fallback: () => h('div', 'Loading...'),
}, [
  h(AsyncComponent, null),
])

ErrorBoundary

A built-in component that catches render errors in children and shows a fallback:

import { ErrorBoundary } from 'nexa-runtime'

h(ErrorBoundary, {
  fallback: (err: Error) => h('div', err.message),
}, [
  h(UnstableComponent, null),
])

Transition Props

VNodes accept _enter and _leave props for animation:

Prop	Type	Description
_enter	string | true	Enter animation name (or true for v- prefix)
_leave	string | true	Leave animation name (or true for v- prefix)