Rework children diffing to run in multiple phases

compat/src/suspense.js

@@ -1,4 +1,5 @@
 import { Component, createElement, options, Fragment } from 'preact';
+import { MODE_HYDRATE } from 'preact/src/constants';
 import { assign } from './util';
 
 const oldCatchError = options._catchError;
@@ -34,7 +35,7 @@ options.unmount = function (vnode) {
 	// most likely it is because the component is suspended
 	// we set the vnode.type as `null` so that it is not a typeof function
 	// so the unmount will remove the vnode._dom
-	if (component && vnode._hydrating === true) {
+	if (component && vnode._flags & MODE_HYDRATE) {
 		vnode.type = null;
 	}
 
@@ -166,7 +167,7 @@ Suspense.prototype._childDidSuspend = function (promise, suspendingVNode) {
 	 * to remain on screen and hydrate it when the suspense actually gets resolved.
 	 * While in non-hydration cases the usual fallback -> component flow would occour.
 	 */
-	const wasHydrating = suspendingVNode._hydrating === true;
+	const wasHydrating = (suspendingVNode._flags & MODE_HYDRATE) === MODE_HYDRATE;
 	if (!c._pendingSuspensionCount++ && !wasHydrating) {
 		c.setState({ _suspended: (c._detachOnNextRender = c._vnode._children[0]) });
 	}
@@ -204,7 +205,7 @@ Suspense.prototype.render = function (props, state) {
 	/** @type {import('./internal').VNode} */
 	const fallback =
 		state._suspended && createElement(Fragment, null, props.fallback);
-	if (fallback) fallback._hydrating = null;
+	if (fallback) fallback._flags &= ~MODE_HYDRATE;
 
 	return [
 		createElement(Fragment, null, state._suspended ? null : props.children),

compat/test/browser/hydrate.test.js

@@ -17,10 +17,10 @@ describe('compat hydrate', () => {
 		const input = document.createElement('input');
 		scratch.appendChild(input);
 		input.focus();
-		expect(document.activeElement).to.equal(input);
+		expect(document.activeElement).to.equalNode(input);
 
 		hydrate(<input />, scratch);
-		expect(document.activeElement).to.equal(input);
+		expect(document.activeElement).to.equalNode(input);
 	});
 
 	it('should call the callback', () => {

jsx-runtime/src/index.js

@@ -1,7 +1,5 @@
 import { options, Fragment } from 'preact';
 
-/** @typedef {import('preact').VNode} VNode */
-
 let vnodeId = 0;
 
 /**
@@ -39,6 +37,7 @@ function createVNode(type, props, key, isStaticChildren, __source, __self) {
 		}
 	}
 
+	/** @type {VNode & { __source: any; __self: any }} */
 	const vnode = {
 		type,
 		props: normalizedProps,
@@ -50,10 +49,10 @@ function createVNode(type, props, key, isStaticChildren, __source, __self) {
 		_dom: null,
 		_nextDom: undefined,
 		_component: null,
-		_hydrating: null,
 		constructor: undefined,
 		_original: --vnodeId,
 		_index: -1,
+		_flags: 0,
 		__source,
 		__self
 	};

mangle.json

@@ -52,9 +52,9 @@
       "$_onResolve": "__R",
       "$_suspended": "__a",
       "$_dom": "__e",
-      "$_hydrating": "__h",
       "$_component": "__c",
       "$_index": "__i",
+      "$_flags": "__u",
       "$__html": "__html",
       "$_parent": "__",
       "$_pendingError": "__E",

src/component.js

@@ -2,6 +2,7 @@ import { assign } from './util';
 import { diff, commitRoot } from './diff/index';
 import options from './options';
 import { Fragment } from './create-element';
+import { MODE_HYDRATE } from './constants';
 
 /**
  * Base Component class. Provides `setState()` and `forceUpdate()`, which
@@ -122,12 +123,11 @@ export function getDomSibling(vnode, childIndex) {
 function renderComponent(component) {
 	let oldVNode = component._vnode,
 		oldDom = oldVNode._dom,
-		parentDom = component._parentDom;
+		parentDom = component._parentDom,
+		commitQueue = [],
+		refQueue = [];
 
 	if (parentDom) {
-		let commitQueue = [],
-			refQueue = [];
-
 		const newVNode = assign({}, oldVNode);
 		newVNode._original = oldVNode._original + 1;
 
@@ -137,10 +137,10 @@ function renderComponent(component) {
 			oldVNode,
 			component._globalContext,
 			parentDom.ownerSVGElement !== undefined,
-			oldVNode._hydrating != null ? [oldDom] : null,
+			oldVNode._flags & MODE_HYDRATE ? [oldDom] : null,
 			commitQueue,
 			oldDom == null ? getDomSibling(oldVNode) : oldDom,
-			oldVNode._hydrating,
+			(oldVNode._flags & MODE_HYDRATE) === MODE_HYDRATE,
 			refQueue
 		);
 

src/constants.js

@@ -1,3 +1,15 @@
+/** Normal hydration that attaches to a DOM tree but does not diff it. */
+export const MODE_HYDRATE = 1 << 5;
+/** Signifies this VNode suspended on the previous render */
+export const MODE_SUSPENDED = 1 << 7;
+/** Indicates that this node needs to be inserted while patching children */
+export const INSERT_VNODE = 1 << 16;
+/** Indicates a VNode has been matched with another VNode in the diff */
+export const MATCHED = 1 << 17;
+
+/** Reset all mode flags */
+export const RESET_MODE = ~(MODE_HYDRATE | MODE_SUSPENDED);
+
 export const EMPTY_OBJ = /** @type {any} */ ({});
 export const EMPTY_ARR = [];
 export const IS_NON_DIMENSIONAL =

src/create-element.js

@@ -72,10 +72,10 @@ export function createVNode(type, props, key, ref, original) {
 		// a _nextDom that has been set to `null`
 		_nextDom: undefined,
 		_component: null,
-		_hydrating: null,
 		constructor: undefined,
 		_original: original == null ? ++vnodeId : original,
-		_index: -1
+		_index: -1,
+		_flags: 0
 	};
 
 	// Only invoke the vnode hook if this was *not* a direct copy: