diff --git a/src/jsx.d.ts b/src/jsx.d.ts index f246cb1948..25c18aa549 100644 --- a/src/jsx.d.ts +++ b/src/jsx.d.ts @@ -4,7 +4,6 @@ import { ClassAttributes, Component, - ComponentChild, ComponentType, FunctionComponent, PreactDOMAttributes, @@ -24,20 +23,20 @@ type Booleanish = boolean | 'true' | 'false'; /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent) */ interface ToggleEvent extends Event { - /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/newState) */ - readonly newState: string; - /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/oldState) */ - readonly oldState: string; + /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/newState) */ + readonly newState: string; + /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/oldState) */ + readonly oldState: string; } declare var ToggleEvent: { - prototype: ToggleEvent; - new(type: string, eventInitDict?: ToggleEventInit): ToggleEvent; + prototype: ToggleEvent; + new (type: string, eventInitDict?: ToggleEventInit): ToggleEvent; }; interface ToggleEventInit extends EventInit { - newState?: string; - oldState?: string; + newState?: string; + oldState?: string; } // End TS >5.2 @@ -1240,257 +1239,60 @@ export namespace JSXInternal { export type AriaRole = WAIAriaRole | DPubAriaRole; export interface AllHTMLAttributes - extends ClassAttributes, - DOMAttributes, - AriaAttributes { - // Standard HTML Attributes - accept?: Signalish; - acceptCharset?: Signalish; - 'accept-charset'?: Signalish; - accessKey?: Signalish; - accesskey?: Signalish; - action?: Signalish; - allow?: Signalish; - allowFullScreen?: Signalish; - allowTransparency?: Signalish; - alt?: Signalish; - as?: Signalish; - async?: Signalish; - autocomplete?: Signalish; - autoComplete?: Signalish; - autocorrect?: Signalish; - autoCorrect?: Signalish; - autofocus?: Signalish; - autoFocus?: Signalish; - autoPlay?: Signalish; - autoplay?: Signalish; - capture?: Signalish; - cellPadding?: Signalish; - cellSpacing?: Signalish; - charSet?: Signalish; - charset?: Signalish; - challenge?: Signalish; - checked?: Signalish; - cite?: Signalish; - class?: Signalish; - className?: Signalish; - cols?: Signalish; - colSpan?: Signalish; - colspan?: Signalish; - content?: Signalish; - contentEditable?: Signalish< - Booleanish | '' | 'plaintext-only' | 'inherit' | undefined - >; - contenteditable?: Signalish; - /** @deprecated See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contextmenu */ - contextMenu?: Signalish; - /** @deprecated See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contextmenu */ - contextmenu?: Signalish; - controls?: Signalish; - controlslist?: Signalish<'nodownload' | 'nofullscreen' | 'noremoteplayback' | undefined>; - controlsList?: Signalish<'nodownload' | 'nofullscreen' | 'noremoteplayback' | undefined>; - coords?: Signalish; - crossOrigin?: Signalish; - crossorigin?: Signalish; - currentTime?: Signalish; - data?: Signalish; - dateTime?: Signalish; - datetime?: Signalish; - default?: Signalish; - defaultChecked?: Signalish; - defaultMuted?: Signalish; - defaultPlaybackRate?: Signalish; - defaultValue?: Signalish; - defer?: Signalish; - dir?: Signalish<'auto' | 'rtl' | 'ltr' | undefined>; - disabled?: Signalish; - disableremoteplayback?: Signalish; - disableRemotePlayback?: Signalish; - download?: Signalish; - decoding?: Signalish<'sync' | 'async' | 'auto' | undefined>; - draggable?: Signalish; - encType?: Signalish; - enctype?: Signalish; - enterkeyhint?: Signalish< - | 'enter' - | 'done' - | 'go' - | 'next' - | 'previous' - | 'search' - | 'send' - | undefined - >; - elementTiming?: Signalish; - elementtiming?: Signalish; - exportparts?: Signalish; - for?: Signalish; - form?: Signalish; - formAction?: Signalish; - formaction?: Signalish; - formEncType?: Signalish; - formenctype?: Signalish; - formMethod?: Signalish; - formmethod?: Signalish; - formNoValidate?: Signalish; - formnovalidate?: Signalish; - formTarget?: Signalish; - formtarget?: Signalish; - frameBorder?: Signalish; - frameborder?: Signalish; - headers?: Signalish; - height?: Signalish; - hidden?: Signalish; - high?: Signalish; - href?: Signalish; - hrefLang?: Signalish; - hreflang?: Signalish; - htmlFor?: Signalish; - httpEquiv?: Signalish; - 'http-equiv'?: Signalish; - icon?: Signalish; - id?: Signalish; - indeterminate?: Signalish; - inert?: Signalish; - inputMode?: Signalish; - inputmode?: Signalish; - integrity?: Signalish; - is?: Signalish; - keyParams?: Signalish; - keyType?: Signalish; - kind?: Signalish; - label?: Signalish; - lang?: Signalish; - list?: Signalish; - loading?: Signalish<'eager' | 'lazy' | undefined>; - loop?: Signalish; - low?: Signalish; - manifest?: Signalish; - marginHeight?: Signalish; - marginWidth?: Signalish; - max?: Signalish; - maxLength?: Signalish; - maxlength?: Signalish; - media?: Signalish; - mediaGroup?: Signalish; - method?: Signalish; - min?: Signalish; - minLength?: Signalish; - minlength?: Signalish; - multiple?: Signalish; - muted?: Signalish; - name?: Signalish; - nomodule?: Signalish; - nonce?: Signalish; - noValidate?: Signalish; - novalidate?: Signalish; - open?: Signalish; - optimum?: Signalish; - part?: Signalish; - pattern?: Signalish; - ping?: Signalish; - placeholder?: Signalish; - playsInline?: Signalish; - playsinline?: Signalish; - playbackRate?: Signalish; - popover?: Signalish<'auto' | 'hint' | 'manual' | boolean | undefined>; - popovertarget?: Signalish; - popoverTarget?: Signalish; - popovertargetaction?: Signalish<'hide' | 'show' | 'toggle' | undefined>; - popoverTargetAction?: Signalish<'hide' | 'show' | 'toggle' | undefined>; - poster?: Signalish; - preload?: Signalish<'auto' | 'metadata' | 'none' | undefined>; - preservesPitch?: Signalish; - radioGroup?: Signalish; - readonly?: Signalish; - readOnly?: Signalish; - referrerpolicy?: Signalish< - | 'no-referrer' - | 'no-referrer-when-downgrade' - | 'origin' - | 'origin-when-cross-origin' - | 'same-origin' - | 'strict-origin' - | 'strict-origin-when-cross-origin' - | 'unsafe-url' - | undefined - >; - rel?: Signalish; - required?: Signalish; - reversed?: Signalish; - role?: Signalish; - rows?: Signalish; - rowSpan?: Signalish; - rowspan?: Signalish; - sandbox?: Signalish; - scope?: Signalish; - scoped?: Signalish; - scrolling?: Signalish; - seamless?: Signalish; - selected?: Signalish; - shape?: Signalish; - size?: Signalish; - sizes?: Signalish; - slot?: Signalish; - span?: Signalish; - spellcheck?: Signalish; - src?: Signalish; - srcDoc?: Signalish; - srcdoc?: Signalish; - srcLang?: Signalish; - srclang?: Signalish; - srcSet?: Signalish; - srcset?: Signalish; - srcObject?: Signalish; - start?: Signalish; - step?: Signalish; - style?: Signalish; - summary?: Signalish; - tabIndex?: Signalish; - tabindex?: Signalish; - target?: Signalish; - title?: Signalish; - type?: Signalish; - useMap?: Signalish; - usemap?: Signalish; - value?: Signalish; - volume?: Signalish; - width?: Signalish; - wmode?: Signalish; - wrap?: Signalish; - - // Non-standard Attributes - autocapitalize?: Signalish< - 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' | undefined - >; - autoCapitalize?: Signalish< - 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' | undefined - >; - disablePictureInPicture?: Signalish; - results?: Signalish; - translate?: Signalish; - - // RDFa Attributes - about?: Signalish; - datatype?: Signalish; - inlist?: Signalish; - prefix?: Signalish; - property?: Signalish; - resource?: Signalish; - typeof?: Signalish; - vocab?: Signalish; - - // Microdata Attributes - itemProp?: Signalish; - itemprop?: Signalish; - itemScope?: Signalish; - itemscope?: Signalish; - itemType?: Signalish; - itemtype?: Signalish; - itemID?: Signalish; - itemid?: Signalish; - itemRef?: Signalish; - itemref?: Signalish; + extends AnchorHTMLAttributes, + AreaHTMLAttributes, + AudioHTMLAttributes, + BaseHTMLAttributes, + BlockquoteHTMLAttributes, + ButtonHTMLAttributes, + CanvasHTMLAttributes, + ColHTMLAttributes, + ColgroupHTMLAttributes, + DataHTMLAttributes, + DelHTMLAttributes, + DetailsHTMLAttributes, + DialogHTMLAttributes, + EmbedHTMLAttributes, + FieldsetHTMLAttributes, + FormHTMLAttributes, + IframeHTMLAttributes, + ImgHTMLAttributes, + InputHTMLAttributes, + InsHTMLAttributes, + KeygenHTMLAttributes, + LabelHTMLAttributes, + LiHTMLAttributes, + LinkHTMLAttributes, + MapHTMLAttributes, + MarqueeHTMLAttributes, + MediaHTMLAttributes, + MenuHTMLAttributes, + MetaHTMLAttributes, + MeterHTMLAttributes, + ObjectHTMLAttributes, + OlHTMLAttributes, + OptgroupHTMLAttributes, + OptionHTMLAttributes, + OutputHTMLAttributes, + ParamHTMLAttributes, + ProgressHTMLAttributes, + QuoteHTMLAttributes, + ScriptHTMLAttributes, + SelectHTMLAttributes, + SlotHTMLAttributes, + SourceHTMLAttributes, + StyleHTMLAttributes, + TableHTMLAttributes, + TdHTMLAttributes, + TextareaHTMLAttributes, + ThHTMLAttributes, + TimeHTMLAttributes, + TrackHTMLAttributes, + VideoHTMLAttributes { + /* Properties that are incompatible between elements */ + loop?: Signalish; + target?: Signalish; + type?: Signalish; } export interface HTMLAttributes @@ -1627,7 +1429,7 @@ export namespace JSXInternal { referrerPolicy?: Signalish; rel?: Signalish; shape?: Signalish; - target?: Signalish; + target?: Signalish; } interface AudioHTMLAttributes @@ -1636,7 +1438,7 @@ export namespace JSXInternal { interface BaseHTMLAttributes extends HTMLAttributes { href?: Signalish; - target?: Signalish; + target?: Signalish; } interface BlockquoteHTMLAttributes @@ -1702,7 +1504,6 @@ export namespace JSXInternal { interface DetailsHTMLAttributes extends HTMLAttributes { open?: Signalish; - onToggle?: GenericEventHandler | undefined; } interface DialogHTMLAttributes @@ -1756,7 +1557,7 @@ export namespace JSXInternal { /** @deprecated */ frameBorder?: Signalish; height?: Signalish; - loading?: 'eager' | 'lazy' | undefined; + loading?: Signalish<'eager' | 'lazy' | undefined>; /** @deprecated */ marginHeight?: Signalish; /** @deprecated */ @@ -1913,7 +1714,8 @@ export namespace JSXInternal { as?: Signalish; crossorigin?: Signalish; crossOrigin?: Signalish; - fetchPriority?: Signalish<'high' | 'low' | 'auto'>; + fetchpriority?: Signalish<'high' | 'low' | 'auto' | undefined>; + fetchPriority?: Signalish<'high' | 'low' | 'auto' | undefined>; href?: Signalish; hreflang?: Signalish; hrefLang?: Signalish; @@ -1921,7 +1723,7 @@ export namespace JSXInternal { media?: Signalish; imageSrcSet?: Signalish; referrerpolicy?: Signalish; - referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; + referrerPolicy?: Signalish; rel?: Signalish; sizes?: Signalish; type?: Signalish; @@ -1954,8 +1756,12 @@ export namespace JSXInternal { autoplay?: Signalish; autoPlay?: Signalish; controls?: Signalish; - controlslist?: Signalish<'nodownload' | 'nofullscreen' | 'noremoteplayback' | undefined>; - controlsList?: Signalish<'nodownload' | 'nofullscreen' | 'noremoteplayback' | undefined>; + controlslist?: Signalish< + 'nodownload' | 'nofullscreen' | 'noremoteplayback' | undefined + >; + controlsList?: Signalish< + 'nodownload' | 'nofullscreen' | 'noremoteplayback' | undefined + >; crossorigin?: Signalish; crossOrigin?: Signalish; currentTime?: Signalish; @@ -2075,7 +1881,7 @@ export namespace JSXInternal { nomodule?: Signalish; noModule?: Signalish; referrerpolicy?: Signalish; - referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; + referrerPolicy?: Signalish; src?: Signalish; type?: Signalish; } @@ -2149,7 +1955,7 @@ export namespace JSXInternal { autocomplete?: Signalish; autoComplete?: Signalish; cols?: Signalish; - defaultValue?: Signalish; + defaultValue?: Signalish; dirName?: Signalish; disabled?: Signalish; form?: Signalish; diff --git a/test/ts/preact.tsx b/test/ts/preact.tsx index 632e11a29d..c0fe2cfc08 100644 --- a/test/ts/preact.tsx +++ b/test/ts/preact.tsx @@ -10,6 +10,18 @@ import { JSX } from '../../'; +function createSignal(value: T): JSX.SignalLike { + return { + value, + peek() { + return value; + }, + subscribe() { + return () => {}; + } + }; +} + interface DummyProps { initialInput: string; } @@ -387,13 +399,15 @@ h('form', { onSubmit: onSubmit }); // Should accept onToggle const onToggle = (e: h.JSX.TargetedToggleEvent) => {}; - ({ newState: e.newState, oldState: e.oldState }) } />; + ({ newState: e.newState, oldState: e.oldState })} />; createElement('dialog', { onToggle: onToggle }); h('dialog', { onToggle: onToggle }); // Should default to correct event target element for the attribute interface h('input', { onClick: e => e.currentTarget.capture }); -createElement('input', { onClick: e => e.currentTarget.capture }); +createElement('input', { + onClick: e => e.currentTarget.capture +}); e.currentTarget.capture} />; function Checkbox({ onChange }: JSX.HTMLAttributes) { @@ -406,3 +420,26 @@ function Checkbox({ onChange }: JSX.HTMLAttributes) { return ; } + +// `AllHTMLAttributes` should support all interfaces used within `JSX.IntrinsicElements` +const allHTMLAttributes: JSX.AllHTMLAttributes = { + // Global HTMLAttributes + class: 'foo', + + // Per-element attributes + autoCapitalize: 'off', + dateTime: '2021-01-01', + href: createSignal('https://example.com'), + itemID: 'foo', + maxlength: createSignal(10), + playsInline: true, + + // ClassAttributes + ref: createRef(), + + // DOMAttributes + onClick: (e: JSX.TargetedEvent) => {}, + + // AriaAttributes + 'aria-colcount': 1 +};