watch-selector
Version:
Runs a function when a selector is added to dom
223 lines • 12.1 kB
TypeScript
import type { ElementFn, FormElement, ElementFromSelector, GeneratorFunction } from '../types';
export declare function isElement(value: any): value is HTMLElement;
export declare function isElementLike(value: any): value is HTMLElement | string;
export declare function resolveElement(elementLike: HTMLElement | string): HTMLElement | null;
export declare function text(element: HTMLElement, content: string): void;
export declare function text(element: HTMLElement): string;
export declare function text(selector: string, content: string): void;
export declare function text(selector: string): string | null;
export declare function text<El extends HTMLElement = HTMLElement>(content: string): ElementFn<El>;
export declare function text<El extends HTMLElement = HTMLElement>(): ElementFn<El, string>;
export declare function html(element: HTMLElement, content: string): void;
export declare function html(element: HTMLElement): string;
export declare function html(selector: string, content: string): void;
export declare function html(selector: string): string | null;
export declare function html<El extends HTMLElement = HTMLElement>(content: string): ElementFn<El>;
export declare function html<El extends HTMLElement = HTMLElement>(): ElementFn<El, string>;
export declare function addClass(element: HTMLElement, ...classNames: string[]): void;
export declare function addClass(selector: string, ...classNames: string[]): void;
export declare function addClass<El extends HTMLElement = HTMLElement>(...classNames: string[]): ElementFn<El>;
export declare function removeClass(element: HTMLElement, ...classNames: string[]): void;
export declare function removeClass(selector: string, ...classNames: string[]): void;
export declare function removeClass<El extends HTMLElement = HTMLElement>(...classNames: string[]): ElementFn<El>;
export declare function toggleClass(element: HTMLElement, className: string, force?: boolean): boolean;
export declare function toggleClass(selector: string, className: string, force?: boolean): boolean;
export declare function toggleClass<El extends HTMLElement = HTMLElement>(className: string, force?: boolean): ElementFn<El, boolean>;
export declare function hasClass(element: HTMLElement, className: string): boolean;
export declare function hasClass(selector: string, className: string): boolean;
export declare function hasClass<El extends HTMLElement = HTMLElement>(className: string): ElementFn<El, boolean>;
/**
* # style() - CSS Style Manipulation
*
* Manipulate CSS styles on elements with full type safety and dual API support.
* Supports both individual property setting and bulk style objects.
*
* ## Usage
*
* ### Direct Usage
* ```typescript
* // Set individual style property
* style(myElement, 'color', 'red');
* style('.my-element', 'backgroundColor', 'blue');
*
* // Set multiple styles with object
* style(myElement, {
* color: 'red',
* backgroundColor: 'blue',
* padding: '10px',
* borderRadius: '4px'
* });
* ```
*
* ### Generator Usage
* ```typescript
* watch('button', function* () {
* yield style({
* padding: '10px 20px',
* borderRadius: '4px',
* backgroundColor: '#007bff',
* color: 'white'
* });
*
* yield on('hover', () => {
* yield style('backgroundColor', '#0056b3');
* });
* });
*
* // Dynamic styles based on state
* watch('.progress-bar', function* () {
* const progress = getState('progress');
* yield style('width', `${progress}%`);
* });
* ```
*
* ## Style Object Support
*
* You can pass a style object for bulk updates:
*
* ```typescript
* const buttonStyles = {
* padding: '12px 24px',
* fontSize: '16px',
* fontWeight: 'bold',
* border: 'none',
* borderRadius: '6px',
* cursor: 'pointer'
* };
*
* style(element, buttonStyles);
* ```
*
* ## CSS Property Names
*
* Use camelCase for CSS properties (backgroundColor, fontSize, etc.):
*
* ```typescript
* style(element, 'backgroundColor', 'red'); // ✅ Correct
* style(element, 'background-color', 'red'); // ❌ Won't work
* ```
*
* @param element - Element or selector
* @param styles - Style object or property name
* @param value - Property value (when setting individual property)
* @returns void for direct usage, ElementFn for generators
*/
export declare function style(element: HTMLElement, styles: Partial<CSSStyleDeclaration>): void;
export declare function style(element: HTMLElement, property: string, value: string): void;
export declare function style(selector: string, styles: Partial<CSSStyleDeclaration>): void;
export declare function style(selector: string, property: string, value: string): void;
export declare function style<El extends HTMLElement = HTMLElement>(styles: Partial<CSSStyleDeclaration>): ElementFn<El>;
export declare function style<El extends HTMLElement = HTMLElement>(property: string, value: string): ElementFn<El>;
export declare function attr(element: HTMLElement, name: string, value: string): void;
export declare function attr(element: HTMLElement, name: string): string | null;
export declare function attr(selector: string, name: string, value: string): void;
export declare function attr(selector: string, name: string): string | null;
export declare function attr<El extends HTMLElement = HTMLElement>(name: string, value: string): ElementFn<El>;
export declare function attr<El extends HTMLElement = HTMLElement>(name: string): ElementFn<El, string | null>;
export declare function removeAttr(element: HTMLElement, name: string): void;
export declare function removeAttr(selector: string, name: string): void;
export declare function removeAttr<El extends HTMLElement = HTMLElement>(name: string): ElementFn<El>;
export declare function hasAttr(element: HTMLElement, name: string): boolean;
export declare function hasAttr(selector: string, name: string): boolean;
export declare function hasAttr<El extends HTMLElement = HTMLElement>(name: string): ElementFn<El, boolean>;
export declare function prop(element: HTMLElement, property: string, value: any): void;
export declare function prop(element: HTMLElement, property: string): any;
export declare function prop(selector: string, property: string, value: any): void;
export declare function prop(selector: string, property: string): any;
export declare function prop<El extends HTMLElement = HTMLElement>(property: string, value: any): ElementFn<El>;
export declare function prop<El extends HTMLElement = HTMLElement>(property: string): ElementFn<El, any>;
export declare function data(element: HTMLElement, key: string, value: string): void;
export declare function data(element: HTMLElement, key: string): string | undefined;
export declare function data(selector: string, key: string, value: string): void;
export declare function data(selector: string, key: string): string | undefined;
export declare function data<El extends HTMLElement = HTMLElement>(key: string, value: string): ElementFn<El>;
export declare function data<El extends HTMLElement = HTMLElement>(key: string): ElementFn<El, string | undefined>;
export declare function value(element: FormElement, val: string): void;
export declare function value(element: FormElement): string;
export declare function value(selector: string, val: string): void;
export declare function value(selector: string): string | null;
export declare function value<El extends FormElement = FormElement>(val: string): ElementFn<El>;
export declare function value<El extends FormElement = FormElement>(): ElementFn<El, string>;
export declare function checked(element: HTMLInputElement, isChecked: boolean): void;
export declare function checked(element: HTMLInputElement): boolean;
export declare function checked(selector: string, isChecked: boolean): void;
export declare function checked(selector: string): boolean;
export declare function checked<El extends HTMLInputElement = HTMLInputElement>(isChecked: boolean): ElementFn<El>;
export declare function checked<El extends HTMLInputElement = HTMLInputElement>(): ElementFn<El, boolean>;
export declare function focus(element: HTMLElement): void;
export declare function focus(selector: string): void;
export declare function focus<El extends HTMLElement = HTMLElement>(): ElementFn<El>;
export declare function blur(element: HTMLElement): void;
export declare function blur(selector: string): void;
export declare function blur<El extends HTMLElement = HTMLElement>(): ElementFn<El>;
export declare function show(element: HTMLElement): void;
export declare function show(selector: string): void;
export declare function show<El extends HTMLElement = HTMLElement>(): ElementFn<El>;
export declare function hide(element: HTMLElement): void;
export declare function hide(selector: string): void;
export declare function hide<El extends HTMLElement = HTMLElement>(): ElementFn<El>;
export declare function query<T extends HTMLElement = HTMLElement>(element: HTMLElement, selector: string): T | null;
export declare function query<T extends HTMLElement = HTMLElement>(selector: string): ElementFn<HTMLElement, T | null>;
export declare function queryAll<T extends HTMLElement = HTMLElement>(element: HTMLElement, selector: string): T[];
export declare function queryAll<T extends HTMLElement = HTMLElement>(selector: string): ElementFn<HTMLElement, T[]>;
export declare function parent<T extends HTMLElement = HTMLElement>(selector?: string): ElementFn<HTMLElement, T | null>;
export declare function children<T extends HTMLElement = HTMLElement>(): ElementFn<HTMLElement, T[]>;
export declare function siblings<T extends HTMLElement = HTMLElement>(selector?: string): ElementFn<HTMLElement, T[]>;
export declare function batchAll(elements: (HTMLElement | string)[], ...operations: ElementFn<HTMLElement>[]): void;
export declare const el: typeof query;
export declare const all: typeof queryAll;
/**
* # createChildWatcher() - Create a Reactive Collection of Child Contexts
*
* Establishes a live, type-safe link between a parent and its children. It
* returns a reactive `Map` where keys are the child elements and values are the
* public APIs returned by each child's generator. This is the primary tool for
* child-to-parent communication.
*
* ## Usage
*
* ```typescript
* // In the parent's generator:
* function* parentComponent() {
* // Create the watcher. The type of `childApis` is inferred as:
* // Map<HTMLButtonElement, { click: () => void }>
* const childApis = createChildWatcher('button.child', childButtonLogic);
*
* // Interact with the children's APIs
* yield click('#trigger-all-children', () => {
* for (const childApi of childApis.values()) {
* childApi.click(); // Call method on the child's API
* }
* });
* }
* ```
*
* @param childSelector The CSS selector for the child elements.
* @param childGenerator The generator for the children, which should `return` a public API object.
* @returns A reactive `Map<ChildEl, ChildApi>` that updates as children are added/removed.
*/
export declare function createChildWatcher<S extends string, ChildEl extends HTMLElement = ElementFromSelector<S>, ChildGen extends GeneratorFunction<ChildEl, any> = GeneratorFunction<ChildEl, any>>(childSelector: S, childGenerator: ChildGen): Map<ChildEl, Awaited<ReturnType<ChildGen>>>;
/**
* # child() - Alias for createChildWatcher()
*
* A shorter, more intuitive alias for `createChildWatcher`.
* Creates a reactive collection of child component APIs.
*
* ## Usage
*
* ```typescript
* watch('.parent', function* () {
* const children = child('.child-button', childButtonLogic);
*
* yield click('.reset-all', () => {
* children.forEach(api => api.reset());
* });
* });
* ```
*
* @param childSelector The CSS selector for the child elements.
* @param childGenerator The generator for the children, which should `return` a public API object.
* @returns A reactive `Map<ChildEl, ChildApi>` that updates as children are added/removed.
*/
export declare const child: typeof createChildWatcher;
//# sourceMappingURL=dom.d.ts.map