continuously fork promises

demo/package.json

@@ -17,9 +17,9 @@
     },
     "dependencies": {
         "@preact/preset-vite": "^2.5.0",
-        "@urql/preact": "^3.0.3",
         "express": "^4.18.2",
         "graphql": "^16.6.0",
-        "preact": "^10.12.1"
+        "preact": "^10.12.1",
+        "urql": "latest"
     }
 }

demo/src/App.jsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import { Suspense, lazy } from 'preact/compat';
-import { Client, Provider, cacheExchange, fetchExchange } from '@urql/preact';
+import { Client, Provider, cacheExchange, fetchExchange } from 'urql';
 
 const client = new Client({
 	url: 'https://trygql.formidable.dev/graphql/basic-pokedex',

demo/src/Pokemons.jsx

@@ -1,4 +1,4 @@
-import { gql, useQuery } from '@urql/preact';
+import { gql, useQuery } from 'urql';
 import { h } from 'preact';
 
 const POKEMONS_QUERY = gql`
@@ -17,7 +17,7 @@ const Counter = () => {
 	});
 
 	const { data, fetching, error } = result;
-
+	console.log('hydrated!');
 	return (
 		<div>
 			{fetching && <p>Loading...</p>}

demo/src/entry-server.jsx

@@ -5,7 +5,7 @@ export function render({ res, head }) {
 	res.socket.on('error', (error) => {
 		console.error('Fatal', error);
 	});
-	const { pipe } = renderToPipeableStream(<App head={head} />, {
+	const { pipe, abort } = renderToPipeableStream(<App head={head} />, {
 		onShellReady() {
 			res.statusCode = 200;
 			res.setHeader('Content-type', 'text/html');
@@ -21,5 +21,5 @@ export function render({ res, head }) {
 
 	// Abandon and switch to client rendering if enough time passes.
 	// Try lowering this to see the client recover.
-	// setTimeout(abort, 10000);
+	setTimeout(abort, 20000);
 }

demo/vite.config.js

@@ -13,11 +13,11 @@ function ssrPlugin() {
 					return next();
 				}
 
-				const { render, abort } = await server.ssrLoadModule(
+				const { render } = await server.ssrLoadModule(
 					path.resolve(__dirname, './src/entry-server')
 				);
 
-				setTimeout(abort, 10000);
+				// setTimeout(abort, 10000);
 
 				const indexHtml = await fs.readFile(
 					path.resolve(__dirname, './index.html'),
@@ -44,7 +44,10 @@ export default defineConfig({
 		noExternal: /./
 	},
 	build: {
-		ssrManifest: true
+		ssrManifest: true,
+		commonjsOptions: {
+			transformMixedEsModules: true
+		}
 	},
 	resolve: {
 		alias: {

src/lib/chunked.js

@@ -30,16 +30,27 @@ export async function renderToChunks(vnode, { context, onWrite, abortSignal }) {
 	if (len > 0) {
 		onWrite('<div hidden>');
 		onWrite(createInitScript(len));
-		await Promise.all(renderer.suspended.map((s) => s.promise));
+		// We should keep checking all promises
+		await forkPromises(renderer);
 		onWrite('</div>');
 	}
 }
 
+async function forkPromises(renderer) {
+	if (renderer.suspended.length > 0) {
+		const suspensions = [...renderer.suspended];
+		await Promise.all(renderer.suspended.map((s) => s.promise));
+		renderer.suspended = renderer.suspended.filter(
+			(s) => !suspensions.includes(s)
+		);
+		await forkPromises(renderer);
+	}
+}
+
 /** @type {RendererErrorHandler} */
 function handleError(error, vnode, renderChild) {
 	if (!error || !error.then) return;
 
-	console.log('--- IN HANDLER ---');
 	// walk up to the Suspense boundary
 	while ((vnode = vnode[PARENT])) {
 		let component = vnode[COMPONENT];
@@ -50,15 +61,8 @@ function handleError(error, vnode, renderChild) {
 
 	if (!vnode) return;
 
-	let root = vnode;
-	// TODO: we can't unset parent because of this traversal to Suspense
-	while (root !== null && !root.mask && root[PARENT] !== null) {
-		root = root[PARENT];
-	}
-
-	const mask = root.mask || (root.mask = [0, 0]);
-	const id = 'S' + mask[0] + '-' + mask[1]++ + this.suspended.length;
-
+	const id = vnode.__v;
+	const found = this.suspended.find((x) => x.id === id);
 	const race = new Deferred();
 
 	const abortSignal = this.abortSignal;
@@ -70,9 +74,9 @@ function handleError(error, vnode, renderChild) {
 
 	const promise = error.then(
 		() => {
-			console.log('resolved');
 			if (abortSignal && abortSignal.aborted) return;
-			this.onWrite(createSubtree(id, renderChild(vnode.props.children)));
+			const child = renderChild(vnode.props.children);
+			if (child) this.onWrite(createSubtree(id, child));
 		},
 		// TODO: Abort and send hydration code snippet to client
 		// to attempt to recover during hydration
@@ -87,5 +91,7 @@ function handleError(error, vnode, renderChild) {
 
 	const fallback = renderChild(vnode.props.fallback);
 
-	return `<!--preact-island:${id}-->${fallback}<!--/preact-island:${id}-->`;
+	return found
+		? ''
+		: `<!--preact-island:${id}-->${fallback}<!--/preact-island:${id}-->`;
 }