API Reference

Key Exports

createApp

Creates a new Constela application instance:

function createApp(program: CompiledProgram): App;

mount

Mounts an application to a DOM element:

function mount(app: App, container: HTMLElement): void;

hydrate

Hydrates a server-rendered application:

function hydrate(app: App, container: HTMLElement): void;

App Interface

interface App {
  destroy(): void;
  getState(): Record<string, unknown>;
  dispatch(action: string, payload?: unknown): void;
}

Transition Functions

Low-level transition utilities for applying CSS class-based enter/exit animations. These are called automatically by the runtime when transition is specified on if or each nodes.

applyEnterTransition

Applies an enter transition to a DOM element:

function applyEnterTransition(el: HTMLElement, config: TransitionDirective): () => void;

Flow:

1. Apply config.enter class
2. Next animation frame: apply config.enterActive
3. On transitionend (or fallback timeout): remove both classes

applyExitTransition

Applies an exit transition to a DOM element:

function applyExitTransition(
  el: HTMLElement,
  config: TransitionDirective
): { promise: Promise<void>; cancel: () => void };

Flow:

1. Apply config.exit class
2. Next animation frame: apply config.exitActive
3. On transitionend (or fallback timeout): remove both classes and resolve

TransitionDirective

interface TransitionDirective {
  enter: string;
  enterActive: string;
  exit: string;
  exitActive: string;
  duration?: number;
}