Prevent hydration mismatches in Preact (#6215)

withastro · Feb 13, 2023 · a7f1805 · a7f1805
1 parent b46787c
commit a7f1805
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/.changeset/orange-chicken-end.md 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
@@ -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
 		);
 	};