[draft] Benchmark linked list v11 impl

compat/src/forwardRef.js

@@ -2,10 +2,18 @@ import { options } from 'preact';
 
 let oldDiffHook = options._diff;
 options._diff = (internal, vnode) => {
-	if (internal.type && internal.type._forwarded && vnode.ref) {
-		vnode.props.ref = vnode.ref;
-		vnode.ref = null;
-		internal.ref = null;
+	if (
+		internal.type &&
+		internal.type._forwarded &&
+		(internal.ref || (vnode && vnode.ref))
+	) {
+		if (vnode) {
+			vnode.props.ref = vnode.ref;
+			vnode.ref = null;
+		} else {
+			internal.props.ref = internal.ref;
+			internal.ref = null;
+		}
 	}
 	if (oldDiffHook) oldDiffHook(internal, vnode);
 };

compat/src/index.js

@@ -32,7 +32,7 @@ import {
 	REACT_ELEMENT_TYPE,
 	__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
 } from './render';
-import { getChildDom } from '../../src/tree';
+import { getFirstDom } from '../../src/tree';
 export * from './scheduler';
 
 const version = '17.0.2'; // trick libraries to think we are react
@@ -72,7 +72,7 @@ function cloneElement(element) {
  * @returns {boolean}
  */
 function unmountComponentAtNode(container) {
-	if (container._children) {
+	if (container._child) {
 		preactRender(null, container);
 		return true;
 	}
@@ -89,9 +89,11 @@ function findDOMNode(component) {
 		return null;
 	} else if (component.nodeType == 1) {
 		return component;
+	} else if (component._internal._child == null) {
+		return null;
 	}
 
-	return getChildDom(component._internal, 0);
+	return getFirstDom(component._internal._child, 0);
 }
 
 /**
@@ -112,11 +114,11 @@ const StrictMode = Fragment;
 
 /**
  * In React, `flushSync` flushes the entire tree and forces a rerender. It's
- * implmented here as a no-op.
+ * implemented here as a no-op.
  * @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);

compat/src/render.js

@@ -56,14 +56,14 @@ Component.prototype.isReactComponent = {};
 export function render(vnode, parent, callback) {
 	// React destroys any existing DOM nodes, see #1727
 	// ...but only on the first render, see #1828
-	if (parent._children == null) {
+	if (parent._child == null) {
 		parent.textContent = '';
 	}
 
 	preactRender(vnode, parent);
 	if (typeof callback == 'function') callback();
 
-	const internal = parent._children._children[0];
+	const internal = parent._child._child;
 	return internal ? internal._component : null;
 }
 

debug/src/component-stack.js

@@ -1,18 +1,21 @@
-import { options, Fragment } from 'preact';
+import { options as rawOptions, Fragment } from 'preact';
+
+const options = /** @type {import('../../src/internal').Options} */ (rawOptions);
 
 /**
  * Get human readable name of the component/dom node
- * @param {import('./internal').VNode} vnode
- * @param {import('./internal').VNode} vnode
+ * @param {import('../../src/internal').ComponentChild} vnode
  * @returns {string}
  */
 export function getDisplayName(vnode) {
-	if (vnode.type === Fragment) {
-		return 'Fragment';
-	} else if (typeof vnode.type == 'function') {
-		return vnode.type.displayName || vnode.type.name;
-	} else if (typeof vnode.type == 'string') {
-		return vnode.type;
+	if (vnode != null && typeof vnode === 'object') {
+		if (vnode.type === Fragment) {
+			return 'Fragment';
+		} else if (typeof vnode.type == 'function') {
+			return vnode.type.displayName || vnode.type.name;
+		} else if (typeof vnode.type == 'string') {
+			return vnode.type;
+		}
 	}
 
 	return '#text';

debug/src/debug.js

@@ -1,5 +1,5 @@
 import { checkPropTypes } from './check-props';
-import { options, Component } from 'preact';
+import { options as rawOptions, Component } from 'preact';
 import {
 	ELEMENT_NODE,
 	DOCUMENT_NODE,
@@ -12,16 +12,9 @@
 	getDisplayName
 } from './component-stack';
 import { IS_NON_DIMENSIONAL } from '../../compat/src/util';
+import { validateTableMarkup } from './validateMarkup';
 
-const isWeakMapSupported = typeof WeakMap == 'function';
-
-function getClosestDomNodeParent(parent) {
-	if (!parent) return {};
-	if (typeof parent.type == 'function') {
-		return getClosestDomNodeParent(parent._parent);
-	}
-	return parent;
-}
+const options = /** @type {import('../../src/internal').Options} */ (rawOptions);
 
 export function initDebug() {
 	setupComponentStack();
@@ -35,24 +28,32 @@
 	let oldCatchError = options._catchError;
 	let oldRoot = options._root;
 	let oldHook = options._hook;
-	const warnedComponents = !isWeakMapSupported
-		? null
-		: {
-				useEffect: new WeakMap(),
-				useLayoutEffect: new WeakMap(),
-				lazyPropTypes: new WeakMap()
-		  };
+	const warnedComponents = {
+		useEffect: new WeakMap(),
+		useLayoutEffect: new WeakMap(),
+		lazyPropTypes: new WeakMap()
+	};
 	const deprecations = [];
 
-	options._catchError = (error, vnode, oldVNode) => {
-		let component = vnode && vnode._component;
+	options._catchError = catchErrorHook;
+	options._root = rootHook;
+	options._diff = diffHook;
+	options._hook = hookHook;
+	options.vnode = vnodeHook;
+	options.diffed = diffedHook;
+
+	/** @type {typeof options["_catchError"]} */
+	function catchErrorHook(error, internal) {
+		let component = internal && internal._component;
 		if (component && typeof error.then == 'function') {
 			const promise = error;
 			error = new Error(
-				`Missing Suspense. The throwing component was: ${getDisplayName(vnode)}`
+				`Missing Suspense. The throwing component was: ${getDisplayName(
+					internal
+				)}`
 			);
 
-			let parent = vnode;
+			let parent = internal;
 			for (; parent; parent = parent._parent) {
 				if (parent._component && parent._component._childDidSuspend) {
 					error = promise;
@@ -68,7 +69,7 @@
 		}
 
 		try {
-			oldCatchError(error, vnode, oldVNode);
+			oldCatchError(error, internal);
 
 			// when an error was handled by an ErrorBoundary we will nontheless emit an error
 			// event on the window object. This is to make up for react compatibility in dev mode
@@ -81,9 +82,10 @@
 		} catch (e) {
 			throw e;
 		}
-	};
+	}
 
-	options._root = (vnode, parentNode) => {
+	/** @type {typeof options["_root"]} */
+	function rootHook(vnode, parentNode) {
 		if (!parentNode) {
 			throw new Error(
 				'Undefined parent passed to render(), this is the second argument.\n' +
@@ -110,10 +112,16 @@
 		}
 
 		if (oldRoot) oldRoot(vnode, parentNode);
-	};
+	}
+
+	/** @type {typeof options["_diff"]} */
+	function diffHook(internal, vnode) {
+		if (vnode === null || typeof vnode !== 'object') {
+			// TODO: This isn't correct. We need these checks to run on mount
+			oldBeforeDiff(internal, vnode);
+			return;
+		}
 
-	options._diff = (internal, vnode) => {
-		if (vnode === null || typeof vnode !== 'object') return;
 		// Check if the user passed plain objects as children. Note that we cannot
 		// move this check into `options.vnode` because components can receive
 		// children in any shape they want (e.g.
@@ -126,7 +134,7 @@
 			);
 		}
 
 		let { type, _parent: parent } = internal;
 
 		if (type === undefined) {
 			throw new Error(
@@ -153,44 +161,10 @@
 			);
 		}
 
-		let parentVNode = getClosestDomNodeParent(parent);
+		validateTableMarkup(internal);
 
 		hooksAllowed = true;
 
-		if (
-			(type === 'thead' || type === 'tfoot' || type === 'tbody') &&
-			parentVNode.type !== 'table'
-		) {
-			console.error(
-				'Improper nesting of table. Your <thead/tbody/tfoot> should have a <table> parent.' +
-					serializeVNode(internal) +
-					`\n\n${getOwnerStack(internal)}`
-			);
-		} else if (
-			type === 'tr' &&
-			parentVNode.type !== 'thead' &&
-			parentVNode.type !== 'tfoot' &&
-			parentVNode.type !== 'tbody' &&
-			parentVNode.type !== 'table'
-		) {
-			console.error(
-				'Improper nesting of table. Your <tr> should have a <thead/tbody/tfoot/table> parent.' +
-					serializeVNode(internal) +
-					`\n\n${getOwnerStack(internal)}`
-			);
-		} else if (type === 'td' && parentVNode.type !== 'tr') {
-			console.error(
-				'Improper nesting of table. Your <td> should have a <tr> parent.' +
-					serializeVNode(internal) +
-					`\n\n${getOwnerStack(internal)}`
-			);
-		} else if (type === 'th' && parentVNode.type !== 'tr') {
-			console.error(
-				'Improper nesting of table. Your <th> should have a <tr>.' +
-					serializeVNode(internal) +
-					`\n\n${getOwnerStack(internal)}`
-			);
-		}
 		let isCompatNode = '$$typeof' in vnode;
 		if (
 			internal.ref !== undefined &&
@@ -244,7 +218,6 @@
 		if (typeof internal.type == 'function' && internal.type.propTypes) {
 			if (
 				internal.type.displayName === 'Lazy' &&
-				warnedComponents &&
 				!warnedComponents.lazyPropTypes.has(internal.type)
 			) {
 				const m =
@@ -279,15 +252,16 @@
 		}
 
 		if (oldBeforeDiff) oldBeforeDiff(internal, vnode);
-	};
+	}
 
-	options._hook = (internal, index, type) => {
+	/** @type {typeof options["_hook"]} */
+	function hookHook(internal, index, type) {
 		if (!internal || !hooksAllowed) {
 			throw new Error('Hook can only be invoked from render methods.');
 		}
 
 		if (oldHook) oldHook(internal, index, type);
-	};
+	}
 
 	// Ideally we'd want to print a warning once per component, but we
 	// don't have access to the vnode that triggered it here. As a
@@ -327,7 +301,8 @@
 	// https://esbench.com/bench/6021ebd7d9c27600a7bfdba3
 	const deprecatedProto = Object.create({}, deprecatedAttributes);
 
-	options.vnode = vnode => {
+	/** @type {typeof options["vnode"]} */
+	function vnodeHook(vnode) {
 		const props = vnode.props;
 		if (props != null && ('__source' in props || '__self' in props)) {
 			Object.defineProperties(props, debugProps);
@@ -338,17 +313,18 @@
 		// eslint-disable-next-line
 		vnode.__proto__ = deprecatedProto;
 		if (oldVnode) oldVnode(vnode);
-	};
+	}
 
-	options.diffed = vnode => {
+	/** @type {typeof options["diffed"]} */
+	function diffedHook(internal) {
 		hooksAllowed = false;
 
-		if (oldDiffed) oldDiffed(vnode);
+		if (oldDiffed) oldDiffed(internal);
 
-		if (vnode._children != null) {
+		if (internal._children != null) {
 			const keys = [];
-			for (let i = 0; i < vnode._children.length; i++) {
-				const child = vnode._children[i];
+			for (let i = 0; i < internal._children.length; i++) {
+				const child = internal._children[i];
 				if (!child || child.key == null) continue;
 
 				const key = child.key;
@@ -357,8 +333,8 @@
 						'Following component has two or more children with the ' +
 							`same key attribute: "${key}". This may cause glitches and misbehavior ` +
 							'in rendering process. Component: \n\n' +
-							serializeVNode(vnode) +
-							`\n\n${getOwnerStack(vnode)}`
+							serializeVNode(internal) +
+							`\n\n${getOwnerStack(internal)}`
 					);
 
 					// Break early to not spam the console
@@ -368,7 +344,7 @@
 				keys.push(key);
 			}
 		}
-	};
+	}
 }
 
 const setState = Component.prototype.setState;