michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Prevent hydration mismatches in Preact (#6215)

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/orange-chicken-end.md Normal file
View file

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

14
packages/integrations/preact/src/client.ts
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 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
);
};