Prevent hydration mismatches in Preact (#6215)

2 files changed, 17 insertions, 2 deletions

diff --git a/.changeset/orange-chicken-end.md b/.changeset/orange-chicken-end.md
new file mode 100644
index 000000000..049120305
--- /dev/null
+++ b/.changeset/orange-chicken-end.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/preact': patch
+---
+
+Prevent hydration mismatches in Preact
diff --git a/packages/integrations/preact/src/client.ts b/packages/integrations/preact/src/client.ts
index 4549e79f4..6c7b99f76 100644
--- a/packages/integrations/preact/src/client.ts
+++ b/packages/integrations/preact/src/client.ts
@@ -1,4 +1,4 @@
-import { h, render } from 'preact';
+import { h, type JSX, render } from 'preact';
 import StaticHtml from './static-html.js';
 import type { SignalLike } from './types';
 
@@ -26,8 +26,18 @@ export default (element: HTMLElement) =>
 				props[propName] = sharedSignalMap.get(signalId);
 			}
 		}
+
+		// eslint-disable-next-line @typescript-eslint/no-shadow
+		function Wrapper({ children }: { children:  JSX.Element }) {
+			let attrs = Object.fromEntries(Array.from(element.attributes).map(attr => [attr.name, attr.value]));
+			return h(element.localName, attrs, children);
+		}
+	
 		render(
-			h(Component, props, children != null ? h(StaticHtml, { value: children }) : children),
+			h(Wrapper, null,
+				h(Component, props, children != null ? h(StaticHtml, { value: children }) : children)
+			),
+			element.parentNode!,
 			element
 		);
 	};