watch-selector/dist/types/api/events-hybrid.d.ts

Runs a function when a selector is added to dom

import type { ElementFn, CleanupFunction, HybridEventOptions, HybridEventHandler, HybridCustomEventHandler, AttributeChange, TextChange, VisibilityChange, ResizeChange } from '../types';
/**
 * # Hybrid Event Handling Design
 *
 * This design combines the ergonomics of overloads with generator superpowers:
 *
 * ## 1. Standalone Usage (Current Ergonomics Preserved)
 * ```typescript
 * const button = document.querySelector('button');
 *
 * // Direct usage - works exactly like before
 * const cleanup = on(button, 'click', (event, element) => {
 *   console.log('Clicked!');
 * });
 *
 * // Enhanced options still work
 * const cleanup2 = on(button, 'click', handler, {
 *   debounce: 300,
 *   delegate: '.child'
 * });
 * ```
 *
 * ## 2. Generator Usage (Enhanced Context)
 * ```typescript
 * watch('button', function* () {
 *   // Regular function with automatic context enhancement
 *   yield on('click', (event) => {
 *     const button = self(); // ✅ Context automatically available!
 *     const count = getState('clicks') || 0;
 *     setState('clicks', count + 1);
 *   });
 *
 *   // Generator function with full power
 *   yield on('click', function* (event) {
 *     yield addClass('clicked');
 *     yield delay(100);
 *     yield removeClass('clicked');
 *   });
 * });
 * ```
 *
 * ## 3. CustomEvent Support (All Modes)
 * ```typescript
 * const userEvent = createCustomEvent('user:login', { userId: 123 });
 *
 * // Standalone
 * on(element, userEvent, (event, el) => {
 *   console.log(event.detail.userId); // Type-safe
 * });
 *
 * // Generator
 * yield on(userEvent, function* (event) => {
 *   yield text(`User ${event.detail.userId} logged in`);
 * });
 * ```
 */
export declare function on<El extends HTMLElement, K extends keyof HTMLElementEventMap>(element: El, event: K, handler: HybridEventHandler<El, K>, options?: HybridEventOptions): CleanupFunction;
export declare function on<El extends HTMLElement, K extends keyof HTMLElementEventMap>(event: K, handler: HybridEventHandler<El, K>, options?: HybridEventOptions): ElementFn<El, CleanupFunction>;
export declare function on<El extends HTMLElement, T = any>(element: El, event: CustomEvent<T>, handler: HybridCustomEventHandler<El, T>, options?: HybridEventOptions): CleanupFunction;
export declare function on<El extends HTMLElement, T = any>(event: CustomEvent<T>, handler: HybridCustomEventHandler<El, T>, options?: HybridEventOptions): ElementFn<El, CleanupFunction>;
export declare function on<El extends HTMLElement, T = any>(element: El, eventType: string, handler: HybridCustomEventHandler<El, T>, options?: HybridEventOptions): CleanupFunction;
export declare function on<El extends HTMLElement, T = any>(eventType: string, handler: HybridCustomEventHandler<El, T>, options?: HybridEventOptions): ElementFn<El, CleanupFunction>;
/**
 * Enhanced click function with all capabilities
 */
export declare function click<El extends HTMLElement>(element: El, handler: HybridEventHandler<El, 'click'>, options?: HybridEventOptions): CleanupFunction;
export declare function click<El extends HTMLElement>(handler: HybridEventHandler<El, 'click'>, options?: HybridEventOptions): ElementFn<El, CleanupFunction>;
export declare function input<El extends HTMLElement>(element: El, handler: HybridEventHandler<El, 'input'>, options?: HybridEventOptions): CleanupFunction;
export declare function input<El extends HTMLElement>(handler: HybridEventHandler<El, 'input'>, options?: HybridEventOptions): ElementFn<El, CleanupFunction>;
export declare function change<El extends HTMLElement>(element: El, handler: HybridEventHandler<El, 'change'>, options?: HybridEventOptions): CleanupFunction;
export declare function change<El extends HTMLElement>(handler: HybridEventHandler<El, 'change'>, options?: HybridEventOptions): ElementFn<El, CleanupFunction>;
export declare function submit<El extends HTMLElement>(element: El, handler: HybridEventHandler<El, 'submit'>, options?: HybridEventOptions): CleanupFunction;
export declare function submit<El extends HTMLElement>(handler: HybridEventHandler<El, 'submit'>, options?: HybridEventOptions): ElementFn<El, CleanupFunction>;
/**
 * Create reusable event behavior
 */
export declare function createEventBehavior<K extends keyof HTMLElementEventMap>(eventType: K, behavior: HybridEventHandler<HTMLElement, K>, options?: HybridEventOptions): () => Generator<ElementFn<HTMLElement, CleanupFunction>, void, unknown>;
/**
 * Compose multiple event handlers
 */
export declare function composeEventHandlers<K extends keyof HTMLElementEventMap>(...handlers: HybridEventHandler<HTMLElement, K>[]): HybridEventHandler<HTMLElement, K>;
/**
 * Event delegation helper
 */
export declare function delegate<K extends keyof HTMLElementEventMap>(selector: string, eventType: K, handler: HybridEventHandler<HTMLElement, K>, options?: Omit<HybridEventOptions, 'delegate'>): ElementFn<HTMLElement, CleanupFunction>;
/**
 * Create typed CustomEvent helper
 */
export declare function createCustomEvent<T = any>(type: string, detail: T, options?: EventInit): CustomEvent<T>;
/**
 * Emit custom event - hybrid version for backward compatibility
 */
export declare function emit<El extends HTMLElement>(element: El, eventName: string, detail?: any, options?: EventInit): void;
export declare function emit<El extends HTMLElement = HTMLElement>(eventName: string, detail?: any, options?: EventInit): ElementFn<El>;
/**
 * Watch for attribute changes
 */
export declare function onAttr<El extends HTMLElement>(element: El, filter: string | RegExp, handler: (change: AttributeChange & {
    element: El;
}) => void): CleanupFunction;
export declare function onAttr<El extends HTMLElement>(filter: string | RegExp, handler: (change: AttributeChange & {
    element: El;
}) => void): ElementFn<El, CleanupFunction>;
/**
 * Watch for text content changes
 */
export declare function onText<El extends HTMLElement>(element: El, handler: (change: TextChange & {
    element: El;
}) => void): CleanupFunction;
export declare function onText<El extends HTMLElement>(handler: (change: TextChange & {
    element: El;
}) => void): ElementFn<El, CleanupFunction>;
/**
 * Watch for visibility changes
 */
export declare function onVisible<El extends HTMLElement>(element: El, handler: (change: VisibilityChange & {
    element: El;
}) => void, options?: IntersectionObserverInit): CleanupFunction;
export declare function onVisible<El extends HTMLElement>(handler: (change: VisibilityChange & {
    element: El;
}) => void, options?: IntersectionObserverInit): ElementFn<El, CleanupFunction>;
/**
 * Watch for size changes
 */
export declare function onResize<El extends HTMLElement>(element: El, handler: (change: ResizeChange & {
    element: El;
}) => void): CleanupFunction;
export declare function onResize<El extends HTMLElement>(handler: (change: ResizeChange & {
    element: El;
}) => void): ElementFn<El, CleanupFunction>;
/**
 * Element mount event
 */
export declare function onMount<El extends HTMLElement>(element: El, handler: (element: El) => void): CleanupFunction;
export declare function onMount<El extends HTMLElement>(handler: (element: El) => void): ElementFn<El, CleanupFunction>;
/**
 * Helper to trigger unmount handlers when elements are removed
 */
export declare function triggerUnmountHandlers(element: HTMLElement): void;
/**
 * Element unmount event
 */
export declare function onUnmount<El extends HTMLElement>(element: El, handler: (element: El) => void): CleanupFunction;
export declare function onUnmount<El extends HTMLElement>(handler: (element: El) => void): ElementFn<El, CleanupFunction>;
//# sourceMappingURL=events-hybrid.d.ts.map