Backport 10.15 release line (#4265)

* backport #4016

* backport #3996

* backport #4017

* backport #4019

* backport #4020

* backport #4026

* backport #4028

compat/src/index.d.ts

@@ -27,6 +27,7 @@ declare namespace React {
 	export import Inputs = _hooks.Inputs;
 	export import PropRef = _hooks.PropRef;
 	export import Reducer = _hooks.Reducer;
+	export import Dispatch = _hooks.Dispatch;
 	export import Ref = _hooks.Ref;
 	export import StateUpdater = _hooks.StateUpdater;
 	export import useCallback = _hooks.useCallback;
@@ -49,6 +50,7 @@ declare namespace React {
 	): T;
 
 	// Preact Defaults
+	export import Context = preact.Context;
 	export import ContextType = preact.ContextType;
 	export import RefObject = preact.RefObject;
 	export import Component = preact.Component;
@@ -138,6 +140,10 @@ declare namespace React {
 		) => boolean
 	): C;
 
+	export interface RefAttributes<R> extends preact.Attributes {
+		ref?: preact.Ref<R> | undefined;
+	}
+
 	export interface ForwardFn<P = {}, T = any> {
 		(props: P, ref: ForwardedRef<T>): preact.ComponentChild;
 		displayName?: string;
@@ -147,6 +153,11 @@ declare namespace React {
 		current: T;
 	}
 
+	export interface ForwardRefExoticComponent<P>
+		extends preact.FunctionComponent<P> {
+		defaultProps?: Partial<P> | undefined;
+	}
+
 	export type ForwardedRef<T> =
 		| ((instance: T | null) => void)
 		| MutableRefObject<T | null>

debug/src/debug.js

@@ -34,14 +34,16 @@ export function initDebug() {
 	let oldVnode = options.vnode;
 	let oldCatchError = options._catchError;
 	let oldRoot = options._root;
+	let oldRender = options._render;
 	let oldHook = options._hook;
+
 	const warnedComponents = !isWeakMapSupported
 		? null
 		: {
 				useEffect: new WeakMap(),
 				useLayoutEffect: new WeakMap(),
 				lazyPropTypes: new WeakMap()
-		  };
+			};
 	const deprecations = [];
 
 	options._catchError = (error, vnode, oldVNode) => {
@@ -282,6 +284,13 @@ export function initDebug() {
 		if (oldBeforeDiff) oldBeforeDiff(internal, vnode);
 	};
 
+	options._render = vnode => {
+		if (oldRender) {
+			oldRender(vnode);
+		}
+		hooksAllowed = true;
+	};
+
 	options._hook = (internal, index, type) => {
 		if (!internal || !hooksAllowed) {
 			throw new Error('Hook can only be invoked from render methods.');

hooks/src/index.d.ts

@@ -15,6 +15,7 @@ export function useState<S = undefined>(): [
 ];
 
 export type Reducer<S, A> = (prevState: S, action: A) => S;
+export type Dispatch<A> = (action: A) => void;
 /**
  * An alternative to `useState`.
  *
@@ -27,7 +28,7 @@ export type Reducer<S, A> = (prevState: S, action: A) => S;
 export function useReducer<S, A>(
 	reducer: Reducer<S, A>,
 	initialState: S
-): [S, (action: A) => void];
+): [S, Dispatch<A>];
 
 /**
  * An alternative to `useState`.
@@ -43,7 +44,7 @@ export function useReducer<S, A, I>(
 	reducer: Reducer<S, A>,
 	initialArg: I,
 	init: (arg: I) => S
-): [S, (action: A) => void];
+): [S, Dispatch<A>];
 
 /** @deprecated Use the `Ref` type instead. */
 type PropRef<T> = MutableRef<T>;

hooks/src/index.js

@@ -54,6 +54,7 @@ options._render = internal => {
 			currentInternal.data.__hooks._pendingEffects.forEach(invokeCleanup);
 			currentInternal.data.__hooks._pendingEffects.forEach(invokeEffect);
 			currentInternal.data.__hooks._pendingEffects = [];
+			currentIndex = 0;
 		}
 	}
 	previousInternal = internal;

hooks/test/browser/useEffect.test.js

@@ -1,4 +1,4 @@
-import { act } from 'preact/test-utils';
+import { act, teardown as teardownAct } from 'preact/test-utils';
 import { createElement, render, Fragment, Component } from 'preact';
 import { useEffect, useState, useRef } from 'preact/hooks';
 import { setupScratch, teardown } from '../../../test/_util/helpers';
@@ -371,6 +371,51 @@ describe('useEffect', () => {
 		);
 	});
 
+	it('hooks should be called in right order', async () => {
+		teardownAct();
+
+		let increment;
+
+		const Counter = () => {
+			const [count, setCount] = useState(0);
+			useState('binggo!!');
+			const renderRoot = useRef();
+			useEffect(() => {
+				const div = renderRoot.current;
+				render(<Dummy />, div);
+			}, [count]);
+
+			increment = () => {
+				setCount(x => x + 1);
+				return Promise.resolve().then(() => setCount(x => x + 1));
+			};
+
+			return (
+				<div>
+					<div>Count: {count}</div>
+					<div ref={renderRoot} />
+				</div>
+			);
+		};
+
+		const Dummy = () => {
+			useState();
+			return <div>dummy</div>;
+		};
+
+		render(<Counter />, scratch);
+
+		expect(scratch.innerHTML).to.equal(
+			'<div><div>Count: 0</div><div></div></div>'
+		);
+		/** Using the act function will affect the timing of the useEffect */
+		await increment();
+
+		expect(scratch.innerHTML).to.equal(
+			'<div><div>Count: 2</div><div><div>dummy</div></div></div>'
+		);
+	});
+
 	it('handles errors correctly', () => {
 		class ErrorBoundary extends Component {
 			constructor(props) {

src/jsx.d.ts

@@ -1072,6 +1072,9 @@ export namespace JSXInternal {
 		WheelEvent
 	>;
 
+	export type TargetedPictureInPictureEvent<Target extends EventTarget> =
+		TargetedEvent<Target, PictureInPictureEvent>;
+
 	export interface EventHandler<E extends TargetedEvent> {
 		(this: void, event: E): void;
 	}
@@ -1114,6 +1117,8 @@ export namespace JSXInternal {
 	export type WheelEventHandler<Target extends EventTarget> = EventHandler<
 		TargetedWheelEvent<Target>
 	>;
+	export type PictureInPictureEventHandler<Target extends EventTarget> =
+		EventHandler<TargetedPictureInPictureEvent<Target>>;
 
 	export interface DOMAttributes<Target extends EventTarget>
 		extends PreactDOMAttributes {
@@ -1142,6 +1147,10 @@ export namespace JSXInternal {
 		// Details Events
 		onToggle?: GenericEventHandler<Target> | undefined;
 
+		// Dialog Events
+		onClose?: GenericEventHandler<Target> | undefined;
+		onCancel?: GenericEventHandler<Target> | undefined;
+
 		// Focus Events
 		onFocus?: FocusEventHandler<Target> | undefined;
 		onFocusCapture?: FocusEventHandler<Target> | undefined;
@@ -1315,8 +1324,22 @@ export namespace JSXInternal {
 		onAnimationIterationCapture?: AnimationEventHandler<Target> | undefined;
 
 		// Transition Events
+		onTransitionCancel?: TransitionEventHandler<Target>;
+		onTransitionCancelCapture?: TransitionEventHandler<Target>;
 		onTransitionEnd?: TransitionEventHandler<Target>;
 		onTransitionEndCapture?: TransitionEventHandler<Target>;
+		onTransitionRun?: TransitionEventHandler<Target>;
+		onTransitionRunCapture?: TransitionEventHandler<Target>;
+		onTransitionStart?: TransitionEventHandler<Target>;
+		onTransitionStartCapture?: TransitionEventHandler<Target>;
+
+		// PictureInPicture Events
+		onEnterPictureInPicture?: PictureInPictureEventHandler<Target>;
+		onEnterPictureInPictureCapture?: PictureInPictureEventHandler<Target>;
+		onLeavePictureInPicture?: PictureInPictureEventHandler<Target>;
+		onLeavePictureInPictureCapture?: PictureInPictureEventHandler<Target>;
+		onResize?: PictureInPictureEventHandler<Target>;
+		onResizeCapture?: PictureInPictureEventHandler<Target>;
 	}
 
 	// All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/
@@ -1332,6 +1355,16 @@ export namespace JSXInternal {
 		'aria-autocomplete'?: Signalish<
 			'none' | 'inline' | 'list' | 'both' | undefined
 		>;
+		/**
+		 * Defines a string value that labels the current element, which is intended to be converted into Braille.
+		 * @see aria-label.
+		 */
+		'aria-braillelabel'?: Signalish<string | undefined>;
+		/**
+		 * Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
+		 * @see aria-roledescription.
+		 */
+		'aria-brailleroledescription'?: Signalish<string | undefined>;
 		/** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */
 		'aria-busy'?: Signalish<Booleanish | undefined>;
 		/**