Merge pull request #20 from preactjs/ensure-we-carry-over-suspense

ensure we carry over suspense

Author: JoviDeCroock

src/router.js

@@ -132,14 +132,22 @@ export function Router(props) {
 		if (matches) return (pr = cloneElement(vnode, m));
 		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.
 	const p = prev.current;
 	prev.current = null;
 
 	// This borrows the _childDidSuspend() solution from compat.
-	this.__c = e => {
+	this.__c = (e, suspendedVNode) => {
 		// Mark the current render as having suspended:
 		didSuspend.current = true;
 
@@ -158,6 +166,22 @@ 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;
+				}
+
+				if (suspendedVNode.__u & MODE_HYDRATE) {
+					cur.current.__u |= MODE_HYDRATE;
+				}
+			}
+
 			RESOLVED.then(update);
 		});
 	};
@@ -199,6 +223,9 @@ export function Router(props) {
 	return [h(RenderRef, { r: cur }), h(RenderRef, { r: prev })];
 }
 
+const MODE_HYDRATE = 1 << 5;
+const MODE_SUSPENDED = 1 << 7;
+
 // Lazily render a ref's current value:
 const RenderRef = ({ r }) => r.current;
 

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, options, render } from 'preact';
 import { useState } from 'preact/hooks';
 import { html } from 'htm/preact';
 import { LocationProvider, Router, useLocation, Route, useRoute } from '../src/router.js';
@@ -760,3 +760,82 @@ 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.only('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());
+		const oldOptionsVnode = options.__b;
+		let hasMatched = false;
+		options.__b = (vnode) => {
+			if (vnode.type === A && !hasMatched) {
+				hasMatched = true;
+				if (vnode.__ && vnode.__.__h) {
+					expect(vnode.__.__h).toBe(true)
+				} else if (vnode.__ && vnode.__.__u) {
+					expect(!!(vnode.__.__u & MODE_SUSPENDED)).toBe(true);
+					expect(!!(vnode.__.__u & MODE_HYDRATE)).toBe(true);
+				} else {
+					expect(true).toBe(false);
+				}
+			}
+
+			if (oldOptionsVnode) {
+				oldOptionsVnode(vnode);
+			}
+		}
+		A.mockClear();
+		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);
+
+		options.__b = oldOptionsVnode;
+	});
+})
+
+const MODE_HYDRATE = 1 << 5;
+const MODE_SUSPENDED = 1 << 7;