resig.js
Version:
Universal reactive signal library with complete platform features: signals, animations, CRDTs, scheduling, DOM integration. Works identically across React, SolidJS, Svelte, Vue, and Qwik.
27 lines (26 loc) • 2.33 kB
TypeScript
/**
* DOM Adapter - Bridges categorical primitives to browser APIs
* Provides vanilla DOM integration for Signal-Σ, Blocks, CRDTs, and Scheduler
*/
import { Block, ReactiveBlock } from '../../blocks';
import { Signal } from '../../core/signal';
import { CRDT, ReactiveCRDT } from '../../crdt';
export interface DOMSignal<T> extends Signal<T> {
readonly bindToElement: (element: HTMLElement, property: string) => () => void;
readonly bindToAttribute: (element: HTMLElement, attribute: string) => () => void;
readonly bindToTextContent: (element: HTMLElement) => () => void;
readonly bindToValue: (element: HTMLInputElement) => () => void;
}
export declare const domSignal: <T>(initial: T) => DOMSignal<T>;
export declare const bindElement: <T>(element: HTMLElement, signal: Signal<T>) => (() => void);
export declare const bindAttribute: <T>(element: HTMLElement, attribute: string, signal: Signal<T>) => (() => void);
export declare const bindProperty: <T>(element: HTMLElement, property: string, signal: Signal<T>) => (() => void);
export declare const bindEvent: <T>(element: HTMLElement, event: string, signal: Signal<T>, extractor?: (event: Event) => T) => (() => void);
export declare const domBlock: (tag: string, props?: Record<string, any>) => Block;
export declare const reactiveDOMBlock: <T>(tag: string, propsSignal: Signal<T & Record<string, any>>) => ReactiveBlock;
export declare const syncCRDTToDOM: <T, C extends CRDT<T>>(reactiveCRDT: ReactiveCRDT<T, C>, element: HTMLElement, renderer: (value: T, element: HTMLElement) => void) => (() => void);
export declare const bindFormToSignal: <T extends Record<string, any>>(form: HTMLFormElement, signal: Signal<T>) => (() => void);
export declare const delegate: (container: HTMLElement, selector: string, eventType: string, handler: (event: Event, target: HTMLElement) => void) => (() => void);
export declare const animateElement: (element: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions) => Promise<void>;
export declare const observeIntersection: (element: HTMLElement, callback: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void, options?: IntersectionObserverInit) => (() => void);
export declare const observeResize: (element: HTMLElement, callback: (entry: ResizeObserverEntry) => void) => (() => void);