fix(react): Fix hydration mismatch for experimentalReactChildren (#15146)

* feat: Map HTML attributes to React equivalents and generate unique keys for parsed children.

* Update packages/integrations/react/src/client.ts

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

* Update packages/integrations/react/src/client.ts

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

* Create nine-points-dress.md

---------

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>
Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>

Author: 3 people

.changeset/nine-points-dress.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/react': patch
+---
+
+Fixes hydration mismatch when using `experimentalReactChildren`

packages/integrations/react/src/client.ts

@@ -10,16 +10,33 @@ function isAlreadyHydrated(element: HTMLElement) {
 	}
 }
 
-function createReactElementFromDOMElement(element: any): any {
+const reactPropsMap: Record<string, string> = {
+	class: 'className',
+	for: 'htmlFor',
+};
+
+let clientIds = 0;
+
+function createReactElementFromDOMElement(element: any, id?: number, key?: number): any {
+	if (id === undefined) {
+		clientIds += 1;
+		id = clientIds;
+		key = 0;
+	}
+
 	let attrs: Record<string, string> = {};
 	for (const attr of element.attributes) {
-		attrs[attr.name] = attr.value;
+		const propName = reactPropsMap[attr.name] || attr.name;
+		attrs[propName] = attr.value;
 	}
-	// If the element has no children, we can create a simple React element
+
+	attrs.key = `${id}-${key}`;
+
 	if (element.firstChild === null) {
 		return createElement(element.localName, attrs);
 	}
 
+	let childKey = 0;
 	return createElement(
 		element.localName,
 		attrs,
@@ -28,7 +45,8 @@ function createReactElementFromDOMElement(element: any): any {
 				if (c.nodeType === Node.TEXT_NODE) {
 					return c.data;
 				} else if (c.nodeType === Node.ELEMENT_NODE) {
-					return createReactElementFromDOMElement(c);
+					childKey += 1;
+					return createReactElementFromDOMElement(c, id, childKey);
 				} else {
 					return undefined;
 				}

packages/integrations/react/test/fixtures/react-component/src/pages/children.astro

@@ -14,5 +14,11 @@ import WithChildren from '../components/WithChildren';
 		<WithChildren id="two" client:load>
 			<div>child 1</div><div>child 2</div>
 		</WithChildren>
+
+		<!-- Test that class is properly mapped to className -->
+		<WithChildren id="three" client:load>
+			<span class="title">Hello</span>
+			<span class="subtitle">World</span>
+		</WithChildren>
   </body>
 </html>

packages/integrations/react/test/parsed-react-children.test.js

@@ -13,4 +13,25 @@ describe('experimental react children', () => {
 		const [imgVNode] = divVNode.props.children;
 		assert.deepEqual(imgVNode.props.children, undefined);
 	});
+
+	it('maps class attribute to className', () => {
+		const [spanVNode] = convert('<span class="title">Hello</span>');
+		assert.equal(spanVNode.props.className, 'title');
+		assert.equal(spanVNode.props.class, undefined);
+	});
+
+	it('generates unique keys for children', () => {
+		const children = convert('<span class="first">A</span><span class="second">B</span>');
+		assert.equal(children.length, 2);
+		assert.ok(children[0].key, 'First child should have a key');
+		assert.ok(children[1].key, 'Second child should have a key');
+		assert.notEqual(children[0].key, children[1].key, 'Children should have unique keys');
+	});
+
+	it('preserves other attributes alongside className', () => {
+		const [spanVNode] = convert('<span class="title" id="main" data-test="value">Hello</span>');
+		assert.equal(spanVNode.props.className, 'title');
+		assert.equal(spanVNode.props.id, 'main');
+		assert.equal(spanVNode.props['data-test'], 'value');
+	});
 });

packages/integrations/react/test/react-component.test.js

@@ -119,7 +119,16 @@ describe('React Components', () => {
 		it('Client children passes option to the client', async () => {
 			const html = await fixture.readFile('/children/index.html');
 			const $ = cheerioLoad(html);
-			assert.equal($('[data-react-children]').length, 1);
+			assert.equal($('[data-react-children]').length, 2);
+		});
+
+		it('Children with class attributes are properly rendered', async () => {
+			const html = await fixture.readFile('/children/index.html');
+			const $ = cheerioLoad(html);
+			assert.equal($('#three .title').length, 1);
+			assert.equal($('#three .subtitle').length, 1);
+			assert.equal($('#three .title').text(), 'Hello');
+			assert.equal($('#three .subtitle').text(), 'World');
 		});
 	});