add test

Author: JoviDeCroock

src/router.js

@@ -133,11 +133,13 @@ export function Router(props) {
 		if (vnode.props.default) d = cloneElement(vnode, m);
 	});
 	const isHydratingSuspense = cur.current && cur.current.__u & MODE_HYDRATE && cur.current.__u & MODE_SUSPENDED;
+	const isHydratingBool = cur.current && cur.current.__h;
 	cur.current =  h(RouteContext.Provider, { value: m }, pr || d);
 	if (isHydratingSuspense) {
 		cur.current.__u |= MODE_HYDRATE;
 		cur.current.__u |= MODE_SUSPENDED;
-
+	} else if (isHydratingBool) {
+		cur.current.__h = true;
 	}
 
 	// Reset previous children - if rendering succeeds synchronously, we shouldn't render the previous children.
@@ -165,7 +167,13 @@ export function Router(props) {
 			// Successful route transition: un-suspend after a tick and stop rendering the old route:
 			prev.current = null;
 			if (cur.current) {
+				if (suspendedVNode.__h) {
+					// _hydrating
+					cur.current.__h = suspendedVNode.__h;
+				}
+
 				if (suspendedVNode.__u & MODE_SUSPENDED) {
+					// _flags
 					cur.current.__u |= MODE_SUSPENDED;
 				}
 

test/router.test.js

@@ -1,5 +1,5 @@
 import { jest, describe, it, beforeEach, expect } from '@jest/globals';
-import { h, render } from 'preact';
+import { h, hydrate, render } from 'preact';
 import { useState } from 'preact/hooks';
 import { html } from 'htm/preact';
 import { LocationProvider, Router, useLocation, Route, useRoute } from '../src/router.js';
@@ -616,3 +616,60 @@ describe('Router', () => {
 		replaceState.mockRestore();
 	});
 });
+
+describe('hydration', () => {
+	let scratch;
+	beforeEach(() => {
+		if (scratch) {
+			render(null, scratch);
+			scratch.remove();
+		}
+		scratch = document.createElement('scratch');
+		document.body.appendChild(scratch);
+		history.replaceState(null, null, '/');
+	});
+
+	it('should wait for asynchronous routes', async () => {
+		scratch.innerHTML = '<div><h1>A</h1><p>hello</p></div>';
+		const route = name => html`
+			<div>
+				<h1>${name}</h1>
+				<p>hello</p>
+			</div>
+		`;
+		const A = jest.fn(groggy(() => route('A'), 1));
+		let loc;
+		hydrate(
+			html`
+				<${ErrorBoundary}>
+					<${LocationProvider}>
+						<${Router}>
+							<${A} path="/" />
+						<//>
+						<${() => {
+							loc = useLocation();
+						}} />
+					<//>
+				<//>
+			`,
+			scratch
+		);
+
+		const mutations = [];
+		const mutationObserver = new MutationObserver((x) => {
+			mutations.push(...x)
+		});
+		mutationObserver.observe(scratch, { childList: true, subtree: true });
+
+		expect(scratch).toHaveProperty('innerHTML', '<div><h1>A</h1><p>hello</p></div>');
+		expect(A).toHaveBeenCalledWith({ path: '/', query: {}, params: {}, rest: '' }, expect.anything());
+
+		A.mockClear();
+		await sleep(10);
+		await sleep(10);
+
+		expect(scratch).toHaveProperty('innerHTML', '<div><h1>A</h1><p>hello</p></div>');
+		expect(A).toHaveBeenCalledWith({ path: '/', query: {}, params: {}, rest: '' }, expect.anything());
+		expect(mutations).toHaveLength(0);
+	});
+})