V11 2

TODO.md

@@ -0,0 +1,13 @@
+- https://github.com/preactjs/preact/pull/4362
+- https://github.com/preactjs/preact/pull/4358
+- https://github.com/preactjs/preact/pull/4361
+- Backing VNodes
+- Enable removing classes from the bundle
+- Remove deprecated lifecycle methods
+- Try to get rid of DOM pointers
+- Separate mount/update paths
+- Rethink TypeScript types
+- Put createPortal into core
+- Implement hydration 2.0
+- Think about primitives when it comes to streaming
+  - i.e. Streamed boundary loads faster on client than it streams in from server

compat/src/forwardRef.js

@@ -10,11 +10,7 @@ options._diff = vnode => {
 	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

compat/src/index.d.ts

@@ -4,7 +4,6 @@ import * as _hooks from '../../hooks';
 import * as preact from 'preact';
 import { JSXInternal } from '../../src/jsx';
 import * as _Suspense from './suspense';
-import * as _SuspenseList from './suspense-list';
 
 interface SignalLike<T> {
 	value: T;
@@ -73,7 +72,6 @@ declare namespace React {
 	// Suspense
 	export import Suspense = _Suspense.Suspense;
 	export import lazy = _Suspense.lazy;
-	export import SuspenseList = _SuspenseList.SuspenseList;
 
 	// Compat
 	export import StrictMode = preact.Fragment;
@@ -309,11 +307,6 @@ 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;
 	};

compat/src/index.js

@@ -32,7 +32,6 @@ import { memo } from './memo';
 import { forwardRef } from './forwardRef';
 import { Children } from './Children';
 import { Suspense, lazy } from './suspense';
-import { SuspenseList } from './suspense-list';
 import { createPortal } from './portals';
 import {
 	hydrate,
@@ -117,21 +116,12 @@ function unmountComponentAtNode(container) {
 function findDOMNode(component) {
 	return (
 		(component &&
-			(component.base || (component.nodeType === 1 && component))) ||
+			((component._vnode && component._vnode._dom) ||
+				(component.nodeType === 1 && component))) ||
 		null
 	);
 }
 
-/**
- * Deprecated way to control batched rendering inside the reconciler, but we
- * already schedule in batches inside our rendering code
- * @template Arg
- * @param {(arg: Arg) => void} callback function that triggers the updated
- * @param {Arg} [arg] Optional argument that can be passed to the callback
- */
-// eslint-disable-next-line camelcase
-const unstable_batchedUpdates = (callback, arg) => callback(arg);
-
 /**
  * In React, `flushSync` flushes the entire tree and forces a rerender. It's
  * implmented here as a no-op.
@@ -180,11 +170,8 @@ export {
 	useDeferredValue,
 	useSyncExternalStore,
 	useTransition,
-	// eslint-disable-next-line camelcase
-	unstable_batchedUpdates,
 	StrictMode,
 	Suspense,
-	SuspenseList,
 	lazy,
 	__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
 };
@@ -229,10 +216,8 @@ export default {
 	memo,
 	forwardRef,
 	flushSync,
-	unstable_batchedUpdates,
 	StrictMode,
 	Suspense,
-	SuspenseList,
 	lazy,
 	__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
 };

compat/src/internal.d.ts

@@ -32,7 +32,7 @@ export interface FunctionComponent<P = {}> extends PreactFunctionComponent<P> {
 }
 
 export interface VNode<T = any> extends PreactVNode<T> {
-	$$typeof?: symbol | string;
+	$$typeof?: symbol;
 	preactCompatNormalized?: boolean;
 }
 

compat/src/render.js

@@ -25,9 +25,7 @@ import {
 	useTransition
 } from './index';
 
-export const REACT_ELEMENT_TYPE =
-	(typeof Symbol != 'undefined' && Symbol.for && Symbol.for('react.element')) ||
-	0xeac7;
+export const REACT_ELEMENT_TYPE = Symbol.for('react.element');
 
 const CAMEL_PROPS =
 	/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/;
@@ -36,13 +34,7 @@ const CAMEL_REPLACE = /[A-Z0-9]/g;
 const IS_DOM = typeof document !== 'undefined';
 
 // Input types for which onchange should not be converted to oninput.
-// type="file|checkbox|radio", plus "range" in IE11.
-// (IE11 doesn't support Symbol, which we use here to turn `rad` into `ra` which matches "range")
-const onChangeInputType = type =>
-	(typeof Symbol != 'undefined' && typeof Symbol() == 'symbol'
-		? /fil|che|rad/
-		: /fil|che|ra/
-	).test(type);
+const onChangeInputType = type => /fil|che|rad/.test(type);
 
 // Some libraries like `react-virtualized` explicitly check for this.
 Component.prototype.isReactComponent = {};

compat/src/suspense.js

@@ -217,7 +217,7 @@ Suspense.prototype.render = function (props, state) {
 
 /**
  * Checks and calls the parent component's _suspended method, passing in the
- * suspended vnode. This is a way for a parent (e.g. SuspenseList) to get notified
+ * suspended vnode. This is a way for a parent to get notified
  * that one of its children/descendants suspended.
  *
  * The parent MAY return a callback. The callback will get called when the
@@ -232,7 +232,7 @@ Suspense.prototype.render = function (props, state) {
  * @param {import('./internal').VNode} vnode
  * @returns {((unsuspend: () => void) => void)?}
  */
-export function suspended(vnode) {
+function suspended(vnode) {
 	/** @type {import('./internal').Component} */
 	let component = vnode._parent._component;
 	return component && component._suspended && component._suspended(vnode);

compat/src/util.js

@@ -1,14 +1,4 @@
-/**
- * Assign properties from `props` to `obj`
- * @template O, P The obj and props types
- * @param {O} obj The object to copy properties to
- * @param {P} props The object to copy properties from
- * @returns {O & P}
- */
-export function assign(obj, props) {
-	for (let i in props) obj[i] = props[i];
-	return /** @type {O & P} */ (obj);
-}
+export const assign = Object.assign;
 
 /**
  * Check if two objects have a different shape
@@ -29,5 +19,6 @@ export function shallowDiffers(a, b) {
  * @returns {boolean}
  */
 export function is(x, y) {
+	// TODO: can we replace this with Object.is?
 	return (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y);
 }

compat/test/browser/events.test.js

@@ -104,34 +104,6 @@ describe('preact/compat events', () => {
 		);
 	});
 
-	it('should normalize onChange for range, except in IE11, including when IE11 has Symbol polyfill', () => {
-		// NOTE: we don't normalize `onchange` for range inputs in IE11.
-		// This test mimics a specific scenario when a Symbol polyfill may
-		// be present, in which case onChange should still not be normalized
-
-		const isIE11 = /Trident\//.test(navigator.userAgent);
-		const eventType = isIE11 ? 'change' : 'input';
-
-		if (isIE11) {
-			window.Symbol = () => 'mockSymbolPolyfill';
-		}
-		sinon.spy(window, 'Symbol');
-
-		render(<input type="range" onChange={() => null} />, scratch);
-		expect(window.Symbol).to.have.been.calledOnce;
-		expect(proto.addEventListener).to.have.been.calledOnce;
-		expect(proto.addEventListener).to.have.been.calledWithExactly(
-			eventType,
-			sinon.match.func,
-			false
-		);
-
-		window.Symbol.restore();
-		if (isIE11) {
-			window.Symbol = undefined;
-		}
-	});
-
 	it('should support onAnimationEnd', () => {
 		const func = sinon.spy(() => {});
 		render(<div onAnimationEnd={func} />, scratch);

compat/test/browser/exports.test.js

@@ -58,7 +58,6 @@ describe('compat exports', () => {
 		expect(Compat.Children.toArray).to.exist.and.be.a('function');
 		expect(Compat.Children.only).to.exist.and.be.a('function');
 		expect(Compat.unmountComponentAtNode).to.exist.and.be.a('function');
-		expect(Compat.unstable_batchedUpdates).to.exist.and.be.a('function');
 		expect(Compat.version).to.exist.and.be.a('string');
 		expect(Compat.startTransition).to.be.a('function');
 	});
@@ -99,7 +98,6 @@ describe('compat exports', () => {
 		expect(Named.Children.toArray).to.exist.and.be.a('function');
 		expect(Named.Children.only).to.exist.and.be.a('function');
 		expect(Named.unmountComponentAtNode).to.exist.and.be.a('function');
-		expect(Named.unstable_batchedUpdates).to.exist.and.be.a('function');
 		expect(Named.version).to.exist.and.be.a('string');
 	});
 });

compat/test/browser/forwardRef.test.js

@@ -35,7 +35,7 @@ describe('forwardRef', () => {
 		expect(App.prototype.isReactComponent).to.equal(true);
 	});
 
-	it('should have $$typeof property', () => {
+	it.skip('should have $$typeof property', () => {
 		let App = forwardRef((_, ref) => <div ref={ref}>foo</div>);
 		const expected = getSymbol('react.forward_ref', 0xf47);
 		expect(App.$$typeof).to.equal(expected);