@thi.ng/rdom/wrap.d.ts

Lightweight, reactive, VDOM-less UI/DOM components with async lifecycle and @thi.ng/hiccup compatible

import type { IComponent, IMountWithState } from "./api.js";
export interface WrappedComponent<T> extends IMountWithState<T> {
    inner: IComponent<any>;
}
/**
 * Returns a component wrapper for a single DOM element whose TEXT body can be
 * later updated/replaced via `.update()`, similarly to setting `.innerText`.
 *
 * @param tag - element name
 * @param attribs - element attribs
 * @param body - optional initial body
 */
export declare const $wrapText: (tag: string, attribs?: any, body?: any) => WrappedComponent<any>;
/**
 * Returns a component wrapper for a single DOM element whose HTML body can be
 * later updated/replaced via `.update()`, similarly to setting `.innerHTML`.
 *
 * @remarks
 * Setting `.innerHtml` considered dangerous — please use with caution or use
 * {@link $wrapText} if the source of the HTML body given to `.update()` cannot
 * be trusted!
 *
 * @example
 * ```ts
 * import { $compile, $wrapHtml } from "@thi.ng/rdom";
 *
 * // create pre-configured updatable element
 * const title = $wrapHtml("h1", { style: { color: "red" } });
 *
 * // embed inside rdom tree
 * $compile(["div", {}, title, "world..."]).mount(document.body);
 *
 * // update element body (only after element has been mounted!)
 * title.update("<em>hello</em>");
 * ```
 *
 * @param tag - element name
 * @param attribs - element attribs
 * @param body - optional initial body
 */
export declare const $wrapHtml: (tag: string, attribs?: any, body?: import("@thi.ng/api").MaybeDeref<string> | undefined) => WrappedComponent<import("@thi.ng/api").MaybeDeref<string>>;
/**
 * {@link IComponent} wrapper for an existing DOM element. When mounted, the
 * given element will be (re)attached to the parent node provided at that time.
 *
 * @example
 * ```ts
 * import { $compile, $wrapEl } from "@thi.ng/rdom";
 *
 * const title = document.createElement("h1");
 * title.innerText = "hello";
 *
 * // embed existing DOM element inside an rdom tree
 * $compile(["div", {}, $wrapEl(title), "world..."]).mount(document.body);
 * ```
 *
 * @param el
 */
export declare const $wrapEl: (el: Element) => IComponent;
//# sourceMappingURL=wrap.d.ts.map