Merge branch 'master' into fix-for-frame-component

compat/server.browser.js

@@ -1,4 +1,11 @@
+import { renderToString } from 'preact-render-to-string';
+
 export {
 	renderToString,
 	renderToString as renderToStaticMarkup
 } from 'preact-render-to-string';
+
+export default {
+	renderToString,
+	renderToStaticMarkup: renderToString
+};

compat/server.mjs

@@ -1,4 +1,11 @@
+import { renderToString } from 'preact-render-to-string';
+
 export {
 	renderToString,
 	renderToString as renderToStaticMarkup
 } from 'preact-render-to-string';
+
+export default {
+	renderToString,
+	renderToStaticMarkup: renderToString
+};

compat/src/index.d.ts

@@ -17,6 +17,7 @@ declare namespace React {
 	export import Inputs = _hooks.Inputs;
 	export import PropRef = _hooks.PropRef;
 	export import Reducer = _hooks.Reducer;
+	export import Dispatch = _hooks.Dispatch;
 	export import Ref = _hooks.Ref;
 	export import StateUpdater = _hooks.StateUpdater;
 	export import useCallback = _hooks.useCallback;
@@ -40,6 +41,7 @@ declare namespace React {
 	): T;
 
 	// Preact Defaults
+	export import Context = preact.Context;
 	export import ContextType = preact.ContextType;
 	export import RefObject = preact.RefObject;
 	export import Component = preact.Component;

debug/src/debug.js

@@ -15,12 +15,22 @@ import { assign, isNaN } from './util';
 
 const isWeakMapSupported = typeof WeakMap == 'function';
 
-function getClosestDomNodeParent(parent) {
-	if (!parent) return {};
+/**
+ * @param {import('./internal').VNode} parent
+ * @returns {string}
+ */
+function getClosestDomNodeParentName(parent) {
+	if (!parent) return '';
 	if (typeof parent.type == 'function') {
-		return getClosestDomNodeParent(parent._parent);
+		if (parent._parent === null) {
+			if (parent._dom !== null && parent._dom.parentNode !== null) {
+				return parent._dom.parentNode.localName;
+			}
+			return '';
+		}
+		return getClosestDomNodeParentName(parent._parent);
 	}
-	return parent;
+	return /** @type {string} */ (parent.type);
 }
 
 export function initDebug() {
@@ -32,9 +42,11 @@ export function initDebug() {
 	let oldBeforeDiff = options._diff;
 	let oldDiffed = options.diffed;
 	let oldVnode = options.vnode;
+	let oldRender = options._render;
 	let oldCatchError = options._catchError;
 	let oldRoot = options._root;
 	let oldHook = options._hook;
+	let oldCommit = options._commit;
 	const warnedComponents = !isWeakMapSupported
 		? null
 		: {
@@ -43,6 +55,8 @@ export function initDebug() {
 				lazyPropTypes: new WeakMap()
 		  };
 	const deprecations = [];
+	/** @type {import("./internal.d.ts").VNode[]} */
+	let checkVNodeDom = [];
 
 	options._catchError = (error, vnode, oldVNode, errorInfo) => {
 		let component = vnode && vnode._component;
@@ -115,8 +129,18 @@ export function initDebug() {
 	};
 
 	options._diff = vnode => {
-		let { type, _parent: parent } = vnode;
-		let parentVNode = getClosestDomNodeParent(parent);
+		let { type } = vnode;
+		if (
+			typeof type === 'string' &&
+			(type === 'thead' ||
+				type === 'tfoot' ||
+				type === 'tbody' ||
+				type === 'tr' ||
+				type === 'td' ||
+				type === 'th')
+		) {
+			checkVNodeDom.push(vnode);
+		}
 
 		hooksAllowed = true;
 
@@ -145,41 +169,6 @@ export function initDebug() {
 			);
 		}
 
-		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(vnode) +
-					`\n\n${getOwnerStack(vnode)}`
-			);
-		} 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(vnode) +
-					`\n\n${getOwnerStack(vnode)}`
-			);
-		} else if (type === 'td' && parentVNode.type !== 'tr') {
-			console.error(
-				'Improper nesting of table. Your <td> should have a <tr> parent.' +
-					serializeVNode(vnode) +
-					`\n\n${getOwnerStack(vnode)}`
-			);
-		} else if (type === 'th' && parentVNode.type !== 'tr') {
-			console.error(
-				'Improper nesting of table. Your <th> should have a <tr>.' +
-					serializeVNode(vnode) +
-					`\n\n${getOwnerStack(vnode)}`
-			);
-		}
-
 		if (
 			vnode.ref !== undefined &&
 			typeof vnode.ref != 'function' &&
@@ -252,6 +241,13 @@ export function initDebug() {
 		if (oldBeforeDiff) oldBeforeDiff(vnode);
 	};
 
+	options._render = vnode => {
+		if (oldRender) {
+			oldRender(vnode);
+		}
+		hooksAllowed = true;
+	};
+
 	options._hook = (comp, index, type) => {
 		if (!comp || !hooksAllowed) {
 			throw new Error('Hook can only be invoked from render methods.');
@@ -379,6 +375,57 @@ export function initDebug() {
 			}
 		}
 	};
+
+	options._commit = (root, queue) => {
+		for (let i = 0; i < checkVNodeDom.length; i++) {
+			const vnode = checkVNodeDom[i];
+
+			// Check if HTML nesting is valid. We need to do it in `options.diffed`
+			// so that we can optionally traverse outside the vdom root in case
+			// it's an island embedded in an existing (and valid) HTML tree.
+			const { type, _parent: parent } = vnode;
+
+			let domParentName = getClosestDomNodeParentName(parent);
+
+			if (
+				(type === 'thead' || type === 'tfoot' || type === 'tbody') &&
+				domParentName !== 'table'
+			) {
+				console.error(
+					'Improper nesting of table. Your <thead/tbody/tfoot> should have a <table> parent.' +
+						serializeVNode(vnode) +
+						`\n\n${getOwnerStack(vnode)}`
+				);
+			} else if (
+				type === 'tr' &&
+				domParentName !== 'thead' &&
+				domParentName !== 'tfoot' &&
+				domParentName !== 'tbody' &&
+				domParentName !== 'table'
+			) {
+				console.error(
+					'Improper nesting of table. Your <tr> should have a <thead/tbody/tfoot/table> parent.' +
+						serializeVNode(vnode) +
+						`\n\n${getOwnerStack(vnode)}`
+				);
+			} else if (type === 'td' && domParentName !== 'tr') {
+				console.error(
+					'Improper nesting of table. Your <td> should have a <tr> parent.' +
+						serializeVNode(vnode) +
+						`\n\n${getOwnerStack(vnode)}`
+				);
+			} else if (type === 'th' && domParentName !== 'tr') {
+				console.error(
+					'Improper nesting of table. Your <th> should have a <tr>.' +
+						serializeVNode(vnode) +
+						`\n\n${getOwnerStack(vnode)}`
+				);
+			}
+		}
+		checkVNodeDom = [];
+
+		if (oldCommit) oldCommit(root, queue);
+	};
 }
 
 const setState = Component.prototype.setState;

debug/test/browser/debug.test.js

@@ -15,6 +15,7 @@ const h = createElement;
 /** @jsx createElement */
 
 describe('debug', () => {
+	/** @type {HTMLDivElement} */
 	let scratch;
 	let errors = [];
 	let warnings = [];
@@ -513,6 +514,19 @@ describe('debug', () => {
 			render(<Table />, scratch);
 			expect(console.error).to.not.be.called;
 		});
+
+		it('should include DOM parents outside of root node', () => {
+			const Table = () => (
+				<tr>
+					<td>Head</td>
+				</tr>
+			);
+
+			const table = document.createElement('table');
+			scratch.appendChild(table);
+			render(<Table />, table);
+			expect(console.error).to.not.be.called;
+		});
 	});
 
 	describe('PropTypes', () => {

devtools/src/devtools.js

@@ -2,7 +2,7 @@ import { options, Fragment, Component } from 'preact';
 
 export function initDevTools() {
 	if (typeof window != 'undefined' && window.__PREACT_DEVTOOLS__) {
-		window.__PREACT_DEVTOOLS__.attachPreact('10.14.1', options, {
+		window.__PREACT_DEVTOOLS__.attachPreact('10.16.0', options, {
 			Fragment,
 			Component
 		});

hooks/src/index.d.ts

@@ -15,6 +15,7 @@ export function useState<S = undefined>(): [
 ];
 
 export type Reducer<S, A> = (prevState: S, action: A) => S;
+export type Dispatch<A> = (action: A) => void;
 /**
  * An alternative to `useState`.
  *
@@ -27,7 +28,7 @@ export type Reducer<S, A> = (prevState: S, action: A) => S;
 export function useReducer<S, A>(
 	reducer: Reducer<S, A>,
 	initialState: S
-): [S, (action: A) => void];
+): [S, Dispatch<A>];
 
 /**
  * An alternative to `useState`.
@@ -43,7 +44,7 @@ export function useReducer<S, A, I>(
 	reducer: Reducer<S, A>,
 	initialArg: I,
 	init: (arg: I) => S
-): [S, (action: A) => void];
+): [S, Dispatch<A>];
 
 /** @deprecated Use the `Ref` type instead. */
 type PropRef<T> = MutableRef<T>;

hooks/src/index.js

@@ -53,6 +53,7 @@ options._render = vnode => {
 			hooks._pendingEffects.forEach(invokeCleanup);
 			hooks._pendingEffects.forEach(invokeEffect);
 			hooks._pendingEffects = [];
+			currentIndex = 0;
 		}
 	}
 	previousComponent = currentComponent;

hooks/test/browser/combinations.test.js

@@ -398,4 +398,83 @@ describe('combinations', () => {
 		});
 		expect(scratch.textContent).to.equal('2');
 	});
+
+	it.skip('parent and child refs should be set before all effects', () => {
+		const anchorId = 'anchor';
+		const tooltipId = 'tooltip';
+		const effectLog = [];
+
+		let useRef2 = sinon.spy(init => {
+			const realRef = useRef(init);
+			const ref = useRef(init);
+			Object.defineProperty(ref, 'current', {
+				get: () => realRef.current,
+				set: value => {
+					realRef.current = value;
+					effectLog.push('set ref ' + value?.tagName);
+				}
+			});
+			return ref;
+		});
+
+		function Tooltip({ anchorRef, children }) {
+			// For example, used to manually position the tooltip
+			const tooltipRef = useRef2(null);
+
+			useLayoutEffect(() => {
+				expect(anchorRef.current?.id).to.equal(anchorId);
+				expect(tooltipRef.current?.id).to.equal(tooltipId);
+				effectLog.push('tooltip layout effect');
+			}, [anchorRef, tooltipRef]);
+			useEffect(() => {
+				expect(anchorRef.current?.id).to.equal(anchorId);
+				expect(tooltipRef.current?.id).to.equal(tooltipId);
+				effectLog.push('tooltip effect');
+			}, [anchorRef, tooltipRef]);
+
+			return (
+				<div class="tooltip-wrapper">
+					<div id={tooltipId} ref={tooltipRef}>
+						{children}
+					</div>
+				</div>
+			);
+		}
+
+		function App() {
+			// For example, used to define what element to anchor the tooltip to
+			const anchorRef = useRef2(null);
+
+			useLayoutEffect(() => {
+				expect(anchorRef.current?.id).to.equal(anchorId);
+				effectLog.push('anchor layout effect');
+			}, [anchorRef]);
+			useEffect(() => {
+				expect(anchorRef.current?.id).to.equal(anchorId);
+				effectLog.push('anchor effect');
+			}, [anchorRef]);
+
+			return (
+				<div>
+					<p id={anchorId} ref={anchorRef}>
+						More info
+					</p>
+					<Tooltip anchorRef={anchorRef}>a tooltip</Tooltip>
+				</div>
+			);
+		}
+
+		act(() => {
+			render(<App />, scratch);
+		});
+
+		expect(effectLog).to.deep.equal([
+			'set ref P',
+			'set ref DIV',
+			'tooltip layout effect',
+			'anchor layout effect',
+			'tooltip effect',
+			'anchor effect'
+		]);
+	});
 });