export type DomMethod<T = Node> = (elem: T) => DomArg<T> | void;
export type DomElementMethod = DomMethod<HTMLElement>;
/**
 * Object mapping attribute names to attribute values. When applied to a DOM element, null and
 * undefined values are omitted, and booleans are either omitted or set to empty string.
 */
export interface IAttrObj {
    [attrName: string]: string | boolean | null | undefined;
}
export type DomArg<T = Node> = Node | string | void | null | undefined | IDomArgs<T> | DomMethod<T> | (T extends Element ? IAttrObj : never);
export interface IDomArgs<T = Node> extends Array<DomArg<T>> {
}
export type DomElementArg = DomArg<HTMLElement>;
/**
 * dom('tag#id.class1.class2', ...args)
 *   The first argument is a string consisting of a tag name, with optional #foo suffix
 *   to add the ID 'foo', and zero or more .bar suffixes to add a CSS class 'bar'.
 *
 *   NOTE that better typings are available when a tag is used directly, e.g.
 *      `dom('input', {id: 'foo'}, (elem) => ...)` -- elem has type HTMLInputElement
 *      `dom('input#foo',          (elem) => ...)` -- elem has type HTMLElement
 *
 * The rest of the arguments are optional and may be:
 *
 *   Nodes - which become children of the created element;
 *   strings - which become text node children;
 *   objects - of the form `{attr: val}` to set additional attributes on the element;
 *   Arrays - which are flattened with each item processed recursively;
 *   functions - which are called with elem as the argument, for a chance to modify the
 *       element as it's being created. Return values are processed recursively.
 *   "dom methods" - expressions such as `dom.attr('href', url)` or `dom.hide(obs)`, which
 *       are actually special cases of the "functions" category.
 */
export declare function dom<Tag extends TagName>(tagString: Tag, ...args: IDomArgs<TagElem<Tag>>): TagElem<Tag>;
export type TagName = keyof HTMLElementTagNameMap | string;
export type TagElem<T extends TagName> = T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : HTMLElement;
/**
 * svg('tag#id.class1.class2', ...args)
 *  Same as dom(...), but creates an SVG element.
 */
export declare function svg(tagString: string, ...args: IDomArgs<SVGElement>): SVGElement;
/**
 * Update an element with any number of arguments, as documented in dom().
 */
export declare function update<T extends Node, Args extends IDomArgs<T>>(elem: T, ...args: Args): T;
/**
 * Creates a `DocumentFragment`, processing arguments in the same way as the `dom()` function.
 *
 * It's rarely needed since an array of `dom()` arguments is treated the same as a
 * `DocumentFragment` in most cases.
 *
 * @example
 * ```ts
 * dom.frag(dom('span', 'Hello'), ' good ', dom('div', 'world'))
 * ```
 * creates document fragment with `<span>Hello</span> good <div>world</div>`.
 *
 * @example
 * These two examples are equivalent:
 * ```ts
 * const world1 = () => dom.frag(' good ', dom('div', 'world'));
 * dom('div', 'Hello', world1);
 *
 * const world2 = () => [' good ', dom('div', 'world')];
 * dom('div', 'Hello', world2);
 * ```
 */
export declare function frag(...args: IDomArgs<DocumentFragment>): DocumentFragment;
/**
 * Find the first element matching a selector; just an abbreviation for document.querySelector().
 */
export declare function find(selector: string): Element | null;
/**
 * Find all elements matching a selector; just an abbreviation for document.querySelectorAll().
 */
export declare function findAll(selector: string): NodeListOf<Element>;