Ensure use id works (#411)

* Ensure useId works properly * Tweak changeset
preactjs · Jan 12, 2025 · c819f51 · c819f51
1 parent 8e8e8ac
commit c819f51
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 14 deletions.
diff --git a/.changeset/friendly-numbers-hang.md b/.changeset/friendly-numbers-hang.md
@@ -2,4 +2,5 @@
 'preact-render-to-string': patch
 ---
 
-Fix issue where subtree re-render for Suspense boundaries caused a circular reference in the VNode's parent
+Ensure that the `_parent` is kept around across multiple suspensions and avoid circular references.
+In doing so our `useId` hook should always output unique ids during renderingToString.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/index.js b/src/index.js
@@ -443,7 +443,6 @@ function _renderToString(
 					return EMPTY_STR;
 				} finally {
 					if (afterDiff) afterDiff(vnode);
-					vnode[PARENT] = null;
 
 					if (ummountHook) ummountHook(vnode);
 				}
@@ -473,7 +472,6 @@ function _renderToString(
 
 			if (afterDiff) afterDiff(vnode);
 			// when we are dealing with suspense we can't do this...
-			vnode[PARENT] = null;
 
 			if (options.unmount) options.unmount(vnode);
 
@@ -688,9 +686,6 @@ function _renderToString(
 
 	if (afterDiff) afterDiff(vnode);
 
-	// TODO: this was commented before
-	vnode[PARENT] = null;
-
 	if (ummountHook) ummountHook(vnode);
 
 	// Emit self-closing tag for empty void elements:

diff --git a/test/compat/render-chunked.test.js b/test/compat/render-chunked.test.js
@@ -145,7 +145,48 @@ describe('renderToChunks', () => {
 			'<div><p>id: P0-0</p><!--preact-island:24-->loading...<!--/preact-island:24--></div>',
 			'<div hidden>',
 			createInitScript(1),
-			createSubtree('24', '<p>id: P0-0</p>'),
+			createSubtree('24', '<p>id: P0-1</p>'),
+			'</div>'
+		]);
+	});
+
+	it('should support using multiple useId hooks inside multiple suspense boundaries', async () => {
+		const { Suspender, suspended } = createSuspender();
+		const { Suspender: Suspender2, suspended: suspended2 } = createSuspender();
+
+		function ComponentWithId() {
+			const id = useId();
+			return <p>id: {id}</p>;
+		}
+
+		const result = [];
+		const promise = renderToChunks(
+			<div>
+				<ComponentWithId />
+				<Suspense fallback="loading...">
+					<Suspender>
+						<ComponentWithId />
+					</Suspender>
+				</Suspense>
+				<Suspense fallback="loading...">
+					<Suspender2>
+						<ComponentWithId />
+					</Suspender2>
+				</Suspense>
+			</div>,
+			{ onWrite: (s) => result.push(s) }
+		);
+
+		suspended.resolve();
+		suspended2.resolve();
+		await promise;
+
+		expect(result).to.deep.equal([
+			'<div><p>id: P0-0</p><!--preact-island:33-->loading...<!--/preact-island:33--><!--preact-island:36-->loading...<!--/preact-island:36--></div>',
+			'<div hidden>',
+			createInitScript(1),
+			createSubtree('33', '<p>id: P0-1</p>'),
+			createSubtree('36', '<p>id: P0-2</p>'),
 			'</div>'
 		]);
 	});

diff --git a/test/compat/stream-node.test.js b/test/compat/stream-node.test.js
@@ -66,10 +66,10 @@ describe('renderToPipeableStream', () => {
 		const result = await sink.promise;
 
 		expect(result).to.deep.equal([
-			'<div><!--preact-island:33-->loading...<!--/preact-island:33--></div>',
+			'<div><!--preact-island:47-->loading...<!--/preact-island:47--></div>',
 			'<div hidden>',
 			createInitScript(),
-			createSubtree('33', '<p>it works</p>'),
+			createSubtree('47', '<p>it works</p>'),
 			'</div>'
 		]);
 	});

diff --git a/test/compat/stream.test.js b/test/compat/stream.test.js
@@ -82,10 +82,10 @@ describe('renderToReadableStream', () => {
 		const result = await sink.promise;
 
 		expect(result).to.deep.equal([
-			'<div><!--preact-island:40-->loading...<!--/preact-island:40--></div>',
+			'<div><!--preact-island:54-->loading...<!--/preact-island:54--></div>',
 			'<div hidden>',
 			createInitScript(),
-			createSubtree('40', '<p>it works</p>'),
+			createSubtree('54', '<p>it works</p>'),
 			'</div>'
 		]);
 	});