From 0ce86c24efd668f9d3a18ee114d9a3ef56b265b8 Mon Sep 17 00:00:00 2001 From: Rahul Kadyan Date: Wed, 9 Nov 2022 23:40:10 -0800 Subject: [PATCH 1/5] feat(jsx): namespaced JSX types extracted as separate package --- packages/jsx/api-extractor.json | 7 + packages/jsx/package.json | 35 + packages/jsx/register.d.ts | 15 + packages/jsx/src/css.ts | 18 + packages/jsx/src/h.ts | 39 + packages/jsx/src/html.ts | 946 +++++++++++++++++++ packages/jsx/src/index.ts | 1 + packages/jsx/src/svg.ts | 343 +++++++ packages/jsx/src/vue.ts | 8 + packages/runtime-dom/types/jsx.d.ts | 1344 --------------------------- pnpm-lock.yaml | 12 + test-dts/index.d.ts | 1 + test-dts/tsx-namespaced.test-d.tsx | 69 ++ 13 files changed, 1494 insertions(+), 1344 deletions(-) create mode 100644 packages/jsx/api-extractor.json create mode 100644 packages/jsx/package.json create mode 100644 packages/jsx/register.d.ts create mode 100644 packages/jsx/src/css.ts create mode 100644 packages/jsx/src/h.ts create mode 100644 packages/jsx/src/html.ts create mode 100644 packages/jsx/src/index.ts create mode 100644 packages/jsx/src/svg.ts create mode 100644 packages/jsx/src/vue.ts create mode 100644 test-dts/tsx-namespaced.test-d.tsx diff --git a/packages/jsx/api-extractor.json b/packages/jsx/api-extractor.json new file mode 100644 index 00000000000..5602b3a6fd2 --- /dev/null +++ b/packages/jsx/api-extractor.json @@ -0,0 +1,7 @@ +{ + "extends": "../../api-extractor.json", + "mainEntryPointFilePath": "./dist/packages//src/index.d.ts", + "dtsRollup": { + "publicTrimmedFilePath": "./dist/.d.ts" + } +} diff --git a/packages/jsx/package.json b/packages/jsx/package.json new file mode 100644 index 00000000000..abec7b9aa9e --- /dev/null +++ b/packages/jsx/package.json @@ -0,0 +1,35 @@ +{ + "name": "@vue/jsx", + "version": "3.2.44", + "description": "@vue/jsx", + "main": "dist/jsx.cjs.js", + "types": "dist/jsx.d.ts", + "files": [ + "register.d.ts", + "dist" + ], + "buildOptions": { + "formats": [ + "cjs" + ] + }, + "sideEffects": false, + "repository": { + "type": "git", + "url": "git+https://github.com/vuejs/core.git", + "directory": "packages/jsx" + }, + "keywords": [ + "vue" + ], + "author": "Rahul Kadyan", + "license": "MIT", + "bugs": { + "url": "https://github.com/vuejs/core/issues" + }, + "homepage": "https://github.com/vuejs/core/tree/main/packages/jsx#readme", + "dependencies": { + "csstype": "^3.1.1", + "@vue/runtime-core": "3.2.44" + } +} diff --git a/packages/jsx/register.d.ts b/packages/jsx/register.d.ts new file mode 100644 index 00000000000..a59f2fcf9dc --- /dev/null +++ b/packages/jsx/register.d.ts @@ -0,0 +1,15 @@ +import { h } from './dist/jsx' + +declare global { + namespace JSX { + interface Element extends h.JSX.Element {} + interface ElementClass extends h.JSX.ElementClass {} + interface ElementAttributesProperty + extends h.JSX.ElementAttributesProperty {} + interface IntrinsicElements extends h.JSX.IntrinsicElements {} + interface IntrinsicAttributes extends h.JSX.IntrinsicAttributes {} + interface ElementChildrenAttribute extends h.JSX.ElementChildrenAttribute {} + } +} + +export {} diff --git a/packages/jsx/src/css.ts b/packages/jsx/src/css.ts new file mode 100644 index 00000000000..7861434c652 --- /dev/null +++ b/packages/jsx/src/css.ts @@ -0,0 +1,18 @@ +import * as CSS from 'csstype' + +export interface CSSProperties + extends CSS.Properties, + CSS.PropertiesHyphen { + /** + * The index signature was removed to enable closed typing for style + * using CSSType. You're able to use type assertion or module augmentation + * to add properties or an index signature of your own. + * + * For examples and more information, visit: + * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors + */ + [v: `--${string}`]: string | number | undefined +} + +// Vue's style normalization supports nested arrays +export type StyleValue = string | CSSProperties | Array diff --git a/packages/jsx/src/h.ts b/packages/jsx/src/h.ts new file mode 100644 index 00000000000..1b700476916 --- /dev/null +++ b/packages/jsx/src/h.ts @@ -0,0 +1,39 @@ +import { type VNode, h as _h } from '@vue/runtime-core' +import { type HTMLElementAttributesMap } from './html' +import { type SVGElementAttributesMap } from './svg' +import { type ReservedProps } from './vue' + +type ElementAttrs = T & ReservedProps +type NativeElements = { + [K in keyof HTMLElementAttributesMap]: ElementAttrs< + HTMLElementAttributesMap[K] + > +} & { + [K in keyof SVGElementAttributesMap]: ElementAttrs +} + +/** + * This is only for type support. + * @public + */ +export const h = _h +export namespace h { + export namespace JSX { + export interface Element extends VNode {} + export interface ElementClass { + $props: {} + } + export interface ElementAttributesProperty { + $props: {} + } + export interface IntrinsicElements extends NativeElements { + // allow arbitrary elements + // @ts-ignore suppress ts:2374 = Duplicate string index signature. + [name: string]: any + } + export interface IntrinsicAttributes extends ReservedProps {} + export interface ElementChildrenAttribute { + $slots: {} + } + } +} diff --git a/packages/jsx/src/html.ts b/packages/jsx/src/html.ts new file mode 100644 index 00000000000..4d3c6fb3b5f --- /dev/null +++ b/packages/jsx/src/html.ts @@ -0,0 +1,946 @@ +// This code is based on react definition in DefinitelyTyped published under the MIT license. +// Repository: https://github.com/DefinitelyTyped/DefinitelyTyped +// Path in the repository: types/react/index.d.ts +// +// Copyrights of original definition are: +// AssureSign +// Microsoft +// John Reilly +// Benoit Benezech +// Patricio Zavolinsky +// Digiguru +// Eric Anderson +// Dovydas Navickas +// Josh Rutherford +// Guilherme Hübner +// Ferdy Budhidharma +// Johann Rakotoharisoa +// Olivier Pascal +// Martin Hochel +// Frank Li +// Jessica Franco +// Saransh Kataria +// Kanitkorn Sujautra +// Sebastian Silbermann + +import type { StyleValue } from './css' + +export type Booleanish = boolean | `${boolean}` +export type Numberish = number | `${number}` + +// All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/ +export interface AriaAttributes { + /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */ + 'aria-activedescendant'?: string + /** 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 + /** + * 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' + /** 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 + /** + * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. + * @see aria-pressed @see aria-selected. + */ + 'aria-checked'?: Booleanish | 'mixed' + /** + * Defines the total number of columns in a table, grid, or treegrid. + * @see aria-colindex. + */ + 'aria-colcount'?: Numberish + /** + * 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'?: Numberish + /** + * 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'?: Numberish + /** + * Identifies the element (or elements) whose contents or presence are controlled by the current element. + * @see aria-owns. + */ + 'aria-controls'?: string + /** Indicates the element that represents the current item within a container or set of related elements. */ + 'aria-current'?: Booleanish | 'page' | 'step' | 'location' | 'date' | 'time' + /** + * Identifies the element (or elements) that describes the object. + * @see aria-labelledby + */ + 'aria-describedby'?: string + /** + * Identifies the element that provides a detailed, extended description for the object. + * @see aria-describedby. + */ + 'aria-details'?: string + /** + * 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 + /** + * 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' + /** + * Identifies the element that provides an error message for the object. + * @see aria-invalid @see aria-describedby. + */ + 'aria-errormessage'?: string + /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */ + 'aria-expanded'?: Booleanish + /** + * 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 + /** + * Indicates an element's "grabbed" state in a drag-and-drop operation. + * @deprecated in ARIA 1.1 + */ + 'aria-grabbed'?: Booleanish + /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ + 'aria-haspopup'?: Booleanish | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' + /** + * Indicates whether the element is exposed to an accessibility API. + * @see aria-disabled. + */ + 'aria-hidden'?: Booleanish + /** + * Indicates the entered value does not conform to the format expected by the application. + * @see aria-errormessage. + */ + 'aria-invalid'?: Booleanish | 'grammar' | 'spelling' + /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */ + 'aria-keyshortcuts'?: string + /** + * Defines a string value that labels the current element. + * @see aria-labelledby. + */ + 'aria-label'?: string + /** + * Identifies the element (or elements) that labels the current element. + * @see aria-describedby. + */ + 'aria-labelledby'?: string + /** Defines the hierarchical level of an element within a structure. */ + 'aria-level'?: Numberish + /** 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' + /** Indicates whether an element is modal when displayed. */ + 'aria-modal'?: Booleanish + /** Indicates whether a text box accepts multiple lines of input or only a single line. */ + 'aria-multiline'?: Booleanish + /** Indicates that the user may select more than one item from the current selectable descendants. */ + 'aria-multiselectable'?: Booleanish + /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */ + 'aria-orientation'?: 'horizontal' | 'vertical' + /** + * 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 + /** + * 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 + /** + * 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'?: Numberish + /** + * Indicates the current "pressed" state of toggle buttons. + * @see aria-checked @see aria-selected. + */ + 'aria-pressed'?: Booleanish | 'mixed' + /** + * Indicates that the element is not editable, but is otherwise operable. + * @see aria-disabled. + */ + 'aria-readonly'?: Booleanish + /** + * 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 text' | 'all' | 'removals' | 'text' + /** Indicates that user input is required on the element before a form may be submitted. */ + 'aria-required'?: Booleanish + /** Defines a human-readable, author-localized description for the role of an element. */ + 'aria-roledescription'?: string + /** + * Defines the total number of rows in a table, grid, or treegrid. + * @see aria-rowindex. + */ + 'aria-rowcount'?: Numberish + /** + * 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'?: Numberish + /** + * 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'?: Numberish + /** + * Indicates the current "selected" state of various widgets. + * @see aria-checked @see aria-pressed. + */ + 'aria-selected'?: Booleanish + /** + * 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'?: Numberish + /** Indicates if items in a table or grid are sorted in ascending or descending order. */ + 'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' + /** Defines the maximum allowed value for a range widget. */ + 'aria-valuemax'?: Numberish + /** Defines the minimum allowed value for a range widget. */ + 'aria-valuemin'?: Numberish + /** + * Defines the current value for a range widget. + * @see aria-valuetext. + */ + 'aria-valuenow'?: Numberish + /** Defines the human readable text alternative of aria-valuenow for a range widget. */ + 'aria-valuetext'?: string +} + +export type EventHandlers = { + [K in keyof E]?: E[K] extends (...args: any) => any + ? E[K] + : (payload: E[K]) => void +} + +export interface Events { + // clipboard events + onCopy: ClipboardEvent + onCut: ClipboardEvent + onPaste: ClipboardEvent + + // composition events + onCompositionend: CompositionEvent + onCompositionstart: CompositionEvent + onCompositionupdate: CompositionEvent + + // drag drop events + onDrag: DragEvent + onDragend: DragEvent + onDragenter: DragEvent + onDragexit: DragEvent + onDragleave: DragEvent + onDragover: DragEvent + onDragstart: DragEvent + onDrop: DragEvent + + // focus events + onFocus: FocusEvent + onFocusin: FocusEvent + onFocusout: FocusEvent + onBlur: FocusEvent + + // form events + onChange: Event + onBeforeinput: Event + onInput: Event + onReset: Event + onSubmit: Event + onInvalid: Event + + // image events + onLoad: Event + onError: Event + + // keyboard events + onKeydown: KeyboardEvent + onKeypress: KeyboardEvent + onKeyup: KeyboardEvent + + // mouse events + onAuxclick: MouseEvent + onClick: MouseEvent + onContextmenu: MouseEvent + onDblclick: MouseEvent + onMousedown: MouseEvent + onMouseenter: MouseEvent + onMouseleave: MouseEvent + onMousemove: MouseEvent + onMouseout: MouseEvent + onMouseover: MouseEvent + onMouseup: MouseEvent + + // media events + onAbort: Event + onCanplay: Event + onCanplaythrough: Event + onDurationchange: Event + onEmptied: Event + onEncrypted: Event + onEnded: Event + onLoadeddata: Event + onLoadedmetadata: Event + onLoadstart: Event + onPause: Event + onPlay: Event + onPlaying: Event + onProgress: Event + onRatechange: Event + onSeeked: Event + onSeeking: Event + onStalled: Event + onSuspend: Event + onTimeupdate: Event + onVolumechange: Event + onWaiting: Event + + // selection events + onSelect: Event + + // UI events + onScroll: UIEvent + + // touch events + onTouchcancel: TouchEvent + onTouchend: TouchEvent + onTouchmove: TouchEvent + onTouchstart: TouchEvent + + // pointer events + onPointerdown: PointerEvent + onPointermove: PointerEvent + onPointerup: PointerEvent + onPointercancel: PointerEvent + onPointerenter: PointerEvent + onPointerleave: PointerEvent + onPointerover: PointerEvent + onPointerout: PointerEvent + + // wheel events + onWheel: WheelEvent + + // animation events + onAnimationstart: AnimationEvent + onAnimationend: AnimationEvent + onAnimationiteration: AnimationEvent + + // transition events + onTransitionend: TransitionEvent + onTransitionstart: TransitionEvent +} + +export interface HTMLAttributes extends AriaAttributes, EventHandlers { + innerHTML?: string + + class?: any + style?: StyleValue + + // Standard HTML Attributes + accesskey?: string + contenteditable?: Booleanish | 'inherit' + contextmenu?: string + dir?: string + draggable?: Booleanish + hidden?: Booleanish + id?: string + lang?: string + placeholder?: string + spellcheck?: Booleanish + tabindex?: Numberish + title?: string + translate?: 'yes' | 'no' + + // Unknown + radiogroup?: string // , + + // WAI-ARIA + role?: string + + // RDFa Attributes + about?: string + datatype?: string + inlist?: any + prefix?: string + property?: string + resource?: string + typeof?: string + vocab?: string + + // Non-standard Attributes + autocapitalize?: string + autocorrect?: string + autosave?: string + color?: string + itemprop?: string + itemscope?: Booleanish + itemtype?: string + itemid?: string + itemref?: string + results?: Numberish + security?: string + unselectable?: 'on' | 'off' + + // Living Standard + /** + * Hints at the type of data that might be entered by the user while editing the element or its contents + * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute + */ + inputmode?: + | 'none' + | 'text' + | 'tel' + | 'url' + | 'email' + | 'numeric' + | 'decimal' + | 'search' + /** + * Specify that a standard HTML element should behave like a defined custom built-in element + * @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is + */ + is?: string +} + +export interface AnchorHTMLAttributes extends HTMLAttributes { + download?: any + href?: string + hreflang?: string + media?: string + ping?: string + rel?: string + target?: string + type?: string + referrerpolicy?: string +} + +export interface AreaHTMLAttributes extends HTMLAttributes { + alt?: string + coords?: string + download?: any + href?: string + hreflang?: string + media?: string + rel?: string + shape?: string + target?: string +} + +export interface AudioHTMLAttributes extends MediaHTMLAttributes {} + +export interface BaseHTMLAttributes extends HTMLAttributes { + href?: string + target?: string +} + +export interface BlockquoteHTMLAttributes extends HTMLAttributes { + cite?: string +} + +export interface ButtonHTMLAttributes extends HTMLAttributes { + autofocus?: Booleanish + disabled?: Booleanish + form?: string + formaction?: string + formenctype?: string + formmethod?: string + formnovalidate?: Booleanish + formtarget?: string + name?: string + type?: 'submit' | 'reset' | 'button' + value?: string | string[] | number +} + +export interface CanvasHTMLAttributes extends HTMLAttributes { + height?: Numberish + width?: Numberish +} + +export interface ColHTMLAttributes extends HTMLAttributes { + span?: Numberish + width?: Numberish +} + +export interface ColgroupHTMLAttributes extends HTMLAttributes { + span?: Numberish +} + +export interface DataHTMLAttributes extends HTMLAttributes { + value?: string | string[] | number +} + +export interface DetailsHTMLAttributes extends HTMLAttributes { + open?: Booleanish +} + +export interface DelHTMLAttributes extends HTMLAttributes { + cite?: string + datetime?: string +} + +export interface DialogHTMLAttributes extends HTMLAttributes { + open?: Booleanish +} + +export interface EmbedHTMLAttributes extends HTMLAttributes { + height?: Numberish + src?: string + type?: string + width?: Numberish +} + +export interface FieldsetHTMLAttributes extends HTMLAttributes { + disabled?: Booleanish + form?: string + name?: string +} + +export interface FormHTMLAttributes extends HTMLAttributes { + acceptcharset?: string + action?: string + autocomplete?: string + enctype?: string + method?: string + name?: string + novalidate?: Booleanish + target?: string +} + +export interface HtmlHTMLAttributes extends HTMLAttributes { + manifest?: string +} + +export interface IframeHTMLAttributes extends HTMLAttributes { + allow?: string + allowfullscreen?: Booleanish + allowtransparency?: Booleanish + frameborder?: Numberish + height?: Numberish + marginheight?: Numberish + marginwidth?: Numberish + name?: string + referrerpolicy?: string + sandbox?: string + scrolling?: string + seamless?: Booleanish + src?: string + srcdoc?: string + width?: Numberish +} + +export interface ImgHTMLAttributes extends HTMLAttributes { + alt?: string + crossorigin?: 'anonymous' | 'use-credentials' | '' + decoding?: 'async' | 'auto' | 'sync' + height?: Numberish + sizes?: string + src?: string + srcset?: string + usemap?: string + width?: Numberish +} + +export interface InsHTMLAttributes extends HTMLAttributes { + cite?: string + datetime?: string +} + +export interface InputHTMLAttributes extends HTMLAttributes { + accept?: string + alt?: string + autocomplete?: string + autofocus?: Booleanish + capture?: boolean | 'user' | 'environment' // https://www.w3.org/tr/html-media-capture/#the-capture-attribute + checked?: Booleanish | any[] | Set // for IDE v-model multi-checkbox support + crossorigin?: string + disabled?: Booleanish + form?: string + formaction?: string + formenctype?: string + formmethod?: string + formnovalidate?: Booleanish + formtarget?: string + height?: Numberish + indeterminate?: boolean + list?: string + max?: Numberish + maxlength?: Numberish + min?: Numberish + minlength?: Numberish + multiple?: Booleanish + name?: string + pattern?: string + placeholder?: string + readonly?: Booleanish + required?: Booleanish + size?: Numberish + src?: string + step?: Numberish + type?: string + value?: any // we support :value to be bound to anything w/ v-model + width?: Numberish +} + +export interface KeygenHTMLAttributes extends HTMLAttributes { + autofocus?: Booleanish + challenge?: string + disabled?: Booleanish + form?: string + keytype?: string + keyparams?: string + name?: string +} + +export interface LabelHTMLAttributes extends HTMLAttributes { + for?: string + form?: string +} + +export interface LiHTMLAttributes extends HTMLAttributes { + value?: string | string[] | number +} + +export interface LinkHTMLAttributes extends HTMLAttributes { + as?: string + crossorigin?: string + href?: string + hreflang?: string + integrity?: string + media?: string + rel?: string + sizes?: string + type?: string +} + +export interface MapHTMLAttributes extends HTMLAttributes { + name?: string +} + +export interface MenuHTMLAttributes extends HTMLAttributes { + type?: string +} + +export interface MediaHTMLAttributes extends HTMLAttributes { + autoplay?: Booleanish + controls?: Booleanish + controlslist?: string + crossorigin?: string + loop?: Booleanish + mediagroup?: string + muted?: Booleanish + playsinline?: Booleanish + preload?: string + src?: string +} + +export interface MetaHTMLAttributes extends HTMLAttributes { + charset?: string + content?: string + httpequiv?: string + name?: string +} + +export interface MeterHTMLAttributes extends HTMLAttributes { + form?: string + high?: Numberish + low?: Numberish + max?: Numberish + min?: Numberish + optimum?: Numberish + value?: string | string[] | number +} + +export interface QuoteHTMLAttributes extends HTMLAttributes { + cite?: string +} + +export interface ObjectHTMLAttributes extends HTMLAttributes { + classid?: string + data?: string + form?: string + height?: Numberish + name?: string + type?: string + usemap?: string + width?: Numberish + wmode?: string +} + +export interface OlHTMLAttributes extends HTMLAttributes { + reversed?: Booleanish + start?: Numberish + type?: '1' | 'a' | 'A' | 'i' | 'I' +} + +export interface OptgroupHTMLAttributes extends HTMLAttributes { + disabled?: Booleanish + label?: string +} + +export interface OptionHTMLAttributes extends HTMLAttributes { + disabled?: Booleanish + label?: string + selected?: Booleanish + value?: any // we support :value to be bound to anything w/ v-model +} + +export interface OutputHTMLAttributes extends HTMLAttributes { + for?: string + form?: string + name?: string +} + +export interface ParamHTMLAttributes extends HTMLAttributes { + name?: string + value?: string | string[] | number +} + +export interface ProgressHTMLAttributes extends HTMLAttributes { + max?: Numberish + value?: string | string[] | number +} + +export interface ScriptHTMLAttributes extends HTMLAttributes { + async?: Booleanish + charset?: string + crossorigin?: string + defer?: Booleanish + integrity?: string + nomodule?: Booleanish + nonce?: string + src?: string + type?: string +} + +export interface SelectHTMLAttributes extends HTMLAttributes { + autocomplete?: string + autofocus?: Booleanish + disabled?: Booleanish + form?: string + multiple?: Booleanish + name?: string + required?: Booleanish + size?: Numberish + value?: any // we support :value to be bound to anything w/ v-model +} + +export interface SourceHTMLAttributes extends HTMLAttributes { + media?: string + sizes?: string + src?: string + srcset?: string + type?: string +} + +export interface StyleHTMLAttributes extends HTMLAttributes { + media?: string + nonce?: string + scoped?: Booleanish + type?: string +} + +export interface TableHTMLAttributes extends HTMLAttributes { + cellpadding?: Numberish + cellspacing?: Numberish + summary?: string +} + +export interface TextareaHTMLAttributes extends HTMLAttributes { + autocomplete?: string + autofocus?: Booleanish + cols?: Numberish + dirname?: string + disabled?: Booleanish + form?: string + maxlength?: Numberish + minlength?: Numberish + name?: string + placeholder?: string + readonly?: boolean + required?: Booleanish + rows?: Numberish + value?: string | string[] | number + wrap?: string +} + +export interface TdHTMLAttributes extends HTMLAttributes { + align?: 'left' | 'center' | 'right' | 'justify' | 'char' + colspan?: Numberish + headers?: string + rowspan?: Numberish + scope?: string + valign?: 'top' | 'middle' | 'bottom' | 'baseline' +} + +export interface ThHTMLAttributes extends HTMLAttributes { + align?: 'left' | 'center' | 'right' | 'justify' | 'char' + colspan?: Numberish + headers?: string + rowspan?: Numberish + scope?: string +} + +export interface TimeHTMLAttributes extends HTMLAttributes { + datetime?: string +} + +export interface TrackHTMLAttributes extends HTMLAttributes { + default?: Booleanish + kind?: string + label?: string + src?: string + srclang?: string +} + +export interface VideoHTMLAttributes extends MediaHTMLAttributes { + height?: Numberish + playsinline?: Booleanish + poster?: string + width?: Numberish + disablePictureInPicture?: Booleanish +} + +export interface WebViewHTMLAttributes extends HTMLAttributes { + allowfullscreen?: Booleanish + allowpopups?: Booleanish + autoFocus?: Booleanish + autosize?: Booleanish + blinkfeatures?: string + disableblinkfeatures?: string + disableguestresize?: Booleanish + disablewebsecurity?: Booleanish + guestinstance?: string + httpreferrer?: string + nodeintegration?: Booleanish + partition?: string + plugins?: Booleanish + preload?: string + src?: string + useragent?: string + webpreferences?: string +} + +export interface HTMLElementAttributesMap { + a: AnchorHTMLAttributes + abbr: HTMLAttributes + address: HTMLAttributes + area: AreaHTMLAttributes + article: HTMLAttributes + aside: HTMLAttributes + audio: AudioHTMLAttributes + b: HTMLAttributes + base: BaseHTMLAttributes + bdi: HTMLAttributes + bdo: HTMLAttributes + blockquote: BlockquoteHTMLAttributes + body: HTMLAttributes + br: HTMLAttributes + button: ButtonHTMLAttributes + canvas: CanvasHTMLAttributes + caption: HTMLAttributes + cite: HTMLAttributes + code: HTMLAttributes + col: ColHTMLAttributes + colgroup: ColgroupHTMLAttributes + data: DataHTMLAttributes + datalist: HTMLAttributes + dd: HTMLAttributes + del: DelHTMLAttributes + details: DetailsHTMLAttributes + dfn: HTMLAttributes + dialog: DialogHTMLAttributes + div: HTMLAttributes + dl: HTMLAttributes + dt: HTMLAttributes + em: HTMLAttributes + embed: EmbedHTMLAttributes + fieldset: FieldsetHTMLAttributes + figcaption: HTMLAttributes + figure: HTMLAttributes + footer: HTMLAttributes + form: FormHTMLAttributes + h1: HTMLAttributes + h2: HTMLAttributes + h3: HTMLAttributes + h4: HTMLAttributes + h5: HTMLAttributes + h6: HTMLAttributes + head: HTMLAttributes + header: HTMLAttributes + hgroup: HTMLAttributes + hr: HTMLAttributes + html: HtmlHTMLAttributes + i: HTMLAttributes + iframe: IframeHTMLAttributes + img: ImgHTMLAttributes + input: InputHTMLAttributes + ins: InsHTMLAttributes + kbd: HTMLAttributes + keygen: KeygenHTMLAttributes + label: LabelHTMLAttributes + legend: HTMLAttributes + li: LiHTMLAttributes + link: LinkHTMLAttributes + main: HTMLAttributes + map: MapHTMLAttributes + mark: HTMLAttributes + menu: MenuHTMLAttributes + meta: MetaHTMLAttributes + meter: MeterHTMLAttributes + nav: HTMLAttributes + noindex: HTMLAttributes + noscript: HTMLAttributes + object: ObjectHTMLAttributes + ol: OlHTMLAttributes + optgroup: OptgroupHTMLAttributes + option: OptionHTMLAttributes + output: OutputHTMLAttributes + p: HTMLAttributes + param: ParamHTMLAttributes + picture: HTMLAttributes + pre: HTMLAttributes + progress: ProgressHTMLAttributes + q: QuoteHTMLAttributes + rp: HTMLAttributes + rt: HTMLAttributes + ruby: HTMLAttributes + s: HTMLAttributes + samp: HTMLAttributes + script: ScriptHTMLAttributes + section: HTMLAttributes + select: SelectHTMLAttributes + small: HTMLAttributes + source: SourceHTMLAttributes + span: HTMLAttributes + strong: HTMLAttributes + style: StyleHTMLAttributes + sub: HTMLAttributes + summary: HTMLAttributes + sup: HTMLAttributes + table: TableHTMLAttributes + template: HTMLAttributes + tbody: HTMLAttributes + td: TdHTMLAttributes + textarea: TextareaHTMLAttributes + tfoot: HTMLAttributes + th: ThHTMLAttributes + thead: HTMLAttributes + time: TimeHTMLAttributes + title: HTMLAttributes + tr: HTMLAttributes + track: TrackHTMLAttributes + u: HTMLAttributes + ul: HTMLAttributes + var: HTMLAttributes + video: VideoHTMLAttributes + wbr: HTMLAttributes + webview: WebViewHTMLAttributes +} diff --git a/packages/jsx/src/index.ts b/packages/jsx/src/index.ts new file mode 100644 index 00000000000..154f33745b3 --- /dev/null +++ b/packages/jsx/src/index.ts @@ -0,0 +1 @@ +export { h } from './h' diff --git a/packages/jsx/src/svg.ts b/packages/jsx/src/svg.ts new file mode 100644 index 00000000000..a9993cd7038 --- /dev/null +++ b/packages/jsx/src/svg.ts @@ -0,0 +1,343 @@ +import { CSSProperties } from './css' +import { AriaAttributes, EventHandlers, Events, Numberish } from './html' + +export interface SVGAttributes extends AriaAttributes, EventHandlers { + innerHTML?: string + + /** + * SVG Styling Attributes + * @see https://www.w3.org/TR/SVG/styling.html#ElementSpecificStyling + */ + class?: any + style?: string | CSSProperties + + color?: string + height?: Numberish + id?: string + lang?: string + max?: Numberish + media?: string + method?: string + min?: Numberish + name?: string + target?: string + type?: string + width?: Numberish + + // Other HTML properties supported by SVG elements in browsers + role?: string + tabindex?: Numberish + + // SVG Specific attributes + 'accent-height'?: Numberish + accumulate?: 'none' | 'sum' + additive?: 'replace' | 'sum' + 'alignment-baseline'?: + | 'auto' + | 'baseline' + | 'before-edge' + | 'text-before-edge' + | 'middle' + | 'central' + | 'after-edge' + | 'text-after-edge' + | 'ideographic' + | 'alphabetic' + | 'hanging' + | 'mathematical' + | 'inherit' + allowReorder?: 'no' | 'yes' + alphabetic?: Numberish + amplitude?: Numberish + 'arabic-form'?: 'initial' | 'medial' | 'terminal' | 'isolated' + ascent?: Numberish + attributeName?: string + attributeType?: string + autoReverse?: Numberish + azimuth?: Numberish + baseFrequency?: Numberish + 'baseline-shift'?: Numberish + baseProfile?: Numberish + bbox?: Numberish + begin?: Numberish + bias?: Numberish + by?: Numberish + calcMode?: Numberish + 'cap-height'?: Numberish + clip?: Numberish + 'clip-path'?: string + clipPathUnits?: Numberish + 'clip-rule'?: Numberish + 'color-interpolation'?: Numberish + 'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB' | 'inherit' + 'color-profile'?: Numberish + 'color-rendering'?: Numberish + contentScriptType?: Numberish + contentStyleType?: Numberish + cursor?: Numberish + cx?: Numberish + cy?: Numberish + d?: string + decelerate?: Numberish + descent?: Numberish + diffuseConstant?: Numberish + direction?: Numberish + display?: Numberish + divisor?: Numberish + 'dominant-baseline'?: Numberish + dur?: Numberish + dx?: Numberish + dy?: Numberish + edgeMode?: Numberish + elevation?: Numberish + 'enable-background'?: Numberish + end?: Numberish + exponent?: Numberish + externalResourcesRequired?: Numberish + fill?: string + 'fill-opacity'?: Numberish + 'fill-rule'?: 'nonzero' | 'evenodd' | 'inherit' + filter?: string + filterRes?: Numberish + filterUnits?: Numberish + 'flood-color'?: Numberish + 'flood-opacity'?: Numberish + focusable?: Numberish + 'font-family'?: string + 'font-size'?: Numberish + 'font-size-adjust'?: Numberish + 'font-stretch'?: Numberish + 'font-style'?: Numberish + 'font-variant'?: Numberish + 'font-weight'?: Numberish + format?: Numberish + from?: Numberish + fx?: Numberish + fy?: Numberish + g1?: Numberish + g2?: Numberish + 'glyph-name'?: Numberish + 'glyph-orientation-horizontal'?: Numberish + 'glyph-orientation-vertical'?: Numberish + glyphRef?: Numberish + gradientTransform?: string + gradientUnits?: string + hanging?: Numberish + 'horiz-adv-x'?: Numberish + 'horiz-origin-x'?: Numberish + href?: string + ideographic?: Numberish + 'image-rendering'?: Numberish + in2?: Numberish + in?: string + intercept?: Numberish + k1?: Numberish + k2?: Numberish + k3?: Numberish + k4?: Numberish + k?: Numberish + kernelMatrix?: Numberish + kernelUnitLength?: Numberish + kerning?: Numberish + keyPoints?: Numberish + keySplines?: Numberish + keyTimes?: Numberish + lengthAdjust?: Numberish + 'letter-spacing'?: Numberish + 'lighting-color'?: Numberish + limitingConeAngle?: Numberish + local?: Numberish + 'marker-end'?: string + markerHeight?: Numberish + 'marker-mid'?: string + 'marker-start'?: string + markerUnits?: Numberish + markerWidth?: Numberish + mask?: string + maskContentUnits?: Numberish + maskUnits?: Numberish + mathematical?: Numberish + mode?: Numberish + numOctaves?: Numberish + offset?: Numberish + opacity?: Numberish + operator?: Numberish + order?: Numberish + orient?: Numberish + orientation?: Numberish + origin?: Numberish + overflow?: Numberish + 'overline-position'?: Numberish + 'overline-thickness'?: Numberish + 'paint-order'?: Numberish + 'panose-1'?: Numberish + pathLength?: Numberish + patternContentUnits?: string + patternTransform?: Numberish + patternUnits?: string + 'pointer-events'?: Numberish + points?: string + pointsAtX?: Numberish + pointsAtY?: Numberish + pointsAtZ?: Numberish + preserveAlpha?: Numberish + preserveAspectRatio?: string + primitiveUnits?: Numberish + r?: Numberish + radius?: Numberish + refX?: Numberish + refY?: Numberish + renderingIntent?: Numberish + repeatCount?: Numberish + repeatDur?: Numberish + requiredExtensions?: Numberish + requiredFeatures?: Numberish + restart?: Numberish + result?: string + rotate?: Numberish + rx?: Numberish + ry?: Numberish + scale?: Numberish + seed?: Numberish + 'shape-rendering'?: Numberish + slope?: Numberish + spacing?: Numberish + specularConstant?: Numberish + specularExponent?: Numberish + speed?: Numberish + spreadMethod?: string + startOffset?: Numberish + stdDeviation?: Numberish + stemh?: Numberish + stemv?: Numberish + stitchTiles?: Numberish + 'stop-color'?: string + 'stop-opacity'?: Numberish + 'strikethrough-position'?: Numberish + 'strikethrough-thickness'?: Numberish + string?: Numberish + stroke?: string + 'stroke-dasharray'?: Numberish + 'stroke-dashoffset'?: Numberish + 'stroke-linecap'?: 'butt' | 'round' | 'square' | 'inherit' + 'stroke-linejoin'?: 'miter' | 'round' | 'bevel' | 'inherit' + 'stroke-miterlimit'?: Numberish + 'stroke-opacity'?: Numberish + 'stroke-width'?: Numberish + surfaceScale?: Numberish + systemLanguage?: Numberish + tableValues?: Numberish + targetX?: Numberish + targetY?: Numberish + 'text-anchor'?: string + 'text-decoration'?: Numberish + textLength?: Numberish + 'text-rendering'?: Numberish + to?: Numberish + transform?: string + u1?: Numberish + u2?: Numberish + 'underline-position'?: Numberish + 'underline-thickness'?: Numberish + unicode?: Numberish + 'unicode-bidi'?: Numberish + 'unicode-range'?: Numberish + 'unitsPer-em'?: Numberish + 'v-alphabetic'?: Numberish + values?: string + 'vector-effect'?: Numberish + version?: string + 'vert-adv-y'?: Numberish + 'vert-origin-x'?: Numberish + 'vert-origin-y'?: Numberish + 'v-hanging'?: Numberish + 'v-ideographic'?: Numberish + viewBox?: string + viewTarget?: Numberish + visibility?: Numberish + 'v-mathematical'?: Numberish + widths?: Numberish + 'word-spacing'?: Numberish + 'writing-mode'?: Numberish + x1?: Numberish + x2?: Numberish + x?: Numberish + xChannelSelector?: string + 'x-height'?: Numberish + xlinkActuate?: string + xlinkArcrole?: string + xlinkHref?: string + xlinkRole?: string + xlinkShow?: string + xlinkTitle?: string + xlinkType?: string + xmlns?: string + y1?: Numberish + y2?: Numberish + y?: Numberish + yChannelSelector?: string + z?: Numberish + zoomAndPan?: string +} + +export interface SVGElementAttributesMap { + svg: SVGAttributes + + animate: SVGAttributes + animateMotion: SVGAttributes + animateTransform: SVGAttributes + circle: SVGAttributes + clipPath: SVGAttributes + defs: SVGAttributes + desc: SVGAttributes + ellipse: SVGAttributes + feBlend: SVGAttributes + feColorMatrix: SVGAttributes + feComponentTransfer: SVGAttributes + feComposite: SVGAttributes + feConvolveMatrix: SVGAttributes + feDiffuseLighting: SVGAttributes + feDisplacementMap: SVGAttributes + feDistantLight: SVGAttributes + feDropShadow: SVGAttributes + feFlood: SVGAttributes + feFuncA: SVGAttributes + feFuncB: SVGAttributes + feFuncG: SVGAttributes + feFuncR: SVGAttributes + feGaussianBlur: SVGAttributes + feImage: SVGAttributes + feMerge: SVGAttributes + feMergeNode: SVGAttributes + feMorphology: SVGAttributes + feOffset: SVGAttributes + fePointLight: SVGAttributes + feSpecularLighting: SVGAttributes + feSpotLight: SVGAttributes + feTile: SVGAttributes + feTurbulence: SVGAttributes + filter: SVGAttributes + foreignObject: SVGAttributes + g: SVGAttributes + image: SVGAttributes + line: SVGAttributes + linearGradient: SVGAttributes + marker: SVGAttributes + mask: SVGAttributes + metadata: SVGAttributes + mpath: SVGAttributes + path: SVGAttributes + pattern: SVGAttributes + polygon: SVGAttributes + polyline: SVGAttributes + radialGradient: SVGAttributes + rect: SVGAttributes + stop: SVGAttributes + switch: SVGAttributes + symbol: SVGAttributes + text: SVGAttributes + textPath: SVGAttributes + tspan: SVGAttributes + use: SVGAttributes + view: SVGAttributes +} diff --git a/packages/jsx/src/vue.ts b/packages/jsx/src/vue.ts new file mode 100644 index 00000000000..343bce30dc4 --- /dev/null +++ b/packages/jsx/src/vue.ts @@ -0,0 +1,8 @@ +import type { VNodeRef } from '@vue/runtime-core' + +export type ReservedProps = { + key?: string | number | symbol + ref?: VNodeRef + ref_for?: boolean + ref_key?: string +} diff --git a/packages/runtime-dom/types/jsx.d.ts b/packages/runtime-dom/types/jsx.d.ts index 5898b5e0d5f..336ce12bb91 100644 --- a/packages/runtime-dom/types/jsx.d.ts +++ b/packages/runtime-dom/types/jsx.d.ts @@ -1,1345 +1 @@ -// Note: this file is auto concatenated to the end of the bundled d.ts during -// build. - -// This code is based on react definition in DefinitelyTyped published under the MIT license. -// Repository: https://github.com/DefinitelyTyped/DefinitelyTyped -// Path in the repository: types/react/index.d.ts -// -// Copyrights of original definition are: -// AssureSign -// Microsoft -// John Reilly -// Benoit Benezech -// Patricio Zavolinsky -// Digiguru -// Eric Anderson -// Dovydas Navickas -// Josh Rutherford -// Guilherme Hübner -// Ferdy Budhidharma -// Johann Rakotoharisoa -// Olivier Pascal -// Martin Hochel -// Frank Li -// Jessica Franco -// Saransh Kataria -// Kanitkorn Sujautra -// Sebastian Silbermann - -import { VNode } from '@vue/runtime-core' -import * as CSS from 'csstype' - -export interface CSSProperties - extends CSS.Properties, - CSS.PropertiesHyphen { - /** - * The index signature was removed to enable closed typing for style - * using CSSType. You're able to use type assertion or module augmentation - * to add properties or an index signature of your own. - * - * For examples and more information, visit: - * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors - */ - [v: `--${string}`]: string | number | undefined -} - -type Booleanish = boolean | 'true' | 'false' -type Numberish = number | string - -// All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/ -interface AriaAttributes { - /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */ - 'aria-activedescendant'?: string - /** 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 - /** - * 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' - /** 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 - /** - * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. - * @see aria-pressed @see aria-selected. - */ - 'aria-checked'?: Booleanish | 'mixed' - /** - * Defines the total number of columns in a table, grid, or treegrid. - * @see aria-colindex. - */ - 'aria-colcount'?: Numberish - /** - * 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'?: Numberish - /** - * 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'?: Numberish - /** - * Identifies the element (or elements) whose contents or presence are controlled by the current element. - * @see aria-owns. - */ - 'aria-controls'?: string - /** Indicates the element that represents the current item within a container or set of related elements. */ - 'aria-current'?: Booleanish | 'page' | 'step' | 'location' | 'date' | 'time' - /** - * Identifies the element (or elements) that describes the object. - * @see aria-labelledby - */ - 'aria-describedby'?: string - /** - * Identifies the element that provides a detailed, extended description for the object. - * @see aria-describedby. - */ - 'aria-details'?: string - /** - * 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 - /** - * 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' - /** - * Identifies the element that provides an error message for the object. - * @see aria-invalid @see aria-describedby. - */ - 'aria-errormessage'?: string - /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */ - 'aria-expanded'?: Booleanish - /** - * 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 - /** - * Indicates an element's "grabbed" state in a drag-and-drop operation. - * @deprecated in ARIA 1.1 - */ - 'aria-grabbed'?: Booleanish - /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ - 'aria-haspopup'?: Booleanish | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' - /** - * Indicates whether the element is exposed to an accessibility API. - * @see aria-disabled. - */ - 'aria-hidden'?: Booleanish - /** - * Indicates the entered value does not conform to the format expected by the application. - * @see aria-errormessage. - */ - 'aria-invalid'?: Booleanish | 'grammar' | 'spelling' - /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */ - 'aria-keyshortcuts'?: string - /** - * Defines a string value that labels the current element. - * @see aria-labelledby. - */ - 'aria-label'?: string - /** - * Identifies the element (or elements) that labels the current element. - * @see aria-describedby. - */ - 'aria-labelledby'?: string - /** Defines the hierarchical level of an element within a structure. */ - 'aria-level'?: Numberish - /** 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' - /** Indicates whether an element is modal when displayed. */ - 'aria-modal'?: Booleanish - /** Indicates whether a text box accepts multiple lines of input or only a single line. */ - 'aria-multiline'?: Booleanish - /** Indicates that the user may select more than one item from the current selectable descendants. */ - 'aria-multiselectable'?: Booleanish - /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */ - 'aria-orientation'?: 'horizontal' | 'vertical' - /** - * 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 - /** - * 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 - /** - * 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'?: Numberish - /** - * Indicates the current "pressed" state of toggle buttons. - * @see aria-checked @see aria-selected. - */ - 'aria-pressed'?: Booleanish | 'mixed' - /** - * Indicates that the element is not editable, but is otherwise operable. - * @see aria-disabled. - */ - 'aria-readonly'?: Booleanish - /** - * 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 text' | 'all' | 'removals' | 'text' - /** Indicates that user input is required on the element before a form may be submitted. */ - 'aria-required'?: Booleanish - /** Defines a human-readable, author-localized description for the role of an element. */ - 'aria-roledescription'?: string - /** - * Defines the total number of rows in a table, grid, or treegrid. - * @see aria-rowindex. - */ - 'aria-rowcount'?: Numberish - /** - * 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'?: Numberish - /** - * 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'?: Numberish - /** - * Indicates the current "selected" state of various widgets. - * @see aria-checked @see aria-pressed. - */ - 'aria-selected'?: Booleanish - /** - * 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'?: Numberish - /** Indicates if items in a table or grid are sorted in ascending or descending order. */ - 'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' - /** Defines the maximum allowed value for a range widget. */ - 'aria-valuemax'?: Numberish - /** Defines the minimum allowed value for a range widget. */ - 'aria-valuemin'?: Numberish - /** - * Defines the current value for a range widget. - * @see aria-valuetext. - */ - 'aria-valuenow'?: Numberish - /** Defines the human readable text alternative of aria-valuenow for a range widget. */ - 'aria-valuetext'?: string -} - -// Vue's style normalization supports nested arrays -export type StyleValue = string | CSSProperties | Array - -export interface HTMLAttributes extends AriaAttributes, EventHandlers { - innerHTML?: string - - class?: any - style?: StyleValue - - // Standard HTML Attributes - accesskey?: string - contenteditable?: Booleanish | 'inherit' - contextmenu?: string - dir?: string - draggable?: Booleanish - hidden?: Booleanish - id?: string - lang?: string - placeholder?: string - spellcheck?: Booleanish - tabindex?: Numberish - title?: string - translate?: 'yes' | 'no' - - // Unknown - radiogroup?: string // , - - // WAI-ARIA - role?: string - - // RDFa Attributes - about?: string - datatype?: string - inlist?: any - prefix?: string - property?: string - resource?: string - typeof?: string - vocab?: string - - // Non-standard Attributes - autocapitalize?: string - autocorrect?: string - autosave?: string - color?: string - itemprop?: string - itemscope?: Booleanish - itemtype?: string - itemid?: string - itemref?: string - results?: Numberish - security?: string - unselectable?: 'on' | 'off' - - // Living Standard - /** - * Hints at the type of data that might be entered by the user while editing the element or its contents - * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute - */ - inputmode?: - | 'none' - | 'text' - | 'tel' - | 'url' - | 'email' - | 'numeric' - | 'decimal' - | 'search' - /** - * Specify that a standard HTML element should behave like a defined custom built-in element - * @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is - */ - is?: string -} - -export interface AnchorHTMLAttributes extends HTMLAttributes { - download?: any - href?: string - hreflang?: string - media?: string - ping?: string - rel?: string - target?: string - type?: string - referrerpolicy?: string -} - -export interface AreaHTMLAttributes extends HTMLAttributes { - alt?: string - coords?: string - download?: any - href?: string - hreflang?: string - media?: string - rel?: string - shape?: string - target?: string -} - -export interface AudioHTMLAttributes extends MediaHTMLAttributes {} - -export interface BaseHTMLAttributes extends HTMLAttributes { - href?: string - target?: string -} - -export interface BlockquoteHTMLAttributes extends HTMLAttributes { - cite?: string -} - -export interface ButtonHTMLAttributes extends HTMLAttributes { - autofocus?: Booleanish - disabled?: Booleanish - form?: string - formaction?: string - formenctype?: string - formmethod?: string - formnovalidate?: Booleanish - formtarget?: string - name?: string - type?: 'submit' | 'reset' | 'button' - value?: string | string[] | number -} - -export interface CanvasHTMLAttributes extends HTMLAttributes { - height?: Numberish - width?: Numberish -} - -export interface ColHTMLAttributes extends HTMLAttributes { - span?: Numberish - width?: Numberish -} - -export interface ColgroupHTMLAttributes extends HTMLAttributes { - span?: Numberish -} - -export interface DataHTMLAttributes extends HTMLAttributes { - value?: string | string[] | number -} - -export interface DetailsHTMLAttributes extends HTMLAttributes { - open?: Booleanish -} - -export interface DelHTMLAttributes extends HTMLAttributes { - cite?: string - datetime?: string -} - -export interface DialogHTMLAttributes extends HTMLAttributes { - open?: Booleanish -} - -export interface EmbedHTMLAttributes extends HTMLAttributes { - height?: Numberish - src?: string - type?: string - width?: Numberish -} - -export interface FieldsetHTMLAttributes extends HTMLAttributes { - disabled?: Booleanish - form?: string - name?: string -} - -export interface FormHTMLAttributes extends HTMLAttributes { - acceptcharset?: string - action?: string - autocomplete?: string - enctype?: string - method?: string - name?: string - novalidate?: Booleanish - target?: string -} - -export interface HtmlHTMLAttributes extends HTMLAttributes { - manifest?: string -} - -export interface IframeHTMLAttributes extends HTMLAttributes { - allow?: string - allowfullscreen?: Booleanish - allowtransparency?: Booleanish - frameborder?: Numberish - height?: Numberish - marginheight?: Numberish - marginwidth?: Numberish - name?: string - referrerpolicy?: string - sandbox?: string - scrolling?: string - seamless?: Booleanish - src?: string - srcdoc?: string - width?: Numberish -} - -export interface ImgHTMLAttributes extends HTMLAttributes { - alt?: string - crossorigin?: 'anonymous' | 'use-credentials' | '' - decoding?: 'async' | 'auto' | 'sync' - height?: Numberish - sizes?: string - src?: string - srcset?: string - usemap?: string - width?: Numberish -} - -export interface InsHTMLAttributes extends HTMLAttributes { - cite?: string - datetime?: string -} - -export interface InputHTMLAttributes extends HTMLAttributes { - accept?: string - alt?: string - autocomplete?: string - autofocus?: Booleanish - capture?: boolean | 'user' | 'environment' // https://www.w3.org/tr/html-media-capture/#the-capture-attribute - checked?: Booleanish | any[] | Set // for IDE v-model multi-checkbox support - crossorigin?: string - disabled?: Booleanish - form?: string - formaction?: string - formenctype?: string - formmethod?: string - formnovalidate?: Booleanish - formtarget?: string - height?: Numberish - indeterminate?: boolean - list?: string - max?: Numberish - maxlength?: Numberish - min?: Numberish - minlength?: Numberish - multiple?: Booleanish - name?: string - pattern?: string - placeholder?: string - readonly?: Booleanish - required?: Booleanish - size?: Numberish - src?: string - step?: Numberish - type?: string - value?: any // we support :value to be bound to anything w/ v-model - width?: Numberish -} - -export interface KeygenHTMLAttributes extends HTMLAttributes { - autofocus?: Booleanish - challenge?: string - disabled?: Booleanish - form?: string - keytype?: string - keyparams?: string - name?: string -} - -export interface LabelHTMLAttributes extends HTMLAttributes { - for?: string - form?: string -} - -export interface LiHTMLAttributes extends HTMLAttributes { - value?: string | string[] | number -} - -export interface LinkHTMLAttributes extends HTMLAttributes { - as?: string - crossorigin?: string - href?: string - hreflang?: string - integrity?: string - media?: string - rel?: string - sizes?: string - type?: string -} - -export interface MapHTMLAttributes extends HTMLAttributes { - name?: string -} - -export interface MenuHTMLAttributes extends HTMLAttributes { - type?: string -} - -export interface MediaHTMLAttributes extends HTMLAttributes { - autoplay?: Booleanish - controls?: Booleanish - controlslist?: string - crossorigin?: string - loop?: Booleanish - mediagroup?: string - muted?: Booleanish - playsinline?: Booleanish - preload?: string - src?: string -} - -export interface MetaHTMLAttributes extends HTMLAttributes { - charset?: string - content?: string - httpequiv?: string - name?: string -} - -export interface MeterHTMLAttributes extends HTMLAttributes { - form?: string - high?: Numberish - low?: Numberish - max?: Numberish - min?: Numberish - optimum?: Numberish - value?: string | string[] | number -} - -export interface QuoteHTMLAttributes extends HTMLAttributes { - cite?: string -} - -export interface ObjectHTMLAttributes extends HTMLAttributes { - classid?: string - data?: string - form?: string - height?: Numberish - name?: string - type?: string - usemap?: string - width?: Numberish - wmode?: string -} - -export interface OlHTMLAttributes extends HTMLAttributes { - reversed?: Booleanish - start?: Numberish - type?: '1' | 'a' | 'A' | 'i' | 'I' -} - -export interface OptgroupHTMLAttributes extends HTMLAttributes { - disabled?: Booleanish - label?: string -} - -export interface OptionHTMLAttributes extends HTMLAttributes { - disabled?: Booleanish - label?: string - selected?: Booleanish - value?: any // we support :value to be bound to anything w/ v-model -} - -export interface OutputHTMLAttributes extends HTMLAttributes { - for?: string - form?: string - name?: string -} - -export interface ParamHTMLAttributes extends HTMLAttributes { - name?: string - value?: string | string[] | number -} - -export interface ProgressHTMLAttributes extends HTMLAttributes { - max?: Numberish - value?: string | string[] | number -} - -export interface ScriptHTMLAttributes extends HTMLAttributes { - async?: Booleanish - charset?: string - crossorigin?: string - defer?: Booleanish - integrity?: string - nomodule?: Booleanish - nonce?: string - src?: string - type?: string -} - -export interface SelectHTMLAttributes extends HTMLAttributes { - autocomplete?: string - autofocus?: Booleanish - disabled?: Booleanish - form?: string - multiple?: Booleanish - name?: string - required?: Booleanish - size?: Numberish - value?: any // we support :value to be bound to anything w/ v-model -} - -export interface SourceHTMLAttributes extends HTMLAttributes { - media?: string - sizes?: string - src?: string - srcset?: string - type?: string -} - -export interface StyleHTMLAttributes extends HTMLAttributes { - media?: string - nonce?: string - scoped?: Booleanish - type?: string -} - -export interface TableHTMLAttributes extends HTMLAttributes { - cellpadding?: Numberish - cellspacing?: Numberish - summary?: string -} - -export interface TextareaHTMLAttributes extends HTMLAttributes { - autocomplete?: string - autofocus?: Booleanish - cols?: Numberish - dirname?: string - disabled?: Booleanish - form?: string - maxlength?: Numberish - minlength?: Numberish - name?: string - placeholder?: string - readonly?: boolean - required?: Booleanish - rows?: Numberish - value?: string | string[] | number - wrap?: string -} - -export interface TdHTMLAttributes extends HTMLAttributes { - align?: 'left' | 'center' | 'right' | 'justify' | 'char' - colspan?: Numberish - headers?: string - rowspan?: Numberish - scope?: string - valign?: 'top' | 'middle' | 'bottom' | 'baseline' -} - -export interface ThHTMLAttributes extends HTMLAttributes { - align?: 'left' | 'center' | 'right' | 'justify' | 'char' - colspan?: Numberish - headers?: string - rowspan?: Numberish - scope?: string -} - -export interface TimeHTMLAttributes extends HTMLAttributes { - datetime?: string -} - -export interface TrackHTMLAttributes extends HTMLAttributes { - default?: Booleanish - kind?: string - label?: string - src?: string - srclang?: string -} - -export interface VideoHTMLAttributes extends MediaHTMLAttributes { - height?: Numberish - playsinline?: Booleanish - poster?: string - width?: Numberish - disablePictureInPicture?: Booleanish -} - -export interface WebViewHTMLAttributes extends HTMLAttributes { - allowfullscreen?: Booleanish - allowpopups?: Booleanish - autoFocus?: Booleanish - autosize?: Booleanish - blinkfeatures?: string - disableblinkfeatures?: string - disableguestresize?: Booleanish - disablewebsecurity?: Booleanish - guestinstance?: string - httpreferrer?: string - nodeintegration?: Booleanish - partition?: string - plugins?: Booleanish - preload?: string - src?: string - useragent?: string - webpreferences?: string -} - -export interface SVGAttributes extends AriaAttributes, EventHandlers { - innerHTML?: string - - /** - * SVG Styling Attributes - * @see https://www.w3.org/TR/SVG/styling.html#ElementSpecificStyling - */ - class?: any - style?: string | CSSProperties - - color?: string - height?: Numberish - id?: string - lang?: string - max?: Numberish - media?: string - method?: string - min?: Numberish - name?: string - target?: string - type?: string - width?: Numberish - - // Other HTML properties supported by SVG elements in browsers - role?: string - tabindex?: Numberish - - // SVG Specific attributes - 'accent-height'?: Numberish - accumulate?: 'none' | 'sum' - additive?: 'replace' | 'sum' - 'alignment-baseline'?: - | 'auto' - | 'baseline' - | 'before-edge' - | 'text-before-edge' - | 'middle' - | 'central' - | 'after-edge' - | 'text-after-edge' - | 'ideographic' - | 'alphabetic' - | 'hanging' - | 'mathematical' - | 'inherit' - allowReorder?: 'no' | 'yes' - alphabetic?: Numberish - amplitude?: Numberish - 'arabic-form'?: 'initial' | 'medial' | 'terminal' | 'isolated' - ascent?: Numberish - attributeName?: string - attributeType?: string - autoReverse?: Numberish - azimuth?: Numberish - baseFrequency?: Numberish - 'baseline-shift'?: Numberish - baseProfile?: Numberish - bbox?: Numberish - begin?: Numberish - bias?: Numberish - by?: Numberish - calcMode?: Numberish - 'cap-height'?: Numberish - clip?: Numberish - 'clip-path'?: string - clipPathUnits?: Numberish - 'clip-rule'?: Numberish - 'color-interpolation'?: Numberish - 'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB' | 'inherit' - 'color-profile'?: Numberish - 'color-rendering'?: Numberish - contentScriptType?: Numberish - contentStyleType?: Numberish - cursor?: Numberish - cx?: Numberish - cy?: Numberish - d?: string - decelerate?: Numberish - descent?: Numberish - diffuseConstant?: Numberish - direction?: Numberish - display?: Numberish - divisor?: Numberish - 'dominant-baseline'?: Numberish - dur?: Numberish - dx?: Numberish - dy?: Numberish - edgeMode?: Numberish - elevation?: Numberish - 'enable-background'?: Numberish - end?: Numberish - exponent?: Numberish - externalResourcesRequired?: Numberish - fill?: string - 'fill-opacity'?: Numberish - 'fill-rule'?: 'nonzero' | 'evenodd' | 'inherit' - filter?: string - filterRes?: Numberish - filterUnits?: Numberish - 'flood-color'?: Numberish - 'flood-opacity'?: Numberish - focusable?: Numberish - 'font-family'?: string - 'font-size'?: Numberish - 'font-size-adjust'?: Numberish - 'font-stretch'?: Numberish - 'font-style'?: Numberish - 'font-variant'?: Numberish - 'font-weight'?: Numberish - format?: Numberish - from?: Numberish - fx?: Numberish - fy?: Numberish - g1?: Numberish - g2?: Numberish - 'glyph-name'?: Numberish - 'glyph-orientation-horizontal'?: Numberish - 'glyph-orientation-vertical'?: Numberish - glyphRef?: Numberish - gradientTransform?: string - gradientUnits?: string - hanging?: Numberish - 'horiz-adv-x'?: Numberish - 'horiz-origin-x'?: Numberish - href?: string - ideographic?: Numberish - 'image-rendering'?: Numberish - in2?: Numberish - in?: string - intercept?: Numberish - k1?: Numberish - k2?: Numberish - k3?: Numberish - k4?: Numberish - k?: Numberish - kernelMatrix?: Numberish - kernelUnitLength?: Numberish - kerning?: Numberish - keyPoints?: Numberish - keySplines?: Numberish - keyTimes?: Numberish - lengthAdjust?: Numberish - 'letter-spacing'?: Numberish - 'lighting-color'?: Numberish - limitingConeAngle?: Numberish - local?: Numberish - 'marker-end'?: string - markerHeight?: Numberish - 'marker-mid'?: string - 'marker-start'?: string - markerUnits?: Numberish - markerWidth?: Numberish - mask?: string - maskContentUnits?: Numberish - maskUnits?: Numberish - mathematical?: Numberish - mode?: Numberish - numOctaves?: Numberish - offset?: Numberish - opacity?: Numberish - operator?: Numberish - order?: Numberish - orient?: Numberish - orientation?: Numberish - origin?: Numberish - overflow?: Numberish - 'overline-position'?: Numberish - 'overline-thickness'?: Numberish - 'paint-order'?: Numberish - 'panose-1'?: Numberish - pathLength?: Numberish - patternContentUnits?: string - patternTransform?: Numberish - patternUnits?: string - 'pointer-events'?: Numberish - points?: string - pointsAtX?: Numberish - pointsAtY?: Numberish - pointsAtZ?: Numberish - preserveAlpha?: Numberish - preserveAspectRatio?: string - primitiveUnits?: Numberish - r?: Numberish - radius?: Numberish - refX?: Numberish - refY?: Numberish - renderingIntent?: Numberish - repeatCount?: Numberish - repeatDur?: Numberish - requiredExtensions?: Numberish - requiredFeatures?: Numberish - restart?: Numberish - result?: string - rotate?: Numberish - rx?: Numberish - ry?: Numberish - scale?: Numberish - seed?: Numberish - 'shape-rendering'?: Numberish - slope?: Numberish - spacing?: Numberish - specularConstant?: Numberish - specularExponent?: Numberish - speed?: Numberish - spreadMethod?: string - startOffset?: Numberish - stdDeviation?: Numberish - stemh?: Numberish - stemv?: Numberish - stitchTiles?: Numberish - 'stop-color'?: string - 'stop-opacity'?: Numberish - 'strikethrough-position'?: Numberish - 'strikethrough-thickness'?: Numberish - string?: Numberish - stroke?: string - 'stroke-dasharray'?: Numberish - 'stroke-dashoffset'?: Numberish - 'stroke-linecap'?: 'butt' | 'round' | 'square' | 'inherit' - 'stroke-linejoin'?: 'miter' | 'round' | 'bevel' | 'inherit' - 'stroke-miterlimit'?: Numberish - 'stroke-opacity'?: Numberish - 'stroke-width'?: Numberish - surfaceScale?: Numberish - systemLanguage?: Numberish - tableValues?: Numberish - targetX?: Numberish - targetY?: Numberish - 'text-anchor'?: string - 'text-decoration'?: Numberish - textLength?: Numberish - 'text-rendering'?: Numberish - to?: Numberish - transform?: string - u1?: Numberish - u2?: Numberish - 'underline-position'?: Numberish - 'underline-thickness'?: Numberish - unicode?: Numberish - 'unicode-bidi'?: Numberish - 'unicode-range'?: Numberish - 'unitsPer-em'?: Numberish - 'v-alphabetic'?: Numberish - values?: string - 'vector-effect'?: Numberish - version?: string - 'vert-adv-y'?: Numberish - 'vert-origin-x'?: Numberish - 'vert-origin-y'?: Numberish - 'v-hanging'?: Numberish - 'v-ideographic'?: Numberish - viewBox?: string - viewTarget?: Numberish - visibility?: Numberish - 'v-mathematical'?: Numberish - widths?: Numberish - 'word-spacing'?: Numberish - 'writing-mode'?: Numberish - x1?: Numberish - x2?: Numberish - x?: Numberish - xChannelSelector?: string - 'x-height'?: Numberish - xlinkActuate?: string - xlinkArcrole?: string - xlinkHref?: string - xlinkRole?: string - xlinkShow?: string - xlinkTitle?: string - xlinkType?: string - xmlns?: string - y1?: Numberish - y2?: Numberish - y?: Numberish - yChannelSelector?: string - z?: Numberish - zoomAndPan?: string -} - -interface IntrinsicElementAttributes { - a: AnchorHTMLAttributes - abbr: HTMLAttributes - address: HTMLAttributes - area: AreaHTMLAttributes - article: HTMLAttributes - aside: HTMLAttributes - audio: AudioHTMLAttributes - b: HTMLAttributes - base: BaseHTMLAttributes - bdi: HTMLAttributes - bdo: HTMLAttributes - blockquote: BlockquoteHTMLAttributes - body: HTMLAttributes - br: HTMLAttributes - button: ButtonHTMLAttributes - canvas: CanvasHTMLAttributes - caption: HTMLAttributes - cite: HTMLAttributes - code: HTMLAttributes - col: ColHTMLAttributes - colgroup: ColgroupHTMLAttributes - data: DataHTMLAttributes - datalist: HTMLAttributes - dd: HTMLAttributes - del: DelHTMLAttributes - details: DetailsHTMLAttributes - dfn: HTMLAttributes - dialog: DialogHTMLAttributes - div: HTMLAttributes - dl: HTMLAttributes - dt: HTMLAttributes - em: HTMLAttributes - embed: EmbedHTMLAttributes - fieldset: FieldsetHTMLAttributes - figcaption: HTMLAttributes - figure: HTMLAttributes - footer: HTMLAttributes - form: FormHTMLAttributes - h1: HTMLAttributes - h2: HTMLAttributes - h3: HTMLAttributes - h4: HTMLAttributes - h5: HTMLAttributes - h6: HTMLAttributes - head: HTMLAttributes - header: HTMLAttributes - hgroup: HTMLAttributes - hr: HTMLAttributes - html: HtmlHTMLAttributes - i: HTMLAttributes - iframe: IframeHTMLAttributes - img: ImgHTMLAttributes - input: InputHTMLAttributes - ins: InsHTMLAttributes - kbd: HTMLAttributes - keygen: KeygenHTMLAttributes - label: LabelHTMLAttributes - legend: HTMLAttributes - li: LiHTMLAttributes - link: LinkHTMLAttributes - main: HTMLAttributes - map: MapHTMLAttributes - mark: HTMLAttributes - menu: MenuHTMLAttributes - meta: MetaHTMLAttributes - meter: MeterHTMLAttributes - nav: HTMLAttributes - noindex: HTMLAttributes - noscript: HTMLAttributes - object: ObjectHTMLAttributes - ol: OlHTMLAttributes - optgroup: OptgroupHTMLAttributes - option: OptionHTMLAttributes - output: OutputHTMLAttributes - p: HTMLAttributes - param: ParamHTMLAttributes - picture: HTMLAttributes - pre: HTMLAttributes - progress: ProgressHTMLAttributes - q: QuoteHTMLAttributes - rp: HTMLAttributes - rt: HTMLAttributes - ruby: HTMLAttributes - s: HTMLAttributes - samp: HTMLAttributes - script: ScriptHTMLAttributes - section: HTMLAttributes - select: SelectHTMLAttributes - small: HTMLAttributes - source: SourceHTMLAttributes - span: HTMLAttributes - strong: HTMLAttributes - style: StyleHTMLAttributes - sub: HTMLAttributes - summary: HTMLAttributes - sup: HTMLAttributes - table: TableHTMLAttributes - template: HTMLAttributes - tbody: HTMLAttributes - td: TdHTMLAttributes - textarea: TextareaHTMLAttributes - tfoot: HTMLAttributes - th: ThHTMLAttributes - thead: HTMLAttributes - time: TimeHTMLAttributes - title: HTMLAttributes - tr: HTMLAttributes - track: TrackHTMLAttributes - u: HTMLAttributes - ul: HTMLAttributes - var: HTMLAttributes - video: VideoHTMLAttributes - wbr: HTMLAttributes - webview: WebViewHTMLAttributes - - // SVG - svg: SVGAttributes - - animate: SVGAttributes - animateMotion: SVGAttributes - animateTransform: SVGAttributes - circle: SVGAttributes - clipPath: SVGAttributes - defs: SVGAttributes - desc: SVGAttributes - ellipse: SVGAttributes - feBlend: SVGAttributes - feColorMatrix: SVGAttributes - feComponentTransfer: SVGAttributes - feComposite: SVGAttributes - feConvolveMatrix: SVGAttributes - feDiffuseLighting: SVGAttributes - feDisplacementMap: SVGAttributes - feDistantLight: SVGAttributes - feDropShadow: SVGAttributes - feFlood: SVGAttributes - feFuncA: SVGAttributes - feFuncB: SVGAttributes - feFuncG: SVGAttributes - feFuncR: SVGAttributes - feGaussianBlur: SVGAttributes - feImage: SVGAttributes - feMerge: SVGAttributes - feMergeNode: SVGAttributes - feMorphology: SVGAttributes - feOffset: SVGAttributes - fePointLight: SVGAttributes - feSpecularLighting: SVGAttributes - feSpotLight: SVGAttributes - feTile: SVGAttributes - feTurbulence: SVGAttributes - filter: SVGAttributes - foreignObject: SVGAttributes - g: SVGAttributes - image: SVGAttributes - line: SVGAttributes - linearGradient: SVGAttributes - marker: SVGAttributes - mask: SVGAttributes - metadata: SVGAttributes - mpath: SVGAttributes - path: SVGAttributes - pattern: SVGAttributes - polygon: SVGAttributes - polyline: SVGAttributes - radialGradient: SVGAttributes - rect: SVGAttributes - stop: SVGAttributes - switch: SVGAttributes - symbol: SVGAttributes - text: SVGAttributes - textPath: SVGAttributes - tspan: SVGAttributes - use: SVGAttributes - view: SVGAttributes -} - -export interface Events { - // clipboard events - onCopy: ClipboardEvent - onCut: ClipboardEvent - onPaste: ClipboardEvent - - // composition events - onCompositionend: CompositionEvent - onCompositionstart: CompositionEvent - onCompositionupdate: CompositionEvent - - // drag drop events - onDrag: DragEvent - onDragend: DragEvent - onDragenter: DragEvent - onDragexit: DragEvent - onDragleave: DragEvent - onDragover: DragEvent - onDragstart: DragEvent - onDrop: DragEvent - - // focus events - onFocus: FocusEvent - onFocusin: FocusEvent - onFocusout: FocusEvent - onBlur: FocusEvent - - // form events - onChange: Event - onBeforeinput: Event - onInput: Event - onReset: Event - onSubmit: Event - onInvalid: Event - - // image events - onLoad: Event - onError: Event - - // keyboard events - onKeydown: KeyboardEvent - onKeypress: KeyboardEvent - onKeyup: KeyboardEvent - - // mouse events - onAuxclick: MouseEvent - onClick: MouseEvent - onContextmenu: MouseEvent - onDblclick: MouseEvent - onMousedown: MouseEvent - onMouseenter: MouseEvent - onMouseleave: MouseEvent - onMousemove: MouseEvent - onMouseout: MouseEvent - onMouseover: MouseEvent - onMouseup: MouseEvent - - // media events - onAbort: Event - onCanplay: Event - onCanplaythrough: Event - onDurationchange: Event - onEmptied: Event - onEncrypted: Event - onEnded: Event - onLoadeddata: Event - onLoadedmetadata: Event - onLoadstart: Event - onPause: Event - onPlay: Event - onPlaying: Event - onProgress: Event - onRatechange: Event - onSeeked: Event - onSeeking: Event - onStalled: Event - onSuspend: Event - onTimeupdate: Event - onVolumechange: Event - onWaiting: Event - - // selection events - onSelect: Event - - // UI events - onScroll: UIEvent - - // touch events - onTouchcancel: TouchEvent - onTouchend: TouchEvent - onTouchmove: TouchEvent - onTouchstart: TouchEvent - - // pointer events - onPointerdown: PointerEvent - onPointermove: PointerEvent - onPointerup: PointerEvent - onPointercancel: PointerEvent - onPointerenter: PointerEvent - onPointerleave: PointerEvent - onPointerover: PointerEvent - onPointerout: PointerEvent - - // wheel events - onWheel: WheelEvent - - // animation events - onAnimationstart: AnimationEvent - onAnimationend: AnimationEvent - onAnimationiteration: AnimationEvent - - // transition events - onTransitionend: TransitionEvent - onTransitionstart: TransitionEvent -} - -type EventHandlers = { - [K in keyof E]?: E[K] extends (...args: any) => any ? E[K] : (payload: E[K]) => void -} - -// use namespace import to avoid collision with generated types which use -// named imports. -import * as RuntimeCore from '@vue/runtime-core' - -type ReservedProps = { - key?: string | number | symbol - ref?: RuntimeCore.VNodeRef - ref_for?: boolean - ref_key?: string -} - -type ElementAttrs = T & ReservedProps - -type NativeElements = { - [K in keyof IntrinsicElementAttributes]: ElementAttrs< - IntrinsicElementAttributes[K] - > -} - -declare global { - namespace JSX { - interface Element extends VNode {} - interface ElementClass { - $props: {} - } - interface ElementAttributesProperty { - $props: {} - } - interface IntrinsicElements extends NativeElements { - // allow arbitrary elements - // @ts-ignore suppress ts:2374 = Duplicate string index signature. - [name: string]: any - } - interface IntrinsicAttributes extends ReservedProps {} - } -} - -// suppress ts:2669 export {} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 077a04e1f98..afb6f3f875e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -182,6 +182,14 @@ importers: '@vue/compiler-dom': link:../compiler-dom '@vue/shared': link:../shared + packages/jsx: + specifiers: + '@vue/runtime-core': 3.2.44 + csstype: ^3.1.1 + dependencies: + '@vue/runtime-core': link:../runtime-core + csstype: 3.1.1 + packages/reactivity: specifiers: '@vue/shared': 3.2.44 @@ -2460,6 +2468,10 @@ packages: resolution: {integrity: sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==} dev: true + /csstype/3.1.1: + resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==} + dev: false + /dargs/7.0.0: resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==} engines: {node: '>=8'} diff --git a/test-dts/index.d.ts b/test-dts/index.d.ts index 0662a6447e6..55238956200 100644 --- a/test-dts/index.d.ts +++ b/test-dts/index.d.ts @@ -1,6 +1,7 @@ // This directory contains a number of d.ts assertions // use \@ts-expect-error where errors are expected. +import '../packages/jsx/register' export * from '@vue/runtime-dom' export function describe(_name: string, _fn: () => void): void diff --git a/test-dts/tsx-namespaced.test-d.tsx b/test-dts/tsx-namespaced.test-d.tsx new file mode 100644 index 00000000000..dc2c2429d2a --- /dev/null +++ b/test-dts/tsx-namespaced.test-d.tsx @@ -0,0 +1,69 @@ +/** @jsx h */ +import { h } from '../packages/jsx' +// TSX w/ defineComponent is tested in defineComponent.test-d.tsx +import { + KeepAlive, + Suspense, + Fragment, + Teleport, + expectError, + expectType, + VNode +} from './index' + +expectType(
) +expectType(
) +expectType(
) +expectType() + +// @ts-expect-error style css property validation +expectError(
) + +// allow array styles and nested array styles +expectType(
) +expectType( +
+) + +// @ts-expect-error unknown prop +expectError(
) + +// allow key/ref on arbitrary element +expectType(
) +expectType(
) + +expectType( + { + // infer correct event type + expectType(e.target) + }} + /> +) + +// built-in types +expectType() +expectType() + +expectType() +expectType() + +// @ts-expect-error +expectError() +// @ts-expect-error +expectError() + +// KeepAlive +expectType() +expectType() +// @ts-expect-error +expectError() + +// Suspense +expectType() +expectType() +expectType( + {}} onFallback={() => {}} onPending={() => {}} /> +) +// @ts-expect-error +expectError() From f1f952768dce89018a0782ea65399452b5a32ccb Mon Sep 17 00:00:00 2001 From: Rahul Kadyan Date: Thu, 10 Nov 2022 18:57:03 -0800 Subject: [PATCH 2/5] types: register jsx types in runtime-dom to avoid breaking change --- packages/runtime-dom/package.json | 1 + packages/runtime-dom/types/jsx.d.ts | 2 +- pnpm-lock.yaml | 2 ++ test-dts/index.d.ts | 16 +++++++++++++++- 4 files changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/runtime-dom/package.json b/packages/runtime-dom/package.json index bad5c894733..a1a37968dbc 100644 --- a/packages/runtime-dom/package.json +++ b/packages/runtime-dom/package.json @@ -35,6 +35,7 @@ }, "homepage": "https://github.com/vuejs/core/tree/main/packages/runtime-dom#readme", "dependencies": { + "@vue/jsx": "3.2.44", "@vue/shared": "3.2.44", "@vue/runtime-core": "3.2.44", "csstype": "^2.6.8" diff --git a/packages/runtime-dom/types/jsx.d.ts b/packages/runtime-dom/types/jsx.d.ts index 336ce12bb91..5ab31fd89e8 100644 --- a/packages/runtime-dom/types/jsx.d.ts +++ b/packages/runtime-dom/types/jsx.d.ts @@ -1 +1 @@ -export {} +import '@vue/jsx/register' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index afb6f3f875e..74d0a1e5920 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -225,10 +225,12 @@ importers: packages/runtime-dom: specifiers: + '@vue/jsx': 3.2.44 '@vue/runtime-core': 3.2.44 '@vue/shared': 3.2.44 csstype: ^2.6.8 dependencies: + '@vue/jsx': link:../jsx '@vue/runtime-core': link:../runtime-core '@vue/shared': link:../shared csstype: 2.6.19 diff --git a/test-dts/index.d.ts b/test-dts/index.d.ts index 55238956200..57a6371f90f 100644 --- a/test-dts/index.d.ts +++ b/test-dts/index.d.ts @@ -1,7 +1,6 @@ // This directory contains a number of d.ts assertions // use \@ts-expect-error where errors are expected. -import '../packages/jsx/register' export * from '@vue/runtime-dom' export function describe(_name: string, _fn: () => void): void @@ -18,3 +17,18 @@ export type IsUnion = ( : true export type IsAny = 0 extends 1 & T ? true : false + +import { h } from '@vue/jsx' +// Duplicating @vue/jsx/register here to be able to run dts tests +// without building types. +declare global { + namespace JSX { + interface Element extends h.JSX.Element {} + interface ElementClass extends h.JSX.ElementClass {} + interface ElementAttributesProperty + extends h.JSX.ElementAttributesProperty {} + interface IntrinsicElements extends h.JSX.IntrinsicElements {} + interface IntrinsicAttributes extends h.JSX.IntrinsicAttributes {} + interface ElementChildrenAttribute extends h.JSX.ElementChildrenAttribute {} + } +} From 6df268dfa5bdf03b0aac0c6287882a4582c4656a Mon Sep 17 00:00:00 2001 From: Rahul Kadyan Date: Thu, 10 Nov 2022 19:02:20 -0800 Subject: [PATCH 3/5] test: use package name --- test-dts/tsx-namespaced.test-d.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test-dts/tsx-namespaced.test-d.tsx b/test-dts/tsx-namespaced.test-d.tsx index dc2c2429d2a..ff6bfbfa41c 100644 --- a/test-dts/tsx-namespaced.test-d.tsx +++ b/test-dts/tsx-namespaced.test-d.tsx @@ -1,5 +1,5 @@ /** @jsx h */ -import { h } from '../packages/jsx' +import { h } from '@vue/jsx' // TSX w/ defineComponent is tested in defineComponent.test-d.tsx import { KeepAlive, From b93f2b034edf0a8ce6291cf5460568d6142a9b99 Mon Sep 17 00:00:00 2001 From: Rahul Kadyan Date: Thu, 10 Nov 2022 19:07:54 -0800 Subject: [PATCH 4/5] test: build jsx package before running dts tests --- package.json | 2 +- test-dts/index.d.ts | 15 --------------- 2 files changed, 1 insertion(+), 16 deletions(-) diff --git a/package.json b/package.json index 1bc00042c53..ef14ff629f2 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "test": "run-s \"test-unit {@}\" \"test-e2e {@}\"", "test-unit": "jest --filter ./scripts/filter-unit.js", "test-e2e": "node scripts/build.js vue -f global -d && jest --filter ./scripts/filter-e2e.js --runInBand", - "test-dts": "node scripts/build.js shared reactivity runtime-core runtime-dom -dt -f esm-bundler && npm run test-dts-only", + "test-dts": "node scripts/build.js shared reactivity runtime-core jsx runtime-dom -dt -f esm-bundler && npm run test-dts-only", "test-dts-only": "tsc -p ./test-dts/tsconfig.json && tsc -p ./test-dts/tsconfig.build.json", "test-coverage": "node scripts/build.js vue -f global -d && jest --runInBand --coverage --bail", "release": "node scripts/release.js", diff --git a/test-dts/index.d.ts b/test-dts/index.d.ts index 57a6371f90f..0662a6447e6 100644 --- a/test-dts/index.d.ts +++ b/test-dts/index.d.ts @@ -17,18 +17,3 @@ export type IsUnion = ( : true export type IsAny = 0 extends 1 & T ? true : false - -import { h } from '@vue/jsx' -// Duplicating @vue/jsx/register here to be able to run dts tests -// without building types. -declare global { - namespace JSX { - interface Element extends h.JSX.Element {} - interface ElementClass extends h.JSX.ElementClass {} - interface ElementAttributesProperty - extends h.JSX.ElementAttributesProperty {} - interface IntrinsicElements extends h.JSX.IntrinsicElements {} - interface IntrinsicAttributes extends h.JSX.IntrinsicAttributes {} - interface ElementChildrenAttribute extends h.JSX.ElementChildrenAttribute {} - } -} From 366204933374414a46c1bf6f331ca4ae1d5915f5 Mon Sep 17 00:00:00 2001 From: Rahul Kadyan Date: Thu, 10 Nov 2022 19:20:46 -0800 Subject: [PATCH 5/5] test: use relative path as alias is not working --- test-dts/tsx-namespaced.test-d.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test-dts/tsx-namespaced.test-d.tsx b/test-dts/tsx-namespaced.test-d.tsx index ff6bfbfa41c..dc2c2429d2a 100644 --- a/test-dts/tsx-namespaced.test-d.tsx +++ b/test-dts/tsx-namespaced.test-d.tsx @@ -1,5 +1,5 @@ /** @jsx h */ -import { h } from '@vue/jsx' +import { h } from '../packages/jsx' // TSX w/ defineComponent is tested in defineComponent.test-d.tsx import { KeepAlive,