(major) - Tracking PR for v11

compat/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "description": "A React compatibility layer for Preact",
   "main": "dist/compat.js",
-  "module": "dist/compat.module.js",
+  "module": "dist/compat.mjs",
   "umd:main": "dist/compat.umd.js",
   "source": "src/index.js",
   "types": "src/index.d.ts",
@@ -19,7 +19,7 @@
   "exports": {
     ".": {
       "types": "./src/index.d.ts",
-      "browser": "./dist/compat.module.js",
+      "module": "./dist/compat.mjs",
       "umd": "./dist/compat.umd.js",
       "import": "./dist/compat.mjs",
       "require": "./dist/compat.js"

compat/src/forwardRef.js

@@ -1,20 +1,6 @@
-import { options } from 'preact';
 import { assign } from './util';
 
-let oldDiffHook = options._diff;
-options._diff = vnode => {
-	if (vnode.type && vnode.type._forwarded && vnode.ref) {
-		vnode.props.ref = vnode.ref;
-		vnode.ref = null;
-	}
-	if (oldDiffHook) oldDiffHook(vnode);
-};
-
-export const REACT_FORWARD_SYMBOL =
-	(typeof Symbol != 'undefined' &&
-		Symbol.for &&
-		Symbol.for('react.forward_ref')) ||
-	0xf47;
+export const REACT_FORWARD_SYMBOL = Symbol.for('react.forward_ref');
 
 /**
  * Pass ref down to a child. This is mainly used in libraries with HOCs that
@@ -38,7 +24,7 @@ export function forwardRef(fn) {
 	// mobx-react throws.
 	Forwarded.render = Forwarded;
 
-	Forwarded.prototype.isReactComponent = Forwarded._forwarded = true;
+	Forwarded.prototype.isReactComponent = true;
 	Forwarded.displayName = 'ForwardRef(' + (fn.displayName || fn.name) + ')';
 	return Forwarded;
 }

compat/src/hooks.js

@@ -1,5 +1,4 @@
 import { useState, useLayoutEffect, useEffect } from 'preact/hooks';
-import { is } from './util';
 
 /**
  * This is taken from https://github.com/facebook/react/blob/main/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L84
@@ -47,7 +46,7 @@ function didSnapshotChange(inst) {
 	const prevValue = inst._value;
 	try {
 		const nextValue = latestGetSnapshot();
-		return !is(prevValue, nextValue);
+		return !Object.is(prevValue, nextValue);
 	} catch (error) {
 		return true;
 	}

compat/src/index.d.ts

@@ -1,10 +1,102 @@
 import * as _hooks from '../../hooks';
 // Intentionally not using a relative path to take advantage of
 // the TS version resolution mechanism
-import * as preact from 'preact';
+import * as preact1 from 'preact';
 import { JSXInternal } from '../../src/jsx';
 import * as _Suspense from './suspense';
-import * as _SuspenseList from './suspense-list';
+
+declare namespace preact {
+	export interface FunctionComponent<P = {}> {
+		(
+			props: preact1.RenderableProps<P>,
+			context?: any
+		): preact1.ComponentChildren;
+		displayName?: string;
+		defaultProps?: Partial<P> | undefined;
+	}
+
+	export interface ComponentClass<P = {}, S = {}> {
+		new (props: P, context?: any): preact1.Component<P, S>;
+		displayName?: string;
+		defaultProps?: Partial<P>;
+		contextType?: preact1.Context<any>;
+		getDerivedStateFromProps?(
+			props: Readonly<P>,
+			state: Readonly<S>
+		): Partial<S> | null;
+		getDerivedStateFromError?(error: any): Partial<S> | null;
+	}
+
+	export interface Component<P = {}, S = {}> {
+		componentWillMount?(): void;
+		componentDidMount?(): void;
+		componentWillUnmount?(): void;
+		getChildContext?(): object;
+		componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+		shouldComponentUpdate?(
+			nextProps: Readonly<P>,
+			nextState: Readonly<S>,
+			nextContext: any
+		): boolean;
+		componentWillUpdate?(
+			nextProps: Readonly<P>,
+			nextState: Readonly<S>,
+			nextContext: any
+		): void;
+		getSnapshotBeforeUpdate?(oldProps: Readonly<P>, oldState: Readonly<S>): any;
+		componentDidUpdate?(
+			previousProps: Readonly<P>,
+			previousState: Readonly<S>,
+			snapshot: any
+		): void;
+		componentDidCatch?(error: any, errorInfo: preact1.ErrorInfo): void;
+	}
+
+	export abstract class Component<P, S> {
+		constructor(props?: P, context?: any);
+
+		static displayName?: string;
+		static defaultProps?: any;
+		static contextType?: preact1.Context<any>;
+
+		// Static members cannot reference class type parameters. This is not
+		// supported in TypeScript. Reusing the same type arguments from `Component`
+		// will lead to an impossible state where one cannot satisfy the type
+		// constraint under no circumstances, see #1356.In general type arguments
+		// seem to be a bit buggy and not supported well at the time of this
+		// writing with TS 3.3.3333.
+		static getDerivedStateFromProps?(
+			props: Readonly<object>,
+			state: Readonly<object>
+		): object | null;
+		static getDerivedStateFromError?(error: any): object | null;
+
+		state: Readonly<S>;
+		props: preact1.RenderableProps<P>;
+		context: any;
+
+		// From https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e836acc75a78cf0655b5dfdbe81d69fdd4d8a252/types/react/index.d.ts#L402
+		// // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
+		// // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
+		setState<K extends keyof S>(
+			state:
+				| ((
+						prevState: Readonly<S>,
+						props: Readonly<P>
+				  ) => Pick<S, K> | Partial<S> | null)
+				| (Pick<S, K> | Partial<S> | null),
+			callback?: () => void
+		): void;
+
+		forceUpdate(callback?: () => void): void;
+
+		abstract render(
+			props?: preact1.RenderableProps<P>,
+			state?: Readonly<S>,
+			context?: any
+		): preact1.ComponentChildren;
+	}
+}
 
 // export default React;
 export = React;
@@ -17,7 +109,6 @@ declare namespace React {
 	export import CreateHandle = _hooks.CreateHandle;
 	export import EffectCallback = _hooks.EffectCallback;
 	export import Inputs = _hooks.Inputs;
-	export import PropRef = _hooks.PropRef;
 	export import Reducer = _hooks.Reducer;
 	export import Dispatch = _hooks.Dispatch;
 	export import SetStateAction = _hooks.StateUpdater;
@@ -42,33 +133,32 @@ declare namespace React {
 	): T;
 
 	// Preact Defaults
-	export import Context = preact.Context;
-	export import ContextType = preact.ContextType;
-	export import RefObject = preact.RefObject;
+	export import Context = preact1.Context;
+	export import ContextType = preact1.ContextType;
+	export import RefObject = preact1.RefObject;
 	export import Component = preact.Component;
 	export import FunctionComponent = preact.FunctionComponent;
-	export import ComponentType = preact.ComponentType;
+	export import ComponentType = preact1.ComponentType;
 	export import ComponentClass = preact.ComponentClass;
-	export import FC = preact.FunctionComponent;
-	export import createContext = preact.createContext;
-	export import Ref = preact.Ref;
-	export import createRef = preact.createRef;
-	export import Fragment = preact.Fragment;
-	export import createElement = preact.createElement;
-	export import cloneElement = preact.cloneElement;
-	export import ComponentProps = preact.ComponentProps;
-	export import ReactNode = preact.ComponentChild;
-	export import ReactElement = preact.VNode;
-	export import Consumer = preact.Consumer;
-	export import ErrorInfo = preact.ErrorInfo;
+	export import FC = preact1.FunctionComponent;
+	export import createContext = preact1.createContext;
+	export import Ref = preact1.Ref;
+	export import createRef = preact1.createRef;
+	export import Fragment = preact1.Fragment;
+	export import createElement = preact1.createElement;
+	export import cloneElement = preact1.cloneElement;
+	export import ComponentProps = preact1.ComponentProps;
+	export import ReactNode = preact1.ComponentChild;
+	export import ReactElement = preact1.VNode;
+	export import Consumer = preact1.Consumer;
+	export import ErrorInfo = preact1.ErrorInfo;
 
 	// Suspense
 	export import Suspense = _Suspense.Suspense;
 	export import lazy = _Suspense.lazy;
-	export import SuspenseList = _SuspenseList.SuspenseList;
 
 	// Compat
-	export import StrictMode = preact.Fragment;
+	export import StrictMode = preact1.Fragment;
 	export const version: string;
 	export function startTransition(cb: () => void): void;
 
@@ -77,15 +167,15 @@ declare namespace React {
 		extends JSXInternal.HTMLAttributes<T> {}
 	export interface HTMLProps<T extends EventTarget>
 		extends JSXInternal.AllHTMLAttributes<T>,
-			preact.ClassAttributes<T> {}
+			preact1.ClassAttributes<T> {}
 	export interface AllHTMLAttributes<T extends EventTarget>
 		extends JSXInternal.AllHTMLAttributes<T> {}
 	export import DetailedHTMLProps = JSXInternal.DetailedHTMLProps;
 	export import CSSProperties = JSXInternal.CSSProperties;
 
 	export interface SVGProps<T extends EventTarget>
 		extends JSXInternal.SVGAttributes<T>,
-			preact.ClassAttributes<T> {}
+			preact1.ClassAttributes<T> {}
 
 	interface SVGAttributes extends JSXInternal.SVGAttributes {}
 
@@ -183,89 +273,89 @@ declare namespace React {
 	export import TransitionEventHandler = JSXInternal.TransitionEventHandler;
 
 	export function createPortal(
-		vnode: preact.ComponentChildren,
-		container: preact.ContainerNode
-	): preact.VNode<any>;
+		vnode: preact1.ComponentChildren,
+		container: preact1.ContainerNode
+	): preact1.VNode<any>;
 
 	export function render(
-		vnode: preact.ComponentChild,
-		parent: preact.ContainerNode,
+		vnode: preact1.ComponentChild,
+		parent: preact1.ContainerNode,
 		callback?: () => void
 	): Component | null;
 
 	export function hydrate(
-		vnode: preact.ComponentChild,
-		parent: preact.ContainerNode,
+		vnode: preact1.ComponentChild,
+		parent: preact1.ContainerNode,
 		callback?: () => void
 	): Component | null;
 
 	export function unmountComponentAtNode(
-		container: preact.ContainerNode
+		container: preact1.ContainerNode
 	): boolean;
 
 	export function createFactory(
-		type: preact.VNode<any>['type']
+		type: preact1.VNode<any>['type']
 	): (
 		props?: any,
-		...children: preact.ComponentChildren[]
-	) => preact.VNode<any>;
+		...children: preact1.ComponentChildren[]
+	) => preact1.VNode<any>;
 	export function isValidElement(element: any): boolean;
 	export function isFragment(element: any): boolean;
 	export function isMemo(element: any): boolean;
 	export function findDOMNode(
-		component: preact.Component | Element
+		component: preact1.Component | Element
 	): Element | null;
 
 	export abstract class PureComponent<
 		P = {},
 		S = {},
 		SS = any
-	> extends preact.Component<P, S> {
+	> extends preact1.Component<P, S> {
 		isPureReactComponent: boolean;
 	}
 
-	export type MemoExoticComponent<C extends preact.FunctionalComponent<any>> =
-		preact.FunctionComponent<ComponentProps<C>> & {
+	export type MemoExoticComponent<C extends preact1.FunctionalComponent<any>> =
+		preact1.FunctionComponent<ComponentProps<C>> & {
 			readonly type: C;
 		};
 
 	export function memo<P = {}>(
-		component: preact.FunctionalComponent<P>,
+		component: preact1.FunctionalComponent<P>,
 		comparer?: (prev: P, next: P) => boolean
-	): preact.FunctionComponent<P>;
-	export function memo<C extends preact.FunctionalComponent<any>>(
+	): preact1.FunctionComponent<P>;
+	export function memo<C extends preact1.FunctionalComponent<any>>(
 		component: C,
 		comparer?: (
-			prev: preact.ComponentProps<C>,
-			next: preact.ComponentProps<C>
+			prev: preact1.ComponentProps<C>,
+			next: preact1.ComponentProps<C>
 		) => boolean
 	): C;
 
-	export interface RefAttributes<R> extends preact.Attributes {
-		ref?: preact.Ref<R> | undefined;
+	export interface RefAttributes<R> extends preact1.Attributes {
+		ref?: preact1.Ref<R> | undefined;
 	}
 
 	/**
 	 * @deprecated Please use `ForwardRefRenderFunction` instead.
 	 */
 	export interface ForwardFn<P = {}, T = any> {
-		(props: P, ref: ForwardedRef<T>): preact.ComponentChild;
+		(props: P, ref: ForwardedRef<T>): preact1.ComponentChild;
 		displayName?: string;
 	}
 
 	export interface ForwardRefRenderFunction<T = any, P = {}> {
-		(props: P, ref: ForwardedRef<T>): preact.ComponentChild;
+		(props: P, ref: ForwardedRef<T>): preact1.ComponentChild;
 		displayName?: string;
 	}
 
 	export interface ForwardRefExoticComponent<P>
-		extends preact.FunctionComponent<P> {
+		extends preact1.FunctionComponent<P> {
 		defaultProps?: Partial<P> | undefined;
 	}
 
 	export function forwardRef<R, P = {}>(
 		fn: ForwardRefRenderFunction<R, P>
-	): preact.FunctionalComponent<PropsWithoutRef<P> & { ref?: preact.Ref<R> }>;
+	): preact1.FunctionalComponent<PropsWithoutRef<P> & { ref?: preact1.Ref<R> }>;
 
 	export type PropsWithoutRef<P> = Omit<P, 'ref'>;
 
@@ -312,27 +402,22 @@ declare namespace React {
 	export function flushSync<R>(fn: () => R): R;
 	export function flushSync<A, R>(fn: (a: A) => R, a: A): R;
 
-	export function unstable_batchedUpdates(
-		callback: (arg?: any) => void,
-		arg?: any
-	): void;
-
 	export type PropsWithChildren<P = unknown> = P & {
-		children?: preact.ComponentChildren | undefined;
+		children?: preact1.ComponentChildren | undefined;
 	};
 
 	export const Children: {
-		map<T extends preact.ComponentChild, R>(
+		map<T extends preact1.ComponentChild, R>(
 			children: T | T[],
 			fn: (child: T, i: number) => R
 		): R[];
-		forEach<T extends preact.ComponentChild>(
+		forEach<T extends preact1.ComponentChild>(
 			children: T | T[],
 			fn: (child: T, i: number) => void
 		): void;
-		count: (children: preact.ComponentChildren) => number;
-		only: (children: preact.ComponentChildren) => preact.ComponentChild;
-		toArray: (children: preact.ComponentChildren) => preact.VNode<{}>[];
+		count: (children: preact1.ComponentChildren) => number;
+		only: (children: preact1.ComponentChildren) => preact1.ComponentChild;
+		toArray: (children: preact1.ComponentChildren) => preact1.VNode<{}>[];
 	};
 
 	// scheduler