Fix debug tests

compat/src/forwardRef.js

@@ -10,10 +10,10 @@ options._diff = (internal, vnode) => {
 		if (vnode) {
 			vnode.props.ref = vnode.ref;
 			vnode.ref = null;
-		} else {
-			internal.props.ref = internal.ref;
-			internal.ref = null;
 		}
+
+		internal.props.ref = internal.ref;
+		internal.ref = null;
 	}
 	if (oldDiffHook) oldDiffHook(internal, vnode);
 };

debug/src/debug.js

@@ -134,7 +134,7 @@ export function initDebug() {
 			);
 		}
 
-		let { type, _parent: parent } = internal;
+		let { type } = internal;
 
 		if (type === undefined) {
 			throw new Error(
@@ -161,8 +161,6 @@ export function initDebug() {
 			);
 		}
 
-		validateTableMarkup(internal);
-
 		hooksAllowed = true;
 
 		let isCompatNode = '$$typeof' in vnode;
@@ -181,6 +179,8 @@ export function initDebug() {
 		}
 
 		if (typeof internal.type == 'string') {
+			validateTableMarkup(internal);
+
 			for (const key in vnode.props) {
 				if (
 					key[0] === 'o' &&
@@ -321,11 +321,14 @@ export function initDebug() {
 
 		if (oldDiffed) oldDiffed(internal);
 
-		if (internal._children != null) {
+		if (internal._child != null) {
+			let child = internal._child;
 			const keys = [];
-			for (let i = 0; i < internal._children.length; i++) {
-				const child = internal._children[i];
-				if (!child || child.key == null) continue;
+			if (child.key != null) {
+				keys.push(child.key);
+			}
+			while ((child = child._next) != null) {
+				if (child.key == null) continue;
 
 				const key = child.key;
 				if (keys.indexOf(key) !== -1) {

debug/src/validateMarkup.js

@@ -23,7 +23,7 @@ export function validateTableMarkup(internal) {
 
 	if (
 		(type === 'thead' || type === 'tfoot' || type === 'tbody') &&
-		parentDomInternal.type !== 'table'
+		(parentDomInternal === null || parentDomInternal.type !== 'table')
 	) {
 		console.error(
 			'Improper nesting of table. Your <thead/tbody/tfoot> should have a <table> parent.' +
@@ -32,23 +32,30 @@ export function validateTableMarkup(internal) {
 		);
 	} else if (
 		type === 'tr' &&
-		parentDomInternal.type !== 'thead' &&
-		parentDomInternal.type !== 'tfoot' &&
-		parentDomInternal.type !== 'tbody' &&
-		parentDomInternal.type !== 'table'
+		(parentDomInternal === null ||
+			(parentDomInternal.type !== 'thead' &&
+				parentDomInternal.type !== 'tfoot' &&
+				parentDomInternal.type !== 'tbody' &&
+				parentDomInternal.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' && parentDomInternal.type !== 'tr') {
+	} else if (
+		type === 'td' &&
+		(parentDomInternal === null || parentDomInternal.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' && parentDomInternal.type !== 'tr') {
+	} else if (
+		type === 'th' &&
+		(parentDomInternal === null || parentDomInternal.type !== 'tr')
+	) {
 		console.error(
 			'Improper nesting of table. Your <th> should have a <tr>.' +
 				serializeVNode(internal) +

debug/test/browser/debug.test.js

@@ -1,4 +1,11 @@
-import { createElement, render, createRef, Component, Fragment } from 'preact';
+import {
+	createElement,
+	render,
+	createRef,
+	Component,
+	Fragment,
+	hydrate
+} from 'preact';
 import {
 	setupScratch,
 	teardown,
@@ -51,6 +58,11 @@ describe('debug', () => {
 		expect(fn).to.throw(/render/);
 	});
 
+	it('should print an error on hydrating on undefined parent', () => {
+		let fn = () => hydrate(<div />, undefined);
+		expect(fn).to.throw(/render/);
+	});
+
 	it('should print an error on rendering on invalid parent', () => {
 		let fn = () => render(<div />, 6);
 		expect(fn).to.throw(/valid HTML node/);

src/create-root.js

@@ -49,7 +49,7 @@ export function createRoot(parentDom) {
 
 			rootInternal._context = {};
 
-			mount(rootInternal, parentDom, firstChild);
+			mount(rootInternal, vnode, parentDom, firstChild);
 		}
 
 		// Flush all queued effects

src/diff/children.js

@@ -49,7 +49,7 @@ export function patchChildren(internal, children, parentDom) {
 
 		if (internal._index === -1) {
 			let nextDomSibling = getDomSibling(internal);
-			mount(internal, parentDom, nextDomSibling);
+			mount(internal, vnode, parentDom, nextDomSibling);
 			if (internal.flags & TYPE_DOM) {
 				// If we are mounting a component, it's DOM children will get inserted
 				// into the DOM in mountChildren. If we are mounting a DOM node, then
@@ -61,7 +61,7 @@ export function patchChildren(internal, children, parentDom) {
 			(internal.flags & (MODE_HYDRATE | MODE_SUSPENDED)) ===
 			(MODE_HYDRATE | MODE_SUSPENDED)
 		) {
-			mount(internal, parentDom, internal.data);
+			mount(internal, vnode, parentDom, internal.data);
 		} else {
 			patch(
 				internal,
@@ -107,7 +107,12 @@ function findMatches(internal, children, parentInternal) {
 		let vnode = children[index];
 
 		// holes get accounted for in the index property:
-		if (vnode == null || vnode === true || vnode === false) {
+		if (
+			vnode == null ||
+			vnode === true ||
+			vnode === false ||
+			typeof vnode === 'function'
+		) {
 			if (internal && index == internal._index && internal.key == null) {
 				// The current internal is unkeyed, has the same index as this VNode
 				// child, and the VNode is now null. So we'll unmount the Internal and

src/diff/mount.js

@@ -13,7 +13,7 @@ import {
 	MODE_SVG,
 	DIRTY_BIT
 } from '../constants';
-import { normalizeToVNode, createElement, Fragment } from '../create-element';
+import { createElement, Fragment } from '../create-element';
 import { setProperty } from './props';
 import { createInternal, getParentContext } from '../tree';
 import options from '../options';
@@ -22,12 +22,13 @@ import { commitQueue } from './commit';
 /**
  * Diff two virtual nodes and apply proper changes to the DOM
  * @param {import('../internal').Internal} internal The Internal node to mount
+ * @param {import('../internal').VNode | string} vnode The vnode that was used to create the internal
  * @param {import('../internal').PreactElement} parentDom The element into which this subtree is rendered
  * @param {import('../internal').PreactNode} startDom
  * @returns {import('../internal').PreactNode | null} pointer to the next DOM node to be hydrated (or null)
  */
-export function mount(internal, parentDom, startDom) {
-	if (options._diff) options._diff(internal, null);
+export function mount(internal, vnode, parentDom, startDom) {
+	if (options._diff) options._diff(internal, vnode);
 
 	/** @type {import('../internal').PreactNode} */
 	let nextDomSibling, prevStartDom;
@@ -237,7 +238,13 @@ export function mountChildren(parentInternal, children, parentDom, startDom) {
 		vnode = children[i];
 
 		// account for holes by incrementing the index:
-		if (vnode == null || vnode === true || vnode === false) continue;
+		if (
+			vnode == null ||
+			vnode === true ||
+			vnode === false ||
+			typeof vnode === 'function'
+		)
+			continue;
 		else if (Array.isArray(vnode)) vnode = createElement(Fragment, null, vnode);
 		else if (typeof vnode !== 'object') vnode = String(vnode);
 
@@ -248,7 +255,7 @@ export function mountChildren(parentInternal, children, parentDom, startDom) {
 		else parentInternal._child = internal;
 
 		// Morph the old element into the new one, but don't append it to the dom yet
-		mountedNextChild = mount(internal, parentDom, startDom);
+		mountedNextChild = mount(internal, vnode, parentDom, startDom);
 
 		newDom = internal.data;
 

src/diff/unmount.js

@@ -13,8 +13,7 @@ import { ENABLE_CLASSES } from '../component';
  * current element is already detached from the DOM.
  */
 export function unmount(internal, topUnmountedInternal, skipRemove) {
-	let r,
-		i = 0;
+	let r;
 	if (options.unmount) options.unmount(internal);
 	internal.flags |= MODE_UNMOUNTING;
 

src/render.js

@@ -11,7 +11,7 @@ export function render(vnode, parentDom) {
 	if (!root) {
 		root = createRoot(parentDom);
 	}
-	parentDom._root = root;
+	if (parentDom) parentDom._root = root;
 	root.render(vnode);
 }
 
@@ -26,6 +26,6 @@ export function hydrate(vnode, parentDom) {
 	if (!root) {
 		root = createRoot(parentDom);
 	}
-	parentDom._root = root;
+	if (parentDom) parentDom._root = root;
 	root.hydrate(vnode);
 }

test/browser/toChildArray.test.js

@@ -67,6 +67,9 @@ describe('toChildArray', () => {
 		render(<Foo>{child}</Foo>, scratch);
 		expect(children).to.be.an('array');
 		expect(scratch.innerHTML).to.equal('<div></div>');
+
+		render(<Foo>{child}</Foo>, scratch);
+		expect(scratch.innerHTML).to.equal('<div></div>');
 	});
 
 	it('returns an array containing a VNode with a text child', () => {