@tempots/dom/dom/headless-context.d.ts

Fully-typed frontend framework alternative to React and Angular

import { Prop } from '../std/signal';
import { ProviderMark, Clear, Providers } from '../types/domain';
import { BrowserContext } from './browser-context';
import { DOMContext, HandlerOptions } from './dom-context';
declare abstract class HeadlessBase {
    readonly parent: HeadlessBase | undefined;
    readonly id: string;
    private readonly properties;
    readonly children: HeadlessNode[];
    constructor(parent: HeadlessBase | undefined);
    readonly isElement: () => this is HeadlessBase;
    readonly isText: () => this is HeadlessText;
    readonly getText: () => string;
    readonly removeChild: (child: HeadlessNode) => void;
    readonly remove: () => void;
    abstract isPortal(): this is HeadlessPortal;
    readonly getPortals: () => HeadlessPortal[];
    readonly elements: () => HeadlessBase[];
    abstract toHTML(): string;
    readonly hasInnerHTML: () => boolean;
    readonly getInnerHTML: () => string;
    readonly getInnerText: () => string;
    readonly hasInnerText: () => boolean;
    readonly hasChildren: () => boolean;
    readonly hasClasses: () => boolean;
    readonly hasStyles: () => boolean;
    readonly hasAttributes: () => boolean;
    readonly hasHandlers: () => boolean;
    readonly hasRenderableProperties: () => boolean;
    readonly getById: (id: string) => HeadlessBase | undefined;
    readonly trigger: <E>(event: string, detail: E) => void;
    readonly click: () => void;
    readonly on: <E>(event: string, listener: (event: E, ctx: HeadlessContext) => void, ctx: HeadlessContext, options?: HandlerOptions) => Clear;
    readonly addClasses: (tokens: string[]) => void;
    readonly removeClasses: (tokens: string[]) => void;
    readonly getClasses: () => string[];
    readonly getAttributes: () => [string, unknown][];
    readonly getVisibleAttributes: () => (["class", string[]] | ["style", string | Record<string, string>] | [string, string])[];
    readonly setStyle: (name: string, value: string) => void;
    readonly getStyle: (name: string) => string;
    readonly getStyles: () => Record<string, string>;
    readonly makeAccessors: (name: string) => {
        get(): unknown;
        set(value: unknown): void;
    };
}
export declare class HeadlessElement extends HeadlessBase {
    readonly tagName: string;
    readonly namespace: string | undefined;
    constructor(tagName: string, namespace: string | undefined, parent: HeadlessBase | undefined);
    readonly isPortal: () => this is HeadlessPortal;
    readonly toHTML: (generatePlaceholders?: boolean) => string;
}
export declare class HeadlessPortal extends HeadlessBase {
    readonly selector: string | HTMLElement;
    constructor(selector: string | HTMLElement, parent: HeadlessBase | undefined);
    readonly isPortal: () => this is HeadlessPortal;
    readonly toHTML: () => string;
    readonly contentToHTML: (generatePlaceholders?: boolean) => string;
}
export declare class HeadlessText {
    text: string;
    readonly id: string;
    constructor(text: string);
    readonly isElement: () => this is HeadlessElement;
    readonly isText: () => this is HeadlessText;
    readonly getText: () => string;
    readonly toHTML: () => string;
}
export type HeadlessNode = HeadlessElement | HeadlessPortal | HeadlessText;
export interface HeadlessContainer {
    currentURL: Prop<string>;
}
export declare class HeadlessContext implements DOMContext {
    readonly element: HeadlessBase;
    readonly reference: HeadlessNode | undefined;
    readonly container: HeadlessContainer;
    readonly providers: Providers;
    constructor(element: HeadlessBase, reference: HeadlessNode | undefined, container: HeadlessContainer, providers: Providers);
    readonly appendOrInsert: (element: HeadlessNode) => void;
    readonly makeChildElement: (tagName: string, namespace: string | undefined) => DOMContext;
    readonly makeChildText: (text: string) => DOMContext;
    readonly setText: (text: string) => void;
    readonly getText: () => string;
    readonly makeRef: () => DOMContext;
    readonly makePortal: (selector: string | HTMLElement) => DOMContext;
    /**
     * Sets a provider for the given provider mark.
     *
     * @param mark - The provider mark to set the provider for.
     * @param value - The provider to set for the given mark.
     * @returns A new `DOMContext` instance with the specified provider.
     */
    readonly setProvider: <T>(mark: ProviderMark<T>, value: T, onUse: undefined | (() => void)) => DOMContext;
    readonly getProvider: <T>(mark: ProviderMark<T>) => {
        value: T;
        onUse: (() => void) | undefined;
    };
    readonly clear: (removeTree: boolean) => void;
    readonly on: <E>(event: string, listener: (event: E, ctx: HeadlessContext) => void) => Clear;
    readonly addClasses: (tokens: string[]) => void;
    readonly removeClasses: (tokens: string[]) => void;
    readonly getClasses: () => string[];
    readonly isBrowserDOM: () => this is BrowserContext;
    readonly isBrowser: () => this is BrowserContext;
    readonly isHeadlessDOM: () => this is HeadlessContext;
    readonly isHeadless: () => this is HeadlessContext;
    readonly setStyle: (name: string, value: string) => void;
    readonly getStyle: (name: string) => string;
    readonly makeAccessors: (name: string) => {
        get(): unknown;
        set(value: unknown): void;
    };
}
export {};