element-vir
Version:
Heroic. Reactive. Declarative. Type safe. Web components without compromise.
93 lines (92 loc) • 3.49 kB
TypeScript
import { type MaybePromise } from '@augment-vir/common';
import { type DirectiveResult } from '../../lit-exports/all-lit-exports.js';
import { type DefinedTypedEvent, type TypedEvent } from '../../typed-event/typed-event.js';
/** We don't care at all what this returns, just allow anything! */
type ListenCallbackReturn = MaybePromise<any>;
/**
* Listen to events. These can be native DOM events (use a string for the inputType argument) or
* typed events (pass in a return value from {@link defineTypedEvent}).
*
* @category Directives
* @example
*
* ```ts
* import {html, defineElement, listen} from 'element-vir';
*
* const MyElement = defineElement()({
* tagName: 'my-element',
* render() {
* return html`
* <div
* ${listen('click', () => {
* console.log('clicked!');
* })}
* >
* Some div
* </div>
* <${MyOtherElement}
* ${listen(MyOtherElement.events.someEvent, (event) => {
* console.log('event value', event.detail);
* })}
* ></${MyOtherElement}>
* `;
* },
* });
* ```
*/
export declare function listen<TypedEventTypeNameGeneric extends string, TypedEventDetailGeneric>(
/**
* Needs to come either from a declarative element (like MyDeclarativeElement.events.eventName),
* from a typed event created via the {@link defineTypedEvent} function, or be the name of a
* built-in event (like `'click'`).
*/
eventType: DefinedTypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>,
/**
* The callback to fire when an event is caught. Assuming the {@link defineTypedEvent} input is
* properly typed, the event given to this callback will also be typed.
*/
listener: (event: TypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>) => ListenCallbackReturn): DirectiveResult<any>;
/**
* Listen to events. These can be native DOM events (use a string for the inputType argument) or
* typed events (pass in a return value from {@link defineTypedEvent}).
*
* @category Directives
* @example
*
* ```ts
* import {html, defineElement, listen} from 'element-vir';
*
* const MyElement = defineElement()({
* tagName: 'my-element',
* render() {
* return html`
* <div
* ${listen('click', () => {
* console.log('clicked!');
* })}
* >
* Some div
* </div>
* <${MyOtherElement}
* ${listen(MyOtherElement.events.someEvent, (event) => {
* console.log('event value', event.detail);
* })}
* ></${MyOtherElement}>
* `;
* },
* });
* ```
*/
export declare function listen<NativeElementEventNameGeneric extends keyof HTMLElementEventMap>(
/**
* Needs to come either from a declarative element (like MyDeclarativeElement.events.eventName),
* from a typed event created via the {@link defineTypedEvent} function, or be the name of a
* built-in event (like `'click'`).
*/
eventType: NativeElementEventNameGeneric,
/**
* The callback to fire when an event is caught. Assuming the {@link defineTypedEvent} input is
* properly typed, the event given to this callback will also be typed.
*/
listener: (event: HTMLElementEventMap[NativeElementEventNameGeneric]) => ListenCallbackReturn): DirectiveResult<any>;
export {};