forwardport from v10 (#5053)

* Fix crash where a synchronous effect render unmounts the tree (#5026)

(cherry picked from commit 8cbed5f)

* Golf down compat (#5025)

* Make useFlushSync do sync flushes

* Golf bytes to offset change

* Some more golfing

* Revert "Make useFlushSync do sync flushes"

This reverts commit 001bbce.

(cherry picked from commit af4c459)

* Implement flushSync (#5036)

(cherry picked from commit 978c0b9)

* undefined prototype (#5041)

* undefined prototype

* Add test

(cherry picked from commit b341bfe)

* Ensure we reset renderCount (#5017)

* Golf some bytes and ensure we reset renderCount

* Apply suggestion from @JoviDeCroock

* Add test

(cherry picked from commit 55254ef)

* fix(compat): export StrictMode directly

Author: JoviDeCroock

compat/src/index.js

@@ -1,44 +1,45 @@
 import {
-	createElement,
-	render as preactRender,
-	cloneElement as preactCloneElement,
-	createRef,
 	Component,
+	Fragment,
 	createContext,
-	Fragment
+	createElement,
+	createRef,
+	options,
+	cloneElement as preactCloneElement,
+	render as preactRender
 } from 'preact';
 import {
-	useState,
-	useId,
-	useReducer,
+	useCallback,
+	useContext,
+	useDebugValue,
 	useEffect,
-	useLayoutEffect,
-	useRef,
+	useId,
 	useImperativeHandle,
+	useLayoutEffect,
 	useMemo,
-	useCallback,
-	useContext,
-	useDebugValue
+	useReducer,
+	useRef,
+	useState
 } from 'preact/hooks';
+import { Children } from './Children';
+import { PureComponent } from './PureComponent';
+import { forwardRef } from './forwardRef';
 import {
-	useInsertionEffect,
 	startTransition,
 	useDeferredValue,
+	useInsertionEffect,
 	useSyncExternalStore,
 	useTransition
 } from './hooks';
-import { PureComponent } from './PureComponent';
 import { memo } from './memo';
-import { forwardRef } from './forwardRef';
-import { Children } from './Children';
-import { Suspense, lazy } from './suspense';
 import { createPortal } from './portals';
 import {
-	hydrate,
-	render,
 	REACT_ELEMENT_TYPE,
-	__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+	__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+	hydrate,
+	render
 } from './render';
+import { Suspense, lazy } from './suspense';
 
 const version = '18.3.1'; // trick libraries to think we are react
 
@@ -77,7 +78,7 @@ function isMemo(element) {
 	return (
 		!!element &&
 		typeof element.displayName == 'string' &&
-		element.displayName.startsWith('Memo(')
+		element.displayName.indexOf('Memo(') == 0
 	);
 }
 
@@ -121,15 +122,20 @@ function findDOMNode(component) {
 }
 
 /**
- * In React, `flushSync` flushes the entire tree and forces a rerender. It's
- * implmented here as a no-op.
+ * In React, `flushSync` flushes the entire tree and forces a rerender.
  * @template Arg
  * @template Result
  * @param {(arg: Arg) => Result} callback function that runs before the flush
  * @param {Arg} [arg] Optional argument that can be passed to the callback
  * @returns
  */
-const flushSync = (callback, arg) => callback(arg);
+const flushSync = (callback, arg) => {
+	const prevDebounce = options.debounceRendering;
+	options.debounceRendering = cb => cb();
+	const res = callback(arg);
+	options.debounceRendering = prevDebounce;
+	return res;
+};
 
 /**
  * In React, `unstable_batchedUpdates` is a legacy feature that was made a no-op
@@ -144,12 +150,6 @@ function unstable_batchedUpdates(callback, arg) {
 	return callback(arg);
 }
 
-/**
- * Strict Mode is not implemented in Preact, so we provide a stand-in for it
- * that just renders its children without imposing any restrictions.
- */
-const StrictMode = Fragment;
-
 // compat to react-is
 export const isElement = isValidElement;
 
@@ -182,7 +182,7 @@ export {
 	useDeferredValue,
 	useSyncExternalStore,
 	useTransition,
-	StrictMode,
+	Fragment as StrictMode,
 	Suspense,
 	lazy,
 	__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
@@ -229,7 +229,7 @@ export default {
 	forwardRef,
 	flushSync,
 	unstable_batchedUpdates,
-	StrictMode,
+	StrictMode: Fragment,
 	Suspense,
 	lazy,
 	__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED

compat/src/memo.js

@@ -10,25 +10,22 @@ import { shallowDiffers } from './util';
  */
 export function memo(c, comparer) {
 	function shouldUpdate(nextProps) {
-		let ref = this.props.ref;
-		let updateRef = ref == nextProps.ref;
-		if (!updateRef && ref) {
-			ref.call ? ref(null) : (ref.current = null);
+		const ref = this.props.ref;
+		if (ref != nextProps.ref && ref) {
+			typeof ref == 'function' ? ref(null) : (ref.current = null);
 		}
 
-		if (!comparer) {
-			return shallowDiffers(this.props, nextProps);
-		}
-
-		return !comparer(this.props, nextProps) || !updateRef;
+		return comparer
+			? !comparer(this.props, nextProps) || ref != nextProps.ref
+			: shallowDiffers(this.props, nextProps);
 	}
 
 	function Memoed(props) {
 		this.shouldComponentUpdate = shouldUpdate;
 		return createElement(c, props);
 	}
 	Memoed.displayName = 'Memo(' + (c.displayName || c.name) + ')';
-	Memoed.prototype.isReactComponent = true;
+	Memoed._forwarded = Memoed.prototype.isReactComponent = true;
 	Memoed.type = c;
 	return Memoed;
 }

compat/src/render.js

@@ -37,7 +37,7 @@ const IS_DOM = typeof document !== 'undefined';
 const onChangeInputType = type => /fil|che|rad/.test(type);
 
 // Some libraries like `react-virtualized` explicitly check for this.
-Component.prototype.isReactComponent = {};
+Component.prototype.isReactComponent = true;
 
 // `UNSAFE_*` lifecycle hooks
 // Preact only ever invokes the unprefixed methods.
@@ -97,24 +97,17 @@ let oldEventHook = options.event;
 options.event = e => {
 	if (oldEventHook) e = oldEventHook(e);
 
-	e.persist = empty;
-	e.isPropagationStopped = isPropagationStopped;
-	e.isDefaultPrevented = isDefaultPrevented;
+	e.persist = () => {};
+	e.isPropagationStopped = function isPropagationStopped() {
+		return this.cancelBubble;
+	};
+	e.isDefaultPrevented = function isDefaultPrevented() {
+		return this.defaultPrevented;
+	};
 	return (e.nativeEvent = e);
 };
 
-function empty() {}
-
-function isPropagationStopped() {
-	return this.cancelBubble;
-}
-
-function isDefaultPrevented() {
-	return this.defaultPrevented;
-}
-
 const classNameDescriptorNonEnumberable = {
-	enumerable: false,
 	configurable: true,
 	get() {
 		return this.class;
@@ -124,9 +117,9 @@ const classNameDescriptorNonEnumberable = {
 function handleDomVNode(vnode) {
 	let props = vnode.props,
 		type = vnode.type,
-		normalizedProps = {};
+		normalizedProps = {},
+		isNonDashedType = type.indexOf('-') == -1;
 
-	let isNonDashedType = type.indexOf('-') === -1;
 	for (let i in props) {
 		let value = props[i];
 
@@ -198,30 +191,28 @@ function handleDomVNode(vnode) {
 		normalizedProps[i] = value;
 	}
 
-	// Add support for array select values: <select multiple value={[]} />
-	if (
-		type == 'select' &&
-		normalizedProps.multiple &&
-		Array.isArray(normalizedProps.value)
-	) {
-		// forEach() always returns undefined, which we abuse here to unset the value prop.
-		normalizedProps.value = toChildArray(props.children).forEach(child => {
-			child.props.selected =
-				normalizedProps.value.indexOf(child.props.value) != -1;
-		});
-	}
-
-	// Adding support for defaultValue in select tag
-	if (type == 'select' && normalizedProps.defaultValue != null) {
-		normalizedProps.value = toChildArray(props.children).forEach(child => {
-			if (normalizedProps.multiple) {
+	if (type == 'select') {
+		// Add support for array select values: <select multiple value={[]} />
+		if (normalizedProps.multiple && Array.isArray(normalizedProps.value)) {
+			// forEach() always returns undefined, which we abuse here to unset the value prop.
+			normalizedProps.value = toChildArray(props.children).forEach(child => {
 				child.props.selected =
-					normalizedProps.defaultValue.indexOf(child.props.value) != -1;
-			} else {
-				child.props.selected =
-					normalizedProps.defaultValue == child.props.value;
-			}
-		});
+					normalizedProps.value.indexOf(child.props.value) != -1;
+			});
+		}
+
+		// Adding support for defaultValue in select tag
+		if (normalizedProps.defaultValue != null) {
+			normalizedProps.value = toChildArray(props.children).forEach(child => {
+				if (normalizedProps.multiple) {
+					child.props.selected =
+						normalizedProps.defaultValue.indexOf(child.props.value) != -1;
+				} else {
+					child.props.selected =
+						normalizedProps.defaultValue == child.props.value;
+				}
+			});
+		}
 	}
 
 	if (props.class && !props.className) {

compat/src/suspense.js

@@ -1,19 +1,19 @@
-import { Component, createElement, options, Fragment } from 'preact';
+import { Component, Fragment, createElement, options } from 'preact';
 import {
-	MODE_HYDRATE,
+	COMPONENT_FORCE,
 	FORCE_PROPS_REVALIDATE,
-	COMPONENT_FORCE
+	MODE_HYDRATE
 } from '../../src/constants';
 import { assign } from './util';
 
 const oldCatchError = options._catchError;
-options._catchError = function (error, newVNode, oldVNode, errorInfo) {
+options._catchError = (error, newVNode, oldVNode, errorInfo) => {
 	if (error.then) {
 		/** @type {import('./internal').Component} */
 		let component;
 		let vnode = newVNode;
 
-		for (; (vnode = vnode._parent); ) {
+		while ((vnode = vnode._parent)) {
 			if ((component = vnode._component) && component._childDidSuspend) {
 				if (newVNode._dom == null) {
 					newVNode._dom = oldVNode._dom;
@@ -28,7 +28,7 @@ options._catchError = function (error, newVNode, oldVNode, errorInfo) {
 };
 
 const oldUnmount = options.unmount;
-options.unmount = function (vnode) {
+options.unmount = vnode => {
 	/** @type {import('./internal').Component} */
 	const component = vnode._component;
 	if (component) component._unmounted = true;
@@ -118,17 +118,14 @@ Suspense.prototype = new Component();
 Suspense.prototype._childDidSuspend = function (promise, suspendingVNode) {
 	const suspendingComponent = suspendingVNode._component;
 
-	/** @type {import('./internal').SuspenseComponent} */
-	const c = this;
-
-	if (c._suspenders == null) {
-		c._suspenders = [];
+	if (this._suspenders == null) {
+		this._suspenders = [];
 	}
-	c._suspenders.push(suspendingComponent);
+	this._suspenders.push(suspendingComponent);
 
 	let resolved = false;
 	const onResolved = () => {
-		if (resolved || c._unmounted) return;
+		if (resolved || this._unmounted) return;
 
 		resolved = true;
 		suspendingComponent._onResolve = null;
@@ -145,22 +142,22 @@ Suspense.prototype._childDidSuspend = function (promise, suspendingVNode) {
 	suspendingComponent._parentDom = null;
 
 	const onSuspensionComplete = () => {
-		if (!--c._pendingSuspensionCount) {
+		if (!--this._pendingSuspensionCount) {
 			// If the suspension was during hydration we don't need to restore the
 			// suspended children into the _children array
-			if (c.state._suspended) {
-				const suspendedVNode = c.state._suspended;
-				c._vnode._children[0] = removeOriginal(
+			if (this.state._suspended) {
+				const suspendedVNode = this.state._suspended;
+				this._vnode._children[0] = removeOriginal(
 					suspendedVNode,
 					suspendedVNode._component._parentDom,
 					suspendedVNode._component._originalParentDom
 				);
 			}
 
-			c.setState({ _suspended: (c._detachOnNextRender = null) });
+			this.setState({ _suspended: (this._detachOnNextRender = null) });
 
 			let suspended;
-			while ((suspended = c._suspenders.pop())) {
+			while ((suspended = this._suspenders.pop())) {
 				// Restore _parentDom before forceUpdate so render can proceed
 				suspended._parentDom = originalParentDom;
 				suspended.forceUpdate();
@@ -174,10 +171,12 @@ Suspense.prototype._childDidSuspend = function (promise, suspendingVNode) {
 	 * While in non-hydration cases the usual fallback -> component flow would occour.
 	 */
 	if (
-		!c._pendingSuspensionCount++ &&
+		!this._pendingSuspensionCount++ &&
 		!(suspendingVNode._flags & MODE_HYDRATE)
 	) {
-		c.setState({ _suspended: (c._detachOnNextRender = c._vnode._children[0]) });
+		this.setState({
+			_suspended: (this._detachOnNextRender = this._vnode._children[0])
+		});
 	}
 	promise.then(onResolved, onResolved);
 };

compat/test/browser/PureComponent.test.jsx

@@ -152,6 +152,6 @@ describe('PureComponent', () => {
 
 	it('should have "isPureReactComponent" property', () => {
 		let Pure = new React.PureComponent();
-		expect(Pure.isReactComponent).to.deep.equal({});
+		expect(Pure.isReactComponent).to.deep.equal(true);
 	});
 });

compat/test/browser/component.test.jsx

@@ -21,7 +21,7 @@ describe('components', () => {
 
 	it('should have "isReactComponent" property', () => {
 		let Comp = new React.Component();
-		expect(Comp.isReactComponent).to.deep.equal({});
+		expect(Comp.isReactComponent).to.deep.equal(true);
 	});
 
 	it('should be sane', () => {