diff options
| -rw-r--r-- | .changeset/orange-chicken-end.md | 5 | ||||
| -rw-r--r-- | packages/integrations/preact/src/client.ts | 14 |
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 ); }; |