DOM Bindings API : Sairin

DOM bindings connect reactive signals to DOM elements. Each binding returns a cleanup function.

Setup

Import bindings from sairin:

import { bindText, bindEvent, bindInputValue } from 'sairin';

All bindings return a cleanup function:

const cleanup = bindText(element, mySignal);
cleanup(); // Remove the binding

Text & HTML

bindText

Bind element text content to a signal.

function bindText(el: Node, readable: Readable<string>): () => void

const name = signal(path("user", "name"), "World");
bindText(document.querySelector('#greeting'), name);

bindHtml

Bind element innerHTML to a signal.

function bindHtml(el: Element, readable: Readable<string>): () => void

Attributes & Properties

bindAttribute

Bind an element attribute to a signal.

function bindAttribute(
  el: Element,
  attr: string,
  readable: Readable<any>
): () => void

// Sets or removes the attribute based on value
bindAttribute(img, 'src', imageUrl);        // <img src="...">
bindAttribute(div, 'data-id', itemId);      // <div data-id="...">
bindAttribute(input, 'placeholder', hint);   // <input placeholder="...">

bindProperty

Bind an element property to a signal.

function bindProperty<T extends Element, K extends keyof T>(
  el: T,
  prop: K,
  readable: Readable<T[K]>
): () => void

// Direct property assignment
bindProperty(canvas, 'width', canvasWidth);
bindProperty(input, 'disabled', isDisabled);

Classes & Styles

bindClass

Bind an element’s className to a signal.

function bindClass(el: Element, readable: Readable<string>): () => void

bindClass(button, themeClass);  // button.className = themeClass.get()

bindStyle

Bind a single CSS property to a signal.

function bindStyle(
  el: HTMLElement,
  styleProp: string,
  readable: Readable<string>
): () => void

bindStyle(progress, 'width', progressWidth);  // progress.style.width = "50%"
bindStyle(box, 'color', textColor);

Visibility & State

bindVisibility

Show or hide an element based on a boolean signal.

function bindVisibility(el: Element, readable: Readable<boolean>): () => void

bindVisibility(modal, isOpen);  // Adds/removes "hidden" attribute

bindDisabled

Enable or disable an element based on a boolean signal.

function bindDisabled(el: Element, readable: Readable<boolean>): () => void

bindDisabled(submitBtn, isSubmitting);  // Adds/removes "disabled" attribute

bindBooleanAttribute

Add or remove a boolean attribute based on a signal value.

function bindBooleanAttribute(
  el: Element,
  attr: string,
  readable: Readable<boolean>
): () => void

bindBooleanAttribute(div, 'hidden', isHidden);      // <div hidden>
bindBooleanAttribute(input, 'required', isRequired);    // <input required>

bindElementSignal

Move an element into/out of a parent based on a signal value.

function bindElementSignal<T extends Element>(
  el: T,
  sig: Signal<T | null>,
  parent: Element
): () => void

Events

bindEvent

Attach an event listener with automatic cleanup.

function bindEvent<T extends Element>(
  el: T,
  eventName: string,
  handler: (event: Event) => void,
  options?: AddEventListenerOptions
): () => void

bindEvent(button, 'click', () => {
  count.set(count.get() + 1);
});

bindEvent(input, 'input', (e) => {
  value.set((e.target as HTMLInputElement).value);
});

Form Inputs

bindInputValue

Two-way bind an input’s value to a signal.

function bindInputValue(
  input: HTMLInputElement | HTMLTextAreaElement,
  sig: Readable<string>
): () => void

const username = signal(path("form", "username"), "");
bindInputValue(document.querySelector('#username'), username);

bindInputChecked

Two-way bind a checkbox or radio’s checked state.

function bindInputChecked(
  input: HTMLInputElement,
  sig: Readable<boolean>
): () => void

const agreed = signal(path("form", "agreed"), false);
bindInputChecked(document.querySelector('#agree'), agreed);

bindSelectValue

Two-way bind a select element’s value.

function bindSelectValue(
  select: HTMLSelectElement,
  sig: Readable<string>
): () => void

const color = signal(path("settings", "color"), "blue");
bindSelectValue(document.querySelector('#color-select'), color);

Readable Type

Most bindings accept a Readable<T>:

type Readable<T> = Signal<T> | Derived<T>;

This means you can pass either a signal or a derived value to any binding.

DOM Bindings API