reblend-typing
Version:
This is reblend jsx typing
1,490 lines • 139 kB
TypeScript
import * as CSS from 'csstype';
import React from 'react';
/**
* Represents a generic event in the DOM.
*
* @export interface Event
* @typedef {Event}
*/
export interface Event {
}
/**
* Represents an event triggered by CSS animations.
*
* @export interface AnimationEvent
* @typedef {AnimationEvent}
* @extends {Event}
*/
export interface AnimationEvent extends Event {
}
/**
* Represents an event triggered by interactions with the clipboard (e.g., cut, copy, paste).
*
* @export interface ClipboardEvent
* @typedef {ClipboardEvent}
* @extends {Event}
*/
export interface ClipboardEvent extends Event {
}
/**
* Represents an event triggered by input composition (e.g., for non-Latin text).
*
* @export interface CompositionEvent
* @typedef {CompositionEvent}
* @extends {Event}
*/
export interface CompositionEvent extends Event {
}
/**
* Represents an event related to drag-and-drop operations.
*
* @export interface DragEvent
* @typedef {DragEvent}
* @extends {Event}
*/
export interface DragEvent extends Event {
}
/**
* Represents an event triggered when an element gains or loses focus.
*
* @export interface FocusEvent
* @typedef {FocusEvent}
* @extends {Event}
*/
export interface FocusEvent extends Event {
}
/**
* Represents an event triggered by keyboard input.
*
* @export interface KeyboardEvent
* @typedef {KeyboardEvent}
* @extends {Event}
*/
export interface KeyboardEvent extends Event {
}
/**
* Represents an event triggered by mouse interactions.
*
* @export interface MouseEvent
* @typedef {MouseEvent}
* @extends {Event}
*/
export interface MouseEvent extends Event {
}
/**
* Represents an event triggered by touch interactions on touch devices.
*
* @export interface TouchEvent
* @typedef {TouchEvent}
* @extends {Event}
*/
export interface TouchEvent extends Event {
}
/**
* Represents an event triggered by pointer device interactions (e.g., mouse, pen, touch).
*
* @export interface PointerEvent
* @typedef {PointerEvent}
* @extends {Event}
*/
export interface PointerEvent extends Event {
}
/**
* Represents an event triggered by CSS transitions.
*
* @export interface TransitionEvent
* @typedef {TransitionEvent}
* @extends {Event}
*/
export interface TransitionEvent extends Event {
}
/**
* Represents a user export interface event in the DOM.
*
* @export interface UIEvent
* @typedef {UIEvent}
* @extends {Event}
*/
export interface UIEvent extends Event {
}
/**
* Represents an event triggered by the scrolling of a mouse wheel or similar device.
*
* @export interface WheelEvent
* @typedef {WheelEvent}
* @extends {Event}
*/
export interface WheelEvent extends Event {
}
/**
* Represents a DOM object that can receive events.
*
* @export interface EventTarget
* @typedef {EventTarget}
*/
export interface EventTarget {
}
/**
* Represents the HTML document in the DOM.
*
* @export interface Document
* @typedef {Document}
*/
export interface Document {
}
/**
* Represents the data transferred during a drag-and-drop operation.
*
* @export interface DataTransfer
* @typedef {DataTransfer}
*/
export interface DataTransfer {
}
/**
* Represents the media queries associated with the current document.
*
* @export interface StyleMedia
* @typedef {StyleMedia}
*/
export interface StyleMedia {
}
/**
* Represents an HTML anchor element (`<a>`).
*
* @export interface HTMLAnchorElement
* @typedef {HTMLAnchorElement}
* @extends {HTMLElement}
*/
export interface HTMLAnchorElement extends HTMLElement {
}
/**
* Represents an HTML area element (`<area>`).
*
* @export interface HTMLAreaElement
* @typedef {HTMLAreaElement}
* @extends {HTMLElement}
*/
export interface HTMLAreaElement extends HTMLElement {
}
/**
* Represents an HTML audio element (`<audio>`).
*
* @export interface HTMLAudioElement
* @typedef {HTMLAudioElement}
* @extends {HTMLElement}
*/
export interface HTMLAudioElement extends HTMLElement {
}
/**
* Represents an HTML base element (`<base>`).
*
* @export interface HTMLBaseElement
* @typedef {HTMLBaseElement}
* @extends {HTMLElement}
*/
export interface HTMLBaseElement extends HTMLElement {
}
/**
* Represents an HTML body element (`<body>`).
*
* @export interface HTMLBodyElement
* @typedef {HTMLBodyElement}
* @extends {HTMLElement}
*/
export interface HTMLBodyElement extends HTMLElement {
}
/**
* Represents an HTML break element (`<br>`).
*
* @export interface HTMLBRElement
* @typedef {HTMLBRElement}
* @extends {HTMLElement}
*/
export interface HTMLBRElement extends HTMLElement {
}
/**
* Represents an HTML button element (`<button>`).
*
* @export interface HTMLButtonElement
* @typedef {HTMLButtonElement}
* @extends {HTMLElement}
*/
export interface HTMLButtonElement extends HTMLElement {
}
/**
* Represents an HTML canvas element (`<canvas>`).
*
* @export interface HTMLCanvasElement
* @typedef {HTMLCanvasElement}
* @extends {HTMLElement}
*/
export interface HTMLCanvasElement extends HTMLElement {
}
/**
* Represents an HTML data element (`<data>`).
*
* @export interface HTMLDataElement
* @typedef {HTMLDataElement}
* @extends {HTMLElement}
*/
export interface HTMLDataElement extends HTMLElement {
}
/**
* Represents an HTML data list element (`<datalist>`).
*
* @export interface HTMLDataListElement
* @typedef {HTMLDataListElement}
* @extends {HTMLElement}
*/
export interface HTMLDataListElement extends HTMLElement {
}
/**
* Represents an HTML details element (`<details>`).
*
* @export interface HTMLDetailsElement
* @typedef {HTMLDetailsElement}
* @extends {HTMLElement}
*/
export interface HTMLDetailsElement extends HTMLElement {
}
/**
* Represents an HTML dialog element (`<dialog>`).
*
* @export interface HTMLDialogElement
* @typedef {HTMLDialogElement}
* @extends {HTMLElement}
*/
export interface HTMLDialogElement extends HTMLElement {
}
/**
* Represents an HTML div element (`<div>`).
*
* @export interface HTMLDivElement
* @typedef {HTMLDivElement}
* @extends {HTMLElement}
*/
export interface HTMLDivElement extends HTMLElement {
}
/**
* Represents an HTML description list element (`<dl>`).
*
* @export interface HTMLDListElement
* @typedef {HTMLDListElement}
* @extends {HTMLElement}
*/
export interface HTMLDListElement extends HTMLElement {
}
/**
* Represents an HTML embed element (`<embed>`).
*
* @export interface HTMLEmbedElement
* @typedef {HTMLEmbedElement}
* @extends {HTMLElement}
*/
export interface HTMLEmbedElement extends HTMLElement {
}
/**
* Represents an HTML field set element (`<fieldset>`).
*
* @export interface HTMLFieldSetElement
* @typedef {HTMLFieldSetElement}
* @extends {HTMLElement}
*/
export interface HTMLFieldSetElement extends HTMLElement {
}
/**
* Represents an HTML form element (`<form>`).
*
* @export interface HTMLFormElement
* @typedef {HTMLFormElement}
* @extends {HTMLElement}
*/
export interface HTMLFormElement extends HTMLElement {
}
/**
* Represents an HTML heading element (`<h1>`-`<h6>`).
*
* @export interface HTMLHeadingElement
* @typedef {HTMLHeadingElement}
* @extends {HTMLElement}
*/
export interface HTMLHeadingElement extends HTMLElement {
}
/**
* Represents an HTML head element (`<head>`).
*
* @export interface HTMLHeadElement
* @typedef {HTMLHeadElement}
* @extends {HTMLElement}
*/
export interface HTMLHeadElement extends HTMLElement {
}
/**
* Represents an HTML horizontal rule element (`<hr>`).
*
* @export interface HTMLHRElement
* @typedef {HTMLHRElement}
* @extends {HTMLElement}
*/
export interface HTMLHRElement extends HTMLElement {
}
/**
* Represents an HTML root element (`<html>`).
*
* @export interface HTMLHtmlElement
* @typedef {HTMLHtmlElement}
* @extends {HTMLElement}
*/
export interface HTMLHtmlElement extends HTMLElement {
}
/**
* Represents an HTML iframe element (`<iframe>`).
*
* @export interface HTMLIFrameElement
* @typedef {HTMLIFrameElement}
* @extends {HTMLElement}
*/
export interface HTMLIFrameElement extends HTMLElement {
}
/**
* Represents an HTML image element (`<img>`).
*
* @export interface HTMLImageElement
* @typedef {HTMLImageElement}
* @extends {HTMLElement}
*/
export interface HTMLImageElement extends HTMLElement {
}
/**
* Represents an HTML input element (`<input>`).
*
* @export interface HTMLInputElement
* @typedef {HTMLInputElement}
* @extends {HTMLElement}
*/
export interface HTMLInputElement extends HTMLElement {
}
/**
* Represents an HTML modification element (`<del>` and `<ins>`).
*
* @export interface HTMLModElement
* @typedef {HTMLModElement}
* @extends {HTMLElement}
*/
export interface HTMLModElement extends HTMLElement {
}
/**
* Represents an HTML label element (`<label>`).
*
* @export interface HTMLLabelElement
* @typedef {HTMLLabelElement}
* @extends {HTMLElement}
*/
export interface HTMLLabelElement extends HTMLElement {
}
/**
* Represents an HTML legend element (`<legend>`).
*
* @export interface HTMLLegendElement
* @typedef {HTMLLegendElement}
* @extends {HTMLElement}
*/
export interface HTMLLegendElement extends HTMLElement {
}
/**
* Represents an HTML list item element (`<li>`).
*
* @export interface HTMLLIElement
* @typedef {HTMLLIElement}
* @extends {HTMLElement}
*/
export interface HTMLLIElement extends HTMLElement {
}
/**
* Represents an HTML link element (`<link>`).
*
* @export interface HTMLLinkElement
* @typedef {HTMLLinkElement}
* @extends {HTMLElement}
*/
export interface HTMLLinkElement extends HTMLElement {
}
/**
* Represents an HTML map element (`<map>`).
*
* @export interface HTMLMapElement
* @typedef {HTMLMapElement}
* @extends {HTMLElement}
*/
export interface HTMLMapElement extends HTMLElement {
}
/**
* Represents an HTML meta element (`<meta>`).
*
* @export interface HTMLMetaElement
* @typedef {HTMLMetaElement}
* @extends {HTMLElement}
*/
export interface HTMLMetaElement extends HTMLElement {
}
/**
* Represents an HTML meter element (`<meter>`).
*
* @export interface HTMLMeterElement
* @typedef {HTMLMeterElement}
* @extends {HTMLElement}
*/
export interface HTMLMeterElement extends HTMLElement {
}
/**
* Represents an HTML object element (`<object>`).
*
* @export interface HTMLObjectElement
* @typedef {HTMLObjectElement}
* @extends {HTMLElement}
*/
export interface HTMLObjectElement extends HTMLElement {
}
/**
* Represents an HTML option element (`<option>`).
*
* @export interface HTMLOptionElement
* @typedef {HTMLOptionElement}
* @extends {HTMLElement}
*/
export interface HTMLOptionElement extends HTMLElement {
}
/**
* Represents an HTML paragraph element (`<p>`).
*
* @export interface HTMLParagraphElement
* @typedef {HTMLParagraphElement}
* @extends {HTMLElement}
*/
export interface HTMLParagraphElement extends HTMLElement {
}
/**
* Represents an HTML progress element (`<progress>`).
*
* @export interface HTMLProgressElement
* @typedef {HTMLProgressElement}
* @extends {HTMLElement}
*/
export interface HTMLProgressElement extends HTMLElement {
}
/**
* Represents an HTML script element (`<script>`).
*
* @export interface HTMLScriptElement
* @typedef {HTMLScriptElement}
* @extends {HTMLElement}
*/
export interface HTMLScriptElement extends HTMLElement {
}
/**
* Represents an HTML select element (`<select>`).
*
* @export interface HTMLSelectElement
* @typedef {HTMLSelectElement}
* @extends {HTMLElement}
*/
export interface HTMLSelectElement extends HTMLElement {
}
/**
* Represents an HTML source element (`<source>`).
*
* @export interface HTMLSourceElement
* @typedef {HTMLSourceElement}
* @extends {HTMLElement}
*/
export interface HTMLSourceElement extends HTMLElement {
}
/**
* Represents an HTML span element (`<span>`).
*
* @export interface HTMLSpanElement
* @typedef {HTMLSpanElement}
* @extends {HTMLElement}
*/
export interface HTMLSpanElement extends HTMLElement {
}
/**
* Represents an HTML style element (`<style>`).
*
* @export interface HTMLStyleElement
* @typedef {HTMLStyleElement}
* @extends {HTMLElement}
*/
export interface HTMLStyleElement extends HTMLElement {
}
/**
* Represents an HTML table element (`<table>`).
*
* @export interface HTMLTableElement
* @typedef {HTMLTableElement}
* @extends {HTMLElement}
*/
export interface HTMLTableElement extends HTMLElement {
}
/**
* Represents an HTML table column element (`<col>`).
*
* @export interface HTMLTableColElement
* @typedef {HTMLTableColElement}
* @extends {HTMLElement}
*/
export interface HTMLTableColElement extends HTMLElement {
}
/**
* Represents an HTML table row element (`<tr>`).
*
* @export interface HTMLTableRowElement
* @typedef {HTMLTableRowElement}
* @extends {HTMLElement}
*/
export interface HTMLTableRowElement extends HTMLElement {
}
/**
* Represents an HTML table section element (`<thead>`, `<tbody>`, and `<tfoot>`).
*
* @export interface HTMLTableSectionElement
* @typedef {HTMLTableSectionElement}
* @extends {HTMLElement}
*/
export interface HTMLTableSectionElement extends HTMLElement {
}
/**
* Represents an HTML template element (`<template>`).
*
* @export interface HTMLTemplateElement
* @typedef {HTMLTemplateElement}
* @extends {HTMLElement}
*/
export interface HTMLTemplateElement extends HTMLElement {
}
/**
* Represents an HTML text area element (`<textarea>`).
*
* @export interface HTMLTextAreaElement
* @typedef {HTMLTextAreaElement}
* @extends {HTMLElement}
*/
export interface HTMLTextAreaElement extends HTMLElement {
}
/**
* Represents an HTML time element (`<time>`).
*
* @export interface HTMLTimeElement
* @typedef {HTMLTimeElement}
* @extends {HTMLElement}
*/
export interface HTMLTimeElement extends HTMLElement {
}
/**
* Represents an HTML title element (`<title>`).
*
* @export interface HTMLTitleElement
* @typedef {HTMLTitleElement}
* @extends {HTMLElement}
*/
export interface HTMLTitleElement extends HTMLElement {
}
/**
* Represents an HTML track element (`<track>`).
*
* @export interface HTMLTrackElement
* @typedef {HTMLTrackElement}
* @extends {HTMLElement}
*/
export interface HTMLTrackElement extends HTMLElement {
}
/**
* Represents an HTML video element (`<video>`).
*
* @export interface HTMLVideoElement
* @typedef {HTMLVideoElement}
* @extends {HTMLElement}
*/
export interface HTMLVideoElement extends HTMLElement {
}
/**
* Represents a native animation event, typically fired when a CSS animation starts, ends, or is repeated.
*
* @typedef {NativeAnimationEvent}
*/
type NativeAnimationEvent = AnimationEvent;
/**
* Represents a native clipboard event, used when performing clipboard actions such as copy, paste, and cut.
*
* @typedef {NativeClipboardEvent}
*/
type NativeClipboardEvent = ClipboardEvent;
/**
* Represents a native composition event, which occurs when the user is composing text via an input method editor (IME).
*
* @typedef {NativeCompositionEvent}
*/
type NativeCompositionEvent = CompositionEvent;
/**
* Represents a native drag event, triggered when an element or text selection is being dragged.
*
* @typedef {NativeDragEvent}
*/
type NativeDragEvent = DragEvent;
/**
* Represents a native focus event, which occurs when an element gains or loses focus.
*
* @typedef {NativeFocusEvent}
*/
type NativeFocusEvent = FocusEvent;
/**
* Represents a native keyboard event, fired when the user presses or releases a key on the keyboard.
*
* @typedef {NativeKeyboardEvent}
*/
type NativeKeyboardEvent = KeyboardEvent;
/**
* Represents a native mouse event, typically triggered by mouse actions such as clicks or movements.
*
* @typedef {NativeMouseEvent}
*/
type NativeMouseEvent = MouseEvent;
/**
* Represents a native touch event, used when the user interacts with a touch screen.
*
* @typedef {NativeTouchEvent}
*/
type NativeTouchEvent = TouchEvent;
/**
* Represents a native pointer event, which encompasses mouse, touch, and pen/stylus input.
*
* @typedef {NativePointerEvent}
*/
type NativePointerEvent = PointerEvent;
/**
* Represents a native transition event, fired when a CSS transition ends.
*
* @typedef {NativeTransitionEvent}
*/
type NativeTransitionEvent = TransitionEvent;
/**
* Represents a native UI event, which provides basic information about user export interface events like focus or blur.
*
* @typedef {NativeUIEvent}
*/
type NativeUIEvent = UIEvent;
/**
* Represents a native wheel event, typically triggered when the user rotates a wheel device (e.g., a mouse wheel).
*
* @typedef {NativeWheelEvent}
*/
type NativeWheelEvent = WheelEvent;
/**
* Used to represent DOM API's where users can either pass
* true or false as a boolean or as its equivalent strings.
*/
type Booleanish = boolean | 'true' | 'false';
/**
* @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin MDN}
*/
type CrossOrigin = 'anonymous' | 'use-credentials' | '' | undefined;
export declare namespace ReblendTyping {
export interface ChildWithProps<P, S> {
child: ReblendTyping.Component<P, S>;
propsKey: string[];
}
export interface ReblendRenderingException<P, S> extends Error {
component: ReblendTyping.Component<P, S>;
}
export interface PropPatch<P, S> {
type: 'REMOVE' | 'UPDATE';
node: ReblendTyping.Component<P, S>;
key: string;
propValue?: string;
}
export type Primitive = boolean | null | number | string | undefined;
export interface ReblendPrimitive<P, S> extends ReblendTyping.Component<P, S> {
reblendPrimitiveData: any;
setData(data: Primitive): this;
getData(): Primitive;
}
export type IAny = {
[key: string]: any;
};
export type VNodeChild = Primitive | VNode;
export type VNodeChildren = VNodeChild[];
export type DomNodeChild<P, S> = ReblendTyping.Component<P, S> | ReblendPrimitive<P, S>;
export type DomNodeChildren<P, S> = DomNodeChild<P, S>[];
export interface ReactNode {
$$typeof: symbol;
displayName: string;
render: (props: any) => any;
}
export interface VNode {
[reblendVComponent: symbol]: boolean;
props: IAny & {
children?: VNodeChildren;
};
displayName: string | typeof Component | ReactNode;
}
export interface Patch<P, S> {
type: PatchTypeAndOrder;
newNode?: VNodeChild;
oldNode?: DomNodeChild<P, S>;
parent?: Component<P, S>;
patches?: PropPatch<P, S>[];
}
export interface ReblendComponentConfig {
/**
* Component to render first if this component is asyncronous
*/
ReblendPlaceholder?: ReblendElement;
/**
* Style for default reblend placeholder i.e if your are not using custom placeholder for your async components
*/
defaultReblendPlaceholderStyle?: string | CSSProperties;
}
/**
* Represents a mutable reference object whose `current` property can hold a value of type `T` or an `HTMLElement`.
*
* @template T
* @typedef {Object} Ref
* @property {T | HTMLElement} [current] - The current value held by the reference, which can be of type `T` or an `HTMLElement`.
*/
export type Ref<T> = {
current?: T;
stateKey: string;
};
/**
* A function that updates the state based on the provided value. It accepts a value or a function that returns a new value based on the previous state.
*
* @template T
* @callback StateFunction
* @param {StateFunctionValue<T>} value - The value or function used to update the state.
* @param {boolean} [force=false] - Optional flag to force the update.
*/
export type StateFunction<T> = (value: StateFunctionValue<T>, force?: boolean) => Promise<void>;
/**
* The value used to update the state, which can be either a new value directly or a function that computes the new value based on the previous state.
*
* @template T
*/
export type StateFunctionValue<T> = ((previous: T) => T | Promise<T>) | T | Promise<T>;
/**
* A function that returns a memoized value, which is recalculated only when dependencies change.
*
* @template T
* @callback StateEffectiveMemoFunction
* @returns {T} - The memoized value.
*/
export type StateEffectiveMemoFunction<T> = () => T | Promise<T>;
/**
* A function that can return a cleanup function or nothing, commonly used in effect hooks.
*
* @callback StateEffectiveFunction
* @returns {(() => any) | void} - A cleanup function or void if no cleanup is necessary.
*/
export type StateEffectiveFunction = () => Promise<(() => void) | void> | (() => void) | void;
/**
* A reducer function that takes a previous value and an incoming value, and returns a new value. This is often used in state management patterns like `useReducer`.
*
* @template ValueType, IncomingType
* @callback StateReducerFunction
* @param {ValueType} previous - The previous state or value.
* @param {IncomingType} current - The incoming value or action that affects the state.
* @returns {ValueType} - The new value after applying the reducer logic.
*/
export type StateReducerFunction<ValueType, IncomingType> = (previous: ValueType, current: IncomingType) => Promise<ValueType> | ValueType;
/**
* Used to retrieve the possible components which accept a given set of props.
*
* Can be passed no type parameters to get a union of all possible components
* and tags.
*
* Is a superset of {@link ComponentType}.
*
* @template P The props to match against. If not passed, defaults to any.
* @template Tag An optional tag to match against. If not passed, attempts to match against all possible tags.
*
* @example
*
* ```tsx
* // All components and tags (img, embed etc.)
* // which accept `src`
* type SrcComponents = ElementType<{ src: any }>;
* ```
*
* @example
*
* ```tsx
* // All components
* type AllComponents = ElementType;
* ```
*
* @example
*
* ```tsx
* // All custom components which match `src`, and tags which
* // match `src`, narrowed down to just `audio` and `embed`
* type SrcComponents = ElementType<{ src: any }, 'audio' | 'embed'>;
* ```
*/
export type ElementType<P = any, Tag extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements> = {
[K in Tag]: P extends JSX.IntrinsicElements[K] ? K : never;
}[Tag] | ComponentType<P>;
/**
* Represents any user-defined component, either as a function or a class.
*
* Similar to {@link JSXElementConstructor}, but with extra properties like
* {@link FunctionComponent.defaultProps defaultProps } and
* {@link ComponentClass.contextTypes contextTypes}.
*
* @template P The props the component accepts.
*
* @see {@link ComponentClass}
* @see {@link FunctionComponent}
*/
export type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
/**
* Represents any user-defined component, either as a function or a class.
*
* Similar to {@link ComponentType}, but without extra properties like
* {@link FunctionComponent.defaultProps defaultProps } and
* {@link ComponentClass.contextTypes contextTypes}.
*
* @template P The props the component accepts.
*/
export type JSXElementConstructor<P> = (props: P) => Promise<ReblendNode | ReblendNode[]> | ReblendNode | ReblendNode[];
/**
* Retrieves the type of the 'ref' prop for a given component type or tag name.
*
* @template C The component type.
*
* @example
*
* ```tsx
* type MyComponentRef = Reblend.ElementRef<typeof MyComponent>;
* ```
*
* @example
*
* ```tsx
* type DivRef = Reblend.ElementRef<'div'>;
* ```
*/
type ComponentState = any;
/**
* A value which uniquely identifies a node among items in an array.
*
* @see {@link https://reblend.dev/learn/rendering-lists#keeping-list-items-in-order-with-key Reblend Docs}
*/
type Key = string | number | bigint;
/**
* @internal The props any component can receive.
* You don't have to add this type. All components automatically accept these props.
* ```tsx
* const Component = () => <div />;
* <Component key="one" />
* ```
*
* WARNING: The implementation of a component will never have access to these attributes.
* The following example would be incorrect usage because {@link Component} would never have access to `key`:
* ```tsx
* const Component = (props: Reblend.Attributes) => props.key;
* ```
*/
export interface Attributes {
key?: Key | null | undefined;
}
/**
* The props any component accepting refs can receive.
* Class components, built-in browser components (e.g. `div`) and forwardRef components can receive refs and automatically accept these props.
* ```tsx
* const Component = forwardRef(() => <div />);
* <Component ref={(current) => console.log(current)} />
* ```
*
* You only need this type if you manually author the types of props that need to be compatible with legacy refs.
* ```tsx
* export interface Props extends Reblend.RefAttributes<HTMLDivElement> {}
* declare const Component: Reblend.FunctionComponent<Props>;
* ```
*
* Otherwise it's simpler to directly use {@link Ref} since you can safely use the
* props type to describe to props that a consumer can pass to the component
* as well as describing the props the implementation of a component "sees".
* {@link RefAttributes} is generally not safe to describe both consumer and seen props.
*
* ```tsx
* export interface Props extends {
* ref?: Reblend.Ref<HTMLDivElement> | undefined;
* }
* declare const Component: Reblend.FunctionComponent<Props>;
* ```
*
* WARNING: The implementation of a component will not have access to the same type in versions of Reblend supporting string refs.
* The following example would be incorrect usage because {@link Component} would never have access to a `ref` with type `string`
* ```tsx
* const Component = (props: Reblend.RefAttributes) => props.ref;
* ```
*/
export interface RefAttributes<T> extends Attributes {
/**
* Allows getting a ref to the component instance.
* Once the component unmounts, Reblend will set `ref.current` to `null`
* (or call the ref with `null` if you passed a callback ref).
*
* @see {@link https://reblend.dev/learn/referencing-values-with-refs#refs-and-the-dom Reblend Docs}
*/
ref?: Ref<T> | undefined;
}
/**
* Represents the built-in attributes available to class components.
*/
export interface ClassAttributes<T> extends RefAttributes<T> {
}
/**
* Represents a JSX element.
*
* Where {@link ReblendNode} represents everything that can be rendered, `ReblendElement`
* only represents JSX.
*
* @template P The type of the props object
* @template T The type of the component or tag
*
* @example
*
* ```tsx
* const element: ReblendElement = <div />;
* ```
*/
type HTMLs = HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLDataElement | HTMLDataListElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLModElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLObjectElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLQuoteElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTableColElement | HTMLTableDataCellElement | HTMLTableHeaderCellElement | HTMLTableRowElement | HTMLTableSectionElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGElement;
/**
* Represents a JSX element that is both a native `HTMLElement` and a `React` element, including support for portals.
*
* Where {@link ReblendNode} represents everything that can be rendered, `ReblendElement`
* specifically represents JSX elements that are rendered via Reblend, including native HTML elements and React portals.
*
* @template P The type of the props object for the React element
* @template T The type of the HTML component or tag name
*
* @example
* ```tsx
* const element: ReblendElement = <div />;
* ```
*/
export type ReblendElement = HTMLElement & React.ReactElement & React.ReactPortal & React.ForwardRefExoticComponent<any> & undefined & null;
export interface FunctionComponentElement<P> extends Component<P, any> {
ref?: ('ref' extends keyof P ? P extends {
ref?: infer R | undefined;
} ? R : never : never) | undefined;
}
export interface DOMElement<P extends HTMLAttributes<T> | SVGAttributes<T>, T extends Element> extends ReblendElement {
ref: Ref<T>;
}
export interface ReblendHTMLElement<T extends HTMLElement> extends DetailedReblendHTMLElement<AllHTMLAttributes<T>, T> {
}
export interface DetailedReblendHTMLElement<P extends HTMLAttributes<T>, T extends HTMLElement> extends DOMElement<P, T> {
type: keyof ReblendHTML;
}
export interface ReblendSVGElement extends DOMElement<SVGAttributes<SVGElement>, SVGElement> {
type: keyof ReblendSVG;
}
type DOMFactory<P extends DOMAttributes<T>, T extends Element> = (props?: (ClassAttributes<T> & P) | null, ...children: ReblendNode[]) => DOMElement<P, T>;
export interface HTMLFactory<T extends HTMLElement> extends DetailedHTMLFactory<AllHTMLAttributes<T>, T> {
}
export interface DetailedHTMLFactory<P extends HTMLAttributes<T>, T extends HTMLElement> extends DOMFactory<P, T> {
(props?: (ClassAttributes<T> & P) | null, ...children: ReblendNode[]): DetailedReblendHTMLElement<P, T>;
}
export interface SVGFactory extends DOMFactory<SVGAttributes<SVGElement>, SVGElement> {
(props?: (ClassAttributes<SVGElement> & SVGAttributes<SVGElement>) | null, ...children: ReblendNode[]): ReblendSVGElement;
}
/**
* Represents all of the things Reblend can render.
*
* Where {@link ReblendElement} only represents JSX, `ReblendNode` represents everything that can be rendered.
*
* @see {@link https://reblend-typescript-cheatsheet.netlify.app/docs/reblend-types/reblendnode/ Reblend TypeScript Cheatsheet}
*
* @example
*
* ```tsx
* // Typing children
* type Props = { children: ReblendNode }
*
* const Component = ({ children }: Props) => <div>{children}</div>
*
* <Component>hello</Component>
* ```
*
* @example
*
* ```tsx
* // Typing a custom element
* type Props = { customElement: ReblendNode }
*
* const Component = ({ customElement }: Props) => <div>{customElement}</div>
*
* <Component customElement={<div>hello</div>} />
* ```
*/
export type ReblendNode = ReblendElement | HTMLs | React.ReactNode | Iterable<ReblendNode> | undefined | null;
export interface Component<P, S> extends HTMLElement {
constructor(): any;
html(): Promise<ReblendNode>;
/**
* Holds the props (properties) of the component.
* Can be any type of object containing the default component's configuration.
*
* @static
* @type {IAny}
*/
props: any;
/**
* static configuration for the component
*/
config?: ReblendComponentConfig;
nearestStandardParent?: HTMLElement;
/**
* The name of this component.
* Use for debugging and to identify when an this component should be replaced with another.
*/
displayName: string;
/**
* Symbol representing type of reblend component.
*/
[reblendComponent: symbol]: boolean;
/**
* This holds reference to children of the component
*/
elementChildren: Set<Component<any, any>> | null;
/**
* This is a wrapper for the react element children
*/
reactElementChildrenWrapper: Component<any, any> | null;
/**
* This is a react dom root
*/
reactDomCreateRoot_root: import('react-dom/client').Root | null;
/**
* This denote when current component children has been initialized
*/
childrenInitialize: boolean;
/**
* The selector string for querying elements by data ID.
*/
dataIdQuerySelector: string;
/**
* The rendering error, if any occurred during rendering.
*/
renderingError?: ReblendRenderingException<P, S>;
/**
* The error handler for rendering exceptions.
*/
renderingErrorHandler?: (e: ReblendRenderingException<P, S>) => void;
/**
* Indicates whether the component is attached.
*/
attached: boolean;
/**
* Indicates that the component is part of a placeholder component.
*/
isPlaceholder: boolean;
/**
* Indicates that a placeholder has been attached to the component.
*/
placeholderAttached: boolean;
/**
* Function that will be called when the children get attached
*/
removePlaceholder?: () => Promise<void>;
/**
* The React class associated with this component.
*/
ReactClass: () => any;
/**
* Component to render first if this component is asyncronous
*/
ReblendPlaceholder?: VNode | typeof Component;
/**
* Style for default reblend placeholder i.e if your are not using custom placeholder for your async components
*/
defaultReblendPlaceholderStyle?: CSSProperties | string;
/**
* A reference for the component's DOM node.
*/
ref: ReblendTyping.Ref<HTMLElement> | ((node: HTMLElement) => any);
/**
* This hold effects functions
*/
effectState: {
[key: string]: {
cache: Primitive | Array<Primitive>;
cacher: () => Primitive | Array<Primitive>;
};
};
/**
* The effects to apply when the component is mounted.
*/
onMountEffects?: Set<ReblendTyping.StateEffectiveFunction>;
/**
* The effects functions defined for the component.
*/
effectsFn?: Set<ReblendTyping.StateEffectiveFunction>;
/**
* The disconnect effects to apply when the component is disconnected.
*/
disconnectEffects?: Set<ReblendTyping.StateEffectiveFunction>;
/**
* Indicates number of awaiting updates.
*/
numAwaitingUpdates: number;
/**
* Indicates whether state effects are currently running.
*/
stateEffectRunning: boolean;
/**
* The parent of this component
*/
directParent: Component<any, any>;
/**
* Indicates when first time effects are being called.
*/
mountingEffects: boolean;
/**
* Indicate state initialization
*/
initStateRunning: boolean;
/**
* Indicate when connectedCallback should be called but state has not finished initializing
*/
awaitingInitState: boolean;
/**
* Indicates whether this component disconnected callback was called.
*/
hasDisconnected: boolean;
/**
* Set of update types for children properties.
*/
childrenPropsUpdate?: Set<ChildrenPropsUpdateType>;
/**
* The component's state.
*/
state: S;
/**
* Lifecycle method for mounting the component in React.
*/
reactReblendMount?: undefined | ((afterNode?: HTMLElement) => void);
/**
* Populates the HTML elements for this component.
*/
populateHtmlElements(): void;
/**
* Callback invoked when the component is connected to the DOM.
*/
connectedCallback(): void;
/**
* Adds a disconnect effect function to be executed when the component is disconnected.
*
* @param {() => void} effect - The effect function to add.
*/
addDisconnectedEffect(effect: () => void): void;
/**
* Adds styles to the component.
*
* @param {string[]} styles - An array of style strings to apply.
* @param {IAny} style - An object representing styles as key-value pairs.
* @param {string} style - A single style string to apply.
* @param {string[] | IAny | string} style - The styles to apply.
*/
addStyle(style: string[] | IAny | string): void;
/**
* Initializes the component's state.
*/
initState(): Promise<void>;
/**
* Initializes the component's properties.
*
* @param {P} props - The properties to set on the component.
*/
initProps(props: P): Promise<void>;
/**
* Lifecycle method called after the component is mounted.
*/
componentDidMount(): void;
/**
* Sets the state of the component using the setter.
*
* @param {S} value - The new state value.
*/
setState(value: S): void;
/**
* Applies effects defined in the component, executing them in order.
*/
applyEffects(): void;
/**
* Handles an error that occurs during rendering or lifecycle methods.
*
* @param {Error} error - The error to handle.
*/
handleError(error: Error): void;
/**
* Catches errors thrown by a given function and handles them.
*
* @param {() => void} fn - The function to execute and catch errors from.
*/
catchErrorFrom(fn: () => void): void;
/**
* Recache effect functions dependencies, useful in cases where rendering is skipped because of previous unfinished rendering
*/
cacheEffectDependencies(): void;
/**
* Handles state changes, applying effects and updating virtual DOM nodes.
* @async
*/
onStateChange(): Promise<void>;
/**
* Returns the virtual DOM structure. Must be implemented by subclasses.
* @returns {VNode | VNodeChildren} The virtual DOM nodes.
*/
html(): Promise<ReblendTyping.ReblendNode>;
/**
* Checks for any changes in the props and updates the component accordingly.
* React Reblend nodes can trigger different updates based on the type of children or non-children changes.
*
* @async
* @returns {Promise<void>}
* @throws {Error} Throws an error if an invalid props update type is provided.
*/
checkPropsChange(): Promise<void>;
/**
* Mounts effects defined in the component, executing them and storing disconnect functions.
* @
*/
mountEffects(): void;
/**
* Lifecycle method called when the component is disconnected from the DOM.
* Cleans up resources and removes the component from its parent.
*/
disconnectedCallback(): void;
/**
* Cleans up resources before the component unmounts.
*/
cleanUp(): void;
/**
* Lifecycle method for component unmount actions.
*/
componentWillUnmount(): void;
/**
* Shallow compare dependecies for changes
* @param {Array<any>} currentDependencies
* @param {Array<any>} previousDependencies
* @returns {boolean} Returns true if the two object are not equal
*/
dependenciesChanged(currentDependencies: Array<any>, previousDependencies: Array<any>): boolean;
/**
* State management hook for functional components.
*
* @template T - The type of the state.
* @param {ReblendTyping.StateFunctionValue<T>} initial - The initial state value.
* @param {...string[]} dependencyStringAndOrStateKey - Optional dependencies or state key.
* @returns {[T, ReblendTyping.StateFunction<T>]} The current state and a function to update it.
*/
useState<T>(initial: ReblendTyping.StateFunctionValue<T>, ...dependencyStringAndOrStateKey: string[]): [T, ReblendTyping.StateFunction<T>];
/**
* Effect hook for performing side effects in functional components.
*
* @param {ReblendTyping.StateEffectiveFunction} fn - The effect function to execute.
* @param {any[]} dependencies - Array of dependencies for the effect.
* @param {...string[]} _dependencyStringAndOrStateKey - Optional dependencies or state key.
*/
useEffect(fn: ReblendTyping.StateEffectiveFunction, dependencies: any[], ..._dependencyStringAndOrStateKey: string[]): void;
/**
* Reducer hook for managing state with a reducer function.
*
* @template T - The type of the state.
* @template I - The type of the action.
* @param {ReblendTyping.StateReducerFunction<T, I>} reducer - The reducer function.
* @param {ReblendTyping.StateFunctionValue<T>} initial - The initial state value.
* @param {...string[]} dependencyStringAndOrStateKey - Optional dependencies or state key.
* @returns {[T, ReblendTyping.StateFunction<I>]} The current state and a dispatch function.
*/
useReducer<T, I>(reducer: ReblendTyping.StateReducerFunction<T, I>, initial: ReblendTyping.StateFunctionValue<T>, ...dependencyStringAndOrStateKey: string[]): [T, ReblendTyping.StateFunction<I>];
/**
* Memoization hook for caching values in functional components.
*
* @template T - The type of the memoized value.
* @param {ReblendTyping.StateEffectiveMemoFunction<T>} fn - The function to compute the value.
* @param {any[]} [dependencies] - Array of dependencies for the memoization.
* @param {...string[]} dependencyStringAndOrStateKey - Optional dependencies or state key.
* @returns {T} The memoized value.
*/
useMemo<T>(fn: ReblendTyping.StateEffectiveMemoFunction<T>, dependencies?: any[], ...dependencyStringAndOrStateKey: string[]): T;
/**
* Creates a ref object to hold mutable values that do not trigger re-renders.
*
* @template T - The type of the referenced value.
* @param {T} [initial] - The initial value of the ref.
* @param {T} [stateKey] - Added for compatibility with reblend function component transpiler
* @returns {ReblendTyping.Ref<T>} The ref object.
*/
useRef<T>(initial: T, stateKey: string): ReblendTyping.Ref<T>;
/**
* Binds a function to the current context.
*
* @param {() => any} fn - The function to bind.
* @returns {Function} The bound function.
*/
useCallback(fn: () => any): Function;
/**
* Initializes the component, preparing effect management.
* For compatibility in case a standard element inherits this prototype; can manually execute this constructor.
*/
_constructor(): void;
}
/**
* Represents the type of a function component. Can optionally
* receive a type argument that represents the props the component
* receives.
*
* @template P The props the component accepts.
* @see {@link https://reblend-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components Reblend TypeScript Cheatsheet}
* @alias for {@link FunctionComponent}
*
* @example
*
* ```tsx
* // With props:
* type Props = { name: string }
*
* const MyComponent: FC<Props> = (props) => {
* return <div>{props.name}</div>
* }
* ```
*
* @example
*
* ```tsx
* // Without props:
* const MyComponentWithoutProps: FC = () => {
* return <div>MyComponentWithoutProps</div>
* }
* ```
*/
export type FC<P = {}> = FunctionComponent<P>;
/**
* Represents the type of a function component. Can optionally
* receive a type argument that represents the props the component
* accepts.
*
* @template P The props the component accepts.
* @see {@link https://reblend-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components Reblend TypeScript Cheatsheet}
*
* @example
*
* ```tsx
* // With props:
* type Props = { name: string }
*
* const MyComponent: FunctionComponent<Props> = (props) => {
* return <div>{props.name}</div>
* }
* ```
*
* @example
*
* ```tsx
* // Without props:
* const MyComponentWithoutProps: FunctionComponent = () => {
* return <div>MyComponentWithoutProps</div>
* }
* ```
*/
export interface FunctionComponent<P = {}> {
(props: P): ReblendNode;
props?: Partial<P> | undefined;
}
/**
* Represents a component class in Reblend.
*
* @template P The props the component accepts.
* @template S The internal state of the component.
*/
export interface ComponentClass<P = {}, S = ComponentState> extends Component<P, S> {
new (props: P): Component<P, S>;
props?: Partial<P> | undefined;
}
export interface BaseSyntheticEvent<E = object, C = any, T = any> {
nativeEvent: E;
currentTarget: C;
target: T;
bubbles: boolean;
cancelable: boolean;
defaultPrevented: boolean;
eventPhase: number;
isTrusted: boolean;
preventDefault(): void;
isDefaultPrevented(): boolean;
stopPropagation(): void;
isPropagationStopped(): boolean;
persist(): void;
timeStamp: number;
type: string;
}
/**
* currentTarget - a reference to the element on which the event listener is registered.
*
* target - a reference to the element from which the event was originally dispatched.
* This might be a child element to the element on which the event listener is registered.
* If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682
*/
export interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {
}
export interface ClipboardEvent<T = Element> extends SyntheticEvent<T, NativeClipboardEvent> {
clipboardData: DataTransfer;
}
export interface CompositionEvent<T = Element> extends SyntheticEvent<T, NativeCompositionEvent> {
data: string;
}
export interface DragEvent<T = Element> extends MouseEvent<T, NativeDragEvent> {
dataTransfer: DataTransfer;
}
export interface PointerEvent<T = Element> extends MouseEvent<T, NativePointerEvent> {
pointerId: number;
pressure: number;
tangentialPressure: number;
tiltX: number;
tiltY: number;
twist: number;
width: number;
height: number;
pointerType: 'mouse' | 'pen' | 'touch';
isPrimary: boolean;
}
export interface FocusEvent<Target = Element, RelatedTarget = Element> extends SyntheticEvent<Target, NativeFocusEvent> {
relatedTarget: (EventTarget & RelatedTarget) | null;
target: EventTarget & Target;
}
export interface FormEvent<T = Element> extends SyntheticEvent<T> {
}
export interface InvalidEvent<T = Element> extends SyntheticEvent<T> {
target: EventTarget & T;
}
export interface ChangeEvent<T = Element> extends SyntheticEvent<T> {
target: EventTarget & T;
}
type ModifierKey = 'Alt' | 'AltGraph' | 'CapsLock' | 'Control' | 'Fn' | 'FnLock' | 'Hyper' | 'Meta' | 'NumLock' | 'ScrollLock' | 'Shift' | 'Super' | 'Symbol' | 'SymbolLock';
export interface KeyboardEvent<T = Element> extends UIEvent<T, NativeKeyboardEvent> {
altKey: boolean;
/** @deprecated */
charCode: number;
ctrlKey: boolean;
code: string;
/**
* See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
*/
getModifierState(key: ModifierKey): boolean;
/**
* See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values
*/
key: s