@aria-ui/core

@aria-ui/core

A compact and efficient toolkit for building reactive web components. It powers the Aria UI library, but it can also be used independently.

Key Features

Reactive Signals

Uses signals to manage state reactively and automatically update the DOM in response to state changes. It's powered by the mature and battle-tested @preact/signals-core library.

Context Management

Shares signals easily across widely nested HTML elements through context.

DOM Manipulation Utilities

A comprehensive collection of utilities for DOM interactions, enabling declarative management of attributes, styles, and event listeners.

Classes

BaseElement

Base class for all custom elements in Aria UI. It implements the ConnectableElement interface.

new BaseElement(): BaseElement

Interfaces

ConnectableElement

Any HTML element that has implemented the addConnectedCallback method.

Property	Type	Description
addConnectedCallback	(callback: () => void | VoidFunction) => void	Registers a callback to be called when the element is connected to the DOM. This callback can return a cleanup function that will be called when the element is disconnected from the DOM.

Context<T>

A context is a way to provide and consume signals in a HTML tree.

Methods

consume()

consume(element: ConnectableElement, defaultValue: T): Signal<T>

Receives the signal from a parent element.

provide()

provide(element: ConnectableElement, signal: Signal<T>): void

Provides a signal to all children of the element.

Type Aliases

SignalValue<S>

type SignalValue<S>: S extends Signal<infer T> ? T : never;

SingalState<T>

type SingalState<T>: { [K in keyof T]: Signal<T[K]> };

Functions

assignProps()

function assignProps<T>(
  defaultProps: Readonly<T>,
  props?: Partial<T>,
): Readonly<T>;

Merge two objects, with the second object taking precedence. Only keys present in the first object will be included in the result.

createContext()

function createContext<T>(key: string | symbol): Context<T>;

Creates a new context.

mapSignals()

function mapSignals<T>(values: T): SingalState<T>;

Maps every value in the given object to a signal.

mapValues()

function mapValues<T>(signals: SingalState<T>): T;

Maps every signal in the given object to its current value.

useAriaAttribute()

function useAriaAttribute<K>(
  element: ConnectableElement,
  key: K,
  compute: () => AriaAttributes[K],
): () => void;

useAriaRole()

function useAriaRole(
  element: ConnectableElement,
  compute: () => undefined | AriaRole,
): () => void;

useAttribute()

function useAttribute(
  element: ConnectableElement,
  key: string,
  compute: () => undefined | string | number,
): () => void;

useEffect()

function useEffect(
  element: ConnectableElement,
  callback: () => void | VoidFunction,
): () => void;

useEventListener()

function useEventListener<K>(
  element: ConnectableElement,
  type: K,
  listener: (event: HTMLElementEventMap[K]) => void,
  options?: boolean | AddEventListenerOptions,
): void;

useStyle()

function useStyle<K>(
  element: ConnectableElement,
  key: K,
  compute: () => CSSStyleDeclaration[K],
): () => void;