rynex/dist/runtime/dom.d.ts

A minimalist TypeScript framework for building reactive web applications with no virtual DOM

/**
 * Rynex DOM Manipulation
 * Direct DOM element creation and manipulation (vanilla JavaScript)
 * No Virtual DOM - just real DOM elements
 */
export type DOMChild = HTMLElement | SVGElement | Text | string | number | boolean | null | undefined;
export type DOMChildren = DOMChild | DOMChild[];
export interface DOMProps {
    [key: string]: any;
    class?: string;
    className?: string;
    id?: string;
    style?: string | Partial<CSSStyleDeclaration> | Record<string, any>;
    onHover?: Partial<CSSStyleDeclaration> | Record<string, any>;
    onClick?: (event: MouseEvent) => void;
    onInput?: (event: Event) => void;
    onChange?: (event: Event) => void;
    onSubmit?: (event: Event) => void;
    onFocus?: (event: FocusEvent) => void;
    onBlur?: (event: FocusEvent) => void;
    onKeyDown?: (event: KeyboardEvent) => void;
    onKeyUp?: (event: KeyboardEvent) => void;
    onMouseEnter?: (event: MouseEvent) => void;
    onMouseLeave?: (event: MouseEvent) => void;
    onDoubleClick?: (event: MouseEvent) => void;
    onContextMenu?: (event: MouseEvent) => void;
    onMouseMove?: (event: MouseEvent) => void;
    onScroll?: (event: Event) => void;
    onDrag?: (event: DragEvent) => void;
    onDrop?: (event: DragEvent) => void;
    ref?: {
        current: HTMLElement | null;
    };
}
/**
 * Create a real DOM element (vanilla JavaScript)
 * This is the core function that replaces the h() virtual DOM function
 */
export declare function createElement(tag: string, props?: DOMProps | null, ...children: DOMChildren[]): HTMLElement;
/**
 * Create a text node
 */
export declare function createTextNode(text: string | number): Text;
/**
 * Apply properties to a DOM element
 */
export declare function applyProps(element: HTMLElement, props: DOMProps): void;
/**
 * Update properties on a DOM element
 */
export declare function updateProps(element: HTMLElement, oldProps: DOMProps, newProps: DOMProps): void;
/**
 * Remove a property from a DOM element
 */
export declare function removeProp(element: HTMLElement, key: string, value: any): void;
/**
 * Append children to a DOM element
 */
export declare function appendChildren(parent: HTMLElement | SVGElement, children: DOMChildren[]): void;
/**
 * Replace all children of an element
 */
export declare function replaceChildren(parent: HTMLElement, children: DOMChildren[]): void;
/**
 * Mount an element to a container
 */
export declare function mount(element: HTMLElement, container: HTMLElement): void;
/**
 * Unmount an element from its parent
 */
export declare function unmount(element: HTMLElement): void;
/**
 * Create a ref object for accessing DOM elements
 */
export declare function createRef<T extends HTMLElement = HTMLElement>(): {
    current: T | null;
};
/**
 * Query selector helper
 */
export declare function $(selector: string, parent?: HTMLElement | Document): HTMLElement | null;
/**
 * Query selector all helper
 */
export declare function $$(selector: string, parent?: HTMLElement | Document): HTMLElement[];
/**
 * Add class to element
 */
export declare function addClass(element: HTMLElement, ...classNames: string[]): void;
/**
 * Remove class from element
 */
export declare function removeClass(element: HTMLElement, ...classNames: string[]): void;
/**
 * Toggle class on element
 */
export declare function toggleClass(element: HTMLElement, className: string, force?: boolean): void;
/**
 * Set styles on element
 */
export declare function setStyle(element: HTMLElement, styles: Partial<CSSStyleDeclaration>): void;
/**
 * Set attributes on element
 */
export declare function setAttributes(element: HTMLElement, attrs: Record<string, string>): void;
/**
 * Add event listener helper
 */
export declare function on<K extends keyof HTMLElementEventMap>(element: HTMLElement, event: K, handler: (event: HTMLElementEventMap[K]) => void, options?: AddEventListenerOptions): () => void;
/**
 * Remove event listener helper
 */
export declare function off<K extends keyof HTMLElementEventMap>(element: HTMLElement, event: K, handler: (event: HTMLElementEventMap[K]) => void): void;
//# sourceMappingURL=dom.d.ts.map