import type { ISubscribable } from "@thi.ng/rstream"; import type { IComponent, IMountWithState, NumOrElement } from "./api.js"; import { Component } from "./component.js"; /** * Similar to {@link $refresh}, but more basic/simple. Takes a reactive value * `src` and wraps it in a {@link $sub} component using an inner * {@link Replace}, which then passes the value to {@link $compile} for each * change and replaces the result in the target DOM. If the value evaluates to * `null`ish, the previously mounted component will be unmounted and stays so * until the value becomes non-null again. * * @remarks * If the reactive value is null-ish when the wrapper component is first * mounted, a hidden dummy `` element will be created instead. This is to * ensure the general {@link IComponent.mount} contract will not be broken. The * dummy element will later be removed/replaced as soon as the reactive value * becomes non-null. * * @example * ```ts * import { $compile, $replace } from "@thi.ng/rdom"; * import { fromInterval } from "@thi.ng/rstream"; * * // reactive counter component * const counter = fromInterval(16).map((x) => [ * "div", * { style: { "font-size": `${(x % 100) + 10}px` } }, * x, * ]); * * $compile($replace(counter)).mount(document.body); * ``` * * @param src - */ export declare const $replace: (src: ISubscribable) => IComponent; export declare class Replace extends Component implements IMountWithState { protected parent?: ParentNode; protected inner?: IComponent; protected index?: NumOrElement; mount(parent: ParentNode, index: NumOrElement, val: T): Promise; unmount(): Promise; update(val: T): Promise; } //# sourceMappingURL=replace.d.ts.map