Fix astro-static-slot hydration mismatch error (#7196)

Author: bluwy

.changeset/eleven-walls-explain.md

@@ -0,0 +1,7 @@
+---
+'@astrojs/preact': patch
+'@astrojs/react': patch
+'@astrojs/vue': patch
+---
+
+Fix `astro-static-slot` hydration mismatch error

packages/astro/e2e/nested-in-react.test.js

@@ -14,6 +14,22 @@ test.afterAll(async () => {
 });
 
 test.describe('Nested Frameworks in React', () => {
+	test('No hydration mismatch', async ({ page, astro }) => {
+		// Get browser logs
+		const logs = [];
+		page.on('console', (msg) => logs.push(msg.text()));
+
+		await page.goto(astro.resolveUrl('/'));
+
+		// wait for root island to hydrate
+		const counter = page.locator('#react-counter');
+		await waitForHydrate(page, counter);
+
+		for (const log of logs) {
+			expect(log, 'React hydration mismatch').not.toMatch('An error occurred during hydration');
+		}
+	});
+
 	test('React counter', async ({ astro, page }) => {
 		await page.goto(astro.resolveUrl('/'));
 

packages/astro/e2e/nested-in-vue.test.js

@@ -14,6 +14,22 @@ test.afterAll(async () => {
 });
 
 test.describe('Nested Frameworks in Vue', () => {
+	test('no hydration mismatch', async ({ page, astro }) => {
+		// Get browser logs
+		const logs = [];
+		page.on('console', (msg) => logs.push(msg.text()));
+
+		await page.goto(astro.resolveUrl('/'));
+
+		// wait for root island to hydrate
+		const counter = page.locator('#vue-counter');
+		await waitForHydrate(page, counter);
+
+		for (const log of logs) {
+			expect(log, 'Vue hydration mismatch').not.toMatch('Hydration node mismatch');
+		}
+	});
+
 	test('React counter', async ({ astro, page }) => {
 		await page.goto(astro.resolveUrl('/'));
 

packages/integrations/preact/src/static-html.ts

@@ -13,9 +13,9 @@ type Props = {
  * As a bonus, we can signal to Preact that this subtree is
  * entirely static and will never change via `shouldComponentUpdate`.
  */
-const StaticHtml = ({ value, name, hydrate }: Props) => {
+const StaticHtml = ({ value, name, hydrate = true }: Props) => {
 	if (!value) return null;
-	const tagName = hydrate === false ? 'astro-static-slot' : 'astro-slot';
+	const tagName = hydrate ? 'astro-slot' : 'astro-static-slot';
 	return h(tagName, { name, dangerouslySetInnerHTML: { __html: value } });
 };
 

packages/integrations/react/static-html.js

@@ -7,7 +7,7 @@ import { createElement as h } from 'react';
  * As a bonus, we can signal to React that this subtree is
  * entirely static and will never change via `shouldComponentUpdate`.
  */
-const StaticHtml = ({ value, name, hydrate }) => {
+const StaticHtml = ({ value, name, hydrate = true }) => {
 	if (!value) return null;
 	const tagName = hydrate ? 'astro-slot' : 'astro-static-slot';
 	return h(tagName, {

packages/integrations/vue/static-html.js

@@ -10,7 +10,10 @@ const StaticHtml = defineComponent({
 	props: {
 		value: String,
 		name: String,
-		hydrate: Boolean,
+		hydrate: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	setup({ name, value, hydrate }) {
 		if (!value) return () => null;