From 36ef4e8a326a06ca0199a2a1ed1bf7c453478a2e Mon Sep 17 00:00:00 2001 From: Jovi De Croock Date: Fri, 12 Jan 2024 11:08:44 +0100 Subject: [PATCH] chore: backport 10.12.x to v11 (#4255) * backport https://github.com/preactjs/preact/pull/3871 * port test from https://github.com/preactjs/preact/pull/3884 functionality seems to work in v11 * backport https://github.com/preactjs/preact/pull/3880 * backport https://github.com/preactjs/preact/pull/3875 * backport https://github.com/preactjs/preact/pull/3862 * add todo for #3801 * backport https://github.com/preactjs/preact/pull/3868 * backport https://github.com/preactjs/preact/pull/3867 * backport https://github.com/preactjs/preact/pull/3863 * add todo for #3856 * backport https://github.com/preactjs/preact/pull/3844 * backport https://github.com/preactjs/preact/pull/3816 * backport https://github.com/preactjs/preact/pull/3888/ * backport https://github.com/preactjs/preact/pull/3889 --- README.md | 5 +- compat/src/index.js | 2 +- compat/test/browser/context.test.js | 144 ++ compat/test/browser/suspense.test.js | 33 +- debug/src/debug.js | 9 +- jsx-runtime/src/index.js | 7 +- jsx-runtime/test/browser/jsx-runtime.test.js | 4 +- src/component.js | 25 +- src/create-context.js | 13 +- src/diff/props.js | 4 +- src/index.d.ts | 24 +- src/jsx.d.ts | 2039 ++++++++++++----- test/_util/helpers.js | 9 +- test/browser/createContext.test.js | 108 +- test/browser/focus.test.js | 48 +- test/browser/fragments.test.js | 97 +- .../lifecycles/shouldComponentUpdate.test.js | 57 +- test/browser/render.test.js | 40 +- test/browser/style.test.js | 88 +- test/polyfills.js | 24 +- test/ts/Component-test.tsx | 8 +- test/ts/preact.tsx | 8 +- 22 files changed, 2005 insertions(+), 791 deletions(-) create mode 100644 compat/test/browser/context.test.js diff --git a/README.md b/README.md index d461fc075a..7fb17ee162 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@

- + ![Preact](https://raw.githubusercontent.com/preactjs/preact/8b0bcc927995c188eca83cba30fbc83491cc0b2f/logo.svg?sanitize=true "Preact") @@ -15,7 +15,6 @@ - Highly optimized diff algorithm and seamless hydration from Server Side Rendering - Supports all modern browsers and IE11 - Transparent asynchronous rendering with a pluggable scheduler -- **Instant production-grade app setup with [Preact CLI](https://github.com/preactjs/preact-cli)** ### 💁 More information at the [Preact Website ➞](https://preactjs.com) @@ -52,8 +51,6 @@ You can find some awesome libraries in the [awesome-preact list](https://github. > 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_ -The easiest way to get started with Preact is to install [Preact CLI](https://github.com/preactjs/preact-cli). This simple command-line tool wraps up the best possible tooling for you, and even keeps things like Webpack and Babel up-to-date as they change. Best of all, it's easy to understand! Start a project or compile for production in a single command (`preact build`), with no configuration needed and best practices baked in! 🙌 - #### Tutorial: Building UI with Preact With Preact, you create user interfaces by assembling trees of components and elements. Components are functions or classes that return a description of what their tree should output. These descriptions are typically written in [JSX](https://facebook.github.io/jsx/) (shown underneath), or [HTM](https://github.com/developit/htm) which leverages standard JavaScript Tagged Templates. Both syntaxes can express trees of elements with "props" (similar to HTML attributes) and children. diff --git a/compat/src/index.js b/compat/src/index.js index 587dcd6c4e..9c10c18215 100644 --- a/compat/src/index.js +++ b/compat/src/index.js @@ -116,7 +116,7 @@ const StrictMode = Fragment; * @template Arg * @template Result * @param {(arg: Arg) => Result} callback function that runs before the flush - * @param {Arg} [arg] Optional arugment that can be passed to the callback + * @param {Arg} [arg] Optional argument that can be passed to the callback * @returns */ const flushSync = (callback, arg) => callback(arg); diff --git a/compat/test/browser/context.test.js b/compat/test/browser/context.test.js new file mode 100644 index 0000000000..ec6f3ba1cd --- /dev/null +++ b/compat/test/browser/context.test.js @@ -0,0 +1,144 @@ +import { setupRerender } from 'preact/test-utils'; +import { setupScratch, teardown } from '../../../test/_util/helpers'; +import React, { + render, + createElement, + createContext, + Component, + useState, + useContext +} from 'preact/compat'; + +describe('components', () => { + /** @type {HTMLDivElement} */ + let scratch; + + /** @type {() => void} */ + let rerender; + + beforeEach(() => { + scratch = setupScratch(); + rerender = setupRerender(); + }); + + afterEach(() => { + teardown(scratch); + }); + + it('nested context updates propagate throughout the tree synchronously', () => { + const RouterContext = createContext({ location: '__default_value__' }); + + const route1 = '/page/1'; + const route2 = '/page/2'; + + /** @type {() => void} */ + let toggleLocalState; + /** @type {() => void} */ + let toggleLocation; + + /** @type {Array<{location: string, localState: boolean}>} */ + let pageRenders = []; + + function runUpdate() { + toggleLocalState(); + toggleLocation(); + } + + /** + * @extends {React.Component<{children: any}, {location: string}>} + */ + class Router extends Component { + constructor(props) { + super(props); + this.state = { location: route1 }; + toggleLocation = () => { + const oldLocation = this.state.location; + const newLocation = oldLocation === route1 ? route2 : route1; + // console.log('Toggling location', oldLocation, '->', newLocation); + this.setState({ location: newLocation }); + }; + } + + render() { + // console.log('Rendering Router', { location: this.state.location }); + return ( + + {this.props.children} + + ); + } + } + + /** + * @extends {React.Component<{children: any}>} + */ + class Route extends Component { + render() { + return ( + + {(contextValue) => { + // console.log('Rendering Route', { + // location: contextValue.location + // }); + // Pretend to do something with the context value + const newContextValue = { ...contextValue }; + return ( + + {this.props.children} + + ); + }} + + ); + } + } + + function Page() { + const [localState, setLocalState] = useState(true); + const { location } = useContext(RouterContext); + + pageRenders.push({ location, localState }); + // console.log('Rendering Page', { location, localState }); + + toggleLocalState = () => { + let newValue = !localState; + // console.log('Toggling localState', localState, '->', newValue); + setLocalState(newValue); + }; + + return ( + <> +

localState: {localState.toString()}
+
location: {location}
+
+ +
+ + ); + } + + function App() { + return ( + + + + + + ); + } + + render(, scratch); + expect(pageRenders).to.deep.equal([{ location: route1, localState: true }]); + + pageRenders = []; + runUpdate(); // Simulate button click + rerender(); + + // Page should rerender once with both propagated context and local state updates + expect(pageRenders).to.deep.equal([ + { location: route2, localState: false } + ]); + }); +}); diff --git a/compat/test/browser/suspense.test.js b/compat/test/browser/suspense.test.js index 0435b05ece..9168bd2175 100644 --- a/compat/test/browser/suspense.test.js +++ b/compat/test/browser/suspense.test.js @@ -15,6 +15,7 @@ import { createLazy, createSuspender } from './suspense-utils'; const h = React.createElement; /* eslint-env browser, mocha */ +// TODO: https://github.com/preactjs/preact/pull/3856 class Catcher extends Component { constructor(props) { super(props); @@ -192,7 +193,9 @@ describe('suspense', () => { } } - const FuncWrapper = props =>
{props.children}
; + const FuncWrapper = (props) => ( +
{props.children}
+ ); const [Suspender, suspend] = createSuspender(() =>
Hello
); @@ -228,7 +231,7 @@ describe('suspense', () => { /** @type {() => Promise} */ let resolve; let resolved = false; - const promise = new Promise(_resolve => { + const promise = new Promise((_resolve) => { resolve = () => { resolved = true; _resolve(); @@ -296,7 +299,7 @@ describe('suspense', () => { /** @type {() => Promise} */ let resolve; let resolved = false; - const promise = new Promise(_resolve => { + const promise = new Promise((_resolve) => { resolve = () => { resolved = true; _resolve(); @@ -1290,7 +1293,7 @@ describe('suspense', () => { /** @type {() => Promise} */ let resolve; let resolved = false; - const promise = new Promise(_resolve => { + const promise = new Promise((_resolve) => { resolve = () => { resolved = true; _resolve(); @@ -1298,7 +1301,7 @@ describe('suspense', () => { }; }); - const Child = props => { + const Child = (props) => { if (!resolved) { throw promise; } @@ -1445,10 +1448,10 @@ describe('suspense', () => { }); it('should allow same component to be suspended multiple times', async () => { - const cache = { '1': true }; + const cache = { 1: true }; function Lazy({ value }) { if (!cache[value]) { - throw new Promise(resolve => { + throw new Promise((resolve) => { cache[value] = resolve; }); } @@ -1468,7 +1471,7 @@ describe('suspense', () => { hide = () => { this.setState({ show: false }); }; - setValue = value => { + setValue = (value) => { this.setState({ value }); }; } @@ -1632,7 +1635,7 @@ describe('suspense', () => { let increment; function Updater() { const [i, setState] = useState(0); - increment = () => setState(i => i + 1); + increment = () => setState((i) => i + 1); return (
i: {i} @@ -1688,7 +1691,7 @@ describe('suspense', () => { let hide; let suspender = null; - let suspenderRef = s => { + let suspenderRef = (s) => { // skip null values as we want to keep the ref even after unmount if (s) { suspender = s; @@ -1858,7 +1861,7 @@ describe('suspense', () => { return this.state.content; } } - return [content => suspender.unsuspend(content), Suspender]; + return [(content) => suspender.unsuspend(content), Suspender]; } const [unsuspender1, Suspender1] = createSuspender(); @@ -2130,7 +2133,7 @@ describe('suspense', () => { const suspense = ( Suspended...
}> - {value => } + {(value) => } ); @@ -2139,7 +2142,7 @@ describe('suspense', () => { rerender(); expect(scratch.innerHTML).to.equal(`
Suspended...
`); - return resolve(props =>
{props.value}
).then(() => { + return resolve((props) =>
{props.value}
).then(() => { rerender(); expect(scratch.innerHTML).to.eql(`
123
`); }); @@ -2154,7 +2157,7 @@ describe('suspense', () => { const suspense = ( Suspended...}> - {value => } + {(value) => } ); @@ -2166,7 +2169,7 @@ describe('suspense', () => { rerender(); expect(scratch.innerHTML).to.equal(`
Suspended...
`); - return resolve(props =>
{props.value}
).then(() => { + return resolve((props) =>
{props.value}
).then(() => { rerender(); expect(scratch.innerHTML).to.eql(`
123
`); }); diff --git a/debug/src/debug.js b/debug/src/debug.js index 61ecb46ae5..9b1e42146e 100644 --- a/debug/src/debug.js +++ b/debug/src/debug.js @@ -70,7 +70,7 @@ export function initDebug() { try { oldCatchError(error, vnode, oldVNode); - // when an error was handled by an ErrorBoundary we will nontheless emit an error + // when an error was handled by an ErrorBoundary we will nonetheless emit an error // event on the window object. This is to make up for react compatibility in dev mode // and thus make the Next.js dev overlay work. if (typeof error.then != 'function') { @@ -120,6 +120,7 @@ export function initDebug() { // `{{ foo: 123, bar: "abc" }}`). if (vnode.constructor !== undefined) { const keys = Object.keys(vnode).join(','); + // TODO: https://github.com/preactjs/preact/pull/3801 throw new Error( `Objects are not valid as a child. Encountered an object with the keys {${keys}}.` + `\n\n${getOwnerStack(internal)}` @@ -327,7 +328,7 @@ export function initDebug() { // https://esbench.com/bench/6021ebd7d9c27600a7bfdba3 const deprecatedProto = Object.create({}, deprecatedAttributes); - options.vnode = vnode => { + options.vnode = (vnode) => { const props = vnode.props; if (props != null && ('__source' in props || '__self' in props)) { Object.defineProperties(props, debugProps); @@ -340,7 +341,7 @@ export function initDebug() { if (oldVnode) oldVnode(vnode); }; - options.diffed = vnode => { + options.diffed = (vnode) => { hooksAllowed = false; if (oldDiffed) oldDiffed(vnode); @@ -374,7 +375,7 @@ export function initDebug() { const setState = Component.prototype.setState; /** @this {import('../../src/internal').Component} */ -Component.prototype.setState = function(update, callback) { +Component.prototype.setState = function (update, callback) { if (this._internal == null) { // `this._internal` will be `null` during componentWillMount. But it // is perfectly valid to call `setState` during cWM. So we diff --git a/jsx-runtime/src/index.js b/jsx-runtime/src/index.js index 85dd545379..c5b23efdc7 100644 --- a/jsx-runtime/src/index.js +++ b/jsx-runtime/src/index.js @@ -20,10 +20,11 @@ let vnodeId = 0; * @param {VNode['type']} type * @param {VNode['props']} props * @param {VNode['key']} [key] - * @param {string} [__source] - * @param {string} [__self] + * @param {unknown} [isStaticChildren] + * @param {unknown} [__source] + * @param {unknown} [__self] */ -function createVNode(type, props, key, __source, __self) { +function createVNode(type, props, key, isStaticChildren, __source, __self) { // We'll want to preserve `ref` in props to get rid of the need for // forwardRef components in the future, but that should happen via // a separate PR. diff --git a/jsx-runtime/test/browser/jsx-runtime.test.js b/jsx-runtime/test/browser/jsx-runtime.test.js index 2f66993e1c..acec971d29 100644 --- a/jsx-runtime/test/browser/jsx-runtime.test.js +++ b/jsx-runtime/test/browser/jsx-runtime.test.js @@ -1,4 +1,4 @@ -import { Component, createElement, createRef } from 'preact'; +import { createElement, createRef } from 'preact'; import { jsx, jsxs, jsxDEV, Fragment } from 'preact/jsx-runtime'; import { setupScratch, teardown } from '../../../test/_util/helpers'; @@ -32,7 +32,7 @@ describe('Babel jsx/jsxDEV', () => { }); it('should set __source and __self', () => { - const vnode = jsx('div', { class: 'foo' }, 'key', 'source', 'self'); + const vnode = jsx('div', { class: 'foo' }, 'key', false, 'source', 'self'); expect(vnode.__source).to.equal('source'); expect(vnode.__self).to.equal('self'); }); diff --git a/src/component.js b/src/component.js index 795b652b41..551fbe2c6d 100644 --- a/src/component.js +++ b/src/component.js @@ -29,7 +29,7 @@ export function Component(props, context) { * @param {() => void} [callback] A function to be called once component state is * updated */ -Component.prototype.setState = function(update, callback) { +Component.prototype.setState = function (update, callback) { // only clone state when copying to nextState the first time. let s; if (this._nextState != null && this._nextState !== this.state) { @@ -64,7 +64,7 @@ Component.prototype.setState = function(update, callback) { * @param {() => void} [callback] A function to be called after component is * re-rendered */ -Component.prototype.forceUpdate = function(callback) { +Component.prototype.forceUpdate = function (callback) { const internal = this._internal; if (internal) { // Set render mode so that we can differentiate where the render request @@ -141,11 +141,22 @@ export function enqueueRender(internal) { /** Flush the render queue by rerendering all queued components */ function processRenderQueue() { - while ((len = processRenderQueue._rerenderCount = renderQueue.length)) { - renderQueue.sort((a, b) => a._depth - b._depth); - while (len--) { - renderQueuedInternal(renderQueue.shift()); + let c; + renderQueue.sort((a, b) => a._depth - b._depth); + // Don't update `renderCount` yet. Keep its value non-zero to prevent unnecessary + // process() calls from getting scheduled while `queue` is still being consumed. + while ((c = renderQueue.shift())) { + if (c.flags & DIRTY_BIT) { + let renderQueueLength = renderQueue.length; + renderQueuedInternal(c); + if (renderQueue.length > renderQueueLength) { + // When i.e. rerendering a provider additional new items can be injected, we want to + // keep the order from top to bottom with those new items so we can handle them in a + // single pass + renderQueue.sort((a, b) => a._depth - b._depth); + } } } + processRenderQueue._rerenderCount = 0; } -let len = (processRenderQueue._rerenderCount = 0); +processRenderQueue._rerenderCount = 0; diff --git a/src/create-context.js b/src/create-context.js index ccb0a67885..191cde99e7 100644 --- a/src/create-context.js +++ b/src/create-context.js @@ -1,15 +1,16 @@ import { enqueueRender } from './component'; +import { FORCE_UPDATE } from './constants'; let nextContextId = 0; const providers = new Set(); /** @param {import('./internal').Internal} internal */ -export const unsubscribeFromContext = internal => { +export const unsubscribeFromContext = (internal) => { // if this was a context provider, delete() returns true and we exit: if (providers.delete(internal)) return; // ... otherwise, unsubscribe from any contexts: - providers.forEach(p => { + providers.forEach((p) => { p._component._subs.delete(internal); }); }; @@ -39,7 +40,10 @@ export const createContext = (defaultValue, contextId) => { } // re-render subscribers in response to value change else if (props.value !== this._prev) { - this._subs.forEach(enqueueRender); + this._subs.forEach((internal) => { + internal.flags |= FORCE_UPDATE; + enqueueRender(internal); + }); } this._prev = props.value; @@ -53,5 +57,6 @@ export const createContext = (defaultValue, contextId) => { // of on the component itself. See: // https://reactjs.org/docs/context.html#contextdisplayname - return (context.Provider._contextRef = context.Consumer.contextType = context); + return (context.Provider._contextRef = context.Consumer.contextType = + context); }; diff --git a/src/diff/props.js b/src/diff/props.js index 24cc19ba23..e5d9408939 100644 --- a/src/diff/props.js +++ b/src/diff/props.js @@ -2,7 +2,7 @@ import options from '../options'; function setStyle(dom, key, value) { if (key[0] === '-') { - dom.style.setProperty(key, value); + dom.style.setProperty(key, value == null ? '' : value); } else { dom.style[key] = value == null ? '' : value; } @@ -69,6 +69,8 @@ export function setProperty(dom, name, value, oldValue, isSvg) { // - className --> class name = name.replace(/xlink[H:h]/, 'h').replace(/sName$/, 's'); } else if ( + name !== 'width' && + name !== 'height' && name !== 'href' && name !== 'list' && name !== 'form' && diff --git a/src/index.d.ts b/src/index.d.ts index b9b1f6986d..60aeece24b 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -53,8 +53,8 @@ export type ComponentChild = export type ComponentChildren = ComponentChild[] | ComponentChild; export interface Attributes { - key?: Key; - jsx?: boolean; + key?: Key | undefined; + jsx?: boolean | undefined; } export interface ClassAttributes extends Attributes { @@ -270,14 +270,18 @@ export namespace h { // Preact render // ----------------------------------- -export function render( - vnode: ComponentChild, - parent: Element | Document | ShadowRoot | DocumentFragment -): void; -export function hydrate( - vnode: ComponentChild, - parent: Element | Document | ShadowRoot | DocumentFragment -): void; +interface ContainerNode { + nodeType: Node['nodeType']; + parentNode: Node['parentNode']; + firstChild: Node['firstChild']; + insertBefore: Node['insertBefore']; + appendChild: Node['appendChild']; + removeChild: Node['removeChild']; + childNodes: ArrayLike; +} + +export function render(vnode: ComponentChild, parent: ContainerNode): void; +export function hydrate(vnode: ComponentChild, parent: ContainerNode): void; export function cloneElement( vnode: VNode, props?: any, diff --git a/src/jsx.d.ts b/src/jsx.d.ts index 2d41f2ccc9..8fd016cd00 100644 --- a/src/jsx.d.ts +++ b/src/jsx.d.ts @@ -4,6 +4,9 @@ import { ClassAttributes, Component, + ComponentChild, + ComponentType, + FunctionComponent, PreactDOMAttributes, VNode } from './index'; @@ -26,9 +29,15 @@ export namespace JSXInternal { key?: any; } + export type ElementType

= + | { + [K in keyof IntrinsicElements]: P extends IntrinsicElements[K] + ? K + : never; + }[keyof IntrinsicElements] + | ComponentType

; export interface Element extends VNode {} - - export interface ElementClass extends Component {} + export type ElementClass = Component | FunctionComponent; export interface ElementAttributesProperty { props: any; @@ -55,11 +64,29 @@ export namespace JSXInternal { cssText?: string | null; } + export interface SignalLike { + value: T; + peek(): T; + subscribe(fn: (value: T) => void): () => void; + } + export interface SVGAttributes extends HTMLAttributes { - accentHeight?: number | string; - accumulate?: 'none' | 'sum'; - additive?: 'replace' | 'sum'; + accentHeight?: + | number + | string + | undefined + | SignalLike; + accumulate?: + | 'none' + | 'sum' + | undefined + | SignalLike<'none' | 'sum' | undefined>; + additive?: + | 'replace' + | 'sum' + | undefined + | SignalLike<'replace' | 'sum' | undefined>; alignmentBaseline?: | 'auto' | 'baseline' @@ -73,242 +100,920 @@ export namespace JSXInternal { | 'alphabetic' | 'hanging' | 'mathematical' - | 'inherit'; - allowReorder?: 'no' | 'yes'; - alphabetic?: number | string; - amplitude?: number | string; - arabicForm?: 'initial' | 'medial' | 'terminal' | 'isolated'; - ascent?: number | string; - attributeName?: string; - attributeType?: string; - autoReverse?: number | string; - azimuth?: number | string; - baseFrequency?: number | string; - baselineShift?: number | string; - baseProfile?: number | string; - bbox?: number | string; - begin?: number | string; - bias?: number | string; - by?: number | string; - calcMode?: number | string; - capHeight?: number | string; - clip?: number | string; - clipPath?: string; - clipPathUnits?: number | string; - clipRule?: number | string; - colorInterpolation?: number | string; - colorInterpolationFilters?: 'auto' | 'sRGB' | 'linearRGB' | 'inherit'; - colorProfile?: number | string; - colorRendering?: number | string; - contentScriptType?: number | string; - contentStyleType?: number | string; - cursor?: number | string; - cx?: number | string; - cy?: number | string; - d?: string; - decelerate?: number | string; - descent?: number | string; - diffuseConstant?: number | string; - direction?: number | string; - display?: number | string; - divisor?: number | string; - dominantBaseline?: number | string; - dur?: number | string; - dx?: number | string; - dy?: number | string; - edgeMode?: number | string; - elevation?: number | string; - enableBackground?: number | string; - end?: number | string; - exponent?: number | string; - externalResourcesRequired?: number | string; - fill?: string; - fillOpacity?: number | string; - fillRule?: 'nonzero' | 'evenodd' | 'inherit'; - filter?: string; - filterRes?: number | string; - filterUnits?: number | string; - floodColor?: number | string; - floodOpacity?: number | string; - focusable?: number | string; - fontFamily?: string; - fontSize?: number | string; - fontSizeAdjust?: number | string; - fontStretch?: number | string; - fontStyle?: number | string; - fontVariant?: number | string; - fontWeight?: number | string; - format?: number | string; - from?: number | string; - fx?: number | string; - fy?: number | string; - g1?: number | string; - g2?: number | string; - glyphName?: number | string; - glyphOrientationHorizontal?: number | string; - glyphOrientationVertical?: number | string; - glyphRef?: number | string; - gradientTransform?: string; - gradientUnits?: string; - hanging?: number | string; - horizAdvX?: number | string; - horizOriginX?: number | string; - ideographic?: number | string; - imageRendering?: number | string; - in2?: number | string; - in?: string; - intercept?: number | string; - k1?: number | string; - k2?: number | string; - k3?: number | string; - k4?: number | string; - k?: number | string; - kernelMatrix?: number | string; - kernelUnitLength?: number | string; - kerning?: number | string; - keyPoints?: number | string; - keySplines?: number | string; - keyTimes?: number | string; - lengthAdjust?: number | string; - letterSpacing?: number | string; - lightingColor?: number | string; - limitingConeAngle?: number | string; - local?: number | string; - markerEnd?: string; - markerHeight?: number | string; - markerMid?: string; - markerStart?: string; - markerUnits?: number | string; - markerWidth?: number | string; - mask?: string; - maskContentUnits?: number | string; - maskUnits?: number | string; - mathematical?: number | string; - mode?: number | string; - numOctaves?: number | string; - offset?: number | string; - opacity?: number | string; - operator?: number | string; - order?: number | string; - orient?: number | string; - orientation?: number | string; - origin?: number | string; - overflow?: number | string; - overlinePosition?: number | string; - overlineThickness?: number | string; - paintOrder?: number | string; - panose1?: number | string; - pathLength?: number | string; - patternContentUnits?: string; - patternTransform?: number | string; - patternUnits?: string; - pointerEvents?: number | string; - points?: string; - pointsAtX?: number | string; - pointsAtY?: number | string; - pointsAtZ?: number | string; - preserveAlpha?: number | string; - preserveAspectRatio?: string; - primitiveUnits?: number | string; - r?: number | string; - radius?: number | string; - refX?: number | string; - refY?: number | string; - renderingIntent?: number | string; - repeatCount?: number | string; - repeatDur?: number | string; - requiredExtensions?: number | string; - requiredFeatures?: number | string; - restart?: number | string; - result?: string; - rotate?: number | string; - rx?: number | string; - ry?: number | string; - scale?: number | string; - seed?: number | string; - shapeRendering?: number | string; - slope?: number | string; - spacing?: number | string; - specularConstant?: number | string; - specularExponent?: number | string; - speed?: number | string; - spreadMethod?: string; - startOffset?: number | string; - stdDeviation?: number | string; - stemh?: number | string; - stemv?: number | string; - stitchTiles?: number | string; - stopColor?: string; - stopOpacity?: number | string; - strikethroughPosition?: number | string; - strikethroughThickness?: number | string; - string?: number | string; - stroke?: string; - strokeDasharray?: string | number; - strokeDashoffset?: string | number; - strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit'; - strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit'; - strokeMiterlimit?: string | number; - strokeOpacity?: number | string; - strokeWidth?: number | string; - surfaceScale?: number | string; - systemLanguage?: number | string; - tableValues?: number | string; - targetX?: number | string; - targetY?: number | string; - textAnchor?: string; - textDecoration?: number | string; - textLength?: number | string; - textRendering?: number | string; - to?: number | string; - transform?: string; - u1?: number | string; - u2?: number | string; - underlinePosition?: number | string; - underlineThickness?: number | string; - unicode?: number | string; - unicodeBidi?: number | string; - unicodeRange?: number | string; - unitsPerEm?: number | string; - vAlphabetic?: number | string; - values?: string; - vectorEffect?: number | string; - version?: string; - vertAdvY?: number | string; - vertOriginX?: number | string; - vertOriginY?: number | string; - vHanging?: number | string; - vIdeographic?: number | string; - viewBox?: string; - viewTarget?: number | string; - visibility?: number | string; - vMathematical?: number | string; - widths?: number | string; - wordSpacing?: number | string; - writingMode?: number | string; - x1?: number | string; - x2?: number | string; - x?: number | string; - xChannelSelector?: string; - xHeight?: number | string; - xlinkActuate?: string; - xlinkArcrole?: string; - xlinkHref?: string; - xlinkRole?: string; - xlinkShow?: string; - xlinkTitle?: string; - xlinkType?: string; - xmlBase?: string; - xmlLang?: string; - xmlns?: string; - xmlnsXlink?: string; - xmlSpace?: string; - y1?: number | string; - y2?: number | string; - y?: number | string; - yChannelSelector?: string; - z?: number | string; - zoomAndPan?: string; + | 'inherit' + | undefined + | SignalLike< + | 'auto' + | 'baseline' + | 'before-edge' + | 'text-before-edge' + | 'middle' + | 'central' + | 'after-edge' + | 'text-after-edge' + | 'ideographic' + | 'alphabetic' + | 'hanging' + | 'mathematical' + | 'inherit' + | undefined + >; + allowReorder?: + | 'no' + | 'yes' + | undefined + | SignalLike<'no' | 'yes' | undefined>; + alphabetic?: + | number + | string + | undefined + | SignalLike; + amplitude?: + | number + | string + | undefined + | SignalLike; + arabicForm?: + | 'initial' + | 'medial' + | 'terminal' + | 'isolated' + | undefined + | SignalLike<'initial' | 'medial' | 'terminal' | 'isolated' | undefined>; + ascent?: + | number + | string + | undefined + | SignalLike; + attributeName?: string | undefined | SignalLike; + attributeType?: string | undefined | SignalLike; + autoReverse?: + | number + | string + | undefined + | SignalLike; + azimuth?: + | number + | string + | undefined + | SignalLike; + baseFrequency?: + | number + | string + | undefined + | SignalLike; + baselineShift?: + | number + | string + | undefined + | SignalLike; + baseProfile?: + | number + | string + | undefined + | SignalLike; + bbox?: + | number + | string + | undefined + | SignalLike; + begin?: + | number + | string + | undefined + | SignalLike; + bias?: + | number + | string + | undefined + | SignalLike; + by?: number | string | undefined | SignalLike; + calcMode?: + | number + | string + | undefined + | SignalLike; + capHeight?: + | number + | string + | undefined + | SignalLike; + clip?: + | number + | string + | undefined + | SignalLike; + clipPath?: string | undefined | SignalLike; + clipPathUnits?: + | number + | string + | undefined + | SignalLike; + clipRule?: + | number + | string + | undefined + | SignalLike; + colorInterpolation?: + | number + | string + | undefined + | SignalLike; + colorInterpolationFilters?: + | 'auto' + | 'sRGB' + | 'linearRGB' + | 'inherit' + | undefined + | SignalLike<'auto' | 'sRGB' | 'linearRGB' | 'inherit' | undefined>; + colorProfile?: + | number + | string + | undefined + | SignalLike; + colorRendering?: + | number + | string + | undefined + | SignalLike; + contentScriptType?: + | number + | string + | undefined + | SignalLike; + contentStyleType?: + | number + | string + | undefined + | SignalLike; + cursor?: + | number + | string + | undefined + | SignalLike; + cx?: number | string | undefined | SignalLike; + cy?: number | string | undefined | SignalLike; + d?: string | undefined | SignalLike; + decelerate?: + | number + | string + | undefined + | SignalLike; + descent?: + | number + | string + | undefined + | SignalLike; + diffuseConstant?: + | number + | string + | undefined + | SignalLike; + direction?: + | number + | string + | undefined + | SignalLike; + display?: + | number + | string + | undefined + | SignalLike; + divisor?: + | number + | string + | undefined + | SignalLike; + dominantBaseline?: + | number + | string + | undefined + | SignalLike; + dur?: number | string | undefined | SignalLike; + dx?: number | string | undefined | SignalLike; + dy?: number | string | undefined | SignalLike; + edgeMode?: + | number + | string + | undefined + | SignalLike; + elevation?: + | number + | string + | undefined + | SignalLike; + enableBackground?: + | number + | string + | undefined + | SignalLike; + end?: number | string | undefined | SignalLike; + exponent?: + | number + | string + | undefined + | SignalLike; + externalResourcesRequired?: + | number + | string + | undefined + | SignalLike; + fill?: string | undefined | SignalLike; + fillOpacity?: + | number + | string + | undefined + | SignalLike; + fillRule?: + | 'nonzero' + | 'evenodd' + | 'inherit' + | undefined + | SignalLike<'nonzero' | 'evenodd' | 'inherit' | undefined>; + filter?: string | undefined | SignalLike; + filterRes?: + | number + | string + | undefined + | SignalLike; + filterUnits?: + | number + | string + | undefined + | SignalLike; + floodColor?: + | number + | string + | undefined + | SignalLike; + floodOpacity?: + | number + | string + | undefined + | SignalLike; + focusable?: + | number + | string + | undefined + | SignalLike; + fontFamily?: string | undefined | SignalLike; + fontSize?: + | number + | string + | undefined + | SignalLike; + fontSizeAdjust?: + | number + | string + | undefined + | SignalLike; + fontStretch?: + | number + | string + | undefined + | SignalLike; + fontStyle?: + | number + | string + | undefined + | SignalLike; + fontVariant?: + | number + | string + | undefined + | SignalLike; + fontWeight?: + | number + | string + | undefined + | SignalLike; + format?: + | number + | string + | undefined + | SignalLike; + from?: + | number + | string + | undefined + | SignalLike; + fx?: number | string | undefined | SignalLike; + fy?: number | string | undefined | SignalLike; + g1?: number | string | undefined | SignalLike; + g2?: number | string | undefined | SignalLike; + glyphName?: + | number + | string + | undefined + | SignalLike; + glyphOrientationHorizontal?: + | number + | string + | undefined + | SignalLike; + glyphOrientationVertical?: + | number + | string + | undefined + | SignalLike; + glyphRef?: + | number + | string + | undefined + | SignalLike; + gradientTransform?: string | undefined | SignalLike; + gradientUnits?: string | undefined | SignalLike; + hanging?: + | number + | string + | undefined + | SignalLike; + horizAdvX?: + | number + | string + | undefined + | SignalLike; + horizOriginX?: + | number + | string + | undefined + | SignalLike; + ideographic?: + | number + | string + | undefined + | SignalLike; + imageRendering?: + | number + | string + | undefined + | SignalLike; + in2?: number | string | undefined | SignalLike; + in?: string | undefined | SignalLike; + intercept?: + | number + | string + | undefined + | SignalLike; + k1?: number | string | undefined | SignalLike; + k2?: number | string | undefined | SignalLike; + k3?: number | string | undefined | SignalLike; + k4?: number | string | undefined | SignalLike; + k?: number | string | undefined | SignalLike; + kernelMatrix?: + | number + | string + | undefined + | SignalLike; + kernelUnitLength?: + | number + | string + | undefined + | SignalLike; + kerning?: + | number + | string + | undefined + | SignalLike; + keyPoints?: + | number + | string + | undefined + | SignalLike; + keySplines?: + | number + | string + | undefined + | SignalLike; + keyTimes?: + | number + | string + | undefined + | SignalLike; + lengthAdjust?: + | number + | string + | undefined + | SignalLike; + letterSpacing?: + | number + | string + | undefined + | SignalLike; + lightingColor?: + | number + | string + | undefined + | SignalLike; + limitingConeAngle?: + | number + | string + | undefined + | SignalLike; + local?: + | number + | string + | undefined + | SignalLike; + markerEnd?: string | undefined | SignalLike; + markerHeight?: + | number + | string + | undefined + | SignalLike; + markerMid?: string | undefined | SignalLike; + markerStart?: string | undefined | SignalLike; + markerUnits?: + | number + | string + | undefined + | SignalLike; + markerWidth?: + | number + | string + | undefined + | SignalLike; + mask?: string | undefined | SignalLike; + maskContentUnits?: + | number + | string + | undefined + | SignalLike; + maskUnits?: + | number + | string + | undefined + | SignalLike; + mathematical?: + | number + | string + | undefined + | SignalLike; + mode?: + | number + | string + | undefined + | SignalLike; + numOctaves?: + | number + | string + | undefined + | SignalLike; + offset?: + | number + | string + | undefined + | SignalLike; + opacity?: + | number + | string + | undefined + | SignalLike; + operator?: + | number + | string + | undefined + | SignalLike; + order?: + | number + | string + | undefined + | SignalLike; + orient?: + | number + | string + | undefined + | SignalLike; + orientation?: + | number + | string + | undefined + | SignalLike; + origin?: + | number + | string + | undefined + | SignalLike; + overflow?: + | number + | string + | undefined + | SignalLike; + overlinePosition?: + | number + | string + | undefined + | SignalLike; + overlineThickness?: + | number + | string + | undefined + | SignalLike; + paintOrder?: + | number + | string + | undefined + | SignalLike; + panose1?: + | number + | string + | undefined + | SignalLike; + pathLength?: + | number + | string + | undefined + | SignalLike; + patternContentUnits?: string | undefined | SignalLike; + patternTransform?: + | number + | string + | undefined + | SignalLike; + patternUnits?: string | undefined | SignalLike; + pointerEvents?: + | number + | string + | undefined + | SignalLike; + points?: string | undefined | SignalLike; + pointsAtX?: + | number + | string + | undefined + | SignalLike; + pointsAtY?: + | number + | string + | undefined + | SignalLike; + pointsAtZ?: + | number + | string + | undefined + | SignalLike; + preserveAlpha?: + | number + | string + | undefined + | SignalLike; + preserveAspectRatio?: string | undefined | SignalLike; + primitiveUnits?: + | number + | string + | undefined + | SignalLike; + r?: number | string | undefined | SignalLike; + radius?: + | number + | string + | undefined + | SignalLike; + refX?: + | number + | string + | undefined + | SignalLike; + refY?: + | number + | string + | undefined + | SignalLike; + renderingIntent?: + | number + | string + | undefined + | SignalLike; + repeatCount?: + | number + | string + | undefined + | SignalLike; + repeatDur?: + | number + | string + | undefined + | SignalLike; + requiredExtensions?: + | number + | string + | undefined + | SignalLike; + requiredFeatures?: + | number + | string + | undefined + | SignalLike; + restart?: + | number + | string + | undefined + | SignalLike; + result?: string | undefined | SignalLike; + rotate?: + | number + | string + | undefined + | SignalLike; + rx?: number | string | undefined | SignalLike; + ry?: number | string | undefined | SignalLike; + scale?: + | number + | string + | undefined + | SignalLike; + seed?: + | number + | string + | undefined + | SignalLike; + shapeRendering?: + | number + | string + | undefined + | SignalLike; + slope?: + | number + | string + | undefined + | SignalLike; + spacing?: + | number + | string + | undefined + | SignalLike; + specularConstant?: + | number + | string + | undefined + | SignalLike; + specularExponent?: + | number + | string + | undefined + | SignalLike; + speed?: + | number + | string + | undefined + | SignalLike; + spreadMethod?: string | undefined | SignalLike; + startOffset?: + | number + | string + | undefined + | SignalLike; + stdDeviation?: + | number + | string + | undefined + | SignalLike; + stemh?: + | number + | string + | undefined + | SignalLike; + stemv?: + | number + | string + | undefined + | SignalLike; + stitchTiles?: + | number + | string + | undefined + | SignalLike; + stopColor?: string | undefined | SignalLike; + stopOpacity?: + | number + | string + | undefined + | SignalLike; + strikethroughPosition?: + | number + | string + | undefined + | SignalLike; + strikethroughThickness?: + | number + | string + | undefined + | SignalLike; + string?: + | number + | string + | undefined + | SignalLike; + stroke?: string | undefined | SignalLike; + strokeDasharray?: + | string + | number + | undefined + | SignalLike; + strokeDashoffset?: + | string + | number + | undefined + | SignalLike; + strokeLinecap?: + | 'butt' + | 'round' + | 'square' + | 'inherit' + | undefined + | SignalLike<'butt' | 'round' | 'square' | 'inherit' | undefined>; + strokeLinejoin?: + | 'miter' + | 'round' + | 'bevel' + | 'inherit' + | undefined + | SignalLike<'miter' | 'round' | 'bevel' | 'inherit' | undefined>; + strokeMiterlimit?: + | string + | number + | undefined + | SignalLike; + strokeOpacity?: + | number + | string + | undefined + | SignalLike; + strokeWidth?: + | number + | string + | undefined + | SignalLike; + surfaceScale?: + | number + | string + | undefined + | SignalLike; + systemLanguage?: + | number + | string + | undefined + | SignalLike; + tableValues?: + | number + | string + | undefined + | SignalLike; + targetX?: + | number + | string + | undefined + | SignalLike; + targetY?: + | number + | string + | undefined + | SignalLike; + textAnchor?: string | undefined | SignalLike; + textDecoration?: + | number + | string + | undefined + | SignalLike; + textLength?: + | number + | string + | undefined + | SignalLike; + textRendering?: + | number + | string + | undefined + | SignalLike; + to?: number | string | undefined | SignalLike; + transform?: string | undefined | SignalLike; + u1?: number | string | undefined | SignalLike; + u2?: number | string | undefined | SignalLike; + underlinePosition?: + | number + | string + | undefined + | SignalLike; + underlineThickness?: + | number + | string + | undefined + | SignalLike; + unicode?: + | number + | string + | undefined + | SignalLike; + unicodeBidi?: + | number + | string + | undefined + | SignalLike; + unicodeRange?: + | number + | string + | undefined + | SignalLike; + unitsPerEm?: + | number + | string + | undefined + | SignalLike; + vAlphabetic?: + | number + | string + | undefined + | SignalLike; + values?: string | undefined | SignalLike; + vectorEffect?: + | number + | string + | undefined + | SignalLike; + version?: string | undefined | SignalLike; + vertAdvY?: + | number + | string + | undefined + | SignalLike; + vertOriginX?: + | number + | string + | undefined + | SignalLike; + vertOriginY?: + | number + | string + | undefined + | SignalLike; + vHanging?: + | number + | string + | undefined + | SignalLike; + vIdeographic?: + | number + | string + | undefined + | SignalLike; + viewBox?: string | undefined | SignalLike; + viewTarget?: + | number + | string + | undefined + | SignalLike; + visibility?: + | number + | string + | undefined + | SignalLike; + vMathematical?: + | number + | string + | undefined + | SignalLike; + widths?: + | number + | string + | undefined + | SignalLike; + wordSpacing?: + | number + | string + | undefined + | SignalLike; + writingMode?: + | number + | string + | undefined + | SignalLike; + x1?: number | string | undefined | SignalLike; + x2?: number | string | undefined | SignalLike; + x?: number | string | undefined | SignalLike; + xChannelSelector?: string | undefined | SignalLike; + xHeight?: + | number + | string + | undefined + | SignalLike; + xlinkActuate?: string | undefined | SignalLike; + xlinkArcrole?: string | undefined | SignalLike; + xlinkHref?: string | undefined | SignalLike; + xlinkRole?: string | undefined | SignalLike; + xlinkShow?: string | undefined | SignalLike; + xlinkTitle?: string | undefined | SignalLike; + xlinkType?: string | undefined | SignalLike; + xmlBase?: string | undefined | SignalLike; + xmlLang?: string | undefined | SignalLike; + xmlns?: string | undefined | SignalLike; + xmlnsXlink?: string | undefined | SignalLike; + xmlSpace?: string | undefined | SignalLike; + y1?: number | string | undefined | SignalLike; + y2?: number | string | undefined | SignalLike; + y?: number | string | undefined | SignalLike; + yChannelSelector?: string | undefined | SignalLike; + z?: number | string | undefined | SignalLike; + zoomAndPan?: string | undefined | SignalLike; } export interface PathAttributes { @@ -322,15 +1027,12 @@ export namespace JSXInternal { readonly currentTarget: Target; }; - export type TargetedAnimationEvent< - Target extends EventTarget - > = TargetedEvent; - export type TargetedClipboardEvent< - Target extends EventTarget - > = TargetedEvent; - export type TargetedCompositionEvent< - Target extends EventTarget - > = TargetedEvent; + export type TargetedAnimationEvent = + TargetedEvent; + export type TargetedClipboardEvent = + TargetedEvent; + export type TargetedCompositionEvent = + TargetedEvent; export type TargetedDragEvent = TargetedEvent< Target, DragEvent @@ -355,9 +1057,8 @@ export namespace JSXInternal { Target, TouchEvent >; - export type TargetedTransitionEvent< - Target extends EventTarget - > = TargetedEvent; + export type TargetedTransitionEvent = + TargetedEvent; export type TargetedUIEvent = TargetedEvent< Target, UIEvent @@ -368,11 +1069,7 @@ export namespace JSXInternal { >; export interface EventHandler { - /** - * The `this` keyword always points to the DOM element the event handler - * was invoked on. See: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers#Event_handlers_parameters_this_binding_and_the_return_value - */ - (this: never, event: E): void; + (this: void, event: E): void; } export type AnimationEventHandler = EventHandler< @@ -381,9 +1078,8 @@ export namespace JSXInternal { export type ClipboardEventHandler = EventHandler< TargetedClipboardEvent >; - export type CompositionEventHandler< - Target extends EventTarget - > = EventHandler>; + export type CompositionEventHandler = + EventHandler>; export type DragEventHandler = EventHandler< TargetedDragEvent >; @@ -418,201 +1114,201 @@ export namespace JSXInternal { export interface DOMAttributes extends PreactDOMAttributes { // Image Events - onLoad?: GenericEventHandler; - onLoadCapture?: GenericEventHandler; - onError?: GenericEventHandler; - onErrorCapture?: GenericEventHandler; + onLoad?: GenericEventHandler | undefined; + onLoadCapture?: GenericEventHandler | undefined; + onError?: GenericEventHandler | undefined; + onErrorCapture?: GenericEventHandler | undefined; // Clipboard Events - onCopy?: ClipboardEventHandler; - onCopyCapture?: ClipboardEventHandler; - onCut?: ClipboardEventHandler; - onCutCapture?: ClipboardEventHandler; - onPaste?: ClipboardEventHandler; - onPasteCapture?: ClipboardEventHandler; + onCopy?: ClipboardEventHandler | undefined; + onCopyCapture?: ClipboardEventHandler | undefined; + onCut?: ClipboardEventHandler | undefined; + onCutCapture?: ClipboardEventHandler | undefined; + onPaste?: ClipboardEventHandler | undefined; + onPasteCapture?: ClipboardEventHandler | undefined; // Composition Events - onCompositionEnd?: CompositionEventHandler; - onCompositionEndCapture?: CompositionEventHandler; - onCompositionStart?: CompositionEventHandler; - onCompositionStartCapture?: CompositionEventHandler; - onCompositionUpdate?: CompositionEventHandler; - onCompositionUpdateCapture?: CompositionEventHandler; + onCompositionEnd?: CompositionEventHandler | undefined; + onCompositionEndCapture?: CompositionEventHandler | undefined; + onCompositionStart?: CompositionEventHandler | undefined; + onCompositionStartCapture?: CompositionEventHandler | undefined; + onCompositionUpdate?: CompositionEventHandler | undefined; + onCompositionUpdateCapture?: CompositionEventHandler | undefined; // Details Events - onToggle?: GenericEventHandler; + onToggle?: GenericEventHandler | undefined; // Focus Events - onFocus?: FocusEventHandler; - onFocusCapture?: FocusEventHandler; - onfocusin?: FocusEventHandler; - onfocusinCapture?: FocusEventHandler; - onfocusout?: FocusEventHandler; - onfocusoutCapture?: FocusEventHandler; - onBlur?: FocusEventHandler; - onBlurCapture?: FocusEventHandler; + onFocus?: FocusEventHandler | undefined; + onFocusCapture?: FocusEventHandler | undefined; + onfocusin?: FocusEventHandler | undefined; + onfocusinCapture?: FocusEventHandler | undefined; + onfocusout?: FocusEventHandler | undefined; + onfocusoutCapture?: FocusEventHandler | undefined; + onBlur?: FocusEventHandler | undefined; + onBlurCapture?: FocusEventHandler | undefined; // Form Events - onChange?: GenericEventHandler; - onChangeCapture?: GenericEventHandler; - onInput?: GenericEventHandler; - onInputCapture?: GenericEventHandler; - onBeforeInput?: GenericEventHandler; - onBeforeInputCapture?: GenericEventHandler; - onSearch?: GenericEventHandler; - onSearchCapture?: GenericEventHandler; - onSubmit?: GenericEventHandler; - onSubmitCapture?: GenericEventHandler; - onInvalid?: GenericEventHandler; - onInvalidCapture?: GenericEventHandler; - onReset?: GenericEventHandler; - onResetCapture?: GenericEventHandler; - onFormData?: GenericEventHandler; - onFormDataCapture?: GenericEventHandler; + onChange?: GenericEventHandler | undefined; + onChangeCapture?: GenericEventHandler | undefined; + onInput?: GenericEventHandler | undefined; + onInputCapture?: GenericEventHandler | undefined; + onBeforeInput?: GenericEventHandler | undefined; + onBeforeInputCapture?: GenericEventHandler | undefined; + onSearch?: GenericEventHandler | undefined; + onSearchCapture?: GenericEventHandler | undefined; + onSubmit?: GenericEventHandler | undefined; + onSubmitCapture?: GenericEventHandler | undefined; + onInvalid?: GenericEventHandler | undefined; + onInvalidCapture?: GenericEventHandler | undefined; + onReset?: GenericEventHandler | undefined; + onResetCapture?: GenericEventHandler | undefined; + onFormData?: GenericEventHandler | undefined; + onFormDataCapture?: GenericEventHandler | undefined; // Keyboard Events - onKeyDown?: KeyboardEventHandler; - onKeyDownCapture?: KeyboardEventHandler; - onKeyPress?: KeyboardEventHandler; - onKeyPressCapture?: KeyboardEventHandler; - onKeyUp?: KeyboardEventHandler; - onKeyUpCapture?: KeyboardEventHandler; + onKeyDown?: KeyboardEventHandler | undefined; + onKeyDownCapture?: KeyboardEventHandler | undefined; + onKeyPress?: KeyboardEventHandler | undefined; + onKeyPressCapture?: KeyboardEventHandler | undefined; + onKeyUp?: KeyboardEventHandler | undefined; + onKeyUpCapture?: KeyboardEventHandler | undefined; // Media Events - onAbort?: GenericEventHandler; - onAbortCapture?: GenericEventHandler; - onCanPlay?: GenericEventHandler; - onCanPlayCapture?: GenericEventHandler; - onCanPlayThrough?: GenericEventHandler; - onCanPlayThroughCapture?: GenericEventHandler; - onDurationChange?: GenericEventHandler; - onDurationChangeCapture?: GenericEventHandler; - onEmptied?: GenericEventHandler; - onEmptiedCapture?: GenericEventHandler; - onEncrypted?: GenericEventHandler; - onEncryptedCapture?: GenericEventHandler; - onEnded?: GenericEventHandler; - onEndedCapture?: GenericEventHandler; - onLoadedData?: GenericEventHandler; - onLoadedDataCapture?: GenericEventHandler; - onLoadedMetadata?: GenericEventHandler; - onLoadedMetadataCapture?: GenericEventHandler; - onLoadStart?: GenericEventHandler; - onLoadStartCapture?: GenericEventHandler; - onPause?: GenericEventHandler; - onPauseCapture?: GenericEventHandler; - onPlay?: GenericEventHandler; - onPlayCapture?: GenericEventHandler; - onPlaying?: GenericEventHandler; - onPlayingCapture?: GenericEventHandler; - onProgress?: GenericEventHandler; - onProgressCapture?: GenericEventHandler; - onRateChange?: GenericEventHandler; - onRateChangeCapture?: GenericEventHandler; - onSeeked?: GenericEventHandler; - onSeekedCapture?: GenericEventHandler; - onSeeking?: GenericEventHandler; - onSeekingCapture?: GenericEventHandler; - onStalled?: GenericEventHandler; - onStalledCapture?: GenericEventHandler; - onSuspend?: GenericEventHandler; - onSuspendCapture?: GenericEventHandler; - onTimeUpdate?: GenericEventHandler; - onTimeUpdateCapture?: GenericEventHandler; - onVolumeChange?: GenericEventHandler; - onVolumeChangeCapture?: GenericEventHandler; - onWaiting?: GenericEventHandler; - onWaitingCapture?: GenericEventHandler; + onAbort?: GenericEventHandler | undefined; + onAbortCapture?: GenericEventHandler | undefined; + onCanPlay?: GenericEventHandler | undefined; + onCanPlayCapture?: GenericEventHandler | undefined; + onCanPlayThrough?: GenericEventHandler | undefined; + onCanPlayThroughCapture?: GenericEventHandler | undefined; + onDurationChange?: GenericEventHandler | undefined; + onDurationChangeCapture?: GenericEventHandler | undefined; + onEmptied?: GenericEventHandler | undefined; + onEmptiedCapture?: GenericEventHandler | undefined; + onEncrypted?: GenericEventHandler | undefined; + onEncryptedCapture?: GenericEventHandler | undefined; + onEnded?: GenericEventHandler | undefined; + onEndedCapture?: GenericEventHandler | undefined; + onLoadedData?: GenericEventHandler | undefined; + onLoadedDataCapture?: GenericEventHandler | undefined; + onLoadedMetadata?: GenericEventHandler | undefined; + onLoadedMetadataCapture?: GenericEventHandler | undefined; + onLoadStart?: GenericEventHandler | undefined; + onLoadStartCapture?: GenericEventHandler | undefined; + onPause?: GenericEventHandler | undefined; + onPauseCapture?: GenericEventHandler | undefined; + onPlay?: GenericEventHandler | undefined; + onPlayCapture?: GenericEventHandler | undefined; + onPlaying?: GenericEventHandler | undefined; + onPlayingCapture?: GenericEventHandler | undefined; + onProgress?: GenericEventHandler | undefined; + onProgressCapture?: GenericEventHandler | undefined; + onRateChange?: GenericEventHandler | undefined; + onRateChangeCapture?: GenericEventHandler | undefined; + onSeeked?: GenericEventHandler | undefined; + onSeekedCapture?: GenericEventHandler | undefined; + onSeeking?: GenericEventHandler | undefined; + onSeekingCapture?: GenericEventHandler | undefined; + onStalled?: GenericEventHandler | undefined; + onStalledCapture?: GenericEventHandler | undefined; + onSuspend?: GenericEventHandler | undefined; + onSuspendCapture?: GenericEventHandler | undefined; + onTimeUpdate?: GenericEventHandler | undefined; + onTimeUpdateCapture?: GenericEventHandler | undefined; + onVolumeChange?: GenericEventHandler | undefined; + onVolumeChangeCapture?: GenericEventHandler | undefined; + onWaiting?: GenericEventHandler | undefined; + onWaitingCapture?: GenericEventHandler | undefined; // MouseEvents - onClick?: MouseEventHandler; - onClickCapture?: MouseEventHandler; - onContextMenu?: MouseEventHandler; - onContextMenuCapture?: MouseEventHandler; - onDblClick?: MouseEventHandler; - onDblClickCapture?: MouseEventHandler; - onDrag?: DragEventHandler; - onDragCapture?: DragEventHandler; - onDragEnd?: DragEventHandler; - onDragEndCapture?: DragEventHandler; - onDragEnter?: DragEventHandler; - onDragEnterCapture?: DragEventHandler; - onDragExit?: DragEventHandler; - onDragExitCapture?: DragEventHandler; - onDragLeave?: DragEventHandler; - onDragLeaveCapture?: DragEventHandler; - onDragOver?: DragEventHandler; - onDragOverCapture?: DragEventHandler; - onDragStart?: DragEventHandler; - onDragStartCapture?: DragEventHandler; - onDrop?: DragEventHandler; - onDropCapture?: DragEventHandler; - onMouseDown?: MouseEventHandler; - onMouseDownCapture?: MouseEventHandler; - onMouseEnter?: MouseEventHandler; - onMouseEnterCapture?: MouseEventHandler; - onMouseLeave?: MouseEventHandler; - onMouseLeaveCapture?: MouseEventHandler; - onMouseMove?: MouseEventHandler; - onMouseMoveCapture?: MouseEventHandler; - onMouseOut?: MouseEventHandler; - onMouseOutCapture?: MouseEventHandler; - onMouseOver?: MouseEventHandler; - onMouseOverCapture?: MouseEventHandler; - onMouseUp?: MouseEventHandler; - onMouseUpCapture?: MouseEventHandler; + onClick?: MouseEventHandler | undefined; + onClickCapture?: MouseEventHandler | undefined; + onContextMenu?: MouseEventHandler | undefined; + onContextMenuCapture?: MouseEventHandler | undefined; + onDblClick?: MouseEventHandler | undefined; + onDblClickCapture?: MouseEventHandler | undefined; + onDrag?: DragEventHandler | undefined; + onDragCapture?: DragEventHandler | undefined; + onDragEnd?: DragEventHandler | undefined; + onDragEndCapture?: DragEventHandler | undefined; + onDragEnter?: DragEventHandler | undefined; + onDragEnterCapture?: DragEventHandler | undefined; + onDragExit?: DragEventHandler | undefined; + onDragExitCapture?: DragEventHandler | undefined; + onDragLeave?: DragEventHandler | undefined; + onDragLeaveCapture?: DragEventHandler | undefined; + onDragOver?: DragEventHandler | undefined; + onDragOverCapture?: DragEventHandler | undefined; + onDragStart?: DragEventHandler | undefined; + onDragStartCapture?: DragEventHandler | undefined; + onDrop?: DragEventHandler | undefined; + onDropCapture?: DragEventHandler | undefined; + onMouseDown?: MouseEventHandler | undefined; + onMouseDownCapture?: MouseEventHandler | undefined; + onMouseEnter?: MouseEventHandler | undefined; + onMouseEnterCapture?: MouseEventHandler | undefined; + onMouseLeave?: MouseEventHandler | undefined; + onMouseLeaveCapture?: MouseEventHandler | undefined; + onMouseMove?: MouseEventHandler | undefined; + onMouseMoveCapture?: MouseEventHandler | undefined; + onMouseOut?: MouseEventHandler | undefined; + onMouseOutCapture?: MouseEventHandler | undefined; + onMouseOver?: MouseEventHandler | undefined; + onMouseOverCapture?: MouseEventHandler | undefined; + onMouseUp?: MouseEventHandler | undefined; + onMouseUpCapture?: MouseEventHandler | undefined; // Selection Events - onSelect?: GenericEventHandler; - onSelectCapture?: GenericEventHandler; + onSelect?: GenericEventHandler | undefined; + onSelectCapture?: GenericEventHandler | undefined; // Touch Events - onTouchCancel?: TouchEventHandler; - onTouchCancelCapture?: TouchEventHandler; - onTouchEnd?: TouchEventHandler; - onTouchEndCapture?: TouchEventHandler; - onTouchMove?: TouchEventHandler; - onTouchMoveCapture?: TouchEventHandler; - onTouchStart?: TouchEventHandler; - onTouchStartCapture?: TouchEventHandler; + onTouchCancel?: TouchEventHandler | undefined; + onTouchCancelCapture?: TouchEventHandler | undefined; + onTouchEnd?: TouchEventHandler | undefined; + onTouchEndCapture?: TouchEventHandler | undefined; + onTouchMove?: TouchEventHandler | undefined; + onTouchMoveCapture?: TouchEventHandler | undefined; + onTouchStart?: TouchEventHandler | undefined; + onTouchStartCapture?: TouchEventHandler | undefined; // Pointer Events - onPointerOver?: PointerEventHandler; - onPointerOverCapture?: PointerEventHandler; - onPointerEnter?: PointerEventHandler; - onPointerEnterCapture?: PointerEventHandler; - onPointerDown?: PointerEventHandler; - onPointerDownCapture?: PointerEventHandler; - onPointerMove?: PointerEventHandler; - onPointerMoveCapture?: PointerEventHandler; - onPointerUp?: PointerEventHandler; - onPointerUpCapture?: PointerEventHandler; - onPointerCancel?: PointerEventHandler; - onPointerCancelCapture?: PointerEventHandler; - onPointerOut?: PointerEventHandler; - onPointerOutCapture?: PointerEventHandler; - onPointerLeave?: PointerEventHandler; - onPointerLeaveCapture?: PointerEventHandler; - onGotPointerCapture?: PointerEventHandler; - onGotPointerCaptureCapture?: PointerEventHandler; - onLostPointerCapture?: PointerEventHandler; - onLostPointerCaptureCapture?: PointerEventHandler; + onPointerOver?: PointerEventHandler | undefined; + onPointerOverCapture?: PointerEventHandler | undefined; + onPointerEnter?: PointerEventHandler | undefined; + onPointerEnterCapture?: PointerEventHandler | undefined; + onPointerDown?: PointerEventHandler | undefined; + onPointerDownCapture?: PointerEventHandler | undefined; + onPointerMove?: PointerEventHandler | undefined; + onPointerMoveCapture?: PointerEventHandler | undefined; + onPointerUp?: PointerEventHandler | undefined; + onPointerUpCapture?: PointerEventHandler | undefined; + onPointerCancel?: PointerEventHandler | undefined; + onPointerCancelCapture?: PointerEventHandler | undefined; + onPointerOut?: PointerEventHandler | undefined; + onPointerOutCapture?: PointerEventHandler | undefined; + onPointerLeave?: PointerEventHandler | undefined; + onPointerLeaveCapture?: PointerEventHandler | undefined; + onGotPointerCapture?: PointerEventHandler | undefined; + onGotPointerCaptureCapture?: PointerEventHandler | undefined; + onLostPointerCapture?: PointerEventHandler | undefined; + onLostPointerCaptureCapture?: PointerEventHandler | undefined; // UI Events - onScroll?: UIEventHandler; - onScrollCapture?: UIEventHandler; + onScroll?: UIEventHandler | undefined; + onScrollCapture?: UIEventHandler | undefined; // Wheel Events - onWheel?: WheelEventHandler; - onWheelCapture?: WheelEventHandler; + onWheel?: WheelEventHandler | undefined; + onWheelCapture?: WheelEventHandler | undefined; // Animation Events - onAnimationStart?: AnimationEventHandler; - onAnimationStartCapture?: AnimationEventHandler; - onAnimationEnd?: AnimationEventHandler; - onAnimationEndCapture?: AnimationEventHandler; - onAnimationIteration?: AnimationEventHandler; - onAnimationIterationCapture?: AnimationEventHandler; + onAnimationStart?: AnimationEventHandler | undefined; + onAnimationStartCapture?: AnimationEventHandler | undefined; + onAnimationEnd?: AnimationEventHandler | undefined; + onAnimationEndCapture?: AnimationEventHandler | undefined; + onAnimationIteration?: AnimationEventHandler | undefined; + onAnimationIterationCapture?: AnimationEventHandler | undefined; // Transition Events onTransitionEnd?: TransitionEventHandler; @@ -623,52 +1319,67 @@ export namespace JSXInternal { extends ClassAttributes, DOMAttributes { // Standard HTML Attributes - accept?: string; - acceptCharset?: string; - accessKey?: string; - action?: string; - allow?: string; - allowFullScreen?: boolean; - allowTransparency?: boolean; - alt?: string; - as?: string; - async?: boolean; - autocomplete?: string; - autoComplete?: string; - autocorrect?: string; - autoCorrect?: string; - autofocus?: boolean; - autoFocus?: boolean; - autoPlay?: boolean; - capture?: boolean | string; - cellPadding?: number | string; - cellSpacing?: number | string; - charSet?: string; - challenge?: string; - checked?: boolean; - cite?: string; - class?: string | undefined; - className?: string | undefined; - cols?: number; - colSpan?: number; - content?: string; - contentEditable?: boolean; - contextMenu?: string; - controls?: boolean; - controlsList?: string; - coords?: string; - crossOrigin?: string; - data?: string; - dateTime?: string; - default?: boolean; - defer?: boolean; - dir?: 'auto' | 'rtl' | 'ltr'; - disabled?: boolean; - disableRemotePlayback?: boolean; - download?: any; - decoding?: 'sync' | 'async' | 'auto'; - draggable?: boolean; - encType?: string; + accept?: string | undefined | SignalLike; + acceptCharset?: string | undefined | SignalLike; + accessKey?: string | undefined | SignalLike; + action?: string | undefined | SignalLike; + allow?: string | undefined | SignalLike; + allowFullScreen?: boolean | undefined | SignalLike; + allowTransparency?: boolean | undefined | SignalLike; + alt?: string | undefined | SignalLike; + as?: string | undefined | SignalLike; + async?: boolean | undefined | SignalLike; + autocomplete?: string | undefined | SignalLike; + autoComplete?: string | undefined | SignalLike; + autocorrect?: string | undefined | SignalLike; + autoCorrect?: string | undefined | SignalLike; + autofocus?: boolean | undefined | SignalLike; + autoFocus?: boolean | undefined | SignalLike; + autoPlay?: boolean | undefined | SignalLike; + capture?: boolean | string | undefined | SignalLike; + cellPadding?: number | string | undefined | SignalLike; + cellSpacing?: number | string | undefined | SignalLike; + charSet?: string | undefined | SignalLike; + challenge?: string | undefined | SignalLike; + checked?: boolean | undefined | SignalLike; + cite?: string | undefined | SignalLike; + class?: string | undefined | SignalLike; + className?: string | undefined | SignalLike; + cols?: number | undefined | SignalLike; + colSpan?: number | undefined | SignalLike; + content?: string | undefined | SignalLike; + contentEditable?: boolean | undefined | SignalLike; + contextMenu?: string | undefined | SignalLike; + controls?: boolean | undefined | SignalLike; + controlsList?: string | undefined | SignalLike; + coords?: string | undefined | SignalLike; + crossOrigin?: string | undefined | SignalLike; + data?: string | undefined | SignalLike; + dateTime?: string | undefined | SignalLike; + default?: boolean | undefined | SignalLike; + defaultChecked?: boolean | undefined | SignalLike; + defaultValue?: string | undefined | SignalLike; + defer?: boolean | undefined | SignalLike; + dir?: + | 'auto' + | 'rtl' + | 'ltr' + | undefined + | SignalLike<'auto' | 'rtl' | 'ltr' | undefined>; + disabled?: boolean | undefined | SignalLike; + disableRemotePlayback?: + | boolean + | undefined + | SignalLike; + download?: any | undefined; + decoding?: + | 'sync' + | 'async' + | 'auto' + | undefined + | SignalLike<'sync' | 'async' | 'auto' | undefined>; + draggable?: boolean | undefined | SignalLike; + encType?: string | undefined | SignalLike; enterkeyhint?: | 'enter' | 'done' @@ -676,64 +1387,88 @@ export namespace JSXInternal { | 'next' | 'previous' | 'search' - | 'send'; - form?: string; - formAction?: string; - formEncType?: string; - formMethod?: string; - formNoValidate?: boolean; - formTarget?: string; - frameBorder?: number | string; - headers?: string; - height?: number | string; - hidden?: boolean; - high?: number; - href?: string; - hrefLang?: string; - for?: string; - htmlFor?: string; - httpEquiv?: string; - icon?: string; - id?: string; - inputMode?: string; - integrity?: string; - is?: string; - keyParams?: string; - keyType?: string; - kind?: string; - label?: string; - lang?: string; - list?: string; - loading?: 'eager' | 'lazy'; - 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; - nomodule?: boolean; - nonce?: string; - noValidate?: boolean; - open?: boolean; - optimum?: number; - pattern?: string; - ping?: string; - placeholder?: string; - part?: string; - playsInline?: boolean; - poster?: string; - preload?: string; - radioGroup?: string; - readonly?: boolean; + | 'send' + | undefined + | SignalLike< + | 'enter' + | 'done' + | 'go' + | 'next' + | 'previous' + | 'search' + | 'send' + | undefined + >; + form?: string | undefined | SignalLike; + formAction?: string | undefined | SignalLike; + formEncType?: string | undefined | SignalLike; + formMethod?: string | undefined | SignalLike; + formNoValidate?: boolean | undefined | SignalLike; + formTarget?: string | undefined | SignalLike; + frameBorder?: + | number + | string + | undefined + | SignalLike; + headers?: string | undefined | SignalLike; + height?: + | number + | string + | undefined + | SignalLike; + hidden?: boolean | undefined | SignalLike; + high?: number | undefined | SignalLike; + href?: string | undefined | SignalLike; + hrefLang?: string | undefined | SignalLike; + for?: string | undefined | SignalLike; + htmlFor?: string | undefined | SignalLike; + httpEquiv?: string | undefined | SignalLike; + icon?: string | undefined | SignalLike; + id?: string | undefined | SignalLike; + inputMode?: string | undefined | SignalLike; + integrity?: string | undefined | SignalLike; + is?: string | undefined | SignalLike; + keyParams?: string | undefined | SignalLike; + keyType?: string | undefined | SignalLike; + kind?: string | undefined | SignalLike; + label?: string | undefined | SignalLike; + lang?: string | undefined | SignalLike; + list?: string | undefined | SignalLike; + loading?: + | 'eager' + | 'lazy' + | undefined + | SignalLike<'eager' | 'lazy' | undefined>; + loop?: boolean | undefined | SignalLike; + low?: number | undefined | SignalLike; + manifest?: string | undefined | SignalLike; + marginHeight?: number | undefined | SignalLike; + marginWidth?: number | undefined | SignalLike; + max?: number | string | undefined | SignalLike; + maxLength?: number | undefined | SignalLike; + media?: string | undefined | SignalLike; + mediaGroup?: string | undefined | SignalLike; + method?: string | undefined | SignalLike; + min?: number | string | undefined | SignalLike; + minLength?: number | undefined | SignalLike; + multiple?: boolean | undefined | SignalLike; + muted?: boolean | undefined | SignalLike; + name?: string | undefined | SignalLike; + nomodule?: boolean | undefined | SignalLike; + nonce?: string | undefined | SignalLike; + noValidate?: boolean | undefined | SignalLike; + open?: boolean | undefined | SignalLike; + optimum?: number | undefined | SignalLike; + part?: string | undefined | SignalLike; + pattern?: string | undefined | SignalLike; + ping?: string | undefined | SignalLike; + placeholder?: string | undefined | SignalLike; + playsInline?: boolean | undefined | SignalLike; + poster?: string | undefined | SignalLike; + preload?: string | undefined | SignalLike; + radioGroup?: string | undefined | SignalLike; + readonly?: boolean | undefined | SignalLike; + readOnly?: boolean | undefined | SignalLike; referrerpolicy?: | 'no-referrer' | 'no-referrer-when-downgrade' @@ -742,43 +1477,78 @@ export namespace JSXInternal { | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' - | 'unsafe-url'; - rel?: string; - required?: boolean; - role?: string; - rows?: number; - rowSpan?: number; - sandbox?: string; - scope?: string; - scoped?: boolean; - scrolling?: string; - seamless?: boolean; - selected?: boolean; - shape?: string; - size?: number; - sizes?: string; - slot?: string; - span?: number; - spellcheck?: boolean; - src?: string; - srcset?: string; - srcDoc?: string; - srcLang?: string; - srcSet?: string; - start?: number; - step?: number | string; - style?: string | CSSProperties; - summary?: string; - tabIndex?: number; - target?: string; - title?: string; - type?: string; - useMap?: string; - value?: string | string[] | number; - volume?: string | number; - width?: number | string; - wmode?: string; - wrap?: string; + | 'unsafe-url' + | undefined + | SignalLike< + | 'no-referrer' + | 'no-referrer-when-downgrade' + | 'origin' + | 'origin-when-cross-origin' + | 'same-origin' + | 'strict-origin' + | 'strict-origin-when-cross-origin' + | 'unsafe-url' + | undefined + >; + rel?: string | undefined | SignalLike; + required?: boolean | undefined | SignalLike; + reversed?: boolean | undefined | SignalLike; + role?: string | undefined | SignalLike; + rows?: number | undefined | SignalLike; + rowSpan?: number | undefined | SignalLike; + sandbox?: string | undefined | SignalLike; + scope?: string | undefined | SignalLike; + scoped?: boolean | undefined | SignalLike; + scrolling?: string | undefined | SignalLike; + seamless?: boolean | undefined | SignalLike; + selected?: boolean | undefined | SignalLike; + shape?: string | undefined | SignalLike; + size?: number | undefined | SignalLike; + sizes?: string | undefined | SignalLike; + slot?: string | undefined | SignalLike; + span?: number | undefined | SignalLike; + spellcheck?: boolean | undefined | SignalLike; + spellCheck?: boolean | undefined | SignalLike; + src?: string | undefined | SignalLike; + srcset?: string | undefined | SignalLike; + srcDoc?: string | undefined | SignalLike; + srcLang?: string | undefined | SignalLike; + srcSet?: string | undefined | SignalLike; + start?: number | undefined | SignalLike; + step?: + | number + | string + | undefined + | SignalLike; + style?: + | string + | CSSProperties + | undefined + | SignalLike; + summary?: string | undefined | SignalLike; + tabIndex?: number | undefined | SignalLike; + target?: string | undefined | SignalLike; + title?: string | undefined | SignalLike; + type?: string | undefined | SignalLike; + useMap?: string | undefined | SignalLike; + value?: + | string + | string[] + | number + | undefined + | SignalLike; + volume?: + | string + | number + | undefined + | SignalLike; + width?: + | number + | string + | undefined + | SignalLike; + wmode?: string | undefined | SignalLike; + wrap?: string | undefined | SignalLike; // Non-standard Attributes autocapitalize?: @@ -787,41 +1557,57 @@ export namespace JSXInternal { | 'on' | 'sentences' | 'words' - | 'characters'; - disablePictureInPicture?: boolean; - results?: number; - translate?: 'yes' | 'no'; + | 'characters' + | undefined + | SignalLike< + | 'off' + | 'none' + | 'on' + | 'sentences' + | 'words' + | 'characters' + | undefined + >; + autoCapitalize?: + | 'off' + | 'none' + | 'on' + | 'sentences' + | 'words' + | 'characters' + | undefined + | SignalLike< + | 'off' + | 'none' + | 'on' + | 'sentences' + | 'words' + | 'characters' + | undefined + >; + disablePictureInPicture?: + | boolean + | undefined + | SignalLike; + results?: number | undefined | SignalLike; + translate?: 'yes' | 'no' | undefined | SignalLike<'yes' | 'no' | undefined>; // RDFa Attributes - about?: string; - datatype?: string; + about?: string | undefined | SignalLike; + datatype?: string | undefined | SignalLike; inlist?: any; - prefix?: string; - property?: string; - resource?: string; - typeof?: string; - vocab?: string; + prefix?: string | undefined | SignalLike; + property?: string | undefined | SignalLike; + resource?: string | undefined | SignalLike; + typeof?: string | undefined | SignalLike; + vocab?: string | undefined | SignalLike; // Microdata Attributes - itemProp?: string; - itemScope?: boolean; - itemType?: string; - itemID?: string; - itemRef?: string; - } - - export interface HTMLMarqueeElement extends HTMLElement { - behavior?: 'scroll' | 'slide' | 'alternate'; - bgColor?: string; - direction?: 'left' | 'right' | 'up' | 'down'; - height?: number | string; - hspace?: number | string; - loop?: number | string; - scrollAmount?: number | string; - scrollDelay?: number | string; - trueSpeed?: boolean; - vspace?: number | string; - width?: number | string; + itemProp?: string | undefined | SignalLike; + itemScope?: boolean | undefined | SignalLike; + itemType?: string | undefined | SignalLike; + itemID?: string | undefined | SignalLike; + itemRef?: string | undefined | SignalLike; } export type DetailedHTMLProps< @@ -829,6 +1615,59 @@ export namespace JSXInternal { RefType extends EventTarget = EventTarget > = HA; + export interface HTMLMarqueeElement extends HTMLElement { + behavior?: + | 'scroll' + | 'slide' + | 'alternate' + | undefined + | SignalLike<'scroll' | 'slide' | 'alternate' | undefined>; + bgColor?: string | undefined | SignalLike; + direction?: + | 'left' + | 'right' + | 'up' + | 'down' + | undefined + | SignalLike<'left' | 'right' | 'up' | 'down' | undefined>; + height?: + | number + | string + | undefined + | SignalLike; + hspace?: + | number + | string + | undefined + | SignalLike; + loop?: + | number + | string + | undefined + | SignalLike; + scrollAmount?: + | number + | string + | undefined + | SignalLike; + scrollDelay?: + | number + | string + | undefined + | SignalLike; + trueSpeed?: boolean | undefined | SignalLike; + vspace?: + | number + | string + | undefined + | SignalLike; + width?: + | number + | string + | undefined + | SignalLike; + } + export interface IntrinsicElements { // HTML a: HTMLAttributes; @@ -884,7 +1723,7 @@ export namespace JSXInternal { i: HTMLAttributes; iframe: HTMLAttributes; img: HTMLAttributes; - input: HTMLAttributes & { defaultValue?: string }; + input: HTMLAttributes; ins: HTMLAttributes; kbd: HTMLAttributes; keygen: HTMLAttributes; diff --git a/test/_util/helpers.js b/test/_util/helpers.js index 7f009c35f4..8b7cfcc1d1 100644 --- a/test/_util/helpers.js +++ b/test/_util/helpers.js @@ -31,7 +31,8 @@ export function supportsDataList() { ); } -const VOID_ELEMENTS = /^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/; +const VOID_ELEMENTS = + /^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/; function encodeEntities(str) { return str.replace(/&/g, '&'); @@ -152,7 +153,7 @@ export function sortCss(cssText) { cssText .split(';') .filter(Boolean) - .map(s => s.replace(/^\s+|\s+$/g, '').replace(/(\s*:\s*)/g, ': ')) + .map((s) => s.replace(/^\s+|\s+$/g, '').replace(/(\s*:\s*)/g, ': ')) .sort((a, b) => { // CSS Variables are typically positioned at the start if (a[0] === '-') { @@ -191,7 +192,7 @@ export function clearOptions() { /** * Teardown test environment and reset preact's internal state - * @param {HTMLDivElement} scratch + * @param {HTMLElement} scratch */ export function teardown(scratch) { if (scratch) { @@ -223,7 +224,7 @@ export const mixedArrayHTML = '0abcdef1'; * @param {object} obj */ export function clear(obj) { - Object.keys(obj).forEach(key => delete obj[key]); + Object.keys(obj).forEach((key) => delete obj[key]); } /** diff --git a/test/browser/createContext.test.js b/test/browser/createContext.test.js index 0502e2b557..922c92da5b 100644 --- a/test/browser/createContext.test.js +++ b/test/browser/createContext.test.js @@ -41,7 +41,7 @@ describe('createContext', () => {

- {data => { + {(data) => { receivedContext = data; return ; }} @@ -94,7 +94,7 @@ describe('createContext', () => { expect(renders).to.equal(1); }); - it('should preserve provider context through nesting providers', done => { + it('should preserve provider context through nesting providers', (done) => { const { Provider, Consumer } = createContext(); const CONTEXT = { a: 'a' }; const CHILD_CONTEXT = { b: 'b' }; @@ -116,12 +116,12 @@ describe('createContext', () => { render( - {data => { + {(data) => { parentContext = data; return ( - {childData => { + {(childData) => { childContext = childData; return ; }} @@ -150,10 +150,8 @@ describe('createContext', () => { }); it('should preserve provider context between different providers', () => { - const { - Provider: ThemeProvider, - Consumer: ThemeConsumer - } = createContext(); + const { Provider: ThemeProvider, Consumer: ThemeConsumer } = + createContext(); const { Provider: DataProvider, Consumer: DataConsumer } = createContext(); const THEME_CONTEXT = { theme: 'black' }; const DATA_CONTEXT = { global: 'a' }; @@ -177,11 +175,11 @@ describe('createContext', () => { - {theme => { + {(theme) => { receivedTheme = theme; return ( - {data => { + {(data) => { receivedData = data; return ; }} @@ -222,11 +220,11 @@ describe('createContext', () => { render( - {data => { + {(data) => { receivedData = data; return ( - {childData => { + {(childData) => { receivedChildData = childData; return ; }} @@ -271,7 +269,7 @@ describe('createContext', () => {
- {data => } + {(data) => }
, @@ -284,7 +282,7 @@ describe('createContext', () => {
- {data => } + {(data) => }
, @@ -333,7 +331,7 @@ describe('createContext', () => { return (
- {data => { + {(data) => { receivedContext = data; return ; }} @@ -360,7 +358,7 @@ describe('createContext', () => { ); }); - it('should propagates through shouldComponentUpdate false', done => { + it('should propagates through shouldComponentUpdate false', (done) => { const { Provider, Consumer } = createContext(); const CONTEXT = { a: 'a' }; const UPDATED_CONTEXT = { a: 'b' }; @@ -401,7 +399,7 @@ describe('createContext', () => { render() { return (
- {data => } + {(data) => }
); } @@ -473,14 +471,14 @@ describe('createContext', () => { - {data => { + {(data) => { receivedNestedData = data; return ; }} - {data => { + {(data) => { receivedData = data; return ; }} @@ -525,7 +523,7 @@ describe('createContext', () => { render( - {data => } + {(data) => } , scratch @@ -534,7 +532,7 @@ describe('createContext', () => { render( - {data => } + {(data) => } , scratch @@ -550,7 +548,7 @@ describe('createContext', () => { render( - {data => } + {(data) => } , scratch @@ -558,9 +556,9 @@ describe('createContext', () => { }); // Rendered three times, should call 'Consumer' render two times - expect( - Inner.prototype.render - ).to.have.been.calledTwice.and.calledWithMatch({ i: 2 }); + expect(Inner.prototype.render).to.have.been.calledTwice.and.calledWithMatch( + { i: 2 } + ); expect(scratch.innerHTML).to.equal('
2
'); }); @@ -625,7 +623,7 @@ describe('createContext', () => { act(() => { render( - {data => } + {(data) => } , scratch ); @@ -633,7 +631,7 @@ describe('createContext', () => { // Not calling re-render since it's gonna get called with the same Consumer function render( - {data => } + {(data) => } , scratch ); @@ -658,7 +656,7 @@ describe('createContext', () => { super(); this.state = { value: 0, show: true }; - changeValue = value => this.setState({ value }); + changeValue = (value) => this.setState({ value }); toggleConsumer = () => this.setState(({ show }) => ({ show: !show })); } render(props, state) { @@ -666,7 +664,7 @@ describe('createContext', () => {
{state.show ? ( - {data => } + {(data) => } ) : null}
@@ -828,7 +826,7 @@ describe('createContext', () => { } updateStore() { - this.setState(state => ({ id: state.id + 1 })); + this.setState((state) => ({ id: state.id + 1 })); } render() { @@ -846,12 +844,12 @@ describe('createContext', () => { } render() { - return {id => }; + return {(id) => }; } } function Parent(props) { - return {id => }; + return {(id) => }; } class Child extends Component { @@ -899,7 +897,7 @@ describe('createContext', () => { } render() { - return {v =>

{v.state}

}; + return {(v) =>

{v.state}

}; } } @@ -930,4 +928,48 @@ describe('createContext', () => { rerender(); expect(scratch.innerHTML).to.equal('

hi

'); }); + + it('should not call sCU on context update', () => { + const Ctx = createContext('foo'); + + /** @type {(s: string) => void} */ + let update; + class App extends Component { + constructor(props) { + super(props); + this.state = { foo: 'foo' }; + update = (v) => this.setState({ foo: v }); + } + render() { + return ( + + + + ); + } + } + + const spy = sinon.spy(); + + class Child extends Component { + static contextType = Ctx; + + shouldComponentUpdate() { + spy(); + return false; + } + + render() { + return

{this.context}

; + } + } + + render(, scratch); + expect(scratch.textContent).to.equal('foo'); + + update('bar'); + rerender(); + expect(scratch.textContent).to.equal('bar'); + expect(spy).not.to.be.called; + }); }); diff --git a/test/browser/focus.test.js b/test/browser/focus.test.js index 328dd4b472..2eace75803 100644 --- a/test/browser/focus.test.js +++ b/test/browser/focus.test.js @@ -19,6 +19,9 @@ describe('focus', () => { /** @type {() => void} */ let getDynamicListHtml; + /** @type {(newState: Partial<{ before: number[]; after: number[] }>) => void} */ + let setState; + class DynamicList extends Component { constructor(props) { super(props); @@ -34,7 +37,7 @@ describe('focus', () => { before: [newValue, ...before] }); }; - + setState = (newState) => this.setState(newState); append = () => { const after = this.state.after; const lastValue = after[after.length - 1]; @@ -56,26 +59,27 @@ describe('focus', () => { }); }; - const liHtml = this.props.as == Input ? inputStr : span; - getDynamicListHtml = () => - div([ + getDynamicListHtml = () => { + const liHtml = this.props.as == Input ? inputStr : span; + return div([ ...this.state.before.map(liHtml), '', ...this.state.after.map(liHtml) ]); + }; } render(props, state) { const ListComponent = props.as || ListItem; return (
- {state.before.map(value => ( + {state.before.map((value) => ( {value} ))} - {state.after.map(value => ( + {state.after.map((value) => ( {value} @@ -135,9 +139,9 @@ describe('focus', () => { */ function getListHtml(before, after) { return div([ - ...before.map(i => span(i)), + ...before.map((i) => span(i)), inputStr(), - ...after.map(i => span(i)) + ...after.map((i) => span(i)) ]); } @@ -184,6 +188,22 @@ describe('focus', () => { validateFocus(input, 'move from end to middle'); }); + it('should maintain focus when removing element directly before input', () => { + render( + , + scratch + ); + + let input = focusInput(); + expect(scratch.innerHTML).to.equal(getDynamicListHtml()); + + setState({ before: [0] }); + rerender(); + + expect(scratch.innerHTML).to.equal(getDynamicListHtml()); + validateFocus(input, 'remove sibling directly before input'); + }); + it('should maintain focus when adding children around input', () => { render(, scratch); @@ -419,7 +439,7 @@ describe('focus', () => { constructor() { super(); this.state = { active: false }; - updateState = () => this.setState(prev => ({ active: !prev.active })); + updateState = () => this.setState((prev) => ({ active: !prev.active })); } render() { @@ -433,7 +453,7 @@ describe('focus', () => { Hello World

yo

- (input = i)} /> + (input = i)} /> ) : ( @@ -442,7 +462,7 @@ describe('focus', () => {

yo

 foobar - (input = i)} /> + (input = i)} /> )}
@@ -475,7 +495,7 @@ describe('focus', () => { constructor() { super(); this.state = { active: false }; - updateState = () => this.setState(prev => ({ active: !prev.active })); + updateState = () => this.setState((prev) => ({ active: !prev.active })); } render() { @@ -489,7 +509,7 @@ describe('focus', () => { Hello World

yo

- (input = i)} value="foobar" /> + (input = i)} value="foobar" /> ) : ( @@ -498,7 +518,7 @@ describe('focus', () => {

yo

 foobar - (input = i)} value="foobar" /> + (input = i)} value="foobar" /> )}
diff --git a/test/browser/fragments.test.js b/test/browser/fragments.test.js index fdaf6d5be3..b87fdb78a0 100644 --- a/test/browser/fragments.test.js +++ b/test/browser/fragments.test.js @@ -106,11 +106,11 @@ describe('Fragment', () => { render(_props, state) { deleteItem = () => { this.setState({ - items: this.state.items.filter(i => i !== this.state.items[2]) + items: this.state.items.filter((i) => i !== this.state.items[2]) }); }; - return state.items.map(item => ( + return state.items.map((item) => ( )); } @@ -944,7 +944,7 @@ describe('Fragment', () => { } } - const html = contents => span('0') + contents + span('1'); + const html = (contents) => span('0') + contents + span('1'); render(, scratch); expect(scratch.innerHTML).to.equal(html('foo')); @@ -976,7 +976,7 @@ describe('Fragment', () => { render() { return ( - {this.state.values.map(value => ( + {this.state.values.map((value) => (
{value}
))} @@ -1002,7 +1002,7 @@ describe('Fragment', () => { const Group = ({ title, values }) => (
  • {title}
    • - {values.map(value => ( + {values.map((value) => (
  • {value}
    • ))}     @@ -1038,7 +1038,7 @@ describe('Fragment', () => { constructor() { super(); this.state = { active: false }; - updateState = () => this.setState(prev => ({ active: !prev.active })); + updateState = () => this.setState((prev) => ({ active: !prev.active })); } render() { @@ -1125,7 +1125,7 @@ describe('Fragment', () => { return props.children(context.text); } - const Say = props =>
    {props.text}
    ; + const Say = (props) =>
    {props.text}
    ; const Speak = () => ( @@ -1133,7 +1133,7 @@ describe('Fragment', () => { a span - {text => [, ]} + {(text) => [, ]} another span @@ -1565,11 +1565,9 @@ describe('Fragment', () => { if (this.state.first) { return ( - { - -

    1. Original item first paragraph

    -     - } + +

    1. Original item first paragraph

    +

    2. Original item second paragraph