type Sheet = CSSStyleSheet | HTMLStyleElement; type Sheets = Sheet | Sheet[] | Sheets[]; type DOMFormElements = | HTMLInputElement | HTMLTextAreaElement | HTMLButtonElement | HTMLSelectElement; /** A
element in the DOM; it allows access to and in some cases modification of aspects of the form, as well as access to its component elements. */ interface DOMFormElement extends HTMLElement { /** * Sets or retrieves a list of character encodings for input data that must be accepted by the server processing the form. */ acceptCharset: string; /** * Sets or retrieves the URL to which the form content is sent for processing. */ action: string; /** * Specifies whether autocomplete is applied to an editable text field. */ autocomplete: string; /** * Retrieves a collection, in source order, of all controls in a given form. */ readonly elements: HTMLFormControlsCollection; /** * Sets or retrieves the MIME encoding for the form. */ encoding: string; /** * Sets or retrieves the encoding type for the form. */ enctype: string; /** * Sets or retrieves the number of objects in a collection. */ readonly length: number; /** * Sets or retrieves how to send the form data to the server. */ method: string; /** * Sets or retrieves the name of the object. */ name: string; /** * Designates a form that is not validated when submitted. */ noValidate: boolean; /** * Sets or retrieves the window or frame at which to target content. */ target: string; /** * Returns whether a form will validate when it is submitted, without having to submit it. */ checkValidity(): boolean; reportValidity(): boolean; /** * Fires when the user resets a form. */ reset(): void; /** * Fires when a FORM is about to be submitted. */ submit(): void; [index: number]: Element; } interface SVGProperties { type: string; 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?: number | string; 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?: number | string; fill?: string; fillOpacity?: number | string; fillRule?: "nonzero" | "evenodd" | "inherit"; filter?: string; filterRes?: number | string; filterUnits?: number | string; floodColor?: number | string; floodOpacity?: number | string; focusable?: number | string; 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; 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; 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?: number | string; 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?: string | number; 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; } type Nullable = NonNullable | undefined | null; type PropsNullable = { [I in keyof Data]?: Nullable; }; type DOMCustomTag = Omit & Props; type DOMRefValue = FillObject | ((target: Target) => any); type DOMRef = { ref?: DOMRefValue; }; interface DOMGenericProperties { style?: string | Partial | object; class?: string; id?: string; slot?: string; part?: string; is?: string; tabindex?: string | number; role?: string; shadowDom?: boolean | Partial; staticNode?: boolean; cloneNode?: boolean; width?: string | number; height?: string | number; key?: any; children?: any; } type DOMCleanKeys = | keyof DOMGenericProperties | `add${string}` | `get${string}` | `set${string}` | `has${string}` | `matches${string}` | `remove${string}` | `replace${string}` | `querySelector${string}` | `offset${string}` | `append${string}` | `request${string}` | `scroll${string}` | `is${string}` | `toggle${string}` | `webkit${string}` | `insert${string}` | `client${string}` | `child${string}` | `${string}_${string}` | `${string}HTML` | `${string}Child` | `${string}Validity` | `${string}Capture` | `${string}ElementSibling` | "classList" | "attributes" | "normalize" | "closest" | "localName" | "contains" | "animate" | "attachShadow" | "outerText" | "attachInternals" | "click" | "tagName" | "focus" | "submit" | "accessKeyLabel" | "elements" | "isContentEditable" | "innerText" | "prepend" | "namespaceURI" | "blur" | "dataset" | "shadowRoot" | keyof Omit; type HTMLTags = HTMLElementTagNameMap; type SVGTags = Omit; type CheckEvent = CurrentEvent extends Event ? True : never; /** * @todo Rename Handler to Listener */ type DOMEventHandlerKeys

= { [I in keyof P]-?: NonNullable extends DOMEventHandlerValue ? CheckEvent : P[I] extends { value: DOMEventHandlerValue } ? CheckEvent : never; }[keyof P]; interface DOMEventHandlerType extends FunctionConstructor {} interface DOMEventHandlerValue { (event: CurrentEvent): any; } type DOMEventType = { [I in keyof "0" as `on${Type}`]: { type: DOMEventHandlerType; value: DOMEventHandlerValue; }; }; interface DOM$Attrs { [prop: `\$${string}`]: Nullable; } interface DOMUnknown { [prop: string]: any; } type DOMEventTarget = { [I in keyof CurrentEvent]: I extends "currentTarget" ? CurrentTarget : I extends "target" ? Target : CurrentEvent[I]; }; type DOMTarget< Target, CurrentEvent, Targets = Element | Node > = CurrentEvent extends { customTarget: infer EventTarget; } ? DOMTarget, EventTarget> : DOMEventTarget; type DOMGetEventBefore = Value extends DOMEventHandlerValue< infer Event > ? DOMEvent> : null; type DOMGetEvent< Type extends string, Element extends AtomicoStatic > = Element extends { "##props": infer Props; } ? `on${Type}` extends keyof Props ? DOMGetEventBefore, DOMThis> : Event : Event; type DOMEvent< Target = HTMLElement, CurrentEvent = Event > = Target extends string ? CurrentEvent extends AtomicoStatic ? DOMGetEvent : DOMEventType : DOMTarget, CurrentEvent>; type DOMEventHandler = Handler extends ( ev: infer CurrentEvent ) => any ? CurrentEvent extends Event ? (ev: DOMEvent) => any : Handler : Handler; type DOMEvents = { [Prop in keyof Target]?: Prop extends `on${string}` ? DOMEventHandler : Target[Prop]; }; type DOMCustomTarget = { customTarget: Target }; type DOMTag = Props extends null ? PropsNullable< Omit, DOMCleanKeys> & DOMGenericProperties & DOMRef > & DOM$Attrs & DOMUnknown : PropsNullable< Props & Omit, keyof Props | DOMCleanKeys> & DOMGenericProperties & DOMRef > & DOM$Attrs & DOMUnknown; type DOMTags = { [Tag in keyof HTMLTags]: Tag extends keyof HTMLMerge ? DOMTag : DOMTag; }; type DOMThis = Element extends new ( ...args: any[] ) => infer This ? This : Element; interface AtomicoElements { host: HTMLElement; } interface DOMCustomTags { slot: HTMLSlotElement & { onslotchange: (event: Event & DOMCustomTarget) => void; assignNode: ChildNode; }; form: DOMFormElement & { onsubmit: ( event: SubmitEvent & DOMCustomTarget ) => any; onchange: (event: Event & DOMCustomTarget) => any; oninput: (event: Event & DOMCustomTarget) => any; }; input: DOMCustomTag< HTMLInputElement, { min: string | number; max: string | number; step: string | number; value: string | number; } >; } type JSXElements = DOMTags & DOMTags & DOMTags; type JSXProxy = { [I in keyof Props]?: I extends `on${string}` ? NonNullable extends DOMEventHandlerValue ? Nullable< ( ev: DOMEventTarget ) => any > : Props[I] : I extends "ref" ? DOMRefValue : Props[I]; }; type JSXProps = T extends Atomico ? T extends { new (props: infer Props): any } ? Props : DOMTag : T extends keyof JSXElements ? JSXElements[T] : T extends string ? DOMTag : DOMTag>; type AtomicoThis = Props & DOMThis & { update(): Promise; updated: Promise; mounted: Promise; unmounted: Promise; readonly symbolId: unique symbol; }; interface AtomicoStatic extends HTMLElement { styles: Sheets[]; props: SchemaInfer; /** * Meta property, allows associating the component's * props in typescript to external environments. */ readonly "##props": Props; /** * Allows to identify a constructor created with Atomico */ readonly "##atomico": true; } interface Atomico extends AtomicoStatic { new ( props?: JSXProxy< DOMTag, Props>, AtomicoThis > ): AtomicoThis; } type EventInit = CustomEventInit & { type: string; base?: typeof CustomEvent | typeof Event; }; /** * Interface to fill in unknown properties like any | null | undefined */ interface FillObject { [index: string]: any; } type FillArray = any[]; type FillFunction = (...args: any[]) => any; type FillPromise = Promise; type FillConstructor = abstract new (...args: any) => any; type SchemaEvent = { event?: EventInit; }; type SchemaBase = SchemaEvent & { attr?: string; }; type SchemaReflect = SchemaBase & { reflect?: boolean; } & type; type SchemaProp = SchemaEvent & type; type SchemaOnlyPropWrapper = | SchemaProp<{ type: Constructor; }> | SchemaProp<{ type: Constructor; value: Type; }> | SchemaProp<{ type: Constructor; value: () => Type; }>; type SchemaReflectWrapper = | SchemaReflect<{ type: Constructor; }> | SchemaReflect<{ type: Constructor; value: Type; }> | SchemaReflect<{ type: Constructor; value: () => Type; }>; type SchemaAny = | SchemaReflect<{ value: Type; }> | SchemaReflect<{ value: () => Type; }> | SchemaReflect<{}>; type SchemaTypeCustom = | TypeCustom | SchemaReflectWrapper, any>; type TypeString = | StringConstructor | SchemaReflectWrapper; type TypeBoolean = | BooleanConstructor | SchemaReflectWrapper; type TypeNumber = | NumberConstructor | SchemaReflectWrapper; type TypePromise = | PromiseConstructor | SchemaOnlyPropWrapper; type TypeSymbol = | SymbolConstructor | SchemaOnlyPropWrapper; type TypeFunction = | FunctionConstructor | SchemaOnlyPropWrapper; type TypeArray = | ArrayConstructor | SchemaReflectWrapper; type TypeObject = | ObjectConstructor | SchemaReflectWrapper; type TypeAny = null | SchemaAny; type Self = typeof window; type SelfIgnore = | StringConstructor | NumberConstructor | BooleanConstructor | FunctionConstructor | ObjectConstructor | PromiseConstructor | SymbolConstructor | ArrayConstructor; type SafeGlobal = | "Event" | "URL" | "Range" | "Image" | "Crypto" | "File" | "Date" | "Set" | "Map" | "RegExp" | "Animation" | `${string}Event` | `Event${string}` | `Clipboard${string}` | `Animation${string}` | `Form${string}` | `Font${string}` | `DOM${string}` | `Touch${string}` | `Mutation${string}` | `Intersection${string}` | `Message${string}` | `HTML${string}` | `SVG${string}` | `Audio${string}` | `Document${string}` | `Weak${string}` | `CSS${string}` | `File${string}`; type SelfConstructors = Pick< Self, { [I in keyof Self]-?: I extends string ? I extends Capitalize ? Self[I] extends FillConstructor ? Self[I] extends SelfIgnore ? never : I extends SafeGlobal ? I : never : never : never : never; }[keyof Self] >; type TypeConstructor = | type | SchemaOnlyPropWrapper>; type TypesSelfValues = { [I in keyof SelfConstructors]-?: InstanceType; }[keyof SelfConstructors]; type GetTypeSelf = { [I in keyof SelfConstructors]-?: value extends InstanceType< SelfConstructors[I] > ? keyof value extends keyof InstanceType ? SelfConstructors[I] : never : never; }[keyof SelfConstructors]; type TypesDiscard = type extends FillFunction ? TypeFunction : type extends FillObject ? TypeObject : TypeAny; type Type = type extends string ? TypeString : type extends number ? TypeNumber : type extends boolean ? TypeBoolean : type extends TypeCustom ? SchemaTypeCustom : type extends FillPromise ? TypePromise : type extends symbol ? TypeSymbol : type extends FillArray ? TypeArray : type extends DOMStringMap ? TypeObject : type extends TypesSelfValues ? GetTypeSelf extends never ? TypesDiscard : TypeConstructor> : TypesDiscard; type SchemaInfer = Required< Omit< { [I in keyof Props]: Type; }, DOMEventHandlerKeys > >; type TypeCustom = { name: "Custom"; map: Map; serialize?: (value: ReturnType) => string; }; type VnodeKeyTypesRaw = Node | typeof Element | Element | typeof Node; type VNodeKeyTypes = string | VnodeKeyTypesRaw | null; type VNodeRender = () => ( node: T, id?: symbol | string, hydrate?: boolean ) => T; interface VNodeGenericSchema { [TYPE: symbol]: symbol; key?: any; shadow?: boolean | Partial; static?: boolean; is?: string; clone?: boolean; render: VNodeRender; } interface VNodeSchema extends VNodeGenericSchema { type: Type; props: Nullable; children: Children; raw: Raw; } type VNode = Type extends string ? VNodeSchema, Children, 0> : Type extends HTMLElement ? VNodeSchema : Type extends typeof HTMLElement ? VNodeSchema : VNodeSchema; type VNodeAny = VNode; interface InternalElement extends Element { cloneNode(value: boolean): Element; } export type { Atomico as A, VNodeAny as V };