alien-dom
Version:
Next-generation JSX client renderer with observable data primitives, immediate DOM references, and more.
2,493 lines • 106 kB
TypeScript
import { Falsy, Any } from '@alloc/types';
import * as CSS from 'csstype';
type Disposable<T = {}> = T & {
dispose(): void;
};
declare function attachDisposer<T extends object>(object: T, dispose: () => void): Disposable<T>;
declare function isDisposable<T extends {}>(arg: T): arg is Disposable<T>;
/**
* Create a `Disposable` object from a function and arguments array.
*
* The arguments array is included in the returned object for introspection
* purposes.
*/
declare function createDisposable<Args extends readonly any[]>(args: Args, dispose: (...args: Args) => void, thisArg?: any): Disposable<{
args: Args;
thisArg?: any;
}>;
declare function mergeDisposables(...objects: Disposable[]): Disposable<{
objects: Disposable[];
}>;
type Promisable<T> = T | PromiseLike<T>;
/**
* A disposable promise for a one-time event.
*/
declare function promiseEvent<T extends Event>(target: EventTarget, type: string): Disposable<Promise<T>>;
/**
* A disposable promise for `setTimeout`.
*/
declare function promiseTimeout(delay: number): Disposable<Promise<void>>;
/**
* A disposable `Promise.race` that disposes all promises when settled.
*/
declare function promiseRace<T>(promises: Iterable<T | PromiseLike<T>>): Disposable<Promise<Awaited<T>>>;
/**
* Disposable promises are useful for async dependencies that need to be
* disposed of when the component unmounts. For example, async data should stop
* loading on unmount and event listeners should be removed.
*
* NOTE: This type is meant for arguments. For return values, use `Disposable<Promise<T>>`.
*/
interface DisposablePromise<T> extends PromiseLike<T> {
dispose: () => void;
}
/**
* An "open promise" can be resolved/rejected from outside the promise and its
* settled state can be checked (and even observed).
*/
declare class OpenPromise<T> extends Promise<T> {
readonly resolve: void extends T ? (value?: Promisable<T>) => void : (value: Promisable<T>) => void;
readonly reject: (reason?: any) => void;
get settled(): boolean;
constructor(executor?: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void);
}
declare const kRefType: unique symbol;
type ObservableHooks = {
/**
* A ref was changed and the given observer was notified.
*/
observe(observer: Observer, ref: ReadonlyRef<any>, newValue: any, oldValue: any): void;
/**
* A ref was observed or unobserved.
*/
isObserved(ref: ReadonlyRef<any>, observer: Observer, isObserved: boolean): void;
/**
* An update was completed or threw an error.
*/
didUpdate(observer: Observer | ComputedRef, error: any, result: any): void;
};
/**
* Observable hooks are only active in the development build. They provide a way
* for debugging tools to be notified of various useful events.
*/
declare const setObservableHooks: (newHooks: ObservableHooks) => void;
type InternalRef<T = any> = Ref<T> & {
_value: T;
_observers: Set<Observer>;
_depth: number;
_isObserved: (observer: Observer, isObserved: boolean) => void;
};
/**
* A read-only version of `Ref` that doesn't allow mutation (i.e. its `value`
* property cannot be assigned to).
*
* This class cannot be constructed directly, but it can be useful for creating
* your own subclass where consumers should not be able to mutate the value. You
* may also want to use this as a return type of your custom hook that returns a
* ref but doesn't want to expose the mutation API.
*
* This is a superclass of Ref, ComputedRef, and ArrayRef.
*/
declare abstract class ReadonlyRef<T = any> {
protected _value: T;
readonly debugId: string | number | undefined;
protected _observers: Set<Observer>;
protected get _depth(): number;
constructor(_value: T, debugId?: string | number);
/**
* In addition to adding/removing an observer, computed refs use this method
* to switch between eager and lazy computation mode.
*/
protected _isObserved(observer: Observer, isObserved: boolean): void;
get [kRefType](): string;
peek(): T;
/**
* Create a `ComputedRef` whose value is derived from `this.value` using the
* given function.
*/
computedMap<U>(compute: (value: T) => U): ComputedRef<U>;
/**
* Create a `ComputedRef` that does the following:
*
* If `this.value` is truthy, use the first argument. Otherwise, use the
* second argument (if none is provided, return undefined). Function arguments
* are called within the `computed` function.
*/
computedIf<True>(trueValue: ComputedInput<True>): ComputedRef<True | undefined>;
computedIf<True, False>(trueValue: ComputedInput<True>, falseValue: ComputedInput<False>): ComputedRef<True | False>;
/**
* Create a `ComputedRef` that uses the first argument if `this.value` is
* falsy. Otherwise, undefined is used. Function arguments are called within
* the `computed` function.
*/
computedElse<False>(falseValue: ComputedInput<False>): ComputedRef<False | undefined>;
}
interface ReadonlyRef<T> {
get value(): T;
}
declare class Ref<T = any> extends ReadonlyRef<T> {
get [kRefType](): string;
set(arg: T | ((value: T) => T)): T;
/** Use the negation operator on the current value. */
toggle(): boolean;
}
interface Ref<T> {
readonly 0: T;
readonly 1: (arg: T | ((value: T) => T)) => T;
set value(newValue: T);
}
declare abstract class ReadonlyArrayRef<T> extends ReadonlyRef<readonly T[]> {
get [kRefType](): string;
}
interface ReadonlyArrayRef<T> extends ArrayIterators<T>, Iterable<T> {
[index: number]: T;
length: number;
/**
* Observe a single index in the array. Any time the array is mutated, this
* will check the given `index` to see if a new value exists there.
*/
observe(index: number): ComputedRef<T>;
}
declare class ArrayRef<T> extends ReadonlyArrayRef<T> {
protected _arrayObservers: Set<InternalArrayObserver> | null;
protected _produceOperation: ArrayOperation.Producer;
}
interface ArrayRef<T> extends ReadonlyArrayRef<T>, ArrayMutators<T> {
set value(newValue: readonly T[]);
}
interface ArrayMutators<T> extends Pick<Array<T>, 'copyWithin' | 'fill' | 'pop' | 'push' | 'reverse' | 'shift' | 'sort' | 'splice' | 'unshift'> {
}
interface ArrayIterators<T> extends Pick<Array<T>, 'at' | 'concat' | 'entries' | 'every' | 'filter' | 'find' | 'findIndex' | 'flat' | 'flatMap' | 'forEach' | 'includes' | 'indexOf' | 'join' | 'keys' | 'lastIndexOf' | 'map' | 'reduce' | 'reduceRight' | 'slice' | 'some' | 'values'> {
}
/**
* Create an observable array.
*
* Note: The array is cloned before each mutation.
*/
declare let arrayRef: <T>(init?: readonly T[] | undefined, debugId?: string | number) => ArrayRef<T>;
declare class RefMap<K, V> {
protected _map: Map<K, Ref<V>>;
protected _sizeRef: Ref<number>;
protected _keysRef: ArrayRef<K>;
constructor(entries?: Iterable<[K, V]>);
get size(): number;
get(key: K): V | undefined;
peek(key: K): V | undefined;
peekSize(): number;
set(key: K, newValue: V): void;
delete(key: K): void;
clear(): void;
forEach(callback: (value: V, key: K, map: RefMap<K, V>) => void): void;
[Symbol.iterator](): Iterator<[K, V]>;
}
declare namespace Observer {
type WillUpdateFn = (ref: ReadonlyRef<any>, newValue: any, oldValue: any) => void;
type OnUpdateFn = (result: any) => any;
}
declare class Observer {
readonly id: number;
refs: Set<InternalRef<any>>;
depth: number;
constructor();
protected _access(ref: InternalRef<any>, oldRefs: Set<InternalRef<any>>): any;
protected _update(sync: boolean, oldRefs: Set<InternalRef<any>>): any;
/**
* Run the `compute` function synchronously, observing any accessed refs. If
* no `compute` function is provided, the last used `compute` function will be
* reused.
*
* When those refs change, the `compute` function will run again in the next
* microtask (unless you call this method before then).
*/
update<T>(compute?: (oldRefs: Set<InternalRef<any>>) => T): T;
/** Called when a ref has a new value. */
observe(ref: ReadonlyRef<any>, newValue: any, oldValue: any): void;
scheduleUpdate(ref?: ReadonlyRef<any>, newValue?: any, oldValue?: any): void;
/**
* Note: A disposed observer can still be reused.
*/
dispose(): void;
/**
* Returns a bound `dispose` method.
*/
get destructor(): () => void;
}
interface Observer {
/**
* When true, this observer will run *after* all other observers in the queue.
* This is useful to ensure all side effects have been applied before this
* observer runs.
*/
isObservablyPure(): boolean;
/**
* The next time this observer is updated, this method will be used to compute
* a new value or possibly trigger a side effect.
*/
nextCompute(oldRefs: Set<InternalRef<any>>): any;
/**
* Called whenever an observed ref is changed.
*/
didObserve(ref: ReadonlyRef<any>, newValue: any, oldValue: any): void;
/**
* Called when the observer has been queued to run.
*/
willUpdate(ref: ReadonlyRef<any>, newValue: any, oldValue: any): void;
/**
* Called with the result of the `compute` function. You must either return it
* or return a new result.
*/
onUpdate(result: any): any;
}
declare namespace ArrayOperation {
/**
* A value has been added at the index.
*/
type Add<T = any> = {
type: 'add';
index: number;
count: number;
newArray: readonly T[];
};
/**
* One or more values have been removed at the index.
*/
type Remove<T = any> = {
type: 'remove';
index: number;
count: number;
oldArray: readonly T[];
};
/**
* The value at the index has been replaced.
*/
type Replace<T = any> = {
type: 'replace';
index: number;
newValue: T;
};
/**
* The array has been sorted or replaced entirely.
*/
type Rebase<T = any> = {
type: 'rebase';
newArray: readonly T[];
oldArray: readonly T[];
};
/**
* A function that is called with the fine-grained changes to the array.
*/
type Handler<T = any> = (operations: ArrayOperation<T>[], arrayRef: ArrayRef<T>) => void;
/**
* An "operation producer" is called by the `ArrayRef` to produce the
* `ArrayOperation` set for a given mutation.
*/
type Producer = (method: string, args: any[], oldArray: any[], newArray: any[]) => ArrayOperation | ArrayOperation[] | false;
}
/**
* An observed change to an `ArrayRef` for fine-grained reactivity.
*/
type ArrayOperation<T = any> = ArrayOperation.Add<T> | ArrayOperation.Remove<T> | ArrayOperation.Replace<T> | ArrayOperation.Rebase<T>;
/**
* While a normal observer can only observe an `ArrayRef` as a whole, an array
* observer can observe the fine-grained changes to the array (specified by the
* `ArrayOperation` type).
*
* Prefer using `observeArrayOperations` to create an array observer, instead of
* constructing one manually.
*/
declare class ArrayObserver<T> extends Observer {
readonly target: ArrayRef<T>;
protected compute: ArrayOperation.Handler<T>;
protected operations: ArrayOperation<T>[];
constructor(target: ArrayRef<T>, compute: ArrayOperation.Handler<T>);
protected onOperation(operation: ArrayOperation<T> | ArrayOperation<T>[]): void;
nextCompute(): void;
dispose(): void;
/**
* When an `ArrayRef` is observed by an `ArrayObserver` (not to be confused
* with a normal `Observer`), the `ArrayRef` will call this `produceOperation`
* static method to produce the `ArrayOperation` set for a given mutation.
*/
static produceOperation: ArrayOperation.Producer;
}
type InternalArrayObserver<T = any> = ArrayObserver<T> & {
onOperation(operation: ArrayOperation<T>): void;
};
declare class ComputedRef<T = any> extends ReadonlyRef<T> {
protected compute: () => T;
protected _observer: Observer | null;
protected get _depth(): number;
constructor(compute: () => T, debugId?: string | number);
protected _isObserved(observer: Observer, isObserved: boolean): void;
get [kRefType](): string;
get value(): T;
/**
* Get the current value without observing it. If the ref is empty, the
* `compute` function will run immediately.
*/
peek(): T;
/**
* Clear the current value. If the ref is observed, the `compute` function
* will run again in the next microtask.
*/
clear(): void;
private static Observer;
}
interface ComputedRef<T> {
readonly 0: T;
}
declare class LensRef<T = any> extends Ref<T> {
constructor(source: ReadonlyRef<T> | (() => T), sink: Ref<T> | ((newValue: T) => void), debugId?: string | number);
get [kRefType](): string;
}
/**
* Run a function and collect all refs that were accessed.
*/
declare function collectAccessedRefs<T>(fn: () => T, accessedRefs: Set<Ref>): T;
/**
* Create a `Ref` object with an optional initial value.
*
* Its `value` property is observable. Its `peek` method lets you access the
* current value without risk of being observed. There are also convenience
* methods for creating "computeds" with less boilerplate; their method names
* all start with `computed` (i.e. `computedIf`, `computedMap`, etc).
*/
declare const ref: {
<T>(value: T, debugId?: string | number): Ref<T>;
<T>(value?: T, debugId?: string | number): Ref<T | undefined>;
};
/**
* Create a `RefMap` object, optionally providing a set of initial entries.
*
* "Ref maps" are similar to `Map` objects, but accessing and iterating a
* `RefMap` can be observed. Its `size` property can also be observed.
*/
declare const refMap: <K, V>(entries?: Iterable<[K, V]> | undefined) => RefMap<K, V>;
declare const computed: <T>(compute: () => T, debugId?: string | number) => ComputedRef<T>;
/**
* Create a `ComputedRef` that equals `true` if all inputs are truthy.
*/
declare const computedEvery: (inputs: ComputedInput<any>[], debugId?: string | number) => ComputedRef<boolean>;
/**
* Create a `ComputedRef` that equals `true` if any input is truthy.
*/
declare const computedSome: (inputs: ComputedInput<any>[], debugId?: string | number) => ComputedRef<boolean>;
/**
* Create a `LensRef` object, which is a combination of a *source* (either a
* `ComputedRef` or a getter) and a *sink* (either a `Ref` or a setter). It acts
* as a middle-man for reads and/or writes, allowing you to transform the value
* during access or update.
*/
declare const lens: <T>(compute: ReadonlyRef<T> | (() => T), set: Ref<T> | ((newValue: T) => void), debugId?: string | number) => LensRef<T>;
/** Observe any refs accessed in the compute function. */
declare function observe(compute: () => void): Observer;
/** Observe a single ref. */
declare function observe<T>(ref: ReadonlyRef<T>, compute: (newValue: T, oldValue: T, ref: ReadonlyRef<T>) => void): Observer;
/**
* Observe fine-grained changes to an `ArrayRef`. Note that your handler isn't
* called immediately. It receives a batch of changes in the next microtask.
*
* The returned `ArrayObserver` must be manually disposed when no longer needed,
* or it will continue receiving changes until the associated `ArrayRef` is
* garbage collected.
*/
declare const observeArrayOperations: <T>(arrayRef: ArrayRef<T>, handler: ArrayOperation.Handler<T>) => ArrayObserver<T>;
/**
* Returns true if the given value is an observable ref whose value cannot be
* set directly.
*/
declare function isReadonlyRef(arg: any): boolean;
/**
* Returns true if the given value is an observable ref.
*/
declare function isRef<T = any>(value: any): value is ReadonlyRef<T>;
declare function isArrayRef<T = any>(value: any): value is ArrayRef<T>;
declare function guardRef<T>(value: any, guard: (value: any) => value is T): value is T | Ref<T>;
/**
* Like `ref.peek()` but applies to all access within the given `compute`
* callback.
*/
declare function peek<T, Args extends any[]>(compute: (...args: Args) => T, ...args: Args): T;
/**
* Like `ref.peek()` but for computed properties or custom properties (i.e.
* defined with `Object.defineProperty`).
*/
declare function peek<T extends object, K extends keyof T>(object: T, key: K): T[K];
/**
* Coerce a possibly reactive value to a raw value.
*/
declare const unref: <T>(arg: T | ReadonlyRef<T>) => T;
/**
* For values used as inputs to `computed` wrappers.
*/
type ComputedInput<T> = T | ReadonlyRef<T> | (() => T | ReadonlyRef<T>);
/**
* Similar to `unref` but also supports thunk values.
*
* Most useful inside `computed` callbacks.
*/
declare const evaluateInput: <T>(arg: ComputedInput<T>) => T;
/**
* Observe the given `Ref` until it has a truthy value, then run the effect and
* return the result. If the ref is already truthy, the effect is run
* immediately.
*/
declare function when<T, Result>(condition: ReadonlyRef<T>): Disposable<Promise<Exclude<T, Falsy>>>;
declare function when<T, Result = Exclude<T, Falsy>>(condition: ReadonlyRef<T>, effect: (value: Exclude<T, Falsy>) => Promisable<Result>): Disposable<Promise<Result>>;
/**
* A "flat" ref is one that cannot point to another ref.
*/
type FlatReadonlyRef<T> = ReadonlyRef<Exclude<T, ReadonlyRef>>;
/**
* Unwrap any `ReadonlyRef` types in the type `T`.
*/
type Unref<T> = T extends ReadonlyRef<infer U> ? U : T;
/**
* Takes the value of a component prop that contains JSX children of any kind
* and returns a {@link ChildrenFragment} with children materialized as DOM
* nodes. Since JSX elements passed as children or “element props” are not
* always materialized by default, this hook is useful when you need a reference
* to actual DOM nodes.
*
* 🪝 This hook adds 1 to the hook offset.
*/
declare function useChildren(element: JSX.ElementProp, deps?: readonly any[]): ChildrenFragment;
declare function useChildren(elements: JSX.ElementsProp, deps?: readonly any[]): ChildrenFragment;
declare function useChildren(children: JSX.ChildrenProp, deps?: readonly any[]): ChildrenFragment;
/**
* Returns true if the given value is the result of a `useChildren` call.
*/
declare function isChildrenFragment(value: any): value is ChildrenFragment;
/**
* The result of a `useChildren` call. It wraps around a `DocumentFragment` and
* provides convenience methods for working with the child nodes. It can be
* passed as a child of a JSX element or returned from a component.
*/
interface ChildrenFragment {
get fragment(): DocumentFragment;
get firstChild(): Comment;
get firstElementChild(): JSX.Element | null;
get lastChild(): ChildNode;
get lastElementChild(): JSX.Element | null;
/**
* The returned array is not live, so it won't update if the fragment changes.
*/
get childNodes(): ChildNode[];
/**
* The returned array is not live, so it won't update if the fragment changes.
*/
toElements(): JSX.Element[];
/**
* Throw an error if the fragment is not a single element, otherwise return
* the single element.
*/
expectSingleElement(): JSX.Element;
/**
* Return the single element in the fragment, or `null` if there are no
* elements. Throw an error if there are multiple elements.
*/
expectSingleElementOrNull(): JSX.Element | null;
/**
* Call the given callback for each element in the fragment, with the element
* and its index as arguments.
*/
forEachElement<This = typeof globalThis>(callback: (this: This, element: JSX.Element, index: number) => void, context?: This): void;
}
/** Special nodes are distinguished by a numeric property of this symbol. */
declare const kAlienNodeType: unique symbol;
declare const kShadowRootNodeType = 99;
declare const kDeferredNodeType = 98;
declare const kTemplateNodeType = 96;
type Context<T = any> = {
(props: {
value: T;
children: JSX.ChildrenProp;
}): JSX.Element;
with(value: T): [Context<T>, Ref<T>];
};
type ForwardedContext = {
(props: {
children: JSX.ChildrenProp;
}): JSX.Element;
forward<Args extends any[], Result>(fn: (...args: Args) => Result, ...args: Args): Result;
};
declare class ContextStore extends Map<Context, Ref> {
get Provider(): ForwardedContext;
get: <T>(key: Context<T>) => Ref<T> | undefined;
set: <T>(key: Context<T>, value: Ref<T>) => this;
}
declare function defineContext(context: ContextStore): ForwardedContext;
declare function defineContext<T>(initial: T): Context<T>;
declare function defineContext<T>(): Context<T | undefined>;
/** @internal */
interface ContextMap extends Map<Context, Ref> {
get<T>(key: Context<T>): Ref<T> | undefined;
set<T>(key: Context<T>, value: Ref<T>): this;
}
type Thunkable$1<T> = T | (() => T);
type UnresolvedChild = DeferredChildren | Thunkable$1<JSX.Children | ReadonlyRef<JSX.Children> | JSX.ElementLike | JSX.ElementLike[]>;
type ResolvedChild = ChildNode | AlienNode | null;
interface AriaAttributes {
/** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
'aria-activedescendant'?: string | undefined;
/** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */
'aria-atomic'?: Booleanish | undefined;
/**
* Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
* presented if they are made.
*/
'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both' | undefined;
/** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */
'aria-busy'?: Booleanish | undefined;
/**
* Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
* @see aria-pressed @see aria-selected.
*/
'aria-checked'?: boolean | 'false' | 'mixed' | 'true' | undefined;
/**
* Defines the total number of columns in a table, grid, or treegrid.
* @see aria-colindex.
*/
'aria-colcount'?: number | undefined;
/**
* Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
* @see aria-colcount @see aria-colspan.
*/
'aria-colindex'?: number | undefined;
/**
* Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
* @see aria-colindex @see aria-rowspan.
*/
'aria-colspan'?: number | undefined;
/**
* Identifies the element (or elements) whose contents or presence are controlled by the current element.
* @see aria-owns.
*/
'aria-controls'?: string | undefined;
/** Indicates the element that represents the current item within a container or set of related elements. */
'aria-current'?: Booleanish | 'page' | 'step' | 'location' | 'date' | 'time' | undefined;
/**
* Identifies the element (or elements) that describes the object.
* @see aria-labelledby
*/
'aria-describedby'?: string | undefined;
/**
* Identifies the element that provides a detailed, extended description for the object.
* @see aria-describedby.
*/
'aria-details'?: string | undefined;
/**
* Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
* @see aria-hidden @see aria-readonly.
*/
'aria-disabled'?: Booleanish | undefined;
/**
* Indicates what functions can be performed when a dragged object is released on the drop target.
* @deprecated in ARIA 1.1
*/
'aria-dropeffect'?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup' | undefined;
/**
* Identifies the element that provides an error message for the object.
* @see aria-invalid @see aria-describedby.
*/
'aria-errormessage'?: string | undefined;
/** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
'aria-expanded'?: Booleanish | undefined;
/**
* Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
* allows assistive technology to override the general default of reading in document source order.
*/
'aria-flowto'?: string | undefined;
/**
* Indicates an element's "grabbed" state in a drag-and-drop operation.
* @deprecated in ARIA 1.1
*/
'aria-grabbed'?: Booleanish | undefined;
/** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
'aria-haspopup'?: Booleanish | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | undefined;
/**
* Indicates whether the element is exposed to an accessibility API.
* @see aria-disabled.
*/
'aria-hidden'?: Booleanish | undefined;
/**
* Indicates the entered value does not conform to the format expected by the application.
* @see aria-errormessage.
*/
'aria-invalid'?: Booleanish | 'grammar' | 'spelling' | undefined;
/** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
'aria-keyshortcuts'?: string | undefined;
/**
* Defines a string value that labels the current element.
* @see aria-labelledby.
*/
'aria-label'?: string | undefined;
/**
* Identifies the element (or elements) that labels the current element.
* @see aria-describedby.
*/
'aria-labelledby'?: string | undefined;
/** Defines the hierarchical level of an element within a structure. */
'aria-level'?: number | undefined;
/** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
'aria-live'?: 'off' | 'assertive' | 'polite' | undefined;
/** Indicates whether an element is modal when displayed. */
'aria-modal'?: Booleanish | undefined;
/** Indicates whether a text box accepts multiple lines of input or only a single line. */
'aria-multiline'?: Booleanish | undefined;
/** Indicates that the user may select more than one item from the current selectable descendants. */
'aria-multiselectable'?: Booleanish | undefined;
/** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */
'aria-orientation'?: 'horizontal' | 'vertical' | undefined;
/**
* Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
* between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
* @see aria-controls.
*/
'aria-owns'?: string | undefined;
/**
* Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
* A hint could be a sample value or a brief description of the expected format.
*/
'aria-placeholder'?: string | undefined;
/**
* Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
* @see aria-setsize.
*/
'aria-posinset'?: number | undefined;
/**
* Indicates the current "pressed" state of toggle buttons.
* @see aria-checked @see aria-selected.
*/
'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' | undefined;
/**
* Indicates that the element is not editable, but is otherwise operable.
* @see aria-disabled.
*/
'aria-readonly'?: Booleanish | undefined;
/**
* Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
* @see aria-atomic.
*/
'aria-relevant'?: 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals' | undefined;
/** Indicates that user input is required on the element before a form may be submitted. */
'aria-required'?: Booleanish | undefined;
/** Defines a human-readable, author-localized description for the role of an element. */
'aria-roledescription'?: string | undefined;
/**
* Defines the total number of rows in a table, grid, or treegrid.
* @see aria-rowindex.
*/
'aria-rowcount'?: number | undefined;
/**
* Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
* @see aria-rowcount @see aria-rowspan.
*/
'aria-rowindex'?: number | undefined;
/**
* Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
* @see aria-rowindex @see aria-colspan.
*/
'aria-rowspan'?: number | undefined;
/**
* Indicates the current "selected" state of various widgets.
* @see aria-checked @see aria-pressed.
*/
'aria-selected'?: Booleanish | undefined;
/**
* Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
* @see aria-posinset.
*/
'aria-setsize'?: number | undefined;
/** Indicates if items in a table or grid are sorted in ascending or descending order. */
'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined;
/** Defines the maximum allowed value for a range widget. */
'aria-valuemax'?: number | undefined;
/** Defines the minimum allowed value for a range widget. */
'aria-valuemin'?: number | undefined;
/**
* Defines the current value for a range widget.
* @see aria-valuetext.
*/
'aria-valuenow'?: number | undefined;
/** Defines the human readable text alternative of aria-valuenow for a range widget. */
'aria-valuetext'?: string | undefined;
}
type AriaRole = 'alert' | 'alertdialog' | 'application' | 'article' | 'banner' | 'button' | 'cell' | 'checkbox' | 'columnheader' | 'combobox' | 'complementary' | 'contentinfo' | 'definition' | 'dialog' | 'directory' | 'document' | 'feed' | 'figure' | 'form' | 'grid' | 'gridcell' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'log' | 'main' | 'marquee' | 'math' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'navigation' | 'none' | 'note' | 'option' | 'presentation' | 'progressbar' | 'radio' | 'radiogroup' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'scrollbar' | 'search' | 'searchbox' | 'separator' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'table' | 'tablist' | 'tabpanel' | 'term' | 'textbox' | 'timer' | 'toolbar' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem' | (string & {});
type FunctionComponent<Props extends object = {}> = (props: Props) => JSX.Children;
type CSSAttributes = CSSTransformAttributes & {
[Key in Exclude<keyof CSS.Properties, 'scale' | 'rotate'>]?: CSS.Properties<CSSLength>[Key] | null;
};
type CSSLength = number | string;
type CSSAngle = number | string;
interface CSSTransformAttributes {
rotate?: CSSAngle | null;
rotateX?: CSSAngle | null;
rotateY?: CSSAngle | null;
scale?: number | null;
scaleX?: number | null;
scaleY?: number | null;
x?: CSSLength | null;
y?: CSSLength | null;
z?: CSSLength | null;
}
declare const enum EffectFlags {
Once = 1,
Async = 2
}
interface Item {
next?: this | Falsy;
prev?: this | Falsy;
}
declare class LinkedList<T extends Item> {
first: T | Falsy;
last: T | Falsy;
add(item: T, prepend?: boolean): void;
remove(item: T): void;
forEach<This = any>(callback: (item: T) => void, context?: This): void;
}
interface AlienEffect<Target = any, Args extends any[] = any[], Async extends boolean = boolean> {
(target: Target, ...args: boolean extends Async ? any[] : Async extends true ? [AbortSignal, ...Args] : Args): Async extends true ? Promisable<(() => void) | void> : (() => void) | void;
context?: AlienEffects;
target?: Target;
args?: Args;
async?: Async;
disable?: () => void;
once?: boolean;
next?: AlienEffect | null;
prev?: AlienEffect | null;
}
declare const enum AlienEffectState {
Disabled = 0,
Disabling = 1,
Enabling = 2,
Enabled = 3
}
/**
* Hook into an element's lifecycle (mount, unmount, enable, disable).
*
* Any `enable` or `disable` callbacks will be run when the element is
* mounted or unmounted, respectively. If the element is already mounted,
* any `enable` callbacks will be run immediately.
*/
declare class AlienEffects {
state: AlienEffectState;
mounted: boolean;
rootNode?: Node;
effects?: LinkedList<AlienEffect> | null;
currentEffect: AlienEffect | null;
abortCtrl?: AbortController;
constructor(callback?: () => void);
get enabled(): boolean;
get partiallyEnabled(): boolean;
/**
* Run all current and future effects until disabled.
*/
enable(): void;
/**
* Disable all current effects and prevent future effects from running.
*/
disable(destroy?: boolean): void;
/** @internal */
remove(effect: AlienEffect): void;
/**
* Add an effect to run when `this` is enabled. If `this` is currently
* enabled, the effect will run immediately.
*
* If the given `effect` is already known to `this`, it can still have its
* target and arguments changed through this method.
*/
run(effect: AlienEffect<void, [], false>): Disposable<typeof effect>;
run<Args extends any[]>(effect: AlienEffect<void, Args, false>, args: Args): Disposable<typeof effect>;
run<T extends object | void, Args extends any[] = []>(effect: AlienEffect<T, Args, false>, target: T, args?: Args): Disposable<typeof effect>;
/**
* Add a callback to run when the scope is next enabled.
*/
runOnce(effect: AlienEffect<void, [], false>): Disposable<typeof effect>;
runOnce<Args extends any[]>(effect: AlienEffect<void, Args, false>, args: Args): Disposable<typeof effect>;
runOnce<T extends object, Args extends any[] = []>(effect: AlienEffect<T, Args, false>, target: T, args?: Args): Disposable<typeof effect>;
runAsync(effect: AlienEffect<void, [], true>): Disposable<typeof effect>;
runAsync<Args extends any[]>(effect: AlienEffect<void, Args, true>, args: Args): Disposable<typeof effect>;
runAsync<T extends object, Args extends any[] = []>(effect: AlienEffect<T, Args, true>, target: T, args?: Args): Disposable<typeof effect>;
runOnceAsync(effect: AlienEffect<void, [], true>): typeof effect;
runOnceAsync<Args extends any[]>(effect: AlienEffect<void, Args, true>, args: Args): typeof effect;
runOnceAsync<T extends object, Args extends any[] = []>(effect: AlienEffect<T, Args, true>, target: T, args?: Args): typeof effect;
protected _runEffect(effect: AlienEffect): void;
}
/**
* A special type of AlienEffects that is only enabled when the element is
* mounted. It relies on a `MutationObserver` attached to a document or shadow
* root, so it knows when the element is connected.
*/
declare class AlienMountEffects<Element extends AnyElement = any> extends AlienEffects {
readonly element: Element | Comment;
protected _mountEffect: Disposable | null;
constructor(element: Element | Comment, rootNode?: Node);
enable(): void;
disable(destroy?: boolean): void;
protected enableOnceMounted(element: Element | Comment, rootNode?: Node): void;
}
/**
* Bound effects have their `target` and `args` pre-defined.
*/
type AlienBoundEffect<Target = any, Args extends any[] = any, Async extends boolean = boolean> = {
enable: AlienEffect<Target, Args, Async>;
target?: Target;
args?: Args;
};
/**
* If the `currentEffects` context (or the given `context`) is enabled,
* this effect will be enabled immediately.
*/
declare function createEffect<Effect extends AlienEffect<void, [], false> | AlienBoundEffect<any, any, false>>(effect: Effect, prepend?: boolean, context?: AlienEffects, flags?: EffectFlags.Once): Disposable<typeof effect>;
declare function createEffect<Effect extends AlienEffect<void, [], true> | AlienBoundEffect<any, any, true>>(effect: Effect, prepend: boolean | undefined, context: AlienEffects | undefined, flags: EffectFlags.Async): Disposable<typeof effect>;
declare const createOnceEffect: <Effect extends AlienEffect<void, [], false> | AlienBoundEffect<any, any, false>>(effect: Effect, prepend?: boolean, context?: AlienEffects) => Disposable<Effect>;
declare const createAsyncEffect: <Effect extends AlienEffect<void, [], true> | AlienBoundEffect<any, any, true>>(effect: Effect, prepend?: boolean, context?: AlienEffects) => Disposable<Effect>;
type AlienEffectType<Args extends any[]> = (...args: Args) => Args extends [infer Target, ...infer Args] ? Disposable<AlienBoundEffect<Target, Args>> : never;
declare function defineEffectType<Args extends any[]>(enable: (...args: Args) => EffectResult): AlienEffectType<Args>;
/**
* Useful when an effect wants to remove itself. It should call this
* when setting itself up.
*/
declare function getCurrentEffect(): AlienEffect<any, any[], boolean> | null | undefined;
declare const styleDeconflict: {
readonly border: "cssBorder";
readonly content: "cssContent";
readonly filter: "cssFilter";
readonly height: "cssHeight";
readonly transform: "cssTransform";
readonly translate: "cssTranslate";
readonly width: "cssWidth";
} & {
readonly cssBorder: "border";
readonly cssContent: "content";
readonly cssFilter: "filter";
readonly cssHeight: "height";
readonly cssTransform: "transform";
readonly cssTranslate: "translate";
readonly cssWidth: "width";
};
type AlienStyleDeconflict = typeof styleDeconflict;
type AlienStyleMethods<Element extends AnyElement> = {
[P in keyof CSS.Properties as P extends keyof AlienStyleDeconflict ? AlienStyleDeconflict[P] : P]: {
(): CSS.Properties<CSSLength>[P];
(value: CSS.Properties<CSSLength>[P] | null): Element;
};
};
type AlienEventMethod<This extends AnyElement, Event extends AnyEvent = AnyEvent> = (callback: (this: This, event: AlienEvent<Event, This>) => void, options?: boolean | AddEventListenerOptions) => Disposable<AlienBoundEffect<This>>;
type AlienEventMethods<This extends AnyElement> = {
[P in keyof Omit<HTMLElementEventMap, 'change'> as AlienEventType<P>]: AlienEventMethod<This, HTMLElementEventMap[P]>;
};
type AlienEventType<Event extends string> = `${AlienEventPrefix}${CamelCaseHTMLEvent<Event>}${AlienEventSuffix<Event>}`;
type AlienEventPrefix = 'on' | 'one';
type AlienEventSuffix<Event extends string> = (Event extends HTMLBubblingEvents ? 'Capture' : never) | '';
type CamelCaseHTMLEvent<Event extends string> = Event extends `${HTMLEventPrefix}${infer Suffix}` ? Event extends `${infer Prefix extends string}${Suffix}` ? `${Capitalize<Prefix>}${CamelCaseHTMLEvent<Suffix>}` : never : Capitalize<Event>;
type HTMLEventPrefix = 'animation' | 'aux' | 'before' | 'can' | 'composition' | 'context' | 'cue' | 'dbl' | 'drag' | 'duration' | 'focus' | 'form' | 'got' | 'loaded' | 'lost' | 'mouse' | 'pointer' | 'rate' | 'select' | 'selection' | 'slot' | 'time' | 'touch' | 'transition' | 'volume';
type HTMLBubblingEvents = 'blur' | 'change' | 'click' | 'dblclick' | 'error' | 'focus' | 'keydown' | 'keyup' | 'load' | 'mousedown' | 'mousemove' | 'mouseout' | 'mouseover' | 'mouseup' | 'reset' | 'resize' | 'scroll' | 'select' | 'submit' | 'unload';
interface AlienNodeList<Element extends Node> extends ReturnType<typeof defineAlienNodeList<Element>> {
}
declare function defineAlienNodeList<T extends Node>(): {
[Symbol.iterator](this: NodeListOf<T>): IterableIterator<T>;
map<U>(this: NodeListOf<T>, iterator: (value: T, index: number) => U): U[];
filter<U_1 extends T = T>(this: NodeListOf<T>, selector: string | ((value: T, index: number) => any)): U_1[];
mapFilter<U_2>(this: NodeListOf<T>, iterator: (value: T, index: number) => void | U_2 | null | undefined): U_2[];
find<U_3 extends T = T>(this: NodeListOf<T>, selector: string | ((value: T, index: number) => any)): U_3 | undefined;
};
interface AlienElementList<Element extends Node = HTMLOrSVGElement> extends NodeListOf<Element>, AlienNodeList<Element> {
[index: number]: Element;
forEach(iterator: (value: Element, key: number, parent: AlienElementList<Element>) => void): void;
forEach<This>(iterator: (this: This, value: Element, key: number, parent: AlienElementList<Element>) => void, thisArg: This): void;
}
type AlienElementIterator<Element extends AnyElement> = Iterable<Element> & {
first(): Element | null;
next(): Element | null;
};
type AlienEvent<Event extends AnyEvent = AnyEvent, Element extends AnyElement = HTMLOrSVGElement> = Event & {
currentTarget: Element;
target: AnyElement;
} & (Event extends {
relatedTarget: EventTarget;
} ? {
relatedTarget: AnyElement;
} : unknown);
type AlienParentElement<Element extends AnyElement> = (Element extends SVGElement ? SVGElement : never) | HTMLElement | Document;
declare class AlienElement<Element extends AnyElement = HTMLOrSVGElement> {
$<SelectedElement extends AlienTag<Element> = Element>(selector: string): AlienSelect<SelectedElement, this> | null;
$$<SelectedElement extends AlienTag<Element> = Element>(selector: string): AlienElementList<AlienSelect<SelectedElement, this>>;
siblings<SelectedElement extends AlienTag<Element> = Element>(selector?: string): AlienElementIterator<AlienSelect<SelectedElement, this>>;
filter<SelectedElement extends AnyElement = Element>(selector: string): AlienSelect<SelectedElement, this> | null;
replaceText(value: string): this;
replaceText(value: () => string): Disposable<AlienBoundEffect<Element>>;
empty(): this;
appendTo(parent: AlienParentElement<Element>): this;
prependTo(parent: AlienParentElement<Element>): this;
hasClass(name: string): boolean;
addClass(name: string): this;
removeClass(name: string): this;
removeMatchingClasses(pattern: RegExp | ((name: string) => boolean | void)): this;
toggleClass(name: string, value?: boolean): boolean;
/**
* Returns the first class name that matches the given pattern.
*
* If a capturing group exists in the pattern, the captured value will
* be returned. Otherwise, the entire match will be returned.
*
* An empty string is returned if no match is found.
*/
matchClass(pattern: RegExp): string;
css(style: CSSAttributes): this;
set(props: JSX.InferAttributes<Element>): this;
spring(animations: AnimationsParam<Element>): this;
}
interface AlienElement<Element extends AnyElement> extends AnyElement, AlienEventMethods<Element>, AlienStyleMethods<Element> {
/**
* Replace this node with its children.
*/
unwrap<T extends Node = ChildNode>(): T[];
/**
* ⚠️ It's not safe to call this from within a `selfUpdating`
* component's render function (if this element is returned by the
* component).
*/
effects(): AlienMountEffects<FromElementProxy<this>>;
effect(effect: AlienEffect<void, [], false>): Disposable<typeof effect>;
effect<Args extends any[]>(effect: AlienEffect<void, Args, false>, args: Args): Disposable<typeof effect>;
effect<T extends object | void, Args extends any[] = []>(effect: AlienEffect<T, Args, false>, target: T, args?: Args): Disposable<typeof effect>;
effectOnce(effect: AlienEffect<void, [], false>): Disposable<typeof effect>;
effectOnce<Args extends any[]>(effect: AlienEffect<void, Args, false>, args: Args): Disposable<typeof effect>;
effectOnce<T extends object | void, Args extends any[] = []>(effect: AlienEffect<T, Args, false>, target: T, args?: Args): Disposable<typeof effect>;
effectAsync(effect: AlienEffect<void, [], true>): Disposable<typeof effect>;
effectAsync<Args extends any[]>(effect: AlienEffect<void, Args, true>, args: Args): Disposable<typeof effect>;
effectAsync<T extends object | void, Args extends any[] = []>(effect: AlienEffect<T, Args, true>, target: T, args?: Args): Disposable<typeof effect>;
effectOnceAsync(effect: AlienEffect<void, [], true>): Disposable<typeof effect>;
effectOnceAsync<Args extends any[]>(effect: AlienEffect<void, Args, true>, args: Args): Disposable<typeof effect>;
effectOnceAsync<T extends object | void, Args extends any[] = []>(effect: AlienEffect<T, Args, true>, target: T, args?: Args): Disposable<typeof effect>;
}
interface DOMAttributes<T> {
onCopy?: ClipboardEventHandler<T>;
onCopyCapture?: ClipboardEventHandler<T>;
onCut?: ClipboardEventHandler<T>;
onCutCapture?: ClipboardEventHandler<T>;
onPaste?: ClipboardEventHandler<T>;
onPasteCapture?: ClipboardEventHandler<T>;
onCompositionEnd?: CompositionEventHandler<T>;
onCompositionEndCapture?: CompositionEventHandler<T>;
onCompositionStart?: CompositionEventHandler<T>;
onCompositionStartCapture?: CompositionEventHandler<T>;
onCompositionUpdate?: CompositionEventHandler<T>;
onCompositionUpdateCapture?: CompositionEventHandler<T>;
onFocus?: FocusEventHandler<T>;
onFocusCapture?: FocusEventHandler<T>;
onBlur?: FocusEventHandler<T>;
onBlurCapture?: FocusEventHandler<T>;
onChange?: FormEventHandler<T>;
onChangeCapture?: FormEventHandler<T>;
onBeforeInput?: FormEventHandler<T>;
onBeforeInputCapture?: FormEventHandler<T>;
onInput?: FormEventHandler<T>;
onInputCapture?: FormEventHandler<T>;
onReset?: FormEventHandler<T>;
onResetCapture?: FormEventHandler<T>;
onSubmit?: FormEventHandler<T>;
onSubmitCapture?: FormEventHandler<T>;
onInvalid?: FormEventHandler<T>;
onInvalidCapture?: FormEventHandler<T>;
onLoad?: EventHandler<Event, T>;
onLoadCapture?: EventHandler<Event, T>;
onError?: EventHandler<Event, T>;
onErrorCapture?: EventHandler<Event, T>;
onKeyDown?: KeyboardEventHandler<T>;
onKeyDownCapture?: KeyboardEventHandler<T>;
onKeyPress?: KeyboardEventHandler<T>;
onKeyPressCapture?: KeyboardEventHandler<T>;
onKeyUp?: KeyboardEventHandler<T>;
onKeyUpCapture?: KeyboardEventHandler<T>;
onAbort?: EventHandler<Event, T>;
onAbortCapture?: EventHandler<Event, T>;
onCanPlay?: EventHandler<Event, T>;
onCanPlayCapture?: EventHandler<Event, T>;
onCanPlayThrough?: EventHandler<Event, T>;
onCanPlayThroughCapture?: EventHandler<Event, T>;
onDurationChange?: EventHandler<Event, T>;
onDurationChangeCapture?: EventHandler<Event, T>;
onEmptied?: EventHandler<Event, T>;
onEmptiedCapture?: EventHandler<Event, T>;
onEncrypted?: EventHandler<Event, T>;
onEncryptedCapture?: EventHandler<Event, T>;
onEnded?: EventHandler<Event, T>;
onEndedCapture?: EventHandler<Event, T>;
onLoadedData?: EventHandler<Event, T>;
onLoadedDataCapture?: EventHandler<Event, T>;
onLoadedMetadata?: EventHandler<Event, T>;
onLoadedMetadataCapture?: EventHandler<Event, T>;
onLoadStart?: EventHandler<Event, T>;
onLoadStartCapture?: EventHandler<Event, T>;
onPause?: EventHandler<Event, T>;
onPauseCapture?: EventHandler<Event, T>;
onPlay?: EventHandler<Event, T>;
onPlayCapture?: EventHandler<Event, T>;
onPlaying?: EventHandler<Event, T>;
onPlayingCapture?: EventHandler<Event, T>;
onProgress?: EventHandler<Event, T>;
onProgressCapture?: EventHandler<Event, T>;
onRateChange?: EventHandler<Event, T>;
onRateChangeCapture?: EventHandler<Event, T>;
onSeeked?: EventHandler<Event, T>;
onSeekedCapture?: EventHandler<Event, T>;
onSeeking?: EventHandler<Event, T>;
onSeekingCapture?: EventHandler<Event, T>;
onStalled?: EventHandler<Event, T>;
onStalledCapture?: EventHandler<Event, T>;
onSuspend?: EventHandler<Event, T>;
onSuspendCapture?: EventHandler<Event, T>;
onTimeUpdate?: EventHandler<Event, T>;
onTimeUpdateCapture?: EventHandler<Event, T>;
onVolumeChange?: EventHandler<Event, T>;
onVolumeChangeCapture?: EventHandler<Event, T>;
onWaiting?: EventHandler<Event, T>;
onWaitingCapture?: EventHandler<Event, T>;
onAuxClick?: MouseEventHandler<T>;
onAuxClickCapture?: MouseEventHandler<T>;
onClick?: MouseEventHandler<T>;
onClickCapture?: MouseEventHandler<T>;
onContextMenu?: MouseEventHandler<T>;
onContextMenuCapture?: MouseEventHandler<T>;
onDblClick?: MouseEventHandler<T>;
onDblClickCapture?: MouseEventHandler<T>;
onDrag?: DragEventHandler<T>;
onDragCapture?: DragEventHandler<T>;
onDragEnd?: DragEventHandler<T>;
onDragEndCapture?: DragEventHandler<T>;
onDragEnter?: DragEventHandler<T>;
onDragEnterCapture?: DragEventHandler<T>;
onDragExit?: DragEventHandler<T>;
onDragExitCapture?: DragEventHandler<T>;
onDragLeave?: DragEventHandler<T>;
onDragLeaveCapture?: DragEventHandler<T>;
onDragOver?: DragEventHandler<T>;
onDragOverCapture?: DragEventHandler<T>;
onDragStart?: DragEventHandler<T>;
onDragStartCapture?: DragEventHandler<T>;
onDrop?: DragEventHandler<T>;
onDropCapture?: DragEventHandler<T>;
onMouseDown?: MouseEventHandler<T>;
onMouseDownCapture?: MouseEventHandler<T>;
onMouseEnter?: MouseEventHandler<T>;
onMouseLeave?: MouseEventHandler<T>;
onMouseMove?: MouseEventHandler<T>;
onMouseMoveCapture?: MouseEventHandler<T>;
onMouseOut?: MouseEventHandler<T>;
onMouseOutCapture?: MouseEventHandler<T>;
onMouseOver?: MouseEventHandler<T>;
onMouseOverCapture?: MouseEventHandler<T>;
onMouseUp?: MouseEventHandler<T>;
onMouseUpCapture?: MouseEventHandler<T>;
onSelect?: EventHandler<Event, T>;
onSelectCapture?: EventHandler<Event, T>;
onTouchCancel?: TouchEventHandler<T>;
onTouchCancelCapture?: TouchEventHandler<T>;
onTouchEnd?: TouchEventHandler<T>;
onTouchEndCapture?: TouchEventHandler<T>;
onTouchMove?: TouchEventHandler<T>;
onTouchMoveCapture?: TouchEventHandler<T>;
onTouchStart?: TouchEventHandler<T>;
onTouchStartCapture?: TouchEventHandler<T>;
onPointerDown?: PointerEventHandler<T>;
onPointerDownCapture?: PointerEventHandler<T>;
onPointerMove?: PointerEventHandler<T>;
onPointerMoveCapture?: PointerEventHandler<T>;
onPointerUp?: PointerEventHandler<T>;
onPointerUpCapture?: PointerEventHandler<T>;
onPointerCancel?: PointerEventHandler<T>;
onPointerCancelCapture?: PointerEventHandler<T>;
onPointerEnter?: PointerEventHandler<T>;
onPointerEnterCapture?: PointerEventHandler<T>;
onPointerLeave?: PointerEventHandler<T>;
onPointerLeaveCapture?: PointerEventHandler<T>;
onPointerOver?: PointerEventHandler<T>;
onPointerOverCapture?: PointerEventHandler<T>;
onPointerOut?: PointerEventHandler<T>;
onPointerOutCapture?: PointerEventHandler<T>;
onGotPointerCapture?: PointerEventHandler<T>;
onGotPointerCaptureCapture?: PointerEventHandler<T>;
onLostPointerCapture?: PointerEventHandler<T>;
onLostPointerCaptureCapture?: PointerEventHandler<T>;
onScroll?: UIEventHandler<T>;
onScrollCapture?: UIEventHandler<T>;
onWheel?: WheelEventHandler<T>;
onWheelCapture?: WheelEventHandler<T>;
onAnimationStart?: AnimationEventHandler<T>;
onAnimationStartCapture?: AnimationEventHandler<T>;
onAnimationEnd?: AnimationEventHandler<T>;
onAnimationEndCapture?: AnimationEventHandler<T>;
onAnimationIteration?: AnimationEventHandler<T>;
onAnimationIterationCapture?: AnimationEventHandler<T>;
onTransitionEnd?: TransitionEventHandler<T>;
onTransitionEndCapture?: TransitionEventHandler<T>;
}
type FormEvent = Event;
type ChangeEvent = Event;
type EventHandler<E extends Event = Event, T = Element> = (event: AlienEvent<E, Extract<T, Element>>) => void;
type ClipboardEventHandler<T = Element> = EventHandler<ClipboardEvent, T>;
type CompositionEventHandler<T = Element> = EventHandler<CompositionEvent, T>;
type DragEventHandler<T = Element> = EventHandler<DragEvent, T>;
type FocusEventHandler<T = Element> = EventHandler<FocusEvent, T>;
type FormEventHandler<T = Element> = EventHandler<FormEvent, T>;
type ChangeEventHandler<T = Element> = EventHandler<ChangeEvent, T>;
type KeyboardEventHandler<T = Element> = EventHandler<KeyboardEvent, T>;
type MouseEventHandler<T = Element> = EventHandler<MouseEvent, T>;
type TouchEventHandler<T = Element> = EventHandler<TouchEvent, T>;
type PointerEventHandler<T = Element> = EventHandler<PointerEvent, T>;
type UIEventHandler<T = Element> = EventHandler<UIEvent, T>;
type WheelEventHandler<T = Element> = EventHandler<WheelEvent, T>;
type AnimationEventHandler<T = Element> = EventHandler<AnimationEvent, T>;
type TransitionEventHandler<T = Element> = EventHandler<TransitionEvent, T>;
type HTMLClassArrayAttribute = readonly HTMLClassAttribute[];
type HTMLClassObjectAttribute = {
[key: string]: boolean;
};
type HTMLClassPrimitiveAttribute = string | DOMTokenList | false | null | undefined;
type HTMLClassAttribute = HTMLClassArrayAttribute | HTMLClassObjectAttribute | HTMLClassPrimitiveAttribute;
type HTMLStyleArrayAttribute = readonly HTMLStyleAttribute[];
type HTMLStyleAttribute = HTMLStyleArrayAttribute | CSSAttributes | false | null | undefined;
type HTMLDatasetData = {
toString(): string;
} | string | number | boolean | null | undefined;
type HTMLDatasetAttribute = Record<string, HTMLDatasetData>;
interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
namespaceURI?: string;
class?: HTMLClassAttribute;
dataset?: HTMLDatasetAttribute;
innerHTML?: string;
innerText?: string;
textContent?: string;
accessKey?: string;
contentEditable?: Booleanish | 'inherit';
contextMenu?: string;
dir?: string;
draggable?: Booleanish;
hidden?: boolean;
id?: string;
lang?: string;
placeholder?: string;
slot?: string;
spellCheck?: Booleanish;
style?: HTMLStyleAttribute;
tabIndex?: number;
title?: string;
translate?: 'yes' | 'no';
radioGroup?: string;
role?: AriaRole;
about?: string;
datatype?: string;
inlist?: any;
prefix?: string;
property?: string;
resource?: string;
typeof?: string;
vocab?: string;
autoCapitalize?: string;
autoCorrect?: string;
autoSave?: string;
color?: string;
itemProp?: string;
itemScope?: boolean;
itemType?: string;
itemID?: string;
itemRef?: string;
results?: number;
security?: string;
unselectable?: 'on' | 'off';
/**
* Hints at the type of data that might be entered by the user while editing the element or its contents
* @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
*/
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
/**
* Specify that a standard HTML element should behave like a defined custom built-in element
* @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
*/
is?: string;
}
type HTMLReferrerPolicy = '' | 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
type HTMLAnchorTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {});
interface HTMLAnchorAttributes<T> extends HTMLAttributes<T> {
download?: string;
href?: string;
hrefLang?: string;
media?: string;
ping?: string;
rel?: string;
target?: HTMLAnchorTarget;
type?: string;
referrerPolicy?: HTMLReferrerPolicy;
}
interface HTMLAudioAttributes<T> extends HTMLMediaAttributes<T> {
}
interface HTMLAreaAttributes<T> extends HTMLAttributes<T> {
alt?: string;
coords?: string;
href?: string;
hrefLang?: string;
media?: string;
referrerPolicy?: HTMLReferrerPolicy;
rel?: string;
shape?: string;
target?: string;
}
interface HTMLBaseAttributes<T> extends HTMLAttributes<T> {
href?: string;
target?: string;
}
interface HTMLBlockquoteAttributes<T> extends HTMLAttributes<T> {
cite?: string;
}
type HTMLButtonType = 'submit' | 'reset' | 'button';
interface HTMLButtonAttributes<T> extends HTMLAttributes<T> {
autoFocus?: boolean;
disabled?: boolean;
form?: string;
formAction?: string;
formEncType?: string;
formMethod?: string;
formNoValidate?: boolean;
formTarget?: string;
name?: string;
type?: HTMLButtonType;
value?: string | number;
}
interface HTMLCanvasAttributes<T> extends HTMLAttributes<T> {
height?: number | string;
width?: number | string;
}
interface HTMLColAttributes<T> extends HTMLAttributes<T> {
span?: number;
width?: number | string;
}
interface HTMLColgroupAttributes<T> extends HTMLAttributes<T> {
span?: number;
}
interface HTMLDataAttributes<T> extends HTMLAttributes<T> {
value?: string | number;
}
interface HTMLDetailsAttributes<T> extends HTMLAttributes<T> {
open?: boolean;
onToggle?: EventHandler<Event, T>;
}
interface HTMLDelAttributes<T> extends HTMLAttributes<T> {
cite?: string;
dateTime?: string;
}
interface HTMLDialogAttributes<T> extends HTMLAttributes<T> {
open?: boolean;
}
interface HTMLEmbedAttributes<T> extends HTMLAttributes<T> {
height?: number | string;
src?: string;
type?: string;
width?: number | string;
}
interface HTMLFieldsetAttributes<T> extends HTMLAttributes<T> {
disabled?: boolean;
form?: string;
name?: string;
}
interface HTMLFormAttributes<T> extends HTMLAttributes<T> {
acceptCharset?: string;
action?: string;
autoComplete?: string;
encType?: string;
method?: string;
name?: string;
noValidate?: boolean;
target?: string;
}
interface HTMLHtmlAttributes<T> extends HTMLAttributes<T> {
manifest?: string;
}
interface HTMLIframeAttributes<T> extends HTMLAttributes<T> {
allow?: string;
allowFullScreen?: boolean;
allowTransparency?: boolean;
/** @deprecated */
frameBorder?: number | string;
height?: number | string;
loading?: 'eager' | 'lazy';
/** @deprecated */
marginHeight?: number;
/** @deprecated */
marginWidth?: number;
name?: string;
referrerPolicy?: HTMLReferrerPolicy;
sandbox?: string;
/** @deprecated */
scrolling?: string;
seamless?: boolean;
src?: string;
srcDoc?: string;
width?: number | string;
}
type HTMLImageCrossOrigin = 'anonymous' | 'use-credentials' | '';
type HTMLImageDecoding = 'async' | 'auto' | 'sync';
type HTMLImageLoading = 'eager' | 'lazy';
interface HTMLImgAttributes<T> extends HTMLAttributes<T> {
alt?: string;
crossOrigin?: HTMLImageCrossOrigin;
decoding?: HTMLImageDecoding;
height?: number | string;
loading?: HTMLImageLoading;
referrerPolicy?: HTMLReferrerPolicy;
sizes?: string;
src?: string;
srcSet?: string;
useMap?: string;
width?: number | string;
}
interface HTMLInsAttributes<T> extends HTMLAttributes<T> {
cite?: string;
dateTime?: string;
}
type HTMLInputEnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
interface HTMLInputAttributes<T> extends HTMLAttributes<T> {
accept?: string;
alt?: string;
autoComplete?: string;
autoFocus?: boolean;
/** @see https://www.w3.org/TR/html-media-capture/#the-capture-attribute */
capture?: boolean | string;
checked?: boolean;
crossOrigin?: string;
disabled?: boolean;
enterKeyHint?: HTMLInputEnterKeyHint;
form?: string;
formAction?: string;
formEncType?: string;
formMethod?: string;
formNoValidate?: boolean;
formTarget?: string;
height?: number | string;
list?: string;
max?: number | string;
maxLength?: number;
min?: number | string;
minLength?: number;
multiple?: boolean;
name?: string;
pattern?: string;
placeholder?: string;
readOnly?: boolean;
required?: boolean;
size?: number;
src?: string;
step?: number | string;
type?: string;
value?: string | readonly string[] | number;
width?: number | string;
onChange?: ChangeEventHandler<T>;
}
interface HTMLKeygenAttributes<T> extends HTMLAttributes<T> {
autoFocus?: boolean;
challenge?: string;
disabled?: boolean;
form?: string;
keyType?: string;
keyParams?: string;
name?: string;
}
interface HTMLLabelAttributes<T> extends HTMLAttributes<T> {
form?: string;
htmlFor?: string;
}
interface HTMLLiAttributes<T> extends HTMLAttributes<T> {
value?: number;
}
interface HTMLLinkAttributes<T> extends HTMLAttributes<T> {
as?: string;
crossOrigin?: string;
href?: string;
hrefLang?: string;
integrity?: string;
media?: string;
referrerPolicy?: HTMLReferrerPolicy;
rel?: string;
sizes?: string;
type?: string;
charSet?: string;
}
interface HTMLMapAttributes<T> extends HTMLAttributes<T> {
name?: string;
}
interface HTMLMenuAttributes<T> extends HTMLAttributes<T> {
type?: string;
}
interface HTMLMediaAttributes<T> extends HTMLAttributes<T> {
autoPlay?: boolean;
controls?: boolean;
controlsList?: string;
crossOrigin?: string;
loop?: boolean;
mediaGroup?: string;
muted?: boolean;
playsInline?: boolean;
preload?: string;
src?: string;
}
interface HTMLMetaAttributes<T> extends HTMLAttributes<T> {
charSet?: string;
content?: string;
httpEquiv?: string;
name?: string;
media?: string;
}
interface HTMLMeterAttributes<T> extends HTMLAttributes<T> {
form?: string;
high?: number;
low?: number;
max?: number | string;
min?: number | string;
optimum?: number;
value?: number;
}
interface HTMLQuoteAttributes<T> extends HTMLAttributes<T> {
cite?: string;
}
interface HTMLObjectAttributes<T> extends HTMLAttributes<T> {
classID?: string;
data?: string;
form?: string;
height?: number | string;
name?: string;
type?: string;
useMap?: string;
width?: number | string;
wmode?: string;
}
interface HTMLOlAttributes<T> extends HTMLAttributes<T> {
reversed?: boolean;
start?: number;
type?: '1' | 'a' | 'A' | 'i' | 'I';
}
interface HTMLOptgroupAttributes<T> extends HTMLAttributes<T> {
disabled?: boolean;
label?: string;
}
interface HTMLOptionAttributes<T> extends HTMLAttributes<T> {
disabled?: boolean;
label?: string;
selected?: boolean;
value?: string | number;
}
interface HTMLOutputAttributes<T> extends HTMLAttributes<T> {
form?: string;
htmlFor?: string;
name?: string;
}
interface HTMLParamAttributes<T> extends HTMLAttributes<T> {
name?: string;
value?: string | readonly string[] | number;
}
interface HTMLProgressAttributes<T> extends HTMLAttributes<T> {
max?: number | string;
value?: number;
}
interface HTMLScriptAttributes<T> extends HTMLAttributes<T> {
async?: boolean;
/** @deprecated */
charSet?: string;
crossOrigin?: string;
defer?: boolean;
integrity?: string;
noModule?: boolean;
nonce?: string;
referrerPolicy?: HTMLReferrerPolicy;
src?: string;
type?: string;
}
interface HTMLSelectAttributes<T> extends HTMLAttributes<T> {
autoComplete?: string;
autoFocus?: boolean;
disabled?: boolean;
form?: string;
multiple?: boolean;
name?: string;
required?: boolean;
size?: number;
value?: string | readonly string[] | number;
onChange?: ChangeEventHandler<T>;
}
interface HTMLSlotAttributes<T> extends HTMLAttributes<T> {
name?: string;
}
interface HTMLSourceAttributes<T> extends HTMLAttributes<T> {
height?: number | string;
media?: string;
sizes?: string;
src?: string;
srcSet?: string;
type?: string;
width?: number | string;
}
interface HTMLStyleAttributes<T> extends HTMLAttributes<T> {
media?: string;
nonce?: string;
scoped?: boolean;
type?: string;
}
interface HTMLTableAttributes<T> extends HTMLAttributes<T> {
cellPadding?: number | string;
cellSpacing?: number | string;
summary?: string;
width?: number | string;
}
interface HTMLTextareaAttributes<T> extends HTMLAttributes<T> {
autoComplete?: string;
autoFocus?: boolean;
cols?: number;
dirName?: string;
disabled?: boolean;
form?: string;
maxLength?: number;
minLength?: number;
name?: string;
placeholder?: string;
readOnly?: boolean;
required?: boolean;
rows?: number;
value?: string | number;
wrap?: string;
onChange?: ChangeEventHandler<T>;
}
type HTMLTableAlign = 'left' | 'center' | 'right' | 'justify' | 'char';
type HTMLTableVAlign = 'top' | 'middle' | 'bottom' | 'baseline';
interface HTMLTdAttributes<T> extends HTMLAttributes<T> {
align?: HTMLTableAlign;
colSpan?: number;
headers?: string;
rowSpan?: number;
scope?: string;
abbr?: string;
height?: number | string;
width?: number | string;
valign?: HTMLTableVAlign;
}
interface HTMLThAttributes<T> extends HTMLAttributes<T> {
align?: HTMLTableAlign;
colSpan?: number;
headers?: string;
rowSpan?: number;
scope?: string;
abbr?: string;
}
interface HTMLTimeAttributes<T> extends HTMLAttributes<T> {
dateTime?: string;
}
interface HTMLTrackAttributes<T> extends HTMLAttributes<T> {
default?: boolean;
kind?: string;
label?: string;
src?: string;
srcLang?: string;
}
interface HTMLVideoAttributes<T> extends HTMLMediaAttributes<T> {
height?: number | string;
playsInline?: boolean;
poster?: string;
width?: number | string;
disablePictureInPicture?: boolean;
disableRemotePlayback?: boolean;
}
interface HTMLWebViewAttributes<T> extends HTMLAttributes<T> {
allowFullScreen?: boolean;
allowpopups?: boolean;
autoFocus?: boolean;
autosize?: boolean;
blinkfeatures?: string;
disableblinkfeatures?: string;
disableguestresize?: boolean;
disablewebsecurity?: boolean;
guestinstance?: string;
httpreferrer?: string;
nodeintegration?: boolean;
partition?: string;
plugins?: boolean;
preload?: string;
src?: string;
useragent?: string;
webpreferences?: string;
}
type HTMLTagName = keyof HTMLAttributesByTagName;
interface HTMLAttributesByTagName {
a: HTMLAnchorAttributes<HTMLAnchorElement>;
abbr: HTMLAttributes<HTMLElement>;
address: HTMLAttributes<HTMLElement>;
area: HTMLAreaAttributes<HTMLAreaElement>;
article: HTMLAttributes<HTMLElement>;
aside: HTMLAttributes<HTMLElement>;
audio: HTMLAudioAttributes<HTMLAudioElement>;
b: HTMLAttributes<HTMLElement>;
base: HTMLBaseAttributes<HTMLBaseElement>;
bdi: HTMLAttributes<HTMLElement>;
bdo: HTMLAttributes<HTMLElement>;
big: HTMLAttributes<HTMLElement>;
blockquote: HTMLBlockquoteAttributes<HTMLElement>;
body: HTMLAttributes<HTMLBodyElement>;
br: HTMLAttributes<HTMLBRElement>;
button: HTMLButtonAttributes<HTMLButtonElement>;
canvas: HTMLCanvasAttributes<HTMLCanvasElement>;
caption: HTMLAttributes<HTMLElement>;
cite: HTMLAttributes<HTMLElement>;
code: HTMLAttributes<HTMLElement>;
col: HTMLColAttributes<HTMLTableColElement>;
colgroup: HTMLColgroupAttributes<HTMLTableColElement>;
data: HTMLDataAttributes<HTMLDataElement>;
datalist: HTMLAttributes<HTMLDataListElement>;
dd: HTMLAttributes<HTMLElement>;
del: HTMLDelAttributes<HTMLElement>;
details: HTMLDetailsAttributes<HTMLElement>;
dfn: HTMLAttributes<HTMLElement>;
dialog: HTMLDialogAttributes<HTMLDialogElement>;
div: HTMLAttributes<HTMLDivElement>;
dl: HTMLAttributes<HTMLDListElement>;
dt: HTMLAttributes<HTMLElement>;
em: HTMLAttributes<HTMLElement>;
embed: HTMLEmbedAttributes<HTMLEmbedElement>;
fieldset: HTMLFieldsetAttributes<HTMLFieldSetElement>;
figcaption: HTMLAttributes<HTMLElement>;
figure: HTMLAttributes<HTMLElement>;
footer: HTMLAttributes<HTMLElement>;
form: HTMLFormAttributes<HTMLFormElement>;
h1: HTMLAttributes<HTMLHeadingElement>;
h2: HTMLAttributes<HTMLHeadingElement>;
h3: HTMLAttributes<HTMLHeadingElement>;
h4: HTMLAttributes<HTMLHeadingElement>;
h5: HTMLAttributes<HTMLHeadingElement>;
h6: HTMLAttributes<HTMLHeadingElement>;
head: HTMLAttributes<HTMLHeadElement>;
header: HTMLAttributes<HTMLElement>;
hgroup: HTMLAttributes<HTMLElement>;
hr: HTMLAttributes<HTMLHRElement>;
html: HTMLHtmlAttributes<HTMLHtmlElement>;
i: HTMLAttributes<HTMLElement>;
iframe: HTMLIframeAttributes<HTMLIFrameElement>;
img: HTMLImgAttributes<HTMLImageElement>;
input: HTMLInputAttributes<HTMLInputElement>;
ins: HTMLInsAttributes<HTMLModElement>;
kbd: HTMLAttributes<HTMLElement>;
keygen: HTMLKeygenAttributes<HTMLElement>;
label: HTMLLabelAttributes<HTMLLabelElement>;
legend: HTMLAttributes<HTMLLegendElement>;
li: HTMLLiAttributes<HTMLLIElement>;
link: HTMLLinkAttributes<HTMLLinkElement>;
main: HTMLAttributes<HTMLElement>;
map: HTMLMapAttributes<HTMLMapElement>;
mark: HTMLAttributes<HTMLElement>;
menu: HTMLMenuAttributes<HTMLElement>;
menuitem: HTMLAttributes<HTMLElement>;
meta: HTMLMetaAttributes<HTMLMetaElement>;
meter: HTMLMeterAttributes<HTMLElement>;
nav: HTMLAttributes<HTMLElement>;
noindex: HTMLAttributes<HTMLElement>;
noscript: HTMLAttributes<HTMLElement>;
object: HTMLObjectAttributes<HTMLObjectElement>;
ol: HTMLOlAttributes<HTMLOListElement>;
optgroup: HTMLOptgroupAttributes<HTMLOptGroupElement>;
option: HTMLOptionAttributes<HTMLOptionElement>;
output: HTMLOutputAttributes<HTMLElement>;
p: HTMLAttributes<HTMLParagraphElement>;
param: HTMLParamAttributes<HTMLParamElement>;
picture: HTMLAttributes<HTMLElement>;
pre: HTMLAttributes<HTMLPreElement>;
progress: HTMLProgressAttributes<HTMLProgressElement>;
q: HTMLQuoteAttributes<HTMLQuoteElement>;
rp: HTMLAttributes<HTMLElement>;
rt: HTMLAttributes<HTMLElement>;
ruby: HTMLAttributes<HTMLElement>;
s: HTMLAttributes<HTMLElement>;
samp: HTMLAttributes<HTMLElement>;
script: HTMLScriptAttributes<HTMLScriptElement>;
section: HTMLAttributes<HTMLElement>;
select: HTMLSelectAttributes<HTMLSelectElement>;
slot: HTMLSlotAttributes<HTMLSlotElement>;
small: HTMLAttributes<HTMLElement>;
source: HTMLSourceAttributes<HTMLSourceElement>;
span: HTMLAttributes<HTMLSpanElement>;
strong: HTMLAttributes<HTMLElement>;
style: HTMLStyleAttributes<HTMLStyleElement>;
sub: HTMLAttributes<HTMLElement>;
summary: HTMLAttributes<HTMLElement>;
sup: HTMLAttributes<HTMLElement>;
table: HTMLTableAttributes<HTMLTableElement>;
template: HTMLAttributes<HTMLTemplateElement>;
tbody: HTMLAttributes<HTMLTableSectionElement>;
td: HTMLTdAttributes<HTMLTableDataCellElement>;
textarea: HTMLTextareaAttributes<HTMLTextAreaElement>;
tfoot: HTMLAttributes<HTMLTableSectionElement>;
th: HTMLThAttributes<HTMLTableHeaderCellElement>;
thead: HTMLAttributes<HTMLTableSectionElement>;
time: HTMLTimeAttributes<HTMLElement>;
title: HTMLAttributes<HTMLTitleElement>;
tr: HTMLAttributes<HTMLTableRowElement>;
track: HTMLTrackAttributes<HTMLTrackElement>;
u: HTMLAttributes<HTMLElement>;
ul: HTMLAttributes<HTMLUListElement>;
var: HTMLAttributes<HTMLElement>;
video: HTMLVideoAttributes<HTMLVideoElement>;
wbr: HTMLAttributes<HTMLElement>;
webview: HTMLWebViewAttributes<HTMLElement>;
}
declare namespace HTML {
type Anchor = HTMLAnchorElement;
type Area = HTMLAreaElement;
type Audio = HTMLAudioElement;
type Base = HTMLBaseElement;
type Body = HTMLBodyElement;
type BR = HTMLBRElement;
type Button = HTMLButtonElement;
type Canvas = HTMLCanvasElement;
type Data = HTMLDataElement;
type DataList = HTMLDataListElement;
type Details = HTMLDetailsElement;
type Dialog = HTMLDialogElement;
type Directory = HTMLDirectoryElement;
type Div = HTMLDivElement;
type DList = HTMLDListElement;
type Embed = HTMLEmbedElement;
type FieldSet = HTMLFieldSetElement;
type Font = HTMLFontElement;
type Form = HTMLFormElement;
type Frame = HTMLFrameElement;
type FrameSet = HTMLFrameSetElement;
type Head = HTMLHeadElement;
type Heading = HTMLHeadingElement;
type HR = HTMLHRElement;
type HtmlElement = HTMLHtmlElement;
type IFrame = HTMLIFrameElement;
type Image = HTMLImageElement;
type Input = HTMLInputElement;
type Label = HTMLLabelElement;
type Legend = HTMLLegendElement;
type LI = HTMLLIElement;
type Link = HTMLLinkElement;
type Map = HTMLMapElement;
type Marquee = HTMLMarqueeElement;
type MediaElement = HTMLMediaElement;
type Menu = HTMLMenuElement;
type Meta = HTMLMetaElement;
type Meter = HTMLMeterElement;
type Mod = HTMLModElement;
type Object = HTMLObjectElement;
type OList = HTMLOListElement;
type OptGroup = HTMLOptGroupElement;
type Option = HTMLOptionElement;
type Output = HTMLOutputElement;
type Paragraph = HTMLParagraphElement;
type Param = HTMLParamElement;
type Picture = HTMLPictureElement;
type Pre = HTMLPreElement;
type Progress = HTMLProgressElement;
type Quote = HTMLQuoteElement;
type Script = HTMLScriptElement;
type Select = HTMLSelectElement;
type Slot = HTMLSlotElement;
type Source = HTMLSourceElement;
type Span = HTMLSpanElement;
type Style = HTMLStyleElement;
type Table = HTMLTableElement;
type TableCaption = HTMLTableCaptionElement;
type TableCell = HTMLTableCellElement;
type TableCol = HTMLTableColElement;
type TableDataCell = HTMLTableDataCellElement;
type TableHeaderCell = HTMLTableHeaderCellElement;
type TableRow = HTMLTableRowElement;
type TableSection = HTMLTableSectionElement;
type Template = HTMLTemplateElement;
type TextArea = HTMLTextAreaElement;
type Time = HTMLTimeElement;
type Title = HTMLTitleElement;
type Track = HTMLTrackElement;
type UList = HTMLUListElement;
type Unknown = HTMLUnknownElement;
type Video = HTMLVideoElement;
}
interface SVGAttributes<T> extends AriaAttributes, DOMAttributes<T> {
color?: string;
height?: number | string;
id?: string;
lang?: string;
max?: number | string;
media?: string;
method?: string;
min?: number | string;
name?: string;
target?: string;
type?: string;
width?: number | string;
role?: AriaRole;
tabIndex?: number;
crossOrigin?: 'anonymous' | 'use-credentials' | '';
accentHeight?: number | string;
accumulate?: 'none' | 'sum';
additive?: 'replace' | 'sum';
alignmentBaseline?: 'auto' | 'baseline' | 'before-edge' | 'text-before-edge' | 'middle' | 'central' | 'after-edge' | 'text-after-edge' | 'ideographic' | 'alphabetic' | 'hanging' | 'mathematical' | 'inherit';
allowReorder?: 'no' | 'yes';
alphabetic?: number | string;
amplitude?: number | string;
arabicForm?: 'initial' | 'medial' | 'terminal' | 'isolated';
ascent?: number | string;
attributeName?: string;
attributeType?: string;
autoReverse?: Booleanish;
azimuth?: number | string;
baseFrequency?: number | string;
baselineShift?: number | string;
baseProfile?: number | string;
bbox?: number | string;
begin?: number | string;
bias?: number | string;
by?: number | string;
calcMode?: number | string;
capHeight?: number | string;
clip?: number | string;
clipPath?: string;
clipPathUnits?: number | string;
clipRule?: number | string;
colorInterpolation?: number | string;
colorInterpolationFilters?: 'auto' | 'sRGB' | 'linearRGB' | 'inherit';
colorProfile?: number | string;
colorRendering?: number | string;
contentScriptType?: number | string;
contentStyleType?: number | string;
cursor?: number | string;
cx?: number | string;
cy?: number | string;
d?: string;
decelerate?: number | string;
descent?: number | string;
diffuseConstant?: number | string;
direction?: number | string;
display?: number | string;
divisor?: number | string;
dominantBaseline?: number | string;
dur?: number | string;
dx?: number | string;
dy?: number | string;
edgeMode?: number | string;
elevation?: number | string;
enableBackground?: number | string;
end?: number | string;
exponent?: number | string;
externalResourcesRequired?: Booleanish;
fill?: string;
fillOpacity?: number | string;
fillRule?: 'nonzero' | 'evenodd' | 'inherit';
filter?: string;
filterRes?: number | string;
filterUnits?: number | string;
floodColor?: number | string;
floodOpacity?: number | string;
focusable?: Booleanish | 'auto';
fontFamily?: string;
fontSize?: number | string;
fontSizeAdjust?: number | string;
fontStretch?: number | string;
fontStyle?: number | string;
fontVariant?: number | string;
fontWeight?: number | string;
format?: number | string;
from?: number | string;
fx?: number | string;
fy?: number | string;
g1?: number | string;
g2?: number | string;
glyphName?: number | string;
glyphOrientationHorizontal?: number | string;
glyphOrientationVertical?: number | string;
glyphRef?: number | string;
gradientTransform?: string;
gradientUnits?: string;
hanging?: number | string;
horizAdvX?: number | string;
horizOriginX?: number | string;
href?: string;
ideographic?: number | string;
imageRendering?: number | string;
in2?: number | string;
in?: string;
intercept?: number | string;
k1?: number | string;
k2?: number | string;
k3?: number | string;
k4?: number | string;
k?: number | string;
kernelMatrix?: number | string;
kernelUnitLength?: number | string;
kerning?: number | string;
keyPoints?: number | string;
keySplines?: number | string;
keyTimes?: number | string;
lengthAdjust?: number | string;
letterSpacing?: number | string;
lightingColor?: number | string;
limitingConeAngle?: number | string;
local?: number | string;
markerEnd?: string;
markerHeight?: number | string;
markerMid?: string;
markerStart?: string;
markerUnits?: number | string;
markerWidth?: number | string;
mask?: string;
maskContentUnits?: number | string;
maskUnits?: number | string;
mathematical?: number | string;
mode?: number | string;
numOctaves?: number | string;
offset?: number | string;
opacity?: number | string;
operator?: number | string;
order?: number | string;
orient?: number | string;
orientation?: number | string;
origin?: number | string;
overflow?: number | string;
overlinePosition?: number | string;
overlineThickness?: number | string;
paintOrder?: number | string;
panose1?: number | string;
path?: string;
pathLength?: number | string;
patternContentUnits?: string;
patternTransform?: number | string;
patternUnits?: string;
pointerEvents?: number | string;
points?: string;
pointsAtX?: number | string;
pointsAtY?: number | string;
pointsAtZ?: number | string;
preserveAlpha?: Booleanish;
preserveAspectRatio?: string;
primitiveUnits?: number | string;
r?: number | string;
radius?: number | string;
refX?: number | string;
refY?: number | string;
renderingIntent?: number | string;
repeatCount?: number | string;
repeatDur?: number | string;
requiredExtensions?: number | string;
requiredFeatures?: number | string;
restart?: number | string;
result?: string;
rotate?: number | string;
rx?: number | string;
ry?: number | string;
scale?: number | string;
seed?: number | string;
shapeRendering?: number | string;
slope?: number | string;
spacing?: number | string;
specularConstant?: number | string;
specularExponent?: number | string;
speed?: number | string;
spreadMethod?: string;
startOffset?: number | string;
stdDeviation?: number | string;
stemh?: number | string;
stemv?: number | string;
stitchTiles?: number | string;
stopColor?: string;
stopOpacity?: number | string;
strikethroughPosition?: number | string;
strikethroughThickness?: number | string;
string?: number | string;
stroke?: string;
strokeDasharray?: string | number;
strokeDashoffset?: string | number;
strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit';
strokeMiterlimit?: number | string;
strokeOpacity?: number | string;
strokeWidth?: number | string;
surfaceScale?: number | string;
systemLanguage?: number | string;
tableValues?: number | string;
targetX?: number | string;
targetY?: number | string;
textAnchor?: string;
textDecoration?: number | string;
textLength?: number | string;
textRendering?: number | string;
to?: number | string;
transform?: string;
u1?: number | string;
u2?: number | string;
underlinePosition?: number | string;
underlineThickness?: number | string;
unicode?: number | string;
unicodeBidi?: number | string;
unicodeRange?: number | string;
unitsPerEm?: number | string;
vAlphabetic?: number | string;
values?: string;
vectorEffect?: number | string;
version?: string;
vertAdvY?: number | string;
vertOriginX?: number | string;
vertOriginY?: number | string;
vHanging?: number | string;
vIdeographic?: number | string;
viewBox?: string;
viewTarget?: number | string;
visibility?: number | string;
vMathematical?: number | string;
widths?: number | string;
wordSpacing?: number | string;
writingMode?: number | string;
x1?: number | string;
x2?: number | string;
x?: number | string;
xChannelSelector?: string;
xHeight?: number | string;
xlinkActuate?: string;
xlinkArcrole?: string;
xlinkHref?: string;
xlinkRole?: string;
xlinkShow?: string;
xlinkTitle?: string;
xlinkType?: string;
xmlBase?: string;
xmlLang?: string;
xmlns?: string;
xmlnsXlink?: string;
xmlSpace?: string;
y1?: number | string;
y2?: number | string;
y?: number | string;
yChannelSelector?: string;
z?: number | string;
zoomAndPan?: string;
}
/**
* Some SVGElement interfaces are not assignable to SVGElement, but are still
* technically SVG elements.
*/
type SVGElementLike = SVGElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGStopElement | SVGTextElement | SVGTSpanElement;
type SVGTagName = keyof SVGAttributesByTagName;
interface SVGAttributesByTagName {
svg: SVGAttributes<SVGSVGElement> & HTMLAttributes<SVGSVGElement>;
animate: SVGAttributes<SVGAnimateElement>;
animateMotion: SVGAttributes<SVGAnimateMotionElement>;
animateTransform: SVGAttributes<SVGAnimateTransformElement>;
circle: SVGAttributes<SVGCircleElement>;
clipPath: SVGAttributes<SVGClipPathElement>;
defs: SVGAttributes<SVGDefsElement>;
desc: SVGAttributes<SVGDescElement>;
ellipse: SVGAttributes<SVGEllipseElement>;
feBlend: SVGAttributes<SVGFEBlendElement>;
feColorMatrix: SVGAttributes<SVGFEColorMatrixElement>;
feComponentTransfer: SVGAttributes<SVGFEComponentTransferElement>;
feComposite: SVGAttributes<SVGFECompositeElement>;
feConvolveMatrix: SVGAttributes<SVGFEConvolveMatrixElement>;
feDiffuseLighting: SVGAttributes<SVGFEDiffuseLightingElement>;
feDisplacementMap: SVGAttributes<SVGFEDisplacementMapElement>;
feDistantLight: SVGAttributes<SVGFEDistantLightElement>;
feDropShadow: SVGAttributes<SVGFEDropShadowElement>;
feFlood: SVGAttributes<SVGFEFloodElement>;
feFuncA: SVGAttributes<SVGFEFuncAElement>;
feFuncB: SVGAttributes<SVGFEFuncBElement>;
feFuncG: SVGAttributes<SVGFEFuncGElement>;
feFuncR: SVGAttributes<SVGFEFuncRElement>;
feGaussianBlur: SVGAttributes<SVGFEGaussianBlurElement>;
feImage: SVGAttributes<SVGFEImageElement>;
feMerge: SVGAttributes<SVGFEMergeElement>;
feMergeNode: SVGAttributes<SVGFEMergeNodeElement>;
feMorphology: SVGAttributes<SVGFEMorphologyElement>;
feOffset: SVGAttributes<SVGFEOffsetElement>;
fePointLight: SVGAttributes<SVGFEPointLightElement>;
feSpecularLighting: SVGAttributes<SVGFESpecularLightingElement>;
feSpotLight: SVGAttributes<SVGFESpotLightElement>;
feTile: SVGAttributes<SVGFETileElement>;
feTurbulence: SVGAttributes<SVGFETurbulenceElement>;
filter: SVGAttributes<SVGFilterElement>;
foreignObject: SVGAttributes<SVGForeignObjectElement>;
g: SVGAttributes<SVGGElement>;
image: SVGAttributes<SVGImageElement>;
line: SVGAttributes<SVGLineElement>;
linearGradient: SVGAttributes<SVGLinearGradientElement>;
marker: SVGAttributes<SVGMarkerElement>;
mask: SVGAttributes<SVGMaskElement>;
metadata: SVGAttributes<SVGMetadataElement>;
mpath: SVGAttributes<SVGMPathElement>;
path: SVGAttributes<SVGPathElement>;
pattern: SVGAttributes<SVGPatternElement>;
polygon: SVGAttributes<SVGPolygonElement>;
polyline: SVGAttributes<SVGPolylineElement>;
radialGradient: SVGAttributes<SVGRadialGradientElement>;
rect: SVGAttributes<SVGRectElement>;
stop: SVGAttributes<SVGStopElement>;
switch: SVGAttributes<SVGSwitchElement>;
symbol: SVGAttributes<SVGSymbolElement>;
text: SVGAttributes<SVGTextElement>;
textPath: SVGAttributes<SVGTextPathElement>;
tspan: SVGAttributes<SVGTSpanElement>;
use: SVGAttributes<SVGUseElement>;
view: SVGAttributes<SVGViewElement>;
}
declare namespace SVG {
type Anchor = SVGAElement;
type Animate = SVGAnimateElement;
type AnimateMotion = SVGAnimateMotionElement;
type AnimateTransform = SVGAnimateTransformElement;
type Circle = SVGCircleElement;
type ClipPath = SVGClipPathElement;
type Defs = SVGDefsElement;
type Desc = SVGDescElement;
type Ellipse = SVGEllipseElement;
type FEBlend = SVGFEBlendElement;
type FEColorMatrix = SVGFEColorMatrixElement;
type FEComponentTransfer = SVGFEComponentTransferElement;
type FEConvolveMatrix = SVGFEConvolveMatrixElement;
type FEDiffuseLighting = SVGFEDiffuseLightingElement;
type FEDisplacementMap = SVGFEDisplacementMapElement;
type FEDistantLight = SVGFEDistantLightElement;
type FEDropShadow = SVGFEDropShadowElement;
type FEFlood = SVGFEFloodElement;
type FEFuncA = SVGFEFuncAElement;
type FEFuncB = SVGFEFuncBElement;
type FEFuncG = SVGFEFuncGElement;
type FEFuncR = SVGFEFuncRElement;
type FEGaussianBlur = SVGFEGaussianBlurElement;
type FEImage = SVGFEImageElement;
type FEMerge = SVGFEMergeElement;
type FEMergeNode = SVGFEMergeNodeElement;
type FEMorphology = SVGFEMorphologyElement;
type FEOffset = SVGFEOffsetElement;
type FEPointLight = SVGFEPointLightElement;
type FETile = SVGFETileElement;
type FETurbulence = SVGFETurbulenceElement;
type Filter = SVGFilterElement;
type Foreign = SVGForeignObjectElement;
type G = SVGGElement;
type Gradient = SVGGradientElement;
type Image = SVGImageElement;
type Line = SVGLineElement;
type LinearGradient = SVGLinearGradientElement;
type Marker = SVGMarkerElement;
type Mask = SVGMaskElement;
type Metadata = SVGMetadataElement;
type Path = SVGPathElement;
type Pattern = SVGPatternElement;
type Polygon = SVGPolygonElement;
type Polyline = SVGPolylineElement;
type RadialGradient = SVGRadialGradientElement;
type Rect = SVGRectElement;
type Script = SVGScriptElement;
type Stop = SVGStopElement;
type Style = SVGStyleElement;
type SVG = SVGSVGElement;
type Switch = SVGSwitchElement;
type Symbol = SVGSymbolElement;
type Text = SVGTextElement;
type TextPath = SVGTextPathElement;
type Title = SVGTitleElement;
type Use = SVGUseElement;
type View = SVGViewElement;
}
type AlienNode = ShadowRootNode | DeferredHostNode | DeferredCompositeNode;
interface ShadowRootNode {
[kAlienNodeType]: typeof kShadowRootNodeType;
props: ShadowRootInit;
children: ResolvedChild[];
}
declare const isShadowRoot: (node: any) => node is ShadowRootNode;
interface TemplateNode {
[kAlienNodeType]: typeof kTemplateNodeType;
template: HTMLOrSVGElement;
}
declare const isTemplateNode: (node: any) => node is TemplateNode;
type HostNodeTag = string | TemplateNode;
/** A deferred node is one whose component has not executed yet. */
interface DeferredNode {
[kAlienNodeType]: typeof kDeferredNodeType;
tag: HostNodeTag | FunctionComponent<any>;
props: any;
context: ContextMap | undefined;
}
interface DeferredHostNode extends DeferredNode {
tag: HostNodeTag;
ref: JSX.RefProp<any>;
children: DeferredChildren;
namespaceURI: string | undefined;
}
type DeferredChild = ChildNode | AlienNode;
type DeferredChildren = (DeferredChild | null)[] | ReadonlyRef<JSX.Children> | false | null | undefined;
interface DeferredCompositeNode extends DeferredNode {
tag: FunctionComponent<any>;
children?: ResolvedChild[];
trace: () => void;
}
type AnyDeferredNode = DeferredHostNode | DeferredCompositeNode;
type Thunk<T = any> = () => T;
type Thunkable<T> = T | Thunk<T>;
declare namespace JSX {
type Element = HTMLElement;
type ElementKey = string | number;
type ElementRef<Element extends AnyElement = AnyElement> = {
setElement(element: Element | null): void;
};
type RefProp<Element extends AnyElement = AnyElement> = readonly (RefProp<Element> | false | null | undefined)[] | ElementRef<Element> | false | null | undefined;
type Children = ChildNode | DocumentFragment | ChildrenFragment | ArrayLike<Children> | string | number | boolean | null | undefined;
type ChildrenProp = Thunkable<Children | ReadonlyRef<Children>>;
/**
* This type represents a valid component result (except for null).
*/
type ElementLike = ChildNode | AlienNode | DocumentFragment | ChildrenFragment;
/**
* Use this type if your component has a prop that can be a single JSX
* element. Your component should call `useChildren` on this prop to get the
* materialized DOM node.
*/
type ElementProp = Thunkable<ElementLike>;
/**
* Use this type if your component has a prop that can be a single JSX element
* or an array of JSX elements. Your component should call `useChildren` on
* this prop to get the materialized DOM nodes.
*/
type ElementsProp = Thunkable<ElementLike | ElementLike[]>;
type ElementType = keyof IntrinsicElements | FunctionComponent<any>;
type HTMLClassArrayProp = readonly (FlatReadonlyRef<HTMLClassProp> | HTMLClassProp)[];
type HTMLClassMapProp = {
[key: string]: boolean | ReadonlyRef<boolean>;
};
type HTMLClassProp = HTMLClassArrayProp | HTMLClassMapProp | HTMLClassPrimitiveAttribute extends infer HTMLClassProp ? ReadonlyRef<HTMLClassProp> | HTMLClassProp : never;
type CSSProps = ObservableProps<CSSAttributes>;
type HTMLStyleArrayProp = readonly (FlatReadonlyRef<HTMLStyleProp> | HTMLStyleProp)[];
type HTMLStyleProp = HTMLStyleArrayProp | CSSProps | false | null | undefined extends infer HTMLStyleProp ? ReadonlyRef<HTMLStyleProp> | HTMLStyleProp : never;
type HTMLDatasetProp = Record<string, HTMLDatasetAttribute[string] | ReadonlyRef<HTMLDatasetAttribute[string]>> extends infer HTMLDatasetProp ? ReadonlyRef<HTMLDatasetProp> | HTMLDatasetProp : never;
type HTMLProps<T extends keyof HTMLAttributesByTagName> = unknown & HTMLObservableProps<T> & IntrinsicAttributes & {
ref?: RefProp<Element> | RefProp<HTMLElement>;
children?: ChildrenProp;
};
type SVGProps<T extends keyof SVGAttributesByTagName> = unknown & SVGObservableProps<T> & IntrinsicAttributes & {
ref?: RefProp<Element> | RefProp<SVGElement>;
children?: ChildrenProp;
};
type ObservableProps<Props extends object> = {
[K in keyof Props]: ObservableProp<K, Props[K]>;
};
/** One of the native HTML or SVG tags. */
type TagName = HTMLTagName | SVGTagName;
/**
* Infer the tag name of a DOM element.
*/
type InferTagName<T extends AnyElement> = HTMLTagName extends any ? HTMLElementTagNameMap[HTMLTagName & keyof HTMLElementTagNameMap] extends T ? HTMLTagName : SVGTagName extends any ? SVGElementTagNameMap[SVGTagName & keyof SVGElementTagNameMap] extends T ? SVGTagName : never : never : never;
/**
* Extract a DOM element type from a JSX element type.
*/
type InferDOMElement<T> = T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : T extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[T] : T extends FunctionComponent ? JSX.Element : never;
/**
* Infer DOM attributes from a DOM element or tag name.
*/
type InferAttributes<T> = T extends HTMLTagName ? HTMLAttributesByTagName[T] : T extends SVGTagName ? SVGAttributesByTagName[T] : T extends AnyElement ? [HTMLElement] extends [T] ? HTMLAttributes<T> : [SVGElement] extends [T] ? SVGAttributes<T> : InferAttributes<InferTagName<T>> : never;
/**
* Infer the JSX props from a JSX element type.
*/
type InferProps<T> = T extends FunctionComponent<infer Props> ? Props : T extends HTMLTagName ? HTMLProps<T> : T extends SVGTagName ? SVGProps<T> : never;
/** @internal Required by TypeScript. It contains the prop types of every valid, host element. */
type IntrinsicElements = {
[T in HTMLTagName]: HTMLProps<T>;
} & {
[T in SVGTagName]: SVGProps<T>;
};
/** @internal Required by TypeScript. It contains attributes usable on any JSX element. */
interface IntrinsicAttributes {
key?: ElementKey | null | undefined;
}
/**
* @internal Required by TypeScript. It contains the type for JSX children.
* @see https://www.typescriptlang.org/docs/handbook/jsx.html#children-type-checking
*/
interface ElementChildrenAttribute {
children: ChildrenProp;
}
}
type HTMLObservableProps<T extends HTMLTagName> = HTMLAttributesByTagName[T] extends infer Props ? {
[K in keyof Props]: HTMLObservableProp<K, Props[K]>;
} : never;
type HTMLObservableProp<Key extends keyof any, Value> = Key extends `on${string}` ? Value : [HTMLClassAttribute | undefined] extends [Value] ? JSX.HTMLClassProp : [HTMLStyleAttribute | undefined] extends [Value] ? JSX.HTMLStyleProp : [HTMLDatasetAttribute | undefined] extends [Value] ? JSX.HTMLDatasetProp : [Value] extends [Record<string, any> | EventHandler | undefined] ? Value : Value | ReadonlyRef<Value>;
type SVGObservableProps<T extends SVGTagName> = SVGAttributesByTagName[T] extends infer Props extends object ? T extends 'svg' ? {
[K in keyof Props]: HTMLObservableProp<K, Props[K]>;
} : JSX.ObservableProps<Props> : never;
type ObservableProp<Key extends keyof any, Value> = Value | (Key extends 'children' | `on${string}` ? never : [Value] extends [Record<string, any> | EventHandler | undefined] ? never : ReadonlyRef<Value>);
type EffectResult = ((detail?: {
isHotReload?: boolean;
}) => void) | void;
type EffectCallback<State = {}> = (context: EffectContext<State>) => EffectResult;
type EffectContext<State = {}> = State & {
get isFirstRun(): boolean;
get rootNode(): JSX.Element | Comment;
get rootElement(): JSX.Element;
get parentNode(): JSX.Element;
};
/**
* Run an effect after the component is mounted. The effect will run again
* following a rerender when the dependencies have changed (or the `deps`
* argument was not provided). The effect is disposed before the next run.
*
* 🪝 This hook adds 1 to the hook offset.
*/
declare function useEffect<State = {}>(effect: EffectCallback<State> | Falsy, deps?: readonly any[]): void;
/**
* Useful for hooks that wrap `useEffect`. It takes care of passing along the `EffectContext` to the wrapped effect.
*
* 🪝 This hook adds 1 to the hook offset.
*/
declare function useWrappedEffect(effect: EffectCallback | Falsy, wrapper: (effect: () => EffectResult) => EffectResult, deps?: readonly any[]): void;
type ElementProxy<T extends Element = Element> = T & {
toElement(): T | null;
onceElementExists(effect: (element: T) => EffectResult): Disposable;
setElement(element: T | null): void;
};
/** Coerce an `ElementProxy` to its original `Element` type. */
type FromElementProxy<T> = T extends ElementProxy<infer U> ? U : Extract<T, Element>;
declare function createElementProxy<T extends Element>(effect?: (element: T) => EffectResult): ElementProxy<T>;
declare const isElementProxy: {
<T extends Element>(arg: T): arg is ElementProxy<T>;
<T extends Element = Element>(arg: any): arg is ElementProxy<T>;
};
type AnyElement = Element;
type AnyEvent = Event;
type HTMLOrSVGElement = HTMLElement | SVGElement;
type VarArgs<T> = T | readonly T[];
type Booleanish = boolean | 'true' | 'false';
/**
* Allows type casting via tag name (eg: `"a"` → `HTMLAnchorElement`)
*/
type AlienTag<Element extends AnyElement = HTMLOrSVGElement> = Element | (Element extends HTMLElement ? HTMLElement | keyof HTMLElementTagNameMap : never) | SVGElement | keyof SVGElementTagNameMap;
type LooseAccess<T, K> = K extends keyof T ? T[K] : never;
type AlienTagNameMap<Element extends AnyElement> = Element extends any ? SVGElementTagNameMap | ([AnyElement] extends [Element] ? HTMLElementTagNameMap : Element extends HTMLElement ? HTMLElementTagNameMap : never) : never;
/**
* Coerce an `AlienTag<Element>` to an `Element`.
*/
type AlienSelect<T extends string | AnyElement, Context extends AnyElement = AnyElement> = T extends string ? AlienTagNameMap<FromElementProxy<Context>> extends infer TagNameMap ? TagNameMap extends any ? Extract<LooseAccess<TagNameMap, T>, Node> : never : never : T;
declare function $<Element extends AlienTag<HTMLOrSVGElement>>(element: AnyElement): AlienSelect<Element>;
declare function $(element: AnyElement): AlienElement & AnyElement;
declare function $<Element extends AlienTag<HTMLOrSVGElement>>(element: AnyElement | null): AlienSelect<Element> | null;
declare function $(element: AnyElement | null): (AlienElement & AnyElement) | null;
declare function $<Element extends AlienTag<HTMLOrSVGElement> = HTMLOrSVGElement>(selector: string): AlienSelect<Element> | null;
type AlienSelectable = string | AnyElement | readonly AnyElement[] | NodeListOf<AnyElement> | Iterable<AnyElement>;
declare const $$: <Element_1 extends AlienTag<HTMLOrSVGElement> = HTMLOrSVGElement>(...selectors: (AlienSelectable | false | null | undefined)[]) => AlienElementList<AlienSelect<Element_1>>;
type SpringAnimation<Element extends AnyElement = any, Props extends object = AnimatedProps<Element>> = {
to?: Props | Falsy;
from?: Props | Falsy;
spring?: SpringConfigOption<Props>;
velocity?: number | {
[K in keyof Props]?: number;
};
delay?: SpringDelay | {
[K in keyof Props]?: SpringDelay;
};
immediate?: boolean | {
[K in keyof Props]?: boolean;
};
dilate?: number;
anchor?: [number, number];
onStart?: (target: Element) => void;
onChange?: FrameCallback<Element, Props>;
onRest?: FrameCallback<Element, Props>;
};
type SpringDelay = number | SpringDelayFn | Promise<unknown>;
type SpringDelayFn = (signal: AbortSignal, key: string) => Promise<unknown> | null | void;
type FrameCallback<Element extends AnyElement, Props extends object = AnimatedProps<Element>> = (props: [Element] extends [Any] ? any : Required<Props>, target: Element) => void;
type StepAnimationFn<Element extends AnyElement = any> = (frame: StepAnimation<Element>) => AnimatedProps<Element> | null;
type StepAnimation<Element extends AnyElement = any> = {
target: Element;
/** When true, the animation ends. */
done: boolean;
/** When the animation started as a `requestAnimationFrame` timestamp. */
t0: number;
/** Milliseconds since the previous frame. */
dt: number;
/** Time of the current frame as a `requestAnimationFrame` timestamp. */
time: number;
/** Milliseconds since the animation started. */
duration: number;
/** An accumulation of frames since the animation started. */
current: AnimatedProps<Element>;
/**
* If multiple targets exist for the same animation, this is the
* target index for the current `target`.
*/
index: number;
};
type SpringConfigOption<Props> = ((key: KeyArgument<Props>) => SpringConfig | Falsy) | SpringConfig | Falsy;
type SpringConfig = {
frequency?: number;
damping?: number;
tension?: number;
friction?: number;
mass?: number;
bounce?: number;
clamp?: boolean;
restVelocity?: number;
};
interface HTMLAnimatedProps extends CSSTransformAttributes {
backgroundColor?: string;
borderRadius?: CSSLength;
color?: string;
opacity?: number;
}
interface SVGAnimatedProps extends CSSTransformAttributes {
fill?: string;
fillOpacity?: number;
stroke?: string;
strokeWidth?: number;
strokeOpacity?: number;
opacity?: number;
rx?: CSSLength;
ry?: CSSLength;
width?: CSSLength;
height?: CSSLength;
r?: CSSLength;
cx?: CSSLength;
cy?: CSSLength;
}
type AnimatedProps<T extends AnyElement> = [T] extends [Any] ? any : T extends HTMLElement ? HTMLAnimatedProps : T extends SVGElement ? SVGAnimatedProps : never;
type AnimatedProp<T extends AnyElement> = string & keyof AnimatedProps<T>;
type KeyArgument<T> = [T] extends [Any] ? any : keyof T;
type OneOrMany<T> = T | readonly T[];
type AnimationsParam<Element extends AnyElement = any> = OneOrMany<SpringAnimation<Element>> | StepAnimationFn<Element>;
declare function animate(elements: OneOrMany<HTMLElement> | NodeListOf<HTMLElement>, animations: AnimationsParam<HTMLElement>): void;
declare function animate(elements: OneOrMany<SVGElement> | NodeListOf<SVGElement>, animations: AnimationsParam<SVGElement>): void;
declare function animate(selector: AlienSelectable, animations: AnimationsParam<HTMLOrSVGElement>): void;
export { isDisposable as $, AlienElementList as A, ChildrenFragment as B, ComputedRef as C, DeferredCompositeNode as D, EffectResult as E, FromElementProxy as F, AlienEffectType as G, HTMLAttributesByTagName as H, SpringDelay as I, JSX as J, SpringDelayFn as K, FrameCallback as L, StepAnimationFn as M, StepAnimation as N, SpringConfigOption as O, Promisable as P, SpringConfig as Q, Ref as R, SVGAttributesByTagName as S, HTMLAnimatedProps as T, Unref as U, VarArgs as V, SVGAnimatedProps as W, AnimatedProp as X, animate as Y, defineContext as Z, attachDisposer as _, AlienTag as a, EventHandler as a$, createDisposable as a0, mergeDisposables as a1, AlienEffect as a2, AlienEffects as a3, AlienMountEffects as a4, createEffect as a5, createOnceEffect as a6, createAsyncEffect as a7, defineEffectType as a8, getCurrentEffect as a9, FlatReadonlyRef as aA, useChildren as aB, isChildrenFragment as aC, EffectContext as aD, useEffect as aE, useWrappedEffect as aF, isShadowRoot as aG, isTemplateNode as aH, ShadowRootNode as aI, TemplateNode as aJ, AlienElementIterator as aK, AlienEvent as aL, createElementProxy as aM, isElementProxy as aN, promiseEvent as aO, promiseTimeout as aP, promiseRace as aQ, OpenPromise as aR, $ as aS, AlienSelectable as aT, $$ as aU, AriaAttributes as aV, AriaRole as aW, CSSLength as aX, CSSAngle as aY, CSSTransformAttributes as aZ, DOMAttributes as a_, ObservableHooks as aa, setObservableHooks as ab, ReadonlyArrayRef as ac, arrayRef as ad, RefMap as ae, Observer as af, ArrayObserver as ag, LensRef as ah, collectAccessedRefs as ai, ref as aj, refMap as ak, computed as al, computedEvery as am, computedSome as an, lens as ao, observe as ap, observeArrayOperations as aq, isReadonlyRef as ar, isRef as as, isArrayRef as at, guardRef as au, peek as av, unref as aw, ComputedInput as ax, evaluateInput as ay, when as az, AlienSelect as b, ClipboardEventHandler as b0, CompositionEventHandler as b1, DragEventHandler as b2, FocusEventHandler as b3, FormEventHandler as b4, ChangeEventHandler as b5, KeyboardEventHandler as b6, MouseEventHandler as b7, TouchEventHandler as b8, PointerEventHandler as b9, UIEventHandler as ba, WheelEventHandler as bb, AnimationEventHandler as bc, TransitionEventHandler as bd, HTMLClassArrayAttribute as be, HTMLClassObjectAttribute as bf, HTMLClassPrimitiveAttribute as bg, HTMLClassAttribute as bh, HTMLStyleArrayAttribute as bi, HTMLStyleAttribute as bj, HTMLDatasetAttribute as bk, HTMLAttributes as bl, HTML as bm, SVGAttributes as bn, SVGElementLike as bo, SVG as bp, AnyDeferredNode as bq, AlienElement as c, AnimationsParam as d, HostNodeTag as e, FunctionComponent as f, ArrayRef as g, ArrayOperation as h, Disposable as i, ForwardedContext as j, Context as k, DisposablePromise as l, EffectCallback as m, AnyElement as n, ElementProxy as o, ReadonlyRef as p, HTMLOrSVGElement as q, SpringAnimation as r, CSSAttributes as s, HTMLTagName as t, SVGTagName as u, AnimatedProps as v, UnresolvedChild as w, ContextStore as x, AlienBoundEffect as y, AlienNode as z };