import { Scope } from "./core/reactive.ts";
import type { Bridgey } from "./dollar.ts";
export interface ComponentContext {
    /** この部品の名前。 */
    name: string;
    /** 対象要素(生の DOM)。 */
    el: HTMLElement;
    /** この部品の片付け単位。setInterval 等はここに登録すると自動で止まる。 */
    scope: Scope;
}
export interface ComponentInstance {
    /** 破棄時の後片付け(scope で足りるなら不要)。 */
    destroy?(): void;
}
export type ComponentSetup = ($el: Bridgey, props: Record<string, unknown>, ctx: ComponentContext) => void | ComponentInstance;
/** dollar.ts から Bridgey ラッパと警告出力を注入する(循環 import を避けるため)。 */
export declare function configureComponents(options: {
    wrap?: (el: HTMLElement) => Bridgey;
    warn?: (message: string) => void;
}): void;
/** data-component の属性名(既定 "data-component")。 */
export declare function componentAttr(next?: string): string;
/**
 * 部品を登録する。登録した時点で、既にページにある該当要素へ適用される。
 *
 *   $$.component("counter", ($el, props) => {
 *     const n = $el.find("@n").state(props.start ?? 0);
 *     $el.find("@up").click(() => n(v => v + 1));
 *   });
 *
 *   <div data-component="counter" data-start="5">…</div>
 */
export declare function component(name: string, setup: ComponentSetup): void;
/** 指定範囲を走査して未適用の部品を適用する(手で挿入した HTML に使う)。 */
export declare function mount(root?: Element | null): void;
/** 指定範囲の部品を破棄する。 */
export declare function unmount(root?: Element | null): void;
/** 明示的に1要素へ適用する(data-component を書けない場合の逃げ道)。 */
export declare function mountOne(el: HTMLElement, name: string, props?: Record<string, unknown>): void;
/** テスト用: 監視を止める。 */
export declare function stopObserver(): void;