Prevent hydration mismatches in Preact (#6215)

This commit is contained in:
Matthew Phillips 2023-02-13 14:48:36 -05:00 committed by GitHub
parent b46787c8eb
commit a7f18051b1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 2 deletions

View file

@ -0,0 +1,5 @@
---
'@astrojs/preact': patch
---
Prevent hydration mismatches in Preact

View file

@ -1,4 +1,4 @@
import { h, render } from 'preact'; import { h, type JSX, render } from 'preact';
import StaticHtml from './static-html.js'; import StaticHtml from './static-html.js';
import type { SignalLike } from './types'; import type { SignalLike } from './types';
@ -26,8 +26,18 @@ export default (element: HTMLElement) =>
props[propName] = sharedSignalMap.get(signalId); 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( 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 element
); );
}; };