From 4fd17932d42bddd6050c3169891d8dd66d0b21dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Fri, 25 Oct 2019 17:09:59 +0200 Subject: [PATCH 1/6] fix: handle more edge cases in `looseEqual()` --- packages/runtime-dom/src/directives/vModel.ts | 71 +++++++++++-------- packages/shared/src/index.ts | 1 + 2 files changed, 42 insertions(+), 30 deletions(-) diff --git a/packages/runtime-dom/src/directives/vModel.ts b/packages/runtime-dom/src/directives/vModel.ts index 20dfb9189e2..d43d182a345 100644 --- a/packages/runtime-dom/src/directives/vModel.ts +++ b/packages/runtime-dom/src/directives/vModel.ts @@ -5,7 +5,7 @@ import { warn } from '@vue/runtime-core' import { addEventListener } from '../modules/events' -import { isArray, isObject } from '@vue/shared' +import { isArray, isDate, isObject } from '@vue/shared' const getModelAssigner = (vnode: VNode): ((value: any) => void) => vnode.props!['onUpdate:modelValue'] @@ -177,39 +177,50 @@ function setSelected(el: HTMLSelectElement, value: any) { function looseEqual(a: any, b: any): boolean { if (a === b) return true - const isObjectA = isObject(a) - const isObjectB = isObject(b) - if (isObjectA && isObjectB) { - try { - const isArrayA = isArray(a) - const isArrayB = isArray(b) - if (isArrayA && isArrayB) { - return ( - a.length === b.length && - a.every((e: any, i: any) => looseEqual(e, b[i])) - ) - } else if (a instanceof Date && b instanceof Date) { - return a.getTime() === b.getTime() - } else if (!isArrayA && !isArrayB) { - const keysA = Object.keys(a) - const keysB = Object.keys(b) - return ( - keysA.length === keysB.length && - keysA.every(key => looseEqual(a[key], b[key])) - ) - } else { - /* istanbul ignore next */ + let aValidType = isDate(a) + let bValidType = isDate(b) + if (aValidType || bValidType) { + return aValidType && bValidType ? a.getTime() === b.getTime() : false + } + aValidType = Array.isArray(a) + bValidType = Array.isArray(b) + if (aValidType || bValidType) { + return aValidType && bValidType ? looseCompareArrays(a, b) : false + } + aValidType = isObject(a) + bValidType = isObject(b) + if (aValidType || bValidType) { + /* istanbul ignore if: this if will probably never be called */ + if (!aValidType || !bValidType) { + return false + } + const aKeysCount = Object.keys(a).length + const bKeysCount = Object.keys(b).length + if (aKeysCount !== bKeysCount) { + return false + } + for (const key in a) { + const aHasKey = a.hasOwnProperty(key) + const bHasKey = b.hasOwnProperty(key) + if ( + (aHasKey && !bHasKey) || + (!aHasKey && bHasKey) || + !looseEqual(a[key], b[key]) + ) { return false } - } catch (e) { - /* istanbul ignore next */ - return false } - } else if (!isObjectA && !isObjectB) { - return String(a) === String(b) - } else { - return false } + return String(a) === String(b) +} + +function looseCompareArrays(a: any[], b: any[]) { + if (a.length !== b.length) return false + let equal = true + for (let i = 0; equal && i < a.length; i++) { + equal = looseEqual(a[i], b[i]) + } + return equal } function looseIndexOf(arr: any[], val: any): number { diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts index 5c7cc6a2ed8..f2e610f885d 100644 --- a/packages/shared/src/index.ts +++ b/packages/shared/src/index.ts @@ -33,6 +33,7 @@ export const hasOwn = ( ): key is keyof typeof val => hasOwnProperty.call(val, key) export const isArray = Array.isArray +export const isDate = (val: unknown): val is Date => val instanceof Date export const isFunction = (val: unknown): val is Function => typeof val === 'function' export const isString = (val: unknown): val is string => typeof val === 'string' From 11359c30a77aeb33b61cfc2d0fc4256354fbdb1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 26 Feb 2020 23:25:35 +0100 Subject: [PATCH 2/6] feat: add test for `loseEqual()` util --- packages/shared/__tests__/looseEqual.spec.ts | 222 +++++++++++++++++++ 1 file changed, 222 insertions(+) create mode 100644 packages/shared/__tests__/looseEqual.spec.ts diff --git a/packages/shared/__tests__/looseEqual.spec.ts b/packages/shared/__tests__/looseEqual.spec.ts new file mode 100644 index 00000000000..7588cca1e72 --- /dev/null +++ b/packages/shared/__tests__/looseEqual.spec.ts @@ -0,0 +1,222 @@ +import { looseEqual } from '../src' + +describe('utils/looseEqual', () => { + it('compares booleans correctly', () => { + expect(looseEqual(true, true)).toBe(true) + expect(looseEqual(false, false)).toBe(true) + expect(looseEqual(true, false)).toBe(false) + expect(looseEqual(true, true)).toBe(true) + expect(looseEqual(true, 1)).toBe(false) + expect(looseEqual(false, 0)).toBe(false) + }) + + it('compares strings correctly', () => { + const text = 'Lorem ipsum' + const number = 1 + const bool = true + + expect(looseEqual(text, text)).toBe(true) + expect(looseEqual(text, text.slice(0, -1))).toBe(false) + expect(looseEqual(String(number), number)).toBe(true) + expect(looseEqual(String(bool), bool)).toBe(true) + }) + + it('compares numbers correctly', () => { + const number = 100 + const decimal = 2.5 + const multiplier = 1.0000001 + + expect(looseEqual(number, number)).toBe(true) + expect(looseEqual(number, number - 1)).toBe(false) + expect(looseEqual(decimal, decimal)).toBe(true) + expect(looseEqual(decimal, decimal * multiplier)).toBe(false) + expect(looseEqual(number, number * multiplier)).toBe(false) + expect(looseEqual(multiplier, multiplier)).toBe(true) + }) + + it('compares dates correctly', () => { + const date1 = new Date(2019, 1, 2, 3, 4, 5, 6) + const date2 = new Date(2019, 1, 2, 3, 4, 5, 6) + const date3 = new Date(2019, 1, 2, 3, 4, 5, 7) + const date4 = new Date(2219, 1, 2, 3, 4, 5, 6) + + // Identical date object references + expect(looseEqual(date1, date1)).toBe(true) + // Different date references with identical values + expect(looseEqual(date1, date2)).toBe(true) + // Dates with slightly different time (ms) + expect(looseEqual(date1, date3)).toBe(false) + // Dates with different year + expect(looseEqual(date1, date4)).toBe(false) + }) + + it('compares files correctly', () => { + const date1 = new Date(2019, 1, 2, 3, 4, 5, 6) + const date2 = new Date(2019, 1, 2, 3, 4, 5, 7) + const file1 = new File([''], 'filename.txt', { + type: 'text/plain', + lastModified: date1.getTime() + }) + const file2 = new File([''], 'filename.txt', { + type: 'text/plain', + lastModified: date1.getTime() + }) + const file3 = new File([''], 'filename.txt', { + type: 'text/plain', + lastModified: date2.getTime() + }) + const file4 = new File([''], 'filename.csv', { + type: 'text/csv', + lastModified: date1.getTime() + }) + const file5 = new File(['abcdef'], 'filename.txt', { + type: 'text/plain', + lastModified: date1.getTime() + }) + const file6 = new File(['12345'], 'filename.txt', { + type: 'text/plain', + lastModified: date1.getTime() + }) + + // Identical file object references + expect(looseEqual(file1, file1)).toBe(true) + // Different file references with identical values + expect(looseEqual(file1, file2)).toBe(true) + // Files with slightly different dates + expect(looseEqual(file1, file3)).toBe(false) + // Two different file types + expect(looseEqual(file1, file4)).toBe(false) + // Two files with same name, modified date, but different content + expect(looseEqual(file5, file6)).toBe(false) + }) + + it('compares arrays correctly', () => { + const arr1 = [1, 2, 3, 4] + const arr2 = [1, 2, 3, '4'] + const arr3 = [1, 2, 3, 4, 5] + const arr4 = [1, 2, 3, 4, { a: 5 }] + + // Identical array references + expect(looseEqual(arr1, arr1)).toBe(true) + // Different array references with identical values + expect(looseEqual(arr1, arr1.slice())).toBe(true) + expect(looseEqual(arr4, arr4.slice())).toBe(true) + // Array with one value different (loose) + expect(looseEqual(arr1, arr2)).toBe(true) + // Array with one value different + expect(looseEqual(arr3, arr4)).toBe(false) + // Arrays with different lengths + expect(looseEqual(arr1, arr3)).toBe(false) + // Arrays with values in different order + expect(looseEqual(arr1, arr1.slice().reverse())).toBe(false) + }) + + it('compares RegExp correctly', () => { + const rx1 = /^foo$/ + const rx2 = /^foo$/ + const rx3 = /^bar$/ + const rx4 = /^bar$/i + + // Identical regex references + expect(looseEqual(rx1, rx1)).toBe(true) + // Different regex references with identical values + expect(looseEqual(rx1, rx2)).toBe(true) + // Different regex + expect(looseEqual(rx1, rx3)).toBe(false) + // Same regex with different options + expect(looseEqual(rx3, rx4)).toBe(false) + }) + + it('compares objects correctly', () => { + const obj1 = { foo: 'bar' } + const obj2 = { foo: 'bar1' } + const obj3 = { a: 1, b: 2, c: 3 } + const obj4 = { b: 2, c: 3, a: 1 } + const obj5 = { ...obj4, z: 999 } + const nestedObj1 = { ...obj1, bar: [{ ...obj1 }, { ...obj1 }] } + const nestedObj2 = { ...obj1, bar: [{ ...obj1 }, { ...obj2 }] } + + // Identical object references + expect(looseEqual(obj1, obj1)).toBe(true) + // Two objects with identical keys/values + expect(looseEqual(obj1, { ...obj1 })).toBe(true) + // Different key values + expect(looseEqual(obj1, obj2)).toBe(false) + // Keys in different orders + expect(looseEqual(obj3, obj4)).toBe(true) + // One object has additional key + expect(looseEqual(obj4, obj5)).toBe(false) + // Identical object references with nested array + expect(looseEqual(nestedObj1, nestedObj1)).toBe(true) + // Identical object definitions with nested array + expect(looseEqual(nestedObj1, { ...nestedObj1 })).toBe(true) + // Object definitions with nested array (which has different order) + expect(looseEqual(nestedObj1, nestedObj2)).toBe(false) + }) + + it('compares different types correctly', () => { + const obj1 = {} + const obj2 = { a: 1 } + const obj3 = { 0: 0, 1: 1, 2: 2 } + const arr1: any[] = [] + const arr2 = [1] + const arr3 = [0, 1, 2] + const date1 = new Date(2019, 1, 2, 3, 4, 5, 6) + const file1 = new File([''], 'filename.txt', { + type: 'text/plain', + lastModified: date1.getTime() + }) + + expect(looseEqual(123, '123')).toBe(true) + expect(looseEqual(123, new Date(123))).toBe(false) + expect(looseEqual(`123`, new Date(123))).toBe(false) + expect(looseEqual([1, 2, 3], '1,2,3')).toBe(false) + expect(looseEqual(obj1, arr1)).toBe(false) + expect(looseEqual(obj2, arr2)).toBe(false) + expect(looseEqual(obj1, '[object Object]')).toBe(false) + expect(looseEqual(arr1, '[object Array]')).toBe(false) + expect(looseEqual(obj1, date1)).toBe(false) + expect(looseEqual(obj2, date1)).toBe(false) + expect(looseEqual(arr1, date1)).toBe(false) + expect(looseEqual(arr2, date1)).toBe(false) + expect(looseEqual(obj2, file1)).toBe(false) + expect(looseEqual(arr2, file1)).toBe(false) + expect(looseEqual(date1, file1)).toBe(false) + // Special case where an object's keys are the same as keys (indexes) of an array + expect(looseEqual(obj3, arr3)).toBe(false) + }) + + it('compares null and undefined values correctly', () => { + expect(looseEqual(null, null)).toBe(true) + expect(looseEqual(undefined, undefined)).toBe(true) + expect(looseEqual(void 0, undefined)).toBe(true) + expect(looseEqual(null, undefined)).toBe(false) + expect(looseEqual(null, void 0)).toBe(false) + expect(looseEqual(null, '')).toBe(false) + expect(looseEqual(null, false)).toBe(false) + expect(looseEqual(undefined, false)).toBe(false) + }) + + it('compares sparse arrays correctly', () => { + // The following arrays all have a length of 3 + // But the first two are "sparse" + const arr1 = [] + arr1[2] = true + const arr2 = [] + arr2[2] = true + const arr3 = [false, false, true] + const arr4 = [undefined, undefined, true] + // This one is also sparse (missing index 1) + const arr5 = [] + arr5[0] = arr5[2] = true + + expect(looseEqual(arr1, arr2)).toBe(true) + expect(looseEqual(arr2, arr1)).toBe(true) + expect(looseEqual(arr1, arr3)).toBe(false) + expect(looseEqual(arr3, arr1)).toBe(false) + expect(looseEqual(arr1, arr4)).toBe(true) + expect(looseEqual(arr4, arr1)).toBe(true) + expect(looseEqual(arr1, arr5)).toBe(false) + expect(looseEqual(arr5, arr1)).toBe(false) + }) +}) From 4a22e9ad53b8c5801687710aeac601f5094875c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 26 Feb 2020 23:27:53 +0100 Subject: [PATCH 3/6] fix: reset file to head --- packages/runtime-dom/jsx.d.ts | 936 +++++++--------------------------- 1 file changed, 181 insertions(+), 755 deletions(-) diff --git a/packages/runtime-dom/jsx.d.ts b/packages/runtime-dom/jsx.d.ts index 8748c4f661f..79b7a4508ef 100644 --- a/packages/runtime-dom/jsx.d.ts +++ b/packages/runtime-dom/jsx.d.ts @@ -1,336 +1,57 @@ -import { Ref, ComponentPublicInstance } from '@vue/runtime-core' - -// This code is based on react definition in DefinitelyTyped published under the MIT license. +// This code is based on https://github.com/wonderful-panda/vue-tsx-support +// published under the MIT license. +// Copyright by @wonderful-panda +// +// which is in turn based on the react definition in DefinitelyTyped +// published under the MIT license. // Repository: https://github.com/DefinitelyTyped/DefinitelyTyped -// Path in the repository: types/react/index.d.ts +// Path in the repository: types/react/v15/index.d.ts // // Copyrights of original definition are: +// Asana // AssureSign // Microsoft -// John Reilly +// John Reilly // Benoit Benezech // Patricio Zavolinsky // Digiguru // Eric Anderson +// Albert Kurniawan +// Tanguy Krotoff // 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 * as CSS from 'csstype' - -export interface CSSProperties extends CSS.Properties { - /** - * 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 - */ -} - -type Booleanish = boolean | 'true' | 'false' - -// 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'?: boolean | 'false' | 'true' - /** - * 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'?: boolean | 'false' | 'true' - /** - * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. - * @see aria-pressed @see aria-selected. - */ - 'aria-checked'?: boolean | 'false' | 'mixed' | 'true' - /** - * Defines the total number of columns in a table, grid, or treegrid. - * @see aria-colindex. - */ - 'aria-colcount'?: number - /** - * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. - * @see aria-colcount @see aria-colspan. - */ - 'aria-colindex'?: number - /** - * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. - * @see aria-colindex @see aria-rowspan. - */ - 'aria-colspan'?: number - /** - * 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'?: - | boolean - | 'false' - | 'true' - | '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'?: boolean | 'false' | 'true' - /** - * 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'?: boolean | 'false' | 'true' - /** - * 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'?: boolean | 'false' | 'true' - /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ - 'aria-haspopup'?: - | boolean - | 'false' - | 'true' - | 'menu' - | 'listbox' - | 'tree' - | 'grid' - | 'dialog' - /** - * Indicates whether the element is exposed to an accessibility API. - * @see aria-disabled. - */ - 'aria-hidden'?: boolean | 'false' | 'true' - /** - * Indicates the entered value does not conform to the format expected by the application. - * @see aria-errormessage. - */ - 'aria-invalid'?: boolean | 'false' | 'true' | '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'?: number - /** 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'?: boolean | 'false' | 'true' - /** Indicates whether a text box accepts multiple lines of input or only a single line. */ - 'aria-multiline'?: boolean | 'false' | 'true' - /** Indicates that the user may select more than one item from the current selectable descendants. */ - 'aria-multiselectable'?: boolean | 'false' | 'true' - /** 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'?: number - /** - * Indicates the current "pressed" state of toggle buttons. - * @see aria-checked @see aria-selected. - */ - 'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' - /** - * Indicates that the element is not editable, but is otherwise operable. - * @see aria-disabled. - */ - 'aria-readonly'?: boolean | 'false' | 'true' - /** - * 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'?: boolean | 'false' | 'true' - /** 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'?: number - /** - * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. - * @see aria-rowcount @see aria-rowspan. - */ - 'aria-rowindex'?: number - /** - * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. - * @see aria-rowindex @see aria-colspan. - */ - 'aria-rowspan'?: number - /** - * Indicates the current "selected" state of various widgets. - * @see aria-checked @see aria-pressed. - */ - 'aria-selected'?: boolean | 'false' | 'true' - /** - * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. - * @see aria-posinset. - */ - 'aria-setsize'?: number - /** 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'?: number - /** Defines the minimum allowed value for a range widget. */ - 'aria-valuemin'?: number - /** - * Defines the current value for a range widget. - * @see aria-valuetext. - */ - 'aria-valuenow'?: number - /** Defines the human readable text alternative of aria-valuenow for a range widget. */ - 'aria-valuetext'?: string -} - -export interface HTMLAttributes extends AriaAttributes { - domPropsInnerHTML?: string +// Stéphane Goetz +interface HTMLAttributes { class?: any - style?: string | CSSProperties - - // Standard HTML Attributes + style?: string | Partial accesskey?: string - contenteditable?: Booleanish | 'inherit' + contenteditable?: boolean contextmenu?: string dir?: string - draggable?: Booleanish + disabled?: boolean + draggable?: boolean hidden?: boolean id?: string lang?: string - placeholder?: string - spellcheck?: Booleanish + spellcheck?: boolean tabindex?: number 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 - autocave?: string - color?: string - itemprop?: string - itemscope?: boolean - itemtype?: string - itemid?: string - itemref?: string - results?: number - 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 { +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 { +interface AreaHTMLAttributes extends HTMLAttributes { alt?: string - coords?: string + coord?: string download?: any href?: string hreflang?: string @@ -340,18 +61,18 @@ export interface AreaHTMLAttributes extends HTMLAttributes { target?: string } -export interface AudioHTMLAttributes extends MediaHTMLAttributes {} +interface AudioHTMLAttributes extends MediaHTMLAttributes {} -export interface BaseHTMLAttributes extends HTMLAttributes { +interface BaseHTMLAttributes extends HTMLAttributes { href?: string target?: string } -export interface BlockquoteHTMLAttributes extends HTMLAttributes { +interface BlockquoteHTMLAttributes extends HTMLAttributes { cite?: string } -export interface ButtonHTMLAttributes extends HTMLAttributes { +interface ButtonHTMLAttributes extends HTMLAttributes { autofocus?: boolean disabled?: boolean form?: string @@ -361,55 +82,44 @@ export interface ButtonHTMLAttributes extends HTMLAttributes { formnovalidate?: boolean formtarget?: string name?: string - type?: 'submit' | 'reset' | 'button' + type?: string value?: string | string[] | number } -export interface CanvasHTMLAttributes extends HTMLAttributes { +interface CanvasHTMLAttributes extends HTMLAttributes { height?: number | string width?: number | string } -export interface ColHTMLAttributes extends HTMLAttributes { +interface ColHTMLAttributes extends HTMLAttributes { span?: number - width?: number | string } -export interface ColgroupHTMLAttributes extends HTMLAttributes { - span?: number -} +interface ColgroupHTMLAttributes extends ColHTMLAttributes {} -export interface DataHTMLAttributes extends HTMLAttributes { - value?: string | string[] | number -} - -export interface DetailsHTMLAttributes extends HTMLAttributes { +interface DetailsHTMLAttributes extends HTMLAttributes { open?: boolean } -export interface DelHTMLAttributes extends HTMLAttributes { +interface DelHTMLAttributes extends HTMLAttributes { cite?: string datetime?: string } -export interface DialogHTMLAttributes extends HTMLAttributes { - open?: boolean -} - -export interface EmbedHTMLAttributes extends HTMLAttributes { +interface EmbedHTMLAttributes extends HTMLAttributes { height?: number | string src?: string type?: string width?: number | string } -export interface FieldsetHTMLAttributes extends HTMLAttributes { +interface FieldsetHTMLAttributes extends HTMLAttributes { disabled?: boolean form?: string name?: string } -export interface FormHTMLAttributes extends HTMLAttributes { +interface FormHTMLAttributes extends HTMLAttributes { acceptcharset?: string action?: string autocomplete?: string @@ -420,12 +130,11 @@ export interface FormHTMLAttributes extends HTMLAttributes { target?: string } -export interface HtmlHTMLAttributes extends HTMLAttributes { +interface HtmlHTMLAttributes extends HTMLAttributes { manifest?: string } -export interface IframeHTMLAttributes extends HTMLAttributes { - allow?: string +interface IframeHTMLAttributes extends HTMLAttributes { allowfullscreen?: boolean allowtransparency?: boolean frameborder?: number | string @@ -433,7 +142,6 @@ export interface IframeHTMLAttributes extends HTMLAttributes { marginheight?: number marginwidth?: number name?: string - referrerpolicy?: string sandbox?: string scrolling?: string seamless?: boolean @@ -442,10 +150,8 @@ export interface IframeHTMLAttributes extends HTMLAttributes { width?: number | string } -export interface ImgHTMLAttributes extends HTMLAttributes { +interface ImgHTMLAttributes extends HTMLAttributes { alt?: string - crossorigin?: 'anonymous' | 'use-credentials' | '' - decoding?: 'async' | 'auto' | 'sync' height?: number | string sizes?: string src?: string @@ -454,12 +160,12 @@ export interface ImgHTMLAttributes extends HTMLAttributes { width?: number | string } -export interface InsHTMLAttributes extends HTMLAttributes { +interface InsHTMLAttributes extends HTMLAttributes { cite?: string datetime?: string } -export interface InputHTMLAttributes extends HTMLAttributes { +interface InputHTMLAttributes extends HTMLAttributes { accept?: string alt?: string autocomplete?: string @@ -494,7 +200,7 @@ export interface InputHTMLAttributes extends HTMLAttributes { width?: number | string } -export interface KeygenHTMLAttributes extends HTMLAttributes { +interface KeygenHTMLAttributes extends HTMLAttributes { autofocus?: boolean challenge?: string disabled?: boolean @@ -504,18 +210,16 @@ export interface KeygenHTMLAttributes extends HTMLAttributes { name?: string } -export interface LabelHTMLAttributes extends HTMLAttributes { - for?: string +interface LabelHTMLAttributes extends HTMLAttributes { form?: string + htmlfor?: string } -export interface LiHTMLAttributes extends HTMLAttributes { +interface LiHTMLAttributes extends HTMLAttributes { value?: string | string[] | number } -export interface LinkHTMLAttributes extends HTMLAttributes { - as?: string - crossorigin?: string +interface LinkHTMLAttributes extends HTMLAttributes { href?: string hreflang?: string integrity?: string @@ -525,35 +229,33 @@ export interface LinkHTMLAttributes extends HTMLAttributes { type?: string } -export interface MapHTMLAttributes extends HTMLAttributes { +interface MapHTMLAttributes extends HTMLAttributes { name?: string } -export interface MenuHTMLAttributes extends HTMLAttributes { +interface MenuHTMLAttributes extends HTMLAttributes { type?: string } -export interface MediaHTMLAttributes extends HTMLAttributes { +interface MediaHTMLAttributes extends HTMLAttributes { autoplay?: boolean controls?: boolean - controlslist?: string crossorigin?: string loop?: boolean mediagroup?: string muted?: boolean - playsinline?: boolean preload?: string src?: string } -export interface MetaHTMLAttributes extends HTMLAttributes { +interface MetaHTMLAttributes extends HTMLAttributes { charset?: string content?: string httpequiv?: string name?: string } -export interface MeterHTMLAttributes extends HTMLAttributes { +interface MeterHTMLAttributes extends HTMLAttributes { form?: string high?: number low?: number @@ -563,11 +265,11 @@ export interface MeterHTMLAttributes extends HTMLAttributes { value?: string | string[] | number } -export interface QuoteHTMLAttributes extends HTMLAttributes { +interface QuoteHTMLAttributes extends HTMLAttributes { cite?: string } -export interface ObjectHTMLAttributes extends HTMLAttributes { +interface ObjectHTMLAttributes extends HTMLAttributes { classid?: string data?: string form?: string @@ -579,54 +281,51 @@ export interface ObjectHTMLAttributes extends HTMLAttributes { wmode?: string } -export interface OlHTMLAttributes extends HTMLAttributes { +interface OlHTMLAttributes extends HTMLAttributes { reversed?: boolean start?: number - type?: '1' | 'a' | 'A' | 'i' | 'I' } -export interface OptgroupHTMLAttributes extends HTMLAttributes { +interface OptgroupHTMLAttributes extends HTMLAttributes { disabled?: boolean label?: string } -export interface OptionHTMLAttributes extends HTMLAttributes { +interface OptionHTMLAttributes extends HTMLAttributes { disabled?: boolean label?: string selected?: boolean value?: string | string[] | number } -export interface OutputHTMLAttributes extends HTMLAttributes { - for?: string +interface OutputHTMLAttributes extends HTMLAttributes { form?: string + htmlfor?: string name?: string } -export interface ParamHTMLAttributes extends HTMLAttributes { +interface ParamHTMLAttributes extends HTMLAttributes { name?: string value?: string | string[] | number } -export interface ProgressHTMLAttributes extends HTMLAttributes { +interface ProgressHTMLAttributes extends HTMLAttributes { max?: number | string value?: string | string[] | number } -export interface ScriptHTMLAttributes extends HTMLAttributes { +interface ScriptHTMLAttributes extends HTMLAttributes { async?: boolean charset?: string crossorigin?: string defer?: boolean integrity?: string - nomodule?: boolean nonce?: string src?: string type?: string } -export interface SelectHTMLAttributes extends HTMLAttributes { - autocomplete?: string +interface SelectHTMLAttributes extends HTMLAttributes { autofocus?: boolean disabled?: boolean form?: string @@ -637,7 +336,7 @@ export interface SelectHTMLAttributes extends HTMLAttributes { value?: string | string[] | number } -export interface SourceHTMLAttributes extends HTMLAttributes { +interface SourceHTMLAttributes extends HTMLAttributes { media?: string sizes?: string src?: string @@ -645,20 +344,20 @@ export interface SourceHTMLAttributes extends HTMLAttributes { type?: string } -export interface StyleHTMLAttributes extends HTMLAttributes { +interface StyleHTMLAttributes extends HTMLAttributes { media?: string nonce?: string scoped?: boolean type?: string } -export interface TableHTMLAttributes extends HTMLAttributes { +interface TableHTMLAttributes extends HTMLAttributes { cellpadding?: number | string cellspacing?: number | string summary?: string } -export interface TextareaHTMLAttributes extends HTMLAttributes { +interface TextareaHTMLAttributes extends HTMLAttributes { autocomplete?: string autofocus?: boolean cols?: number @@ -676,28 +375,24 @@ export interface TextareaHTMLAttributes extends HTMLAttributes { wrap?: string } -export interface TdHTMLAttributes extends HTMLAttributes { - align?: 'left' | 'center' | 'right' | 'justify' | 'char' +interface TdHTMLAttributes extends HTMLAttributes { colspan?: number headers?: string rowspan?: number - scope?: string - valign?: 'top' | 'middle' | 'bottom' | 'baseline' } -export interface ThHTMLAttributes extends HTMLAttributes { - align?: 'left' | 'center' | 'right' | 'justify' | 'char' +interface ThHTMLAttributes extends HTMLAttributes { colspan?: number headers?: string rowspan?: number scope?: string } -export interface TimeHTMLAttributes extends HTMLAttributes { +interface TimeHTMLAttributes extends HTMLAttributes { datetime?: string } -export interface TrackHTMLAttributes extends HTMLAttributes { +interface TrackHTMLAttributes extends HTMLAttributes { default?: boolean kind?: string label?: string @@ -705,303 +400,120 @@ export interface TrackHTMLAttributes extends HTMLAttributes { srclang?: string } -export interface VideoHTMLAttributes extends MediaHTMLAttributes { +interface VideoHTMLAttributes extends MediaHTMLAttributes { height?: number | string playsinline?: boolean poster?: string width?: number | string - disablePictureInPicture?: boolean } -export interface WebViewHTMLAttributes extends HTMLAttributes { +interface AllHTMLAttributes extends HTMLAttributes { + accept?: string + acceptcharset?: string + action?: boolean allowfullscreen?: boolean - allowpopups?: boolean - autoFocus?: boolean - autosize?: boolean - blinkfeatures?: string - disableblinkfeatures?: string - disableguestresize?: boolean - disablewebsecurity?: boolean - guestinstance?: string - httpreferrer?: string - nodeintegration?: boolean - partition?: string - plugins?: boolean - preload?: string - src?: string - useragent?: string - webpreferences?: string -} - -export interface SVGAttributes extends AriaAttributes { - domPropsInnerHTML?: string - - color?: string + allowtransparency?: boolean + alt?: string + async?: boolean + autocomplete?: string + autofocus?: boolean + autoplay?: boolean + capture?: boolean // https://www.w3.org/tr/html-media-capture/#the-capture-attribute + cellpadding?: number | string + cellspacing?: number | string + challenge?: string + charset?: string + checked?: boolean + cite?: string + classid?: string + cols?: number + colspan?: number + content?: string + controls?: boolean + coord?: string + crossorigin?: string + data?: string + datetime?: string + default?: boolean + defer?: boolean + dirname?: string + disabled?: boolean + download?: any + enctype?: string + form?: string + formaction?: string + formenctype?: string + formmethod?: string + formnovalidate?: boolean + formtarget?: string + frameborder?: number | string + headers?: string height?: number | string - id?: string - lang?: string + high?: number + href?: string + hreflang?: string + htmlfor?: string + httpequiv?: string + integrity?: string + keyparams?: string + keytype?: string + kind?: string + label?: string + list?: string + loop?: boolean + low?: number + manifest?: string + marginheight?: number + marginwidth?: number max?: number | string + maxlength?: number media?: string + mediagroup?: string method?: string min?: number | string + minlength?: number + multiple?: boolean + muted?: boolean name?: string + nonce?: string + novalidate?: boolean + open?: boolean + optimum?: number + pattern?: string + placeholder?: string + playsinline?: boolean + poster?: string + preload?: string + readonly?: boolean + rel?: string + required?: boolean + reversed?: boolean + rows?: number + rowspan?: number + sandbox?: string + scope?: string + scoped?: boolean + scrolling?: string + seamless?: boolean + selected?: boolean + shape?: string + size?: number + sizes?: string + span?: number + src?: string + srcdoc?: string + srclang?: string + srcset?: string + start?: number + step?: number | string + summary?: string target?: string type?: string + usemap?: string + value?: string | string[] | number width?: number | string - - // Other HTML properties supported by SVG elements in browsers - role?: string - tabindex?: number - - // SVG Specific attributes - 'accent-height'?: number | string - 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?: number | string - amplitude?: number | string - 'arabic-form'?: 'initial' | 'medial' | 'terminal' | 'isolated' - ascent?: number | string - attributeName?: string - attributeType?: string - autoReverse?: number | string - azimuth?: number | string - baseFrequency?: number | string - 'baseline-shift'?: number | string - baseProfile?: number | string - bbox?: number | string - begin?: number | string - bias?: number | string - by?: number | string - calcMode?: number | string - 'cap-height'?: number | string - clip?: number | string - 'clip-path'?: string - clipPathUnits?: number | string - 'clip-rule'?: number | string - 'color-interpolation'?: number | string - 'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB' | 'inherit' - 'color-profile'?: number | string - 'color-rendering'?: 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 - 'dominant-baseline'?: number | string - dur?: number | string - dx?: number | string - dy?: number | string - edgeMode?: number | string - elevation?: number | string - 'enable-background'?: number | string - end?: number | string - exponent?: number | string - externalResourcesRequired?: number | string - fill?: string - 'fill-opacity'?: number | string - 'fill-rule'?: 'nonzero' | 'evenodd' | 'inherit' - filter?: string - filterRes?: number | string - filterUnits?: number | string - 'flood-color'?: number | string - 'flood-opacity'?: number | string - focusable?: number | string - 'font-family'?: string - 'font-size'?: number | string - 'font-size-adjust'?: number | string - 'font-stretch'?: number | string - 'font-style'?: number | string - 'font-variant'?: number | string - 'font-weight'?: number | string - format?: number | string - from?: number | string - fx?: number | string - fy?: number | string - g1?: number | string - g2?: number | string - 'glyph-name'?: number | string - 'glyph-orientation-horizontal'?: number | string - 'glyph-orientation-vertical'?: number | string - glyphRef?: number | string - gradientTransform?: string - gradientUnits?: string - hanging?: number | string - 'horiz-adv-x'?: number | string - 'horiz-origin-x'?: number | string - href?: string - ideographic?: number | string - 'image-rendering'?: 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 - 'letter-spacing'?: number | string - 'lighting-color'?: number | string - limitingConeAngle?: number | string - local?: number | string - 'marker-end'?: string - markerHeight?: number | string - 'marker-mid'?: string - 'marker-start'?: 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 - 'overline-position'?: number | string - 'overline-thickness'?: number | string - 'paint-order'?: number | string - 'panose-1'?: number | string - pathLength?: number | string - patternContentUnits?: string - patternTransform?: number | string - patternUnits?: string - 'pointer-events'?: 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 - 'shape-rendering'?: 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 - 'stop-color'?: string - 'stop-opacity'?: number | string - 'strikethrough-position'?: number | string - 'strikethrough-thickness'?: number | string - string?: number | string - stroke?: string - 'stroke-dasharray'?: string | number - 'stroke-dashoffset'?: string | number - 'stroke-linecap'?: 'butt' | 'round' | 'square' | 'inherit' - 'stroke-linejoin'?: 'miter' | 'round' | 'bevel' | 'inherit' - 'stroke-miterlimit'?: number | string - 'stroke-opacity'?: number | string - 'stroke-width'?: number | string - surfaceScale?: number | string - systemLanguage?: number | string - tableValues?: number | string - targetX?: number | string - targetY?: number | string - 'text-anchor'?: string - 'text-decoration'?: number | string - textLength?: number | string - 'text-rendering'?: number | string - to?: number | string - transform?: string - u1?: number | string - u2?: number | string - 'underline-position'?: number | string - 'underline-thickness'?: number | string - unicode?: number | string - 'unicode-bidi'?: number | string - 'unicode-range'?: number | string - 'unitsPer-em'?: number | string - 'v-alphabetic'?: number | string - values?: string - 'vector-effect'?: number | string - version?: string - 'vert-adv-y'?: number | string - 'vert-origin-x'?: number | string - 'vert-origin-y'?: number | string - 'v-hanging'?: number | string - 'v-ideographic'?: number | string - viewBox?: string - viewTarget?: number | string - visibility?: number | string - 'v-mathematical'?: number | string - widths?: number | string - 'word-spacing'?: number | string - 'writing-mode'?: number | string - x1?: number | string - x2?: number | string - x?: number | string - xChannelSelector?: string - 'x-height'?: number | string - xlinkActuate?: string - xlinkArcrole?: string - xlinkHref?: string - xlinkRole?: string - xlinkShow?: string - xlinkTitle?: string - xlinkType?: string - y1?: number | string - y2?: number | string - y?: number | string - yChannelSelector?: string - z?: number | string - zoomAndPan?: string + wmode?: string + wrap?: string } interface IntrinsicElementAttributes { @@ -1027,13 +539,13 @@ interface IntrinsicElementAttributes { code: HTMLAttributes col: ColHTMLAttributes colgroup: ColgroupHTMLAttributes - data: DataHTMLAttributes + data: HTMLAttributes datalist: HTMLAttributes dd: HTMLAttributes del: DelHTMLAttributes details: DetailsHTMLAttributes dfn: HTMLAttributes - dialog: DialogHTMLAttributes + dialog: HTMLAttributes div: HTMLAttributes dl: HTMLAttributes dt: HTMLAttributes @@ -1074,7 +586,6 @@ interface IntrinsicElementAttributes { meta: MetaHTMLAttributes meter: MeterHTMLAttributes nav: HTMLAttributes - noindex: HTMLAttributes noscript: HTMLAttributes object: ObjectHTMLAttributes ol: OlHTMLAttributes @@ -1104,7 +615,6 @@ interface IntrinsicElementAttributes { summary: HTMLAttributes sup: HTMLAttributes table: TableHTMLAttributes - template: HTMLAttributes tbody: HTMLAttributes td: TdHTMLAttributes textarea: TextareaHTMLAttributes @@ -1120,71 +630,9 @@ interface IntrinsicElementAttributes { 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 { +interface Events { // clipboard events onCopy: ClipboardEvent onCut: ClipboardEvent @@ -1211,7 +659,6 @@ export interface Events { // form events onChange: Event - onBeforeinput: Event onInput: Event onReset: Event onSubmit: Event @@ -1227,7 +674,6 @@ export interface Events { onKeyup: KeyboardEvent // mouse events - onAuxclick: MouseEvent onClick: MouseEvent onContextmenu: MouseEvent onDblclick: MouseEvent @@ -1275,16 +721,6 @@ export interface Events { 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 @@ -1304,12 +740,7 @@ type EventHandlers = { [K in StringKeyOf]?: E[K] extends Function ? E[K] : (payload: E[K]) => void } -type ReservedProps = { - key?: string | number - ref?: string | Ref | ((ref: Element | ComponentPublicInstance | null) => void) -} - -type ElementAttrs = T & EventHandlers & ReservedProps +type ElementAttrs = T & EventHandlers type NativeElements = { [K in StringKeyOf]: ElementAttrs< @@ -1317,21 +748,16 @@ type NativeElements = { > } -declare global { - namespace JSX { - interface Element {} - interface ElementClass { - $props: {} - } - interface ElementAttributesProperty { - $props: {} - } - interface IntrinsicElements extends NativeElements { - // allow arbitrary elements - [name: string]: any - } +declare namespace JSX { + interface Element {} + interface ElementClass { + $props: {} + } + interface ElementAttributesProperty { + $props: {} + } + interface IntrinsicElements extends NativeElements { + // allow arbitrary elements + [name: string]: any } } - -// suppress ts:2669 -export {} From e80bdccefdb8b678603114610de8a75789d52f89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 26 Feb 2020 23:29:12 +0100 Subject: [PATCH 4/6] fix: reset files to master --- packages/runtime-dom/jsx.d.ts | 936 +++++++++++++++++++++++++++------- 1 file changed, 755 insertions(+), 181 deletions(-) diff --git a/packages/runtime-dom/jsx.d.ts b/packages/runtime-dom/jsx.d.ts index 79b7a4508ef..8748c4f661f 100644 --- a/packages/runtime-dom/jsx.d.ts +++ b/packages/runtime-dom/jsx.d.ts @@ -1,57 +1,336 @@ -// This code is based on https://github.com/wonderful-panda/vue-tsx-support -// published under the MIT license. -// Copyright by @wonderful-panda -// -// which is in turn based on the react definition in DefinitelyTyped -// published under the MIT license. +import { Ref, ComponentPublicInstance } from '@vue/runtime-core' + +// 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/v15/index.d.ts +// Path in the repository: types/react/index.d.ts // // Copyrights of original definition are: -// Asana // AssureSign // Microsoft -// John Reilly +// John Reilly // Benoit Benezech // Patricio Zavolinsky // Digiguru // Eric Anderson -// Albert Kurniawan -// Tanguy Krotoff // Dovydas Navickas -// Stéphane Goetz +// Josh Rutherford +// Guilherme Hübner +// Ferdy Budhidharma +// Johann Rakotoharisoa +// Olivier Pascal +// Martin Hochel +// Frank Li +// Jessica Franco +// Saransh Kataria +// Kanitkorn Sujautra +// Sebastian Silbermann + +import * as CSS from 'csstype' + +export interface CSSProperties extends CSS.Properties { + /** + * 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 + */ +} + +type Booleanish = boolean | 'true' | 'false' + +// 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'?: boolean | 'false' | 'true' + /** + * 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'?: boolean | 'false' | 'true' + /** + * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. + * @see aria-pressed @see aria-selected. + */ + 'aria-checked'?: boolean | 'false' | 'mixed' | 'true' + /** + * Defines the total number of columns in a table, grid, or treegrid. + * @see aria-colindex. + */ + 'aria-colcount'?: number + /** + * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. + * @see aria-colcount @see aria-colspan. + */ + 'aria-colindex'?: number + /** + * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. + * @see aria-colindex @see aria-rowspan. + */ + 'aria-colspan'?: number + /** + * 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'?: + | boolean + | 'false' + | 'true' + | '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'?: boolean | 'false' | 'true' + /** + * 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'?: boolean | 'false' | 'true' + /** + * 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'?: boolean | 'false' | 'true' + /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ + 'aria-haspopup'?: + | boolean + | 'false' + | 'true' + | 'menu' + | 'listbox' + | 'tree' + | 'grid' + | 'dialog' + /** + * Indicates whether the element is exposed to an accessibility API. + * @see aria-disabled. + */ + 'aria-hidden'?: boolean | 'false' | 'true' + /** + * Indicates the entered value does not conform to the format expected by the application. + * @see aria-errormessage. + */ + 'aria-invalid'?: boolean | 'false' | 'true' | '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'?: number + /** 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'?: boolean | 'false' | 'true' + /** Indicates whether a text box accepts multiple lines of input or only a single line. */ + 'aria-multiline'?: boolean | 'false' | 'true' + /** Indicates that the user may select more than one item from the current selectable descendants. */ + 'aria-multiselectable'?: boolean | 'false' | 'true' + /** 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'?: number + /** + * Indicates the current "pressed" state of toggle buttons. + * @see aria-checked @see aria-selected. + */ + 'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' + /** + * Indicates that the element is not editable, but is otherwise operable. + * @see aria-disabled. + */ + 'aria-readonly'?: boolean | 'false' | 'true' + /** + * 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'?: boolean | 'false' | 'true' + /** 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'?: number + /** + * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. + * @see aria-rowcount @see aria-rowspan. + */ + 'aria-rowindex'?: number + /** + * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. + * @see aria-rowindex @see aria-colspan. + */ + 'aria-rowspan'?: number + /** + * Indicates the current "selected" state of various widgets. + * @see aria-checked @see aria-pressed. + */ + 'aria-selected'?: boolean | 'false' | 'true' + /** + * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. + * @see aria-posinset. + */ + 'aria-setsize'?: number + /** 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'?: number + /** Defines the minimum allowed value for a range widget. */ + 'aria-valuemin'?: number + /** + * Defines the current value for a range widget. + * @see aria-valuetext. + */ + 'aria-valuenow'?: number + /** Defines the human readable text alternative of aria-valuenow for a range widget. */ + 'aria-valuetext'?: string +} + +export interface HTMLAttributes extends AriaAttributes { + domPropsInnerHTML?: string -interface HTMLAttributes { class?: any - style?: string | Partial + style?: string | CSSProperties + + // Standard HTML Attributes accesskey?: string - contenteditable?: boolean + contenteditable?: Booleanish | 'inherit' contextmenu?: string dir?: string - disabled?: boolean - draggable?: boolean + draggable?: Booleanish hidden?: boolean id?: string lang?: string - spellcheck?: boolean + placeholder?: string + spellcheck?: Booleanish tabindex?: number 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 + autocave?: string + color?: string + itemprop?: string + itemscope?: boolean + itemtype?: string + itemid?: string + itemref?: string + results?: number + 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 } -interface AnchorHTMLAttributes extends HTMLAttributes { +export interface AnchorHTMLAttributes extends HTMLAttributes { download?: any href?: string hreflang?: string media?: string + ping?: string rel?: string target?: string + type?: string + referrerpolicy?: string } -interface AreaHTMLAttributes extends HTMLAttributes { +export interface AreaHTMLAttributes extends HTMLAttributes { alt?: string - coord?: string + coords?: string download?: any href?: string hreflang?: string @@ -61,18 +340,18 @@ interface AreaHTMLAttributes extends HTMLAttributes { target?: string } -interface AudioHTMLAttributes extends MediaHTMLAttributes {} +export interface AudioHTMLAttributes extends MediaHTMLAttributes {} -interface BaseHTMLAttributes extends HTMLAttributes { +export interface BaseHTMLAttributes extends HTMLAttributes { href?: string target?: string } -interface BlockquoteHTMLAttributes extends HTMLAttributes { +export interface BlockquoteHTMLAttributes extends HTMLAttributes { cite?: string } -interface ButtonHTMLAttributes extends HTMLAttributes { +export interface ButtonHTMLAttributes extends HTMLAttributes { autofocus?: boolean disabled?: boolean form?: string @@ -82,44 +361,55 @@ interface ButtonHTMLAttributes extends HTMLAttributes { formnovalidate?: boolean formtarget?: string name?: string - type?: string + type?: 'submit' | 'reset' | 'button' value?: string | string[] | number } -interface CanvasHTMLAttributes extends HTMLAttributes { +export interface CanvasHTMLAttributes extends HTMLAttributes { height?: number | string width?: number | string } -interface ColHTMLAttributes extends HTMLAttributes { +export interface ColHTMLAttributes extends HTMLAttributes { span?: number + width?: number | string } -interface ColgroupHTMLAttributes extends ColHTMLAttributes {} +export interface ColgroupHTMLAttributes extends HTMLAttributes { + span?: number +} -interface DetailsHTMLAttributes extends HTMLAttributes { +export interface DataHTMLAttributes extends HTMLAttributes { + value?: string | string[] | number +} + +export interface DetailsHTMLAttributes extends HTMLAttributes { open?: boolean } -interface DelHTMLAttributes extends HTMLAttributes { +export interface DelHTMLAttributes extends HTMLAttributes { cite?: string datetime?: string } -interface EmbedHTMLAttributes extends HTMLAttributes { +export interface DialogHTMLAttributes extends HTMLAttributes { + open?: boolean +} + +export interface EmbedHTMLAttributes extends HTMLAttributes { height?: number | string src?: string type?: string width?: number | string } -interface FieldsetHTMLAttributes extends HTMLAttributes { +export interface FieldsetHTMLAttributes extends HTMLAttributes { disabled?: boolean form?: string name?: string } -interface FormHTMLAttributes extends HTMLAttributes { +export interface FormHTMLAttributes extends HTMLAttributes { acceptcharset?: string action?: string autocomplete?: string @@ -130,11 +420,12 @@ interface FormHTMLAttributes extends HTMLAttributes { target?: string } -interface HtmlHTMLAttributes extends HTMLAttributes { +export interface HtmlHTMLAttributes extends HTMLAttributes { manifest?: string } -interface IframeHTMLAttributes extends HTMLAttributes { +export interface IframeHTMLAttributes extends HTMLAttributes { + allow?: string allowfullscreen?: boolean allowtransparency?: boolean frameborder?: number | string @@ -142,6 +433,7 @@ interface IframeHTMLAttributes extends HTMLAttributes { marginheight?: number marginwidth?: number name?: string + referrerpolicy?: string sandbox?: string scrolling?: string seamless?: boolean @@ -150,8 +442,10 @@ interface IframeHTMLAttributes extends HTMLAttributes { width?: number | string } -interface ImgHTMLAttributes extends HTMLAttributes { +export interface ImgHTMLAttributes extends HTMLAttributes { alt?: string + crossorigin?: 'anonymous' | 'use-credentials' | '' + decoding?: 'async' | 'auto' | 'sync' height?: number | string sizes?: string src?: string @@ -160,12 +454,12 @@ interface ImgHTMLAttributes extends HTMLAttributes { width?: number | string } -interface InsHTMLAttributes extends HTMLAttributes { +export interface InsHTMLAttributes extends HTMLAttributes { cite?: string datetime?: string } -interface InputHTMLAttributes extends HTMLAttributes { +export interface InputHTMLAttributes extends HTMLAttributes { accept?: string alt?: string autocomplete?: string @@ -200,7 +494,7 @@ interface InputHTMLAttributes extends HTMLAttributes { width?: number | string } -interface KeygenHTMLAttributes extends HTMLAttributes { +export interface KeygenHTMLAttributes extends HTMLAttributes { autofocus?: boolean challenge?: string disabled?: boolean @@ -210,16 +504,18 @@ interface KeygenHTMLAttributes extends HTMLAttributes { name?: string } -interface LabelHTMLAttributes extends HTMLAttributes { +export interface LabelHTMLAttributes extends HTMLAttributes { + for?: string form?: string - htmlfor?: string } -interface LiHTMLAttributes extends HTMLAttributes { +export interface LiHTMLAttributes extends HTMLAttributes { value?: string | string[] | number } -interface LinkHTMLAttributes extends HTMLAttributes { +export interface LinkHTMLAttributes extends HTMLAttributes { + as?: string + crossorigin?: string href?: string hreflang?: string integrity?: string @@ -229,33 +525,35 @@ interface LinkHTMLAttributes extends HTMLAttributes { type?: string } -interface MapHTMLAttributes extends HTMLAttributes { +export interface MapHTMLAttributes extends HTMLAttributes { name?: string } -interface MenuHTMLAttributes extends HTMLAttributes { +export interface MenuHTMLAttributes extends HTMLAttributes { type?: string } -interface MediaHTMLAttributes extends HTMLAttributes { +export interface MediaHTMLAttributes extends HTMLAttributes { autoplay?: boolean controls?: boolean + controlslist?: string crossorigin?: string loop?: boolean mediagroup?: string muted?: boolean + playsinline?: boolean preload?: string src?: string } -interface MetaHTMLAttributes extends HTMLAttributes { +export interface MetaHTMLAttributes extends HTMLAttributes { charset?: string content?: string httpequiv?: string name?: string } -interface MeterHTMLAttributes extends HTMLAttributes { +export interface MeterHTMLAttributes extends HTMLAttributes { form?: string high?: number low?: number @@ -265,11 +563,11 @@ interface MeterHTMLAttributes extends HTMLAttributes { value?: string | string[] | number } -interface QuoteHTMLAttributes extends HTMLAttributes { +export interface QuoteHTMLAttributes extends HTMLAttributes { cite?: string } -interface ObjectHTMLAttributes extends HTMLAttributes { +export interface ObjectHTMLAttributes extends HTMLAttributes { classid?: string data?: string form?: string @@ -281,51 +579,54 @@ interface ObjectHTMLAttributes extends HTMLAttributes { wmode?: string } -interface OlHTMLAttributes extends HTMLAttributes { +export interface OlHTMLAttributes extends HTMLAttributes { reversed?: boolean start?: number + type?: '1' | 'a' | 'A' | 'i' | 'I' } -interface OptgroupHTMLAttributes extends HTMLAttributes { +export interface OptgroupHTMLAttributes extends HTMLAttributes { disabled?: boolean label?: string } -interface OptionHTMLAttributes extends HTMLAttributes { +export interface OptionHTMLAttributes extends HTMLAttributes { disabled?: boolean label?: string selected?: boolean value?: string | string[] | number } -interface OutputHTMLAttributes extends HTMLAttributes { +export interface OutputHTMLAttributes extends HTMLAttributes { + for?: string form?: string - htmlfor?: string name?: string } -interface ParamHTMLAttributes extends HTMLAttributes { +export interface ParamHTMLAttributes extends HTMLAttributes { name?: string value?: string | string[] | number } -interface ProgressHTMLAttributes extends HTMLAttributes { +export interface ProgressHTMLAttributes extends HTMLAttributes { max?: number | string value?: string | string[] | number } -interface ScriptHTMLAttributes extends HTMLAttributes { +export interface ScriptHTMLAttributes extends HTMLAttributes { async?: boolean charset?: string crossorigin?: string defer?: boolean integrity?: string + nomodule?: boolean nonce?: string src?: string type?: string } -interface SelectHTMLAttributes extends HTMLAttributes { +export interface SelectHTMLAttributes extends HTMLAttributes { + autocomplete?: string autofocus?: boolean disabled?: boolean form?: string @@ -336,7 +637,7 @@ interface SelectHTMLAttributes extends HTMLAttributes { value?: string | string[] | number } -interface SourceHTMLAttributes extends HTMLAttributes { +export interface SourceHTMLAttributes extends HTMLAttributes { media?: string sizes?: string src?: string @@ -344,20 +645,20 @@ interface SourceHTMLAttributes extends HTMLAttributes { type?: string } -interface StyleHTMLAttributes extends HTMLAttributes { +export interface StyleHTMLAttributes extends HTMLAttributes { media?: string nonce?: string scoped?: boolean type?: string } -interface TableHTMLAttributes extends HTMLAttributes { +export interface TableHTMLAttributes extends HTMLAttributes { cellpadding?: number | string cellspacing?: number | string summary?: string } -interface TextareaHTMLAttributes extends HTMLAttributes { +export interface TextareaHTMLAttributes extends HTMLAttributes { autocomplete?: string autofocus?: boolean cols?: number @@ -375,24 +676,28 @@ interface TextareaHTMLAttributes extends HTMLAttributes { wrap?: string } -interface TdHTMLAttributes extends HTMLAttributes { +export interface TdHTMLAttributes extends HTMLAttributes { + align?: 'left' | 'center' | 'right' | 'justify' | 'char' colspan?: number headers?: string rowspan?: number + scope?: string + valign?: 'top' | 'middle' | 'bottom' | 'baseline' } -interface ThHTMLAttributes extends HTMLAttributes { +export interface ThHTMLAttributes extends HTMLAttributes { + align?: 'left' | 'center' | 'right' | 'justify' | 'char' colspan?: number headers?: string rowspan?: number scope?: string } -interface TimeHTMLAttributes extends HTMLAttributes { +export interface TimeHTMLAttributes extends HTMLAttributes { datetime?: string } -interface TrackHTMLAttributes extends HTMLAttributes { +export interface TrackHTMLAttributes extends HTMLAttributes { default?: boolean kind?: string label?: string @@ -400,120 +705,303 @@ interface TrackHTMLAttributes extends HTMLAttributes { srclang?: string } -interface VideoHTMLAttributes extends MediaHTMLAttributes { +export interface VideoHTMLAttributes extends MediaHTMLAttributes { height?: number | string playsinline?: boolean poster?: string width?: number | string + disablePictureInPicture?: boolean } -interface AllHTMLAttributes extends HTMLAttributes { - accept?: string - acceptcharset?: string - action?: boolean +export interface WebViewHTMLAttributes extends HTMLAttributes { allowfullscreen?: boolean - allowtransparency?: boolean - alt?: string - async?: boolean - autocomplete?: string - autofocus?: boolean - autoplay?: boolean - capture?: boolean // https://www.w3.org/tr/html-media-capture/#the-capture-attribute - cellpadding?: number | string - cellspacing?: number | string - challenge?: string - charset?: string - checked?: boolean - cite?: string - classid?: string - cols?: number - colspan?: number - content?: string - controls?: boolean - coord?: string - crossorigin?: string - data?: string - datetime?: string - default?: boolean - defer?: boolean - dirname?: string - disabled?: boolean - download?: any - enctype?: string - form?: string - formaction?: string - formenctype?: string - formmethod?: string - formnovalidate?: boolean - formtarget?: string - frameborder?: number | string - headers?: string + allowpopups?: boolean + autoFocus?: boolean + autosize?: boolean + blinkfeatures?: string + disableblinkfeatures?: string + disableguestresize?: boolean + disablewebsecurity?: boolean + guestinstance?: string + httpreferrer?: string + nodeintegration?: boolean + partition?: string + plugins?: boolean + preload?: string + src?: string + useragent?: string + webpreferences?: string +} + +export interface SVGAttributes extends AriaAttributes { + domPropsInnerHTML?: string + + color?: string height?: number | string - high?: number - href?: string - hreflang?: string - htmlfor?: string - httpequiv?: string - integrity?: string - keyparams?: string - keytype?: string - kind?: string - label?: string - list?: string - loop?: boolean - low?: number - manifest?: string - marginheight?: number - marginwidth?: number + id?: string + lang?: string max?: number | string - maxlength?: number media?: string - mediagroup?: string method?: string min?: number | string - minlength?: number - multiple?: boolean - muted?: boolean name?: string - nonce?: string - novalidate?: boolean - open?: boolean - optimum?: number - pattern?: string - placeholder?: string - playsinline?: boolean - poster?: string - preload?: string - readonly?: boolean - rel?: string - required?: boolean - reversed?: boolean - rows?: number - rowspan?: number - sandbox?: string - scope?: string - scoped?: boolean - scrolling?: string - seamless?: boolean - selected?: boolean - shape?: string - size?: number - sizes?: string - span?: number - src?: string - srcdoc?: string - srclang?: string - srcset?: string - start?: number - step?: number | string - summary?: string target?: string type?: string - usemap?: string - value?: string | string[] | number width?: number | string - wmode?: string - wrap?: string + + // Other HTML properties supported by SVG elements in browsers + role?: string + tabindex?: number + + // SVG Specific attributes + 'accent-height'?: number | string + 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?: number | string + amplitude?: number | string + 'arabic-form'?: 'initial' | 'medial' | 'terminal' | 'isolated' + ascent?: number | string + attributeName?: string + attributeType?: string + autoReverse?: number | string + azimuth?: number | string + baseFrequency?: number | string + 'baseline-shift'?: number | string + baseProfile?: number | string + bbox?: number | string + begin?: number | string + bias?: number | string + by?: number | string + calcMode?: number | string + 'cap-height'?: number | string + clip?: number | string + 'clip-path'?: string + clipPathUnits?: number | string + 'clip-rule'?: number | string + 'color-interpolation'?: number | string + 'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB' | 'inherit' + 'color-profile'?: number | string + 'color-rendering'?: 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 + 'dominant-baseline'?: number | string + dur?: number | string + dx?: number | string + dy?: number | string + edgeMode?: number | string + elevation?: number | string + 'enable-background'?: number | string + end?: number | string + exponent?: number | string + externalResourcesRequired?: number | string + fill?: string + 'fill-opacity'?: number | string + 'fill-rule'?: 'nonzero' | 'evenodd' | 'inherit' + filter?: string + filterRes?: number | string + filterUnits?: number | string + 'flood-color'?: number | string + 'flood-opacity'?: number | string + focusable?: number | string + 'font-family'?: string + 'font-size'?: number | string + 'font-size-adjust'?: number | string + 'font-stretch'?: number | string + 'font-style'?: number | string + 'font-variant'?: number | string + 'font-weight'?: number | string + format?: number | string + from?: number | string + fx?: number | string + fy?: number | string + g1?: number | string + g2?: number | string + 'glyph-name'?: number | string + 'glyph-orientation-horizontal'?: number | string + 'glyph-orientation-vertical'?: number | string + glyphRef?: number | string + gradientTransform?: string + gradientUnits?: string + hanging?: number | string + 'horiz-adv-x'?: number | string + 'horiz-origin-x'?: number | string + href?: string + ideographic?: number | string + 'image-rendering'?: 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 + 'letter-spacing'?: number | string + 'lighting-color'?: number | string + limitingConeAngle?: number | string + local?: number | string + 'marker-end'?: string + markerHeight?: number | string + 'marker-mid'?: string + 'marker-start'?: 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 + 'overline-position'?: number | string + 'overline-thickness'?: number | string + 'paint-order'?: number | string + 'panose-1'?: number | string + pathLength?: number | string + patternContentUnits?: string + patternTransform?: number | string + patternUnits?: string + 'pointer-events'?: 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 + 'shape-rendering'?: 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 + 'stop-color'?: string + 'stop-opacity'?: number | string + 'strikethrough-position'?: number | string + 'strikethrough-thickness'?: number | string + string?: number | string + stroke?: string + 'stroke-dasharray'?: string | number + 'stroke-dashoffset'?: string | number + 'stroke-linecap'?: 'butt' | 'round' | 'square' | 'inherit' + 'stroke-linejoin'?: 'miter' | 'round' | 'bevel' | 'inherit' + 'stroke-miterlimit'?: number | string + 'stroke-opacity'?: number | string + 'stroke-width'?: number | string + surfaceScale?: number | string + systemLanguage?: number | string + tableValues?: number | string + targetX?: number | string + targetY?: number | string + 'text-anchor'?: string + 'text-decoration'?: number | string + textLength?: number | string + 'text-rendering'?: number | string + to?: number | string + transform?: string + u1?: number | string + u2?: number | string + 'underline-position'?: number | string + 'underline-thickness'?: number | string + unicode?: number | string + 'unicode-bidi'?: number | string + 'unicode-range'?: number | string + 'unitsPer-em'?: number | string + 'v-alphabetic'?: number | string + values?: string + 'vector-effect'?: number | string + version?: string + 'vert-adv-y'?: number | string + 'vert-origin-x'?: number | string + 'vert-origin-y'?: number | string + 'v-hanging'?: number | string + 'v-ideographic'?: number | string + viewBox?: string + viewTarget?: number | string + visibility?: number | string + 'v-mathematical'?: number | string + widths?: number | string + 'word-spacing'?: number | string + 'writing-mode'?: number | string + x1?: number | string + x2?: number | string + x?: number | string + xChannelSelector?: string + 'x-height'?: number | string + xlinkActuate?: string + xlinkArcrole?: string + xlinkHref?: string + xlinkRole?: string + xlinkShow?: string + xlinkTitle?: string + xlinkType?: string + y1?: number | string + y2?: number | string + y?: number | string + yChannelSelector?: string + z?: number | string + zoomAndPan?: string } interface IntrinsicElementAttributes { @@ -539,13 +1027,13 @@ interface IntrinsicElementAttributes { code: HTMLAttributes col: ColHTMLAttributes colgroup: ColgroupHTMLAttributes - data: HTMLAttributes + data: DataHTMLAttributes datalist: HTMLAttributes dd: HTMLAttributes del: DelHTMLAttributes details: DetailsHTMLAttributes dfn: HTMLAttributes - dialog: HTMLAttributes + dialog: DialogHTMLAttributes div: HTMLAttributes dl: HTMLAttributes dt: HTMLAttributes @@ -586,6 +1074,7 @@ interface IntrinsicElementAttributes { meta: MetaHTMLAttributes meter: MeterHTMLAttributes nav: HTMLAttributes + noindex: HTMLAttributes noscript: HTMLAttributes object: ObjectHTMLAttributes ol: OlHTMLAttributes @@ -615,6 +1104,7 @@ interface IntrinsicElementAttributes { summary: HTMLAttributes sup: HTMLAttributes table: TableHTMLAttributes + template: HTMLAttributes tbody: HTMLAttributes td: TdHTMLAttributes textarea: TextareaHTMLAttributes @@ -630,9 +1120,71 @@ interface IntrinsicElementAttributes { 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 } -interface Events { +export interface Events { // clipboard events onCopy: ClipboardEvent onCut: ClipboardEvent @@ -659,6 +1211,7 @@ interface Events { // form events onChange: Event + onBeforeinput: Event onInput: Event onReset: Event onSubmit: Event @@ -674,6 +1227,7 @@ interface Events { onKeyup: KeyboardEvent // mouse events + onAuxclick: MouseEvent onClick: MouseEvent onContextmenu: MouseEvent onDblclick: MouseEvent @@ -721,6 +1275,16 @@ interface Events { 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 @@ -740,7 +1304,12 @@ type EventHandlers = { [K in StringKeyOf]?: E[K] extends Function ? E[K] : (payload: E[K]) => void } -type ElementAttrs = T & EventHandlers +type ReservedProps = { + key?: string | number + ref?: string | Ref | ((ref: Element | ComponentPublicInstance | null) => void) +} + +type ElementAttrs = T & EventHandlers & ReservedProps type NativeElements = { [K in StringKeyOf]: ElementAttrs< @@ -748,16 +1317,21 @@ type NativeElements = { > } -declare namespace JSX { - interface Element {} - interface ElementClass { - $props: {} - } - interface ElementAttributesProperty { - $props: {} - } - interface IntrinsicElements extends NativeElements { - // allow arbitrary elements - [name: string]: any +declare global { + namespace JSX { + interface Element {} + interface ElementClass { + $props: {} + } + interface ElementAttributesProperty { + $props: {} + } + interface IntrinsicElements extends NativeElements { + // allow arbitrary elements + [name: string]: any + } } } + +// suppress ts:2669 +export {} From 3a1f4b8f969b441475c63655ecf61f16e8faa3a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 26 Feb 2020 23:31:19 +0100 Subject: [PATCH 5/6] fix: reset files to master --- packages/runtime-dom/jsx.d.ts | 72 +++++-------------- .../src/helpers/ssrRenderAttrs.ts | 4 +- 2 files changed, 22 insertions(+), 54 deletions(-) diff --git a/packages/runtime-dom/jsx.d.ts b/packages/runtime-dom/jsx.d.ts index 8748c4f661f..cdf6f409d22 100644 --- a/packages/runtime-dom/jsx.d.ts +++ b/packages/runtime-dom/jsx.d.ts @@ -79,15 +79,7 @@ interface AriaAttributes { */ 'aria-controls'?: string /** Indicates the element that represents the current item within a container or set of related elements. */ - 'aria-current'?: - | boolean - | 'false' - | 'true' - | 'page' - | 'step' - | 'location' - | 'date' - | 'time' + 'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time' /** * Identifies the element (or elements) that describes the object. * @see aria-labelledby @@ -126,15 +118,7 @@ interface AriaAttributes { */ 'aria-grabbed'?: boolean | 'false' | 'true' /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ - 'aria-haspopup'?: - | boolean - | 'false' - | 'true' - | 'menu' - | 'listbox' - | 'tree' - | 'grid' - | 'dialog' + 'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' /** * Indicates whether the element is exposed to an accessibility API. * @see aria-disabled. @@ -244,15 +228,16 @@ interface AriaAttributes { 'aria-valuetext'?: string } -export interface HTMLAttributes extends AriaAttributes { - domPropsInnerHTML?: string +export interface HTMLAttributes extends AriaAttributes{ + + domPropsInnerHTML?: string; class?: any style?: string | CSSProperties // Standard HTML Attributes accesskey?: string - contenteditable?: Booleanish | 'inherit' + contenteditable?: Booleanish | "inherit" contextmenu?: string dir?: string draggable?: Booleanish @@ -300,15 +285,7 @@ export interface HTMLAttributes extends AriaAttributes { * 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' + 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 @@ -340,7 +317,8 @@ export interface AreaHTMLAttributes extends HTMLAttributes { target?: string } -export interface AudioHTMLAttributes extends MediaHTMLAttributes {} +export interface AudioHTMLAttributes extends MediaHTMLAttributes { +} export interface BaseHTMLAttributes extends HTMLAttributes { href?: string @@ -734,7 +712,8 @@ export interface WebViewHTMLAttributes extends HTMLAttributes { } export interface SVGAttributes extends AriaAttributes { - domPropsInnerHTML?: string + + domPropsInnerHTML?: string; color?: string height?: number | string @@ -757,20 +736,7 @@ export interface SVGAttributes extends AriaAttributes { 'accent-height'?: number | string 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' + '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?: number | string amplitude?: number | string @@ -989,13 +955,13 @@ export interface SVGAttributes extends AriaAttributes { x?: number | string xChannelSelector?: string 'x-height'?: number | string - xlinkActuate?: string - xlinkArcrole?: string - xlinkHref?: string - xlinkRole?: string - xlinkShow?: string - xlinkTitle?: string - xlinkType?: string + 'xlinkActuate'?: string + 'xlinkArcrole'?: string + 'xlinkHref'?: string + 'xlinkRole'?: string + 'xlinkShow'?: string + 'xlinkTitle'?: string + 'xlinkType'?: string y1?: number | string y2?: number | string y?: number | string diff --git a/packages/server-renderer/src/helpers/ssrRenderAttrs.ts b/packages/server-renderer/src/helpers/ssrRenderAttrs.ts index 958e470805c..d17c0dd11d6 100644 --- a/packages/server-renderer/src/helpers/ssrRenderAttrs.ts +++ b/packages/server-renderer/src/helpers/ssrRenderAttrs.ts @@ -53,7 +53,9 @@ export function ssrRenderDynamicAttr( if (isBooleanAttr(attrKey)) { return value === false ? `` : ` ${attrKey}` } else if (isSSRSafeAttrName(attrKey)) { - return value === '' ? ` ${attrKey}` : ` ${attrKey}="${escapeHtml(value)}"` + return value === '' + ? ` ${attrKey}` + : ` ${attrKey}="${escapeHtml(value)}"` } else { console.warn( `[@vue/server-renderer] Skipped rendering unsafe attribute name: ${attrKey}` From 4c308740af936d31ebd9c077dfcd33327f5f9093 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Fri, 17 Apr 2020 10:43:11 +0200 Subject: [PATCH 6/6] Update looseEqual.spec.ts --- packages/shared/__tests__/looseEqual.spec.ts | 37 ++++++++++---------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/packages/shared/__tests__/looseEqual.spec.ts b/packages/shared/__tests__/looseEqual.spec.ts index 7588cca1e72..fe321cd1539 100644 --- a/packages/shared/__tests__/looseEqual.spec.ts +++ b/packages/shared/__tests__/looseEqual.spec.ts @@ -1,16 +1,15 @@ import { looseEqual } from '../src' describe('utils/looseEqual', () => { - it('compares booleans correctly', () => { + test('compares booleans correctly', () => { expect(looseEqual(true, true)).toBe(true) expect(looseEqual(false, false)).toBe(true) expect(looseEqual(true, false)).toBe(false) - expect(looseEqual(true, true)).toBe(true) expect(looseEqual(true, 1)).toBe(false) expect(looseEqual(false, 0)).toBe(false) }) - it('compares strings correctly', () => { + test('compares strings correctly', () => { const text = 'Lorem ipsum' const number = 1 const bool = true @@ -21,7 +20,7 @@ describe('utils/looseEqual', () => { expect(looseEqual(String(bool), bool)).toBe(true) }) - it('compares numbers correctly', () => { + test('compares numbers correctly', () => { const number = 100 const decimal = 2.5 const multiplier = 1.0000001 @@ -34,7 +33,7 @@ describe('utils/looseEqual', () => { expect(looseEqual(multiplier, multiplier)).toBe(true) }) - it('compares dates correctly', () => { + test('compares dates correctly', () => { const date1 = new Date(2019, 1, 2, 3, 4, 5, 6) const date2 = new Date(2019, 1, 2, 3, 4, 5, 6) const date3 = new Date(2019, 1, 2, 3, 4, 5, 7) @@ -50,32 +49,32 @@ describe('utils/looseEqual', () => { expect(looseEqual(date1, date4)).toBe(false) }) - it('compares files correctly', () => { + test('compares files correctly', () => { const date1 = new Date(2019, 1, 2, 3, 4, 5, 6) const date2 = new Date(2019, 1, 2, 3, 4, 5, 7) const file1 = new File([''], 'filename.txt', { type: 'text/plain', - lastModified: date1.getTime() + lastModified: date1.getTime(), }) const file2 = new File([''], 'filename.txt', { type: 'text/plain', - lastModified: date1.getTime() + lastModified: date1.getTime(), }) const file3 = new File([''], 'filename.txt', { type: 'text/plain', - lastModified: date2.getTime() + lastModified: date2.getTime(), }) const file4 = new File([''], 'filename.csv', { type: 'text/csv', - lastModified: date1.getTime() + lastModified: date1.getTime(), }) const file5 = new File(['abcdef'], 'filename.txt', { type: 'text/plain', - lastModified: date1.getTime() + lastModified: date1.getTime(), }) const file6 = new File(['12345'], 'filename.txt', { type: 'text/plain', - lastModified: date1.getTime() + lastModified: date1.getTime(), }) // Identical file object references @@ -90,7 +89,7 @@ describe('utils/looseEqual', () => { expect(looseEqual(file5, file6)).toBe(false) }) - it('compares arrays correctly', () => { + test('compares arrays correctly', () => { const arr1 = [1, 2, 3, 4] const arr2 = [1, 2, 3, '4'] const arr3 = [1, 2, 3, 4, 5] @@ -111,7 +110,7 @@ describe('utils/looseEqual', () => { expect(looseEqual(arr1, arr1.slice().reverse())).toBe(false) }) - it('compares RegExp correctly', () => { + test('compares RegExp correctly', () => { const rx1 = /^foo$/ const rx2 = /^foo$/ const rx3 = /^bar$/ @@ -127,7 +126,7 @@ describe('utils/looseEqual', () => { expect(looseEqual(rx3, rx4)).toBe(false) }) - it('compares objects correctly', () => { + test('compares objects correctly', () => { const obj1 = { foo: 'bar' } const obj2 = { foo: 'bar1' } const obj3 = { a: 1, b: 2, c: 3 } @@ -154,7 +153,7 @@ describe('utils/looseEqual', () => { expect(looseEqual(nestedObj1, nestedObj2)).toBe(false) }) - it('compares different types correctly', () => { + test('compares different types correctly', () => { const obj1 = {} const obj2 = { a: 1 } const obj3 = { 0: 0, 1: 1, 2: 2 } @@ -164,7 +163,7 @@ describe('utils/looseEqual', () => { const date1 = new Date(2019, 1, 2, 3, 4, 5, 6) const file1 = new File([''], 'filename.txt', { type: 'text/plain', - lastModified: date1.getTime() + lastModified: date1.getTime(), }) expect(looseEqual(123, '123')).toBe(true) @@ -186,7 +185,7 @@ describe('utils/looseEqual', () => { expect(looseEqual(obj3, arr3)).toBe(false) }) - it('compares null and undefined values correctly', () => { + test('compares null and undefined values correctly', () => { expect(looseEqual(null, null)).toBe(true) expect(looseEqual(undefined, undefined)).toBe(true) expect(looseEqual(void 0, undefined)).toBe(true) @@ -197,7 +196,7 @@ describe('utils/looseEqual', () => { expect(looseEqual(undefined, false)).toBe(false) }) - it('compares sparse arrays correctly', () => { + test('compares sparse arrays correctly', () => { // The following arrays all have a length of 3 // But the first two are "sparse" const arr1 = []