diff --git a/addons/van_jsx/package.json b/addons/van_jsx/package.json
index 9cd89255..7609e5ef 100644
--- a/addons/van_jsx/package.json
+++ b/addons/van_jsx/package.json
@@ -1,13 +1,14 @@
{
"name": "vanjs-jsx",
- "version": "0.1.0",
+ "version": "0.2.0",
"type": "module",
- "types": "./src/index.d.ts",
"description": "jsx-runtime for vanjs",
+ "types": "./src/index.d.ts",
"exports": {
".": {
"require": "./src/index.js",
- "import": "./src/index.js"
+ "import": "./src/index.js",
+ "types": "./src/index.d.ts"
},
"./jsx-runtime": {
"require": "./src/jsx-runtime.js",
diff --git a/addons/van_jsx/src/createElement.d.ts b/addons/van_jsx/src/createElement.d.ts
new file mode 100644
index 00000000..d1db49f2
--- /dev/null
+++ b/addons/van_jsx/src/createElement.d.ts
@@ -0,0 +1,13 @@
+import * as CSS from "csstype";
+import { State } from "vanjs-core";
+import { Primitive } from "./type";
+export type VanElement = Element;
+export type JSXElementType
= (props: P) => VanNode | VanElement;
+export type PrimitiveChild = Primitive | State;
+export type VanNode = VanElement | PrimitiveChild | VanNode[] | (() => VanNode) | null;
+declare const createElement: (jsxTag: string | Function, { children, style, ref, ...props }: {
+ children?: VanNode | undefined;
+ style?: CSS.Properties<0 | (string & {}), string & {}> | (() => CSS.Properties) | undefined;
+ ref?: State | undefined;
+}) => any;
+export default createElement;
diff --git a/addons/van_jsx/src/createElement.js b/addons/van_jsx/src/createElement.js
new file mode 100644
index 00000000..16486003
--- /dev/null
+++ b/addons/van_jsx/src/createElement.js
@@ -0,0 +1,33 @@
+import van from "vanjs-core";
+import { setAttribute } from "./hyper";
+const createElement = (jsxTag, { children, style, ref, ...props }) => {
+ if (typeof jsxTag === "string") {
+ // TODO VanNode to VanElement
+ const ele = van.tags[jsxTag](children);
+ for (const [key, value] of Object.entries(props ?? {})) {
+ // Auto Update Attribute
+ if (typeof value === "function" && !key.startsWith("on")) {
+ van.derive(() => {
+ let attr = value();
+ setAttribute(ele, key, attr);
+ });
+ continue;
+ }
+ // Add Event Listener
+ if (typeof value === "function" && key.startsWith("on")) {
+ ele.addEventListener(key.replace("on", "").toLowerCase(), value);
+ continue;
+ }
+ setAttribute(ele, key, value);
+ continue;
+ }
+ if (ref != null) {
+ ref.val = ele;
+ }
+ return ele;
+ }
+ if (typeof jsxTag === "function") {
+ return jsxTag({ ...props, ref, style, children });
+ }
+};
+export default createElement;
diff --git a/addons/van_jsx/src/hyper.d.ts b/addons/van_jsx/src/hyper.d.ts
new file mode 100644
index 00000000..e7245d93
--- /dev/null
+++ b/addons/van_jsx/src/hyper.d.ts
@@ -0,0 +1,3 @@
+import * as CSS from "csstype";
+export declare const styleToString: (style: CSS.Properties) => string;
+export declare const setAttribute: (element: Element, key: string, value: unknown) => void;
diff --git a/addons/van_jsx/src/hyper.js b/addons/van_jsx/src/hyper.js
new file mode 100644
index 00000000..352b3aa2
--- /dev/null
+++ b/addons/van_jsx/src/hyper.js
@@ -0,0 +1,37 @@
+export const styleToString = (style) => {
+ return Object.entries(style).reduce((acc, key) => acc +
+ key[0]
+ .split(/(?=[A-Z])/)
+ .join("-")
+ .toLowerCase() +
+ ":" +
+ key[1] +
+ ";", "");
+};
+export const setAttribute = (element, key, value) => {
+ // Convert Style Object
+ if (key === "style") {
+ const attr = styleToString(value);
+ element.setAttribute(key, attr);
+ return;
+ }
+ if (typeof value === "number") {
+ if (key === "tabIndex") {
+ element.setAttribute("tabindex", value.toString());
+ return;
+ }
+ }
+ // Set String Attribute
+ if (typeof value === "string") {
+ if (key === "className") {
+ element.setAttribute("class", value);
+ return;
+ }
+ if (key === "htmlFor") {
+ element.setAttribute("for", value);
+ return;
+ }
+ element.setAttribute(key, value);
+ return;
+ }
+};
diff --git a/addons/van_jsx/src/index.d.ts b/addons/van_jsx/src/index.d.ts
index dafd7a34..14a10fa7 100644
--- a/addons/van_jsx/src/index.d.ts
+++ b/addons/van_jsx/src/index.d.ts
@@ -1,7 +1,6 @@
import { State, StateView } from "vanjs-core";
-
export declare function createState(initialValue: T): State;
export declare function createState(initialValue: T | null): StateView;
export declare function createState(): State;
-export * from "./jsx-runtime";
+export { default as createElement, default as jsx, default as jsxDEV, } from "./createElement";
export * from "./type";
diff --git a/addons/van_jsx/src/index.js b/addons/van_jsx/src/index.js
index fc409308..7b7832dc 100644
--- a/addons/van_jsx/src/index.js
+++ b/addons/van_jsx/src/index.js
@@ -1,7 +1,6 @@
import van from "vanjs-core";
-
export function createState(v) {
- return van.state(v);
+ return van.state(v);
}
-
-export * from "./jsx-runtime";
+export { default as createElement, default as jsx, default as jsxDEV, } from "./createElement";
+export * from "./type";
diff --git a/addons/van_jsx/src/jsx-dev-runtime.d.ts b/addons/van_jsx/src/jsx-dev-runtime.d.ts
index 6020639b..00923971 100644
--- a/addons/van_jsx/src/jsx-dev-runtime.d.ts
+++ b/addons/van_jsx/src/jsx-dev-runtime.d.ts
@@ -1 +1,2 @@
+export * from "./index";
export * from "./jsx-runtime";
diff --git a/addons/van_jsx/src/jsx-dev-runtime.js b/addons/van_jsx/src/jsx-dev-runtime.js
index 6020639b..00923971 100644
--- a/addons/van_jsx/src/jsx-dev-runtime.js
+++ b/addons/van_jsx/src/jsx-dev-runtime.js
@@ -1 +1,2 @@
+export * from "./index";
export * from "./jsx-runtime";
diff --git a/addons/van_jsx/src/jsx-internal.d.ts b/addons/van_jsx/src/jsx-internal.d.ts
deleted file mode 100644
index 4796c100..00000000
--- a/addons/van_jsx/src/jsx-internal.d.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as CSS from "csstype";
-import { State, ChildDom } from "vanjs-core";
-import { FunctionChild } from "./type";
-
-type OriginalElement = HTMLElement;
-type JSXProp = T[K] | (() => T[K]) | State;
-
-export declare namespace JSX {
- type HTMLAttributes = {
- [K in keyof Omit]?: JSXProp;
- } & Partial<{ children: ChildDom; style: CSS.Properties; ref: State }>;
-
- type SVGAttributes = {
- [K in keyof Omit]?: JSXProp;
- } & Partial<{ children: ChildDom; style: CSS.Properties; ref: State }>;
-
- export type ElementType = string | FunctionChild;
- export interface Element extends OriginalElement {}
- export interface ElementAttributesProperty {
- props: {};
- }
- export interface ElementChildrenAttribute {
- children: {};
- }
- export interface IntrinsicAttributes {}
- export type IntrinsicElements = {
- [K in keyof HTMLElementTagNameMap]: HTMLElementTagNameMap[K] extends HTMLElement
- ? HTMLAttributes
- : SVGAttributes;
- };
-}
diff --git a/addons/van_jsx/src/jsx-runtime.d.ts b/addons/van_jsx/src/jsx-runtime.d.ts
index 58bd2e08..e0eb3a40 100644
--- a/addons/van_jsx/src/jsx-runtime.d.ts
+++ b/addons/van_jsx/src/jsx-runtime.d.ts
@@ -1,21 +1,19 @@
-import * as CSS from "csstype";
-import { State, ChildDom } from "vanjs-core";
-
-export declare const jsx: (
- jsxTag: string | Function,
- {
- children,
- style,
- ref,
- ...props
- }: {
- children?: ChildDom;
- style?:
- | CSS.Properties<0 | (string & {}), string & {}>
- | (() => CSS.Properties)
- | undefined;
- ref?: State | undefined;
- }
-) => any;
-export { jsx as jsxDEV, jsx as jsxs };
-export type { JSX } from "./jsx-internal";
+import { JSXElementType, VanElement } from "./createElement";
+import { InnerElement, Key, TagOption } from "./type";
+export declare namespace JSX {
+ type ElementType = string | JSXElementType;
+ interface ElementAttributesProperty {
+ props: object;
+ }
+ interface ElementChildrenAttribute {
+ children: object;
+ }
+ interface Element extends VanElement {
+ }
+ interface IntrinsicAttributes {
+ key?: Key;
+ }
+ type IntrinsicElements = {
+ [K in keyof InnerElement]: TagOption;
+ };
+}
diff --git a/addons/van_jsx/src/jsx-runtime.js b/addons/van_jsx/src/jsx-runtime.js
deleted file mode 100644
index e829ab12..00000000
--- a/addons/van_jsx/src/jsx-runtime.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import van from "vanjs-core";
-
-const styleToString = (style) => {
- return Object.entries(style).reduce(
- (acc, key) =>
- acc +
- key[0]
- .split(/(?=[A-Z])/)
- .join("-")
- .toLowerCase() +
- ":" +
- key[1] +
- ";",
- ""
- );
-};
-
-const mergeStyle = (props, style) => {
- if (typeof style === "function") {
- return {
- ...props,
- style: () => {
- return styleToString(style());
- },
- };
- }
- if (style == null) {
- return props;
- }
- return {
- ...props,
- style: styleToString(style),
- };
-};
-
-export const jsx = (jsxTag, { children, style, ref, ...props }) => {
- if (typeof jsxTag === "string") {
- const ele = van.tags[jsxTag](mergeStyle(props, style), children);
- if (ref != null) {
- ref.val = ele;
- }
- return ele;
- }
- if (typeof jsxTag === "function") {
- return jsxTag({ ...props, ref, style, children });
- }
-};
-
-export { jsx as jsxDEV, jsx as jsxs };
diff --git a/addons/van_jsx/src/type.d.ts b/addons/van_jsx/src/type.d.ts
index 9e00db13..f7479693 100644
--- a/addons/van_jsx/src/type.d.ts
+++ b/addons/van_jsx/src/type.d.ts
@@ -1,12 +1,1423 @@
-import { ChildDom } from "vanjs-core";
-
-export type PropsWithChildren = TProps & {
- children?: ChildDom | undefined;
-};
-
-export interface FunctionComponent {
- (props: PropsWithChildren, context?: any): ChildDom | null;
+import CSS from "csstype";
+import { State } from "vanjs-core";
+import { VanNode } from "./createElement";
+export type Primitive = string | number | boolean | bigint;
+export type Key = number | string | symbol;
+export type PrimitiveChild = Primitive;
+interface EventHandler {
+ (event: E): void;
+}
+export interface DOMAttributes {
+ onCopy?: EventHandler | undefined;
+ onCopyCapture?: EventHandler | undefined;
+ onCut?: EventHandler | undefined;
+ onCutCapture?: EventHandler | undefined;
+ onPaste?: EventHandler | undefined;
+ onPasteCapture?: EventHandler | undefined;
+ onCompositionEnd?: EventHandler | undefined;
+ onCompositionEndCapture?: EventHandler | undefined;
+ onCompositionStart?: EventHandler | undefined;
+ onCompositionStartCapture?: EventHandler | undefined;
+ onCompositionUpdate?: EventHandler | undefined;
+ onCompositionUpdateCapture?: EventHandler | undefined;
+ onFocus?: EventHandler | undefined;
+ onFocusCapture?: EventHandler | undefined;
+ onBlur?: EventHandler | undefined;
+ onBlurCapture?: EventHandler | undefined;
+ onChange?: EventHandler | undefined;
+ onChangeCapture?: EventHandler | undefined;
+ onBeforeInput?: EventHandler | undefined;
+ onBeforeInputCapture?: EventHandler | undefined;
+ onInput?: EventHandler | undefined;
+ onInputCapture?: EventHandler | undefined;
+ onReset?: EventHandler | undefined;
+ onResetCapture?: EventHandler | undefined;
+ onSubmit?: EventHandler | undefined;
+ onSubmitCapture?: EventHandler | undefined;
+ onInvalid?: EventHandler | undefined;
+ onInvalidCapture?: EventHandler | undefined;
+ onLoad?: EventHandler | undefined;
+ onLoadCapture?: EventHandler | undefined;
+ onError?: EventHandler | undefined;
+ onErrorCapture?: EventHandler | undefined;
+ onKeyDown?: EventHandler | undefined;
+ onKeyDownCapture?: EventHandler | undefined;
+ /** @deprecated */
+ onKeyPress?: EventHandler | undefined;
+ /** @deprecated */
+ onKeyPressCapture?: EventHandler | undefined;
+ onKeyUp?: EventHandler | undefined;
+ onKeyUpCapture?: EventHandler | undefined;
+ onAbort?: EventHandler | undefined;
+ onAbortCapture?: EventHandler | undefined;
+ onCanPlay?: EventHandler | undefined;
+ onCanPlayCapture?: EventHandler | undefined;
+ onCanPlayThrough?: EventHandler | undefined;
+ onCanPlayThroughCapture?: EventHandler | undefined;
+ onDurationChange?: EventHandler | undefined;
+ onDurationChangeCapture?: EventHandler | undefined;
+ onEmptied?: EventHandler | undefined;
+ onEmptiedCapture?: EventHandler | undefined;
+ onEncrypted?: EventHandler | undefined;
+ onEncryptedCapture?: EventHandler | undefined;
+ onEnded?: EventHandler | undefined;
+ onEndedCapture?: EventHandler | undefined;
+ onLoadedData?: EventHandler | undefined;
+ onLoadedDataCapture?: EventHandler | undefined;
+ onLoadedMetadata?: EventHandler | undefined;
+ onLoadedMetadataCapture?: EventHandler | undefined;
+ onLoadStart?: EventHandler | undefined;
+ onLoadStartCapture?: EventHandler | undefined;
+ onPause?: EventHandler | undefined;
+ onPauseCapture?: EventHandler | undefined;
+ onPlay?: EventHandler | undefined;
+ onPlayCapture?: EventHandler | undefined;
+ onPlaying?: EventHandler | undefined;
+ onPlayingCapture?: EventHandler | undefined;
+ onProgress?: EventHandler | undefined;
+ onProgressCapture?: EventHandler | undefined;
+ onRateChange?: EventHandler | undefined;
+ onRateChangeCapture?: EventHandler | undefined;
+ onSeeked?: EventHandler | undefined;
+ onSeekedCapture?: EventHandler | undefined;
+ onSeeking?: EventHandler | undefined;
+ onSeekingCapture?: EventHandler | undefined;
+ onStalled?: EventHandler | undefined;
+ onStalledCapture?: EventHandler | undefined;
+ onSuspend?: EventHandler | undefined;
+ onSuspendCapture?: EventHandler | undefined;
+ onTimeUpdate?: EventHandler | undefined;
+ onTimeUpdateCapture?: EventHandler | undefined;
+ onVolumeChange?: EventHandler | undefined;
+ onVolumeChangeCapture?: EventHandler | undefined;
+ onWaiting?: EventHandler | undefined;
+ onWaitingCapture?: EventHandler | undefined;
+ onAuxClick?: EventHandler | undefined;
+ onAuxClickCapture?: EventHandler | undefined;
+ onClick?: EventHandler | undefined;
+ onClickCapture?: EventHandler | undefined;
+ onContextMenu?: EventHandler | undefined;
+ onContextMenuCapture?: EventHandler | undefined;
+ onDoubleClick?: EventHandler | undefined;
+ onDoubleClickCapture?: EventHandler | undefined;
+ onDrag?: EventHandler | undefined;
+ onDragCapture?: EventHandler | undefined;
+ onDragEnd?: EventHandler | undefined;
+ onDragEndCapture?: EventHandler | undefined;
+ onDragEnter?: EventHandler | undefined;
+ onDragEnterCapture?: EventHandler | undefined;
+ onDragExit?: EventHandler | undefined;
+ onDragExitCapture?: EventHandler | undefined;
+ onDragLeave?: EventHandler | undefined;
+ onDragLeaveCapture?: EventHandler | undefined;
+ onDragOver?: EventHandler | undefined;
+ onDragOverCapture?: EventHandler | undefined;
+ onDragStart?: EventHandler | undefined;
+ onDragStartCapture?: EventHandler | undefined;
+ onDrop?: EventHandler | undefined;
+ onDropCapture?: EventHandler | undefined;
+ onMouseDown?: EventHandler | undefined;
+ onMouseDownCapture?: EventHandler | undefined;
+ onMouseEnter?: EventHandler | undefined;
+ onMouseLeave?: EventHandler | undefined;
+ onMouseMove?: EventHandler | undefined;
+ onMouseMoveCapture?: EventHandler | undefined;
+ onMouseOut?: EventHandler | undefined;
+ onMouseOutCapture?: EventHandler | undefined;
+ onMouseOver?: EventHandler | undefined;
+ onMouseOverCapture?: EventHandler | undefined;
+ onMouseUp?: EventHandler | undefined;
+ onMouseUpCapture?: EventHandler | undefined;
+ onSelect?: EventHandler | undefined;
+ onSelectCapture?: EventHandler | undefined;
+ onTouchCancel?: EventHandler | undefined;
+ onTouchCancelCapture?: EventHandler | undefined;
+ onTouchEnd?: EventHandler | undefined;
+ onTouchEndCapture?: EventHandler | undefined;
+ onTouchMove?: EventHandler | undefined;
+ onTouchMoveCapture?: EventHandler | undefined;
+ onTouchStart?: EventHandler | undefined;
+ onTouchStartCapture?: EventHandler | undefined;
+ onPointerDown?: EventHandler | undefined;
+ onPointerDownCapture?: EventHandler | undefined;
+ onPointerMove?: EventHandler | undefined;
+ onPointerMoveCapture?: EventHandler | undefined;
+ onPointerUp?: EventHandler | undefined;
+ onPointerUpCapture?: EventHandler | undefined;
+ onPointerCancel?: EventHandler | undefined;
+ onPointerCancelCapture?: EventHandler | undefined;
+ onPointerEnter?: EventHandler | undefined;
+ onPointerEnterCapture?: EventHandler | undefined;
+ onPointerLeave?: EventHandler | undefined;
+ onPointerLeaveCapture?: EventHandler | undefined;
+ onPointerOver?: EventHandler | undefined;
+ onPointerOverCapture?: EventHandler | undefined;
+ onPointerOut?: EventHandler | undefined;
+ onPointerOutCapture?: EventHandler | undefined;
+ onGotPointerCapture?: EventHandler | undefined;
+ onGotPointerCaptureCapture?: EventHandler | undefined;
+ onLostPointerCapture?: EventHandler | undefined;
+ onLostPointerCaptureCapture?: EventHandler | undefined;
+ onScroll?: EventHandler | undefined;
+ onScrollCapture?: EventHandler | undefined;
+ onWheel?: EventHandler | undefined;
+ onWheelCapture?: EventHandler | undefined;
+ onAnimationStart?: EventHandler | undefined;
+ onAnimationStartCapture?: EventHandler | undefined;
+ onAnimationEnd?: EventHandler | undefined;
+ onAnimationEndCapture?: EventHandler | undefined;
+ onAnimationIteration?: EventHandler | undefined;
+ onAnimationIterationCapture?: EventHandler | undefined;
+ onTransitionEnd?: EventHandler | undefined;
+ onTransitionEndCapture?: EventHandler | undefined;
+}
+type Booleanish = boolean | "true" | "false";
+type CrossOrigin = "anonymous" | "use-credentials" | "" | undefined;
+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"?: boolean | "false" | "true" | "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"?: boolean | "false" | "true" | "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"?: boolean | "false" | "true" | "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 & object);
+interface EventHandler {
+ (event: E): void;
+}
+export interface DOMAttributes {
+ onCopy?: EventHandler | undefined;
+ onCopyCapture?: EventHandler | undefined;
+ onCut?: EventHandler | undefined;
+ onCutCapture?: EventHandler | undefined;
+ onPaste?: EventHandler | undefined;
+ onPasteCapture?: EventHandler | undefined;
+ onCompositionEnd?: EventHandler | undefined;
+ onCompositionEndCapture?: EventHandler | undefined;
+ onCompositionStart?: EventHandler | undefined;
+ onCompositionStartCapture?: EventHandler | undefined;
+ onCompositionUpdate?: EventHandler | undefined;
+ onCompositionUpdateCapture?: EventHandler | undefined;
+ onFocus?: EventHandler | undefined;
+ onFocusCapture?: EventHandler | undefined;
+ onBlur?: EventHandler | undefined;
+ onBlurCapture?: EventHandler | undefined;
+ onChange?: EventHandler | undefined;
+ onChangeCapture?: EventHandler | undefined;
+ onBeforeInput?: EventHandler | undefined;
+ onBeforeInputCapture?: EventHandler | undefined;
+ onInput?: EventHandler | undefined;
+ onInputCapture?: EventHandler | undefined;
+ onReset?: EventHandler | undefined;
+ onResetCapture?: EventHandler | undefined;
+ onSubmit?: EventHandler | undefined;
+ onSubmitCapture?: EventHandler | undefined;
+ onInvalid?: EventHandler | undefined;
+ onInvalidCapture?: EventHandler | undefined;
+ onLoad?: EventHandler | undefined;
+ onLoadCapture?: EventHandler | undefined;
+ onError?: EventHandler | undefined;
+ onErrorCapture?: EventHandler | undefined;
+ onKeyDown?: EventHandler | undefined;
+ onKeyDownCapture?: EventHandler | undefined;
+ /** @deprecated */
+ onKeyPress?: EventHandler | undefined;
+ /** @deprecated */
+ onKeyPressCapture?: EventHandler | undefined;
+ onKeyUp?: EventHandler | undefined;
+ onKeyUpCapture?: EventHandler | undefined;
+ onAbort?: EventHandler | undefined;
+ onAbortCapture?: EventHandler | undefined;
+ onCanPlay?: EventHandler | undefined;
+ onCanPlayCapture?: EventHandler | undefined;
+ onCanPlayThrough?: EventHandler | undefined;
+ onCanPlayThroughCapture?: EventHandler | undefined;
+ onDurationChange?: EventHandler | undefined;
+ onDurationChangeCapture?: EventHandler | undefined;
+ onEmptied?: EventHandler | undefined;
+ onEmptiedCapture?: EventHandler | undefined;
+ onEncrypted?: EventHandler | undefined;
+ onEncryptedCapture?: EventHandler | undefined;
+ onEnded?: EventHandler | undefined;
+ onEndedCapture?: EventHandler | undefined;
+ onLoadedData?: EventHandler | undefined;
+ onLoadedDataCapture?: EventHandler | undefined;
+ onLoadedMetadata?: EventHandler | undefined;
+ onLoadedMetadataCapture?: EventHandler | undefined;
+ onLoadStart?: EventHandler | undefined;
+ onLoadStartCapture?: EventHandler | undefined;
+ onPause?: EventHandler | undefined;
+ onPauseCapture?: EventHandler | undefined;
+ onPlay?: EventHandler | undefined;
+ onPlayCapture?: EventHandler | undefined;
+ onPlaying?: EventHandler | undefined;
+ onPlayingCapture?: EventHandler | undefined;
+ onProgress?: EventHandler | undefined;
+ onProgressCapture?: EventHandler | undefined;
+ onRateChange?: EventHandler | undefined;
+ onRateChangeCapture?: EventHandler | undefined;
+ onSeeked?: EventHandler | undefined;
+ onSeekedCapture?: EventHandler | undefined;
+ onSeeking?: EventHandler | undefined;
+ onSeekingCapture?: EventHandler | undefined;
+ onStalled?: EventHandler | undefined;
+ onStalledCapture?: EventHandler | undefined;
+ onSuspend?: EventHandler | undefined;
+ onSuspendCapture?: EventHandler | undefined;
+ onTimeUpdate?: EventHandler | undefined;
+ onTimeUpdateCapture?: EventHandler | undefined;
+ onVolumeChange?: EventHandler | undefined;
+ onVolumeChangeCapture?: EventHandler | undefined;
+ onWaiting?: EventHandler | undefined;
+ onWaitingCapture?: EventHandler | undefined;
+ onAuxClick?: EventHandler | undefined;
+ onAuxClickCapture?: EventHandler | undefined;
+ onClick?: EventHandler | undefined;
+ onClickCapture?: EventHandler | undefined;
+ onContextMenu?: EventHandler | undefined;
+ onContextMenuCapture?: EventHandler | undefined;
+ onDoubleClick?: EventHandler | undefined;
+ onDoubleClickCapture?: EventHandler | undefined;
+ onDrag?: EventHandler | undefined;
+ onDragCapture?: EventHandler | undefined;
+ onDragEnd?: EventHandler | undefined;
+ onDragEndCapture?: EventHandler | undefined;
+ onDragEnter?: EventHandler | undefined;
+ onDragEnterCapture?: EventHandler | undefined;
+ onDragExit?: EventHandler | undefined;
+ onDragExitCapture?: EventHandler | undefined;
+ onDragLeave?: EventHandler | undefined;
+ onDragLeaveCapture?: EventHandler | undefined;
+ onDragOver?: EventHandler | undefined;
+ onDragOverCapture?: EventHandler | undefined;
+ onDragStart?: EventHandler | undefined;
+ onDragStartCapture?: EventHandler | undefined;
+ onDrop?: EventHandler | undefined;
+ onDropCapture?: EventHandler | undefined;
+ onMouseDown?: EventHandler | undefined;
+ onMouseDownCapture?: EventHandler | undefined;
+ onMouseEnter?: EventHandler | undefined;
+ onMouseLeave?: EventHandler | undefined;
+ onMouseMove?: EventHandler | undefined;
+ onMouseMoveCapture?: EventHandler | undefined;
+ onMouseOut?: EventHandler | undefined;
+ onMouseOutCapture?: EventHandler | undefined;
+ onMouseOver?: EventHandler | undefined;
+ onMouseOverCapture?: EventHandler | undefined;
+ onMouseUp?: EventHandler | undefined;
+ onMouseUpCapture?: EventHandler | undefined;
+ onSelect?: EventHandler | undefined;
+ onSelectCapture?: EventHandler | undefined;
+ onTouchCancel?: EventHandler | undefined;
+ onTouchCancelCapture?: EventHandler | undefined;
+ onTouchEnd?: EventHandler | undefined;
+ onTouchEndCapture?: EventHandler | undefined;
+ onTouchMove?: EventHandler | undefined;
+ onTouchMoveCapture?: EventHandler | undefined;
+ onTouchStart?: EventHandler | undefined;
+ onTouchStartCapture?: EventHandler | undefined;
+ onPointerDown?: EventHandler | undefined;
+ onPointerDownCapture?: EventHandler | undefined;
+ onPointerMove?: EventHandler | undefined;
+ onPointerMoveCapture?: EventHandler | undefined;
+ onPointerUp?: EventHandler | undefined;
+ onPointerUpCapture?: EventHandler | undefined;
+ onPointerCancel?: EventHandler | undefined;
+ onPointerCancelCapture?: EventHandler | undefined;
+ onPointerEnter?: EventHandler | undefined;
+ onPointerEnterCapture?: EventHandler | undefined;
+ onPointerLeave?: EventHandler | undefined;
+ onPointerLeaveCapture?: EventHandler | undefined;
+ onPointerOver?: EventHandler | undefined;
+ onPointerOverCapture?: EventHandler | undefined;
+ onPointerOut?: EventHandler | undefined;
+ onPointerOutCapture?: EventHandler | undefined;
+ onGotPointerCapture?: EventHandler | undefined;
+ onGotPointerCaptureCapture?: EventHandler | undefined;
+ onLostPointerCapture?: EventHandler | undefined;
+ onLostPointerCaptureCapture?: EventHandler | undefined;
+ onScroll?: EventHandler | undefined;
+ onScrollCapture?: EventHandler | undefined;
+ onWheel?: EventHandler | undefined;
+ onWheelCapture?: EventHandler | undefined;
+ onAnimationStart?: EventHandler | undefined;
+ onAnimationStartCapture?: EventHandler | undefined;
+ onAnimationEnd?: EventHandler | undefined;
+ onAnimationEndCapture?: EventHandler | undefined;
+ onAnimationIteration?: EventHandler | undefined;
+ onAnimationIterationCapture?: EventHandler | undefined;
+ onTransitionEnd?: EventHandler | undefined;
+ onTransitionEndCapture?: EventHandler | undefined;
+}
+export interface ReactiveAttributes {
+ ref?: State;
+ children?: VanNode;
+ key?: Key;
+}
+export interface HTMLAttributes extends AriaAttributes, DOMAttributes, ReactiveAttributes